Skip to content
Get packs

Design Brief Parser

Turns a structured or plain-language design brief into a concrete DESIGN.md spec and HTML preview.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent takes a design request (either a structured I-Lang brief or a plain-English description) and fills in eight explicit design decisions such as colour palette, typography, layout, mood, density and constraints. It maps vague words like "clean" or "dark mode" to specific named values and concrete colour and font tokens, then writes a DESIGN.md file and an optional brief-preview.html so the design direction is clear before any pages are built. The SKILL.md describes this workflow, but the excerpt provided is truncated, so the full steps and the contents of open-design.json were not available to verify.

Great for

  • Designers or product teams who want a written design spec before building a landing page or app screen
  • Developers who need a consistent palette and type scale handed off from a vague client request
  • People working inside the OpenDesign tool who want to use its design-system format

Skip it if

  • Anyone wanting a finished visual design directly; this produces a spec and a preview, not final production assets
  • Briefs needing accessibility contrast or animation timing decisions, which the skill explicitly excludes from its scope
  • Users outside OpenDesign who expect the I-Lang format to be understood by other tools; the format is specific to this project

Try asking

  • “Create a design brief for a dark-mode landing page for a developer tool using Inter font and no animations”
  • “Turn this vague request 'make it professional but warm' into a structured DESIGN.md”
  • “Generate a design brief preview for a SaaS pricing page with spacious density and mobile-first layout”
Step-by-step guide: how to use Design Brief ParserInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    design-brief.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip design-brief.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip design-brief.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State palette, typography, layout, mood, density and exclusions explicitly to avoid default guesses
  • Use the closed vocabulary values (for example navy_and_white, inter, spacious) so the agent maps them to exact tokens
  • Review the generated DESIGN.md and preview before handing it to a builder, since unspecified dimensions get defaults

What's inside

  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.

Find exactly what
you're looking for