Skip to content

Design from brief

Produce a full design system bootstrap deliverable from the brief in $ARGUMENTS.

Input

Parse $ARGUMENTS as a single paragraph describing: - Product type / category (fintech, social, e-commerce, content, etc.) - Audience (consumer / B2B / age / region) - Platform (web / mobile / native / cross-platform) - Mood / tone (trustworthy / playful / premium / minimal / etc.) - Constraints (timeline, budget, existing brand, language)

If the brief is too thin (< 30 words or missing platform/audience), ask one clarifying question. Then proceed.

Steps

This command orchestrates 3 skills in sequence, citing knowledge as it goes:

1. Extract a structured spec from the brief

Distill the prose brief into: 

product_type: <category>
audience: <consumer | b2b | mixed>
platform: <web | mobile-web | mobile-native-ios | mobile-native-android | rn>
mood: [<adjective>, <adjective>]
language: <ko | en | ko-en>
density: <comfortable | compact>
mode: <light | dark | both>
constraints: [<timeline>, <budget>, <regulatory>]
brand_color_seed: <hex if mentioned, else null>

Show the structured spec back to the user briefly ("Here's how I'm reading the brief...") and proceed.

2. Apply color-palette skill

Open skills/color-palette/PLAYBOOK.md. Follow it end-to-end: - If brand_color_seed: use as primary. - Else: use mood→hue mapping (in the playbook) → derive primary. - Generate 11-step ramp + accent + neutrals. - Produce light + dark. - WCAG-validate the contrast matrix.

If product_type is fintech: also add --color-money-positive / --color-money-negative per knowledge/patterns/money-and-amount.md.

3. Apply design-system-builder skill

Open skills/design-system-builder/PLAYBOOK.md. Follow it end-to-end: - Typography: pick font pairing per mood. If language includes ko: apply Korean adjustments per knowledge/i18n/korean-typography.md. - Spacing/radius/elevation/motion tokens. - Foundations docs. - Component baseline (one, with rationale). - Starter component set per product_type (use the category extension matrix in the playbook).

If platform is rn: layer in knowledge/platforms/react-native.md — tokens as numbers, no hover, two-system shadows.

4. Add Korean considerations (if applicable)

If language includes ko: - Foundations doc gets a "Korean considerations" section. - For fintech / commerce: link to knowledge/i18n/korean-payments.md and knowledge/i18n/korean-product-conventions.md. - For pre-launch: link to knowledge/i18n/korean-publishing.md.

5. Apply handoff-spec skill (system bootstrap variant)

Open skills/handoff-spec/PLAYBOOK.md. Produce the engineering hand-off: - Style Dictionary config + build commands - Token import (Tailwind / shadcn-ui / MUI) - Component baseline install commands - Custom-component Phase 2 list (each gets spec'd via component-spec-writer next) - Vendor SDK list (payments, identity, analytics) for the product type

6. Output structure

Produce one comprehensive markdown file. The structure follows examples/dogfood-korean-fintech-system.md:

# Design system: <product name>

> Brief: ...
> Stack: ...
> Generated by: /design-from-brief

## 1. Foundations
   - Color (light + dark)
   - Typography
   - Spacing
   - Radius / Elevation / Motion
   - Contrast matrix

## 2. Component baseline
   - Picked: <library>. Why.

## 3. Starter component set
   | Component | Status | Source |
   ...

## 4. Foundations document — color usage rules

## 5. Foundations document — Korean considerations (if applicable)

## 6. Output structure (directory tree)

## 7. Hand-off — what eng needs to do
   1. Style Dictionary setup
   2. Token import
   3. Component baseline install
   4. Custom components Phase 2 list
   5. Vendor SDKs

## Cited sources

7. Run verification

Apply the verification phases of color-palette, design-system-builder, and handoff-spec skills. If any fails, fix and re-output the section.

Done when

  • One output file (or directory of outputs if requested), under 1000 lines.
  • The structured spec is shown at the top.
  • All four foundation tiers are populated (color, type, spacing, motion).
  • Light + dark contrast matrices.
  • Component baseline named with rationale.
  • Starter set matches the product category.
  • Hand-off section is implementable without follow-up.
  • All three skills' verification phases pass.

Examples

Brief: "A 가계부 mobile app for Korean millennials. Need to feel modern and trustworthy but also approachable, not corporate."

Brief: "B2B project management SaaS, dense data tables, dark mode primary, English."

Brief: "E-commerce for premium Korean cosmetics, mobile-first, brand color is pearl pink, polished/luxurious."

For full reference output, see examples/dogfood-korean-fintech-system.md.