Guide · Agent skill
How to use the Design Brief Parser agent skill (design-brief)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The design-brief skill is an agent skill from the nexu-io/open-design project, licensed under Apache-2.0. It takes a design request, either a structured I-Lang brief or a plain-English description, and turns it into explicit design decisions such as palette, typography, layout, mood, density and constraints. This guide explains what the skill does, how to install it, how to trigger it, and what to check before you rely on its output.
Design Brief Parsernexu-io/open-design · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the design-brief ZIP from this page. It contains open-design.json and SKILL.md.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the skill.
- 4Write your brief. Describe the design in plain English or write an I-Lang brief. Include the palette, typography, mood, density, and anything to exclude.
- 5Make the request with a trigger phrase. Ask for a design brief using a phrase such as 'create a design brief' or 'structured brief'.
- 6Review DESIGN.md. Check the generated DESIGN.md and any defaults the agent filled in, then open brief-preview.html if you want a visual check.
What does the design-brief skill make the agent do?
Vague words like 'clean' or 'make it professional' can mean very different things to different people. This skill makes the agent replace those words with named, explicit values across eight dimensions: color palette, accent color, body typography, display typography, layout model, mood, density, and constraints.
The skill also maps phrases to concrete design tokens, such as specific hex colours and font settings. It then writes a DESIGN.md file, and optionally a brief-preview.html file, so the design direction is written down before any pages are built.
- Input: an I-Lang structured brief or a plain-English description
- Output: DESIGN.md (primary) and brief-preview.html (optional)
- Purpose: settle the design decisions before building a landing page or app screen
How do you install the design-brief skill?
Download the ZIP for this skill from this page. It contains the files open-design.json and SKILL.md. Unzip it into one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want the skill available only in that project.
You can also upload the skill in the Claude apps. Go to Settings, then Capabilities, then Skills, and add it there.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
~/.claude/skills/How do you trigger the skill with a natural request?
The skill's SKILL.md lists these trigger phrases: 'design brief', 'create a design brief', 'ilang brief', and 'structured brief'. Including one of these phrases in your request is the clearest way to start the workflow.
You can also describe the design in plain English without using a trigger phrase, but the trigger phrases are the documented way to invoke the skill.
- Use 'create a design brief' followed by your description
- Use 'structured brief' if you already have an I-Lang brief to parse
- Keep your description specific: name the product type, colours, font, and what to avoid
What does a brief look like?
The skill accepts two input formats. Option A is an I-Lang structured brief, shown below. Option B is natural language. For natural language, the agent converts each phrase to a structured value using a mapping table, and it flags any dimensions you did not specify.
For example, 'Clean, minimal, dark mode. Inter font. No flashy animations' maps to mood, palette, typography and an animations exclusion. The mapping table in the source includes entries such as 'dark mode' to monochrome_dark, 'clean' to professional_minimal, and 'no animations' to exclude=animations.
If you use a value the skill does not recognise, the source says the agent must ask you for clarification rather than guess. For example, palette=ocean_blue would prompt a question offering the valid palette options.
- Dark mode maps to palette=monochrome_dark
- Clean or minimal maps to mood=professional_minimal
- Inter maps to typography=inter
- No animations maps to exclude=animations
- Unrecognised values trigger a clarification question instead of a guess
[PLAN:@DESIGN|type=saas_landing]
|palette=navy_and_white|accent=coral
|typography=inter|display=space_grotesk
|layout=single_column|max_width=1200px
|mood=professional_minimal
|density=spacious|section_gap=96px
|hero=headline+subhead+cta
|sections=features,pricing,testimonials,footer
|exclude=animations,parallax,gradients
|responsive=mobile_firstWhat files do you get back?
The main output is DESIGN.md. The source says that for each symbolic value, the agent resolves concrete tokens before writing DESIGN.md. For example, the navy_and_white palette resolves to a background of #0F172A and text of #F8FAFC, and density=spacious resolves to a 96px section spacing.
The optional secondary output is brief-preview.html, which the manifest sets up as an HTML preview with a debounced reload. The skill also says that generated DESIGN.md files include sensible breakpoint defaults for downstream use.
Animation timing, responsive strategy, and accessibility contrast are not decided at the brief level. The source says individual template skills handle those.
- DESIGN.md: the design spec, with concrete tokens
- brief-preview.html: optional visual preview
- Not included at brief level: animation timing, accessibility contrast decisions
What does the skill need, and is it safe to run?
The skill requires file write access for the agent, because it has to write DESIGN.md. For full token resolution, it expects an OpenDesign project context with a design-systems/ folder. The source notes that existing DESIGN.md files in design-systems/ resolve colour palette, accent, typography, display font, layout model, and component style.
According to the listing, the skill does not run scripts and does not use the network. The source also says the skill's brief-level scope excludes animation timing, responsive strategy, and accessibility contrast.
- Requires: file write access for the agent
- Recommended: an OpenDesign project with a design-systems/ folder
- Runs scripts: no
- Uses network: no
- Licence: Apache-2.0
Tips for better results
Give the agent as many explicit dimensions as you can. Any dimension you leave out gets a default, so the output may not match what you had in mind. Read the DESIGN.md file before you start building, and check that every default is one you accept.
Use the exclusion list for things you do not want, such as animations or gradients. The mapping table shows that 'no stock photos' maps to stock_photos.
- State palette, typography, and mood even if you think they are obvious
- Use exclusions for anything you do not want, such as animations or gradients
- Check the defaults the agent filled in before handing the spec to developers
- Open brief-preview.html when you want a quick visual check
What people use it for
- A designer writes a spec for a SaaS landing page before any layout work starts
- A developer receives a vague client request and needs a consistent colour palette and type scale
- A product team creates a written direction for an app screen before engineering begins
- A team working in OpenDesign uses its design-system format to hand off decisions
Frequently asked questions
How do I install the design-brief skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, then Capabilities, then Skills.
Is the design-brief skill free to use?
The skill is licensed under Apache-2.0, as listed on this page. Check the licence file in the download for the full terms.
What does the skill need to run?
It needs file write access for the agent so it can create DESIGN.md. For full token resolution, it expects an OpenDesign project with a design-systems/ folder. According to the listing, it runs no scripts and uses no network.
Can I use the I-Lang format outside OpenDesign?
The source describes the I-Lang format as specific to this project. Other tools may not understand it, so a plain-English brief or the DESIGN.md output may be easier to share.
Why did the agent ask me a question instead of filling in a value?
The skill only accepts a closed set of values that have token mappings. If you use a value it does not recognise, such as palette=ocean_blue, the source says the agent should ask you to choose from the valid options rather than guess.
Does this skill create a finished visual design?
No. It produces a written spec and an optional preview, not final production assets. Animation timing and accessibility contrast are excluded from the brief level and need to be handled elsewhere.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a written, explicit design spec before building a landing page or app screen, or if you work inside OpenDesign. Pick something else if you need a finished visual design, accessibility contrast checks, or animation timing decisions, since the skill explicitly leaves those out. The listing also notes that the SKILL.md excerpt was truncated, so verify the full workflow in the complete file before relying on it.
Download the skill