mcpField
D
design-brief

design-brief

github.com/podoDesign & UI30172 installsUpdated 4d ago
Repository

About design-brief

design-brief is a skill that turns an I-Lang block or natural-language direction into a visual design specification. It defines eight visual dimensions and writes a token-based `DESIGN.md` plus an HTML preview, asking before replacing an existing specification.

Key features

  1. 01Accepts I-Lang or natural-language briefs
  2. 02Maps direction to eight visual dimensions
  3. 03Fills gaps with mood-compatible defaults
  4. 04Writes design tokens to `DESIGN.md`
  5. 05Generates a `brief-preview.html` preview

Use cases

  1. 01Set visual direction for a landing page
  2. 02Turn a palette and mood into concrete design tokens
  3. 03Preview a design brief before replacing `DESIGN.md`

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-brief

After installing, type/design-briefin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

design-brief

Catalogue stub — full skill: nexu-io/open-design

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/design-brief/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/design-brief/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as design-brief, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/design-brief ] && echo "global" || echo "project"

    Global:

    npx skills add https://raw.githubusercontent.com/nexu-io/open-design/main/skills/design-brief/SKILL.md -g -y

    Project:

    npx skills add https://raw.githubusercontent.com/nexu-io/open-design/main/skills/design-brief/SKILL.md -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • License: Apache-2.0
  • Name collision: design-brief is also written by designer-skills (its install or its catalogue pointer); installing both overwrites the earlier one.

Invoke after install

  • Skill name: design-brief
  • Trigger phrases: "design brief", "visual brief", "I-Lang brief", "structured brief"

What it does

Takes a design brief either as an I-Lang structured block ([PLAN:@DESIGN|type=saas_landing] |palette=navy_and_white |accent=coral ...) or as natural language ("clean, minimal, dark-mode landing page for a developer tool, Inter, no animations"), maps it onto eight visual dimensions (palette, accent, body and display typography, layout model, mood, density, exclusions), fills unspecified dimensions with mood-compatible defaults, and writes a DESIGN.md with concrete tokens plus a brief-preview.html preview. Asks before overwriting an existing DESIGN.md.

This is a visual-direction brief, not a product brief: there is no audience, goals or success-metrics content. The frontmatter carries an OpenDesign-specific block that other agents ignore; the skill itself is a single self-contained file.

When NOT to use

  • A product or project brief with goals, audience, success criteria and scope: the designer-skills package has a design-brief skill that writes exactly that. It installs into the same design-brief directory as this one, so choose one of the two
  • Building a full design system with a consultation process (use design-consultation)
  • When the visual direction is already fixed in an existing DESIGN.md

Comments

Markdown supported