← docsCreative

/ui-ux-pro-max

Brief → complete design system document.

Generates professional UI/UX design systems from a brief. Produces color palettes, typography scales, spacing systems, component specifications, and interaction guidelines. Output is a complete design language, not a moodboard.

Category

Creative

Execution

Brief → design system document

Goal

Produce a complete, professional design system from a product brief.

Scope

Applies to

  • +New products needing a design language
  • +Redesigns
  • +Design system documentation

Does not cover

  • −Implementation (use the frontend skill)
  • −Asset creation (logos, illustrations)

Triggers

"Generate design system""Create UI/UX specs""Design language for this product"Phase 3 of radioactive

Inputs

  • →Product brief
  • →Target platform (web, mobile, desktop)
  • →Brand constraints (colors, fonts, tone)

Invariants

  • 01Must produce tokens, not just examples
  • 02Color palette must include accessibility ratios
  • 03Typography must define scale, not just sizes

Procedure

  1. Step 1Analyze brief for product personality, audience, platform
  2. Step 2Generate color palette with roles (primary, secondary, surface, feedback)
  3. Step 3Define typography scale with font, weight, size, line-height
  4. Step 4Create spacing system (base unit, scale)
  5. Step 5Define component specs (buttons, inputs, cards, nav)
  6. Step 6Document interaction guidelines (motion, states, feedback)

Outputs

  • ▸Design system document with tokens
  • ▸Color palette with hex values and accessibility ratios
  • ▸Typography scale
  • ▸Component specifications
  • ▸Interaction guidelines

Review Gate

  • [ ]All tokens are defined and consistent
  • [ ]Color contrast meets WCAG AA
  • [ ]Typography scale is harmonious
  • [ ]Component specs cover all common UI patterns