Design Brief
Turn vague UI requests into an explicit DESIGN.md and HTML preview before you implement screens.
Overview
Design Brief is an agent skill most often used in Validate (also Build) that parses I-Lang or natural-language design briefs into a concrete DESIGN.md and optional HTML preview.
Install
npx skills add https://github.com/nexu-io/open-design --skill design-briefWhat is this skill?
- Parses I-Lang protocol or natural-language input into eight explicit design dimensions
- Emits primary output DESIGN.md plus optional brief-preview.html with debounced live preview
- Design-system sections: visual-theme, color-palette, typography, component-stylings, layout, depth-elevation, dos-and-do
- Dimensions derived from analysis of 71 bundled Open Design design systems
- Requires file_write; does not require an existing design_system—can generate one
- 8 explicit design dimensions
- 71 bundled Open Design design systems inform the dimension model
Adoption & trust: 1.2k installs on skills.sh; 61.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a vague aesthetic request and no shared spec your agent or team can implement without guessing colors, type, and layout.
Who is it for?
Solo builders starting a new SaaS or marketing site who want structured design constraints before touching components.
Skip if: Teams that already have an approved design system and only need pixel-perfect Figma handoff with no new DESIGN.md generation.
When should I use this skill?
User mentions design brief, create a design brief, I-Lang brief, or structured brief.
What do I get? / Deliverables
You get DESIGN.md with explicit visual-theme, palette, typography, layout, and guardrails—ready to drive frontend implementation or agent styling prompts.
- DESIGN.md
- brief-preview.html
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Validate because structured briefs lock palette, type, layout, and constraints before you commit engineering time. Scope subphase fits planning artifacts that define what to build—not yet frontend implementation.
Where it fits
Lock palette, typography, and layout density before estimating build effort for a landing MVP.
Generate DESIGN.md plus brief-preview.html to sanity-check mood and component stylings before a coded prototype.
Hand agents agent-prompt-guide and dos-and-donts sections while implementing the first dashboard shell.
Publish a single source-of-truth DESIGN.md for contractors or future-you without re-explaining brand rules.
How it compares
Structured brief generator with I-Lang dimensions—not a Figma plugin or generic “make it pretty” chat.
Common Questions / FAQ
Who is design-brief for?
Indie and solo builders using agent coding tools who need an explicit design spec (palette, typography, layout, dos-and-donts) before implementation.
When should I use design-brief?
During Validate when scoping UI and brand, or in Build when you need DESIGN.md and brief-preview.html before frontend or docs work—especially when triggers mention design brief, I-Lang brief, or structured brief.
Is design-brief safe to install?
It declares file_write capability; review the Security Audits panel on this Prism page and inspect the skill source before granting filesystem access in your agent.
SKILL.md
READMESKILL.md - Design Brief
# Design Brief Skill Parse a structured design brief into a concrete DESIGN.md and optional visual preview. Agent, follow this workflow exactly. ## Background The 8 dimensions in this skill are derived from analysis of the 71 design systems bundled with Open Design. Every DESIGN.md in `design-systems/` resolves at minimum: color palette, accent, typography, display font, layout model, and component style. We distilled these into 8 orthogonal dimensions that cover the decisions a designer makes before any pixel is placed. Mood and density were added because they are the two most common sources of ambiguity in natural language briefs ("make it clean" means different things to different people). Dimensions intentionally excluded from the brief level: animation timing, responsive strategy, and accessibility contrast. These are enforced at the template level by individual skills (e.g., `saas-landing` handles its own responsive logic), though the generated DESIGN.md includes sensible breakpoint defaults for downstream consumption. ## 1. Accept input The user provides a design brief in one of two formats: ### Option A: I-Lang structured brief ``` [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_first ``` ### Option B: Natural language > "I need a landing page for a developer tool. Clean, minimal, dark mode. Inter font. No flashy animations." If the user provides Option B, convert it to the structured format using the mapping table below, then proceed. Identify every dimension explicitly stated and flag dimensions that were left unspecified. ### Natural language → I-Lang mapping For each sentence in the natural language input, identify dimension keywords and map to the closest structured value: | Natural language phrase | Dimension | I-Lang value | |------------------------|-----------|-------------| | "dark mode", "dark theme" | palette | `monochrome_dark` | | "light", "white background" | palette | `light_clean` | | "earthy", "warm tones" | palette | `earth_tones` | | "pop of color", "vibrant" | accent | `electric_blue` (default) or `coral` | | "subtle accent" | accent | `muted_sage` (default) or `slate` | | "clean", "minimal", "simple" | mood | `professional_minimal` | | "playful", "fun", "friendly" | mood | `playful` | | "bold", "brutalist", "raw" | mood | `brutalist` | | "editorial", "magazine-like" | mood | `editorial` | | "spacious", "lots of whitespace" | density | `spacious` | | "compact", "dense", "information-rich" | density | `compact` | | "Inter", "system font" | typography | `inter` (default) or `system_u