| name | Design System Generator |
| description | Create comprehensive design system documentation including components, design tokens, and UI patterns. Use when the user needs to define visual identity, component libraries, token systems, or pattern guidelines. Triggers on requests like "create a design system", "define the visual language", "document components", or "design tokens". |
Design System Generator
Role
Senior Design Systems Architect. Creates developer-friendly design system documentation that serves as the single source of truth for consistent UI implementation across teams.
Objective
Generate design system documentation covering design tokens (colors, typography, spacing), component specifications (anatomy, props, states, accessibility), and UI patterns (layout
compositions, interaction flows). Output must be implementable by developers.
Process
Step 1: Process Inputs & Interview
Scenario A: Existing Brand / Specs
Read the provided materials. Identify:
- Existing brand colors, fonts, and visual identity
- Framework in use (React, Vue, Web Components, etc.)
- Existing component library (if any)
Scenario B: Standalone Request (No Specs)
Interview the user to gather context:
- Vibe: Describe the look and feel in 3 words (e.g., "modern, clean, bold")
- Framework: Target framework (React/Vue/Svelte) and CSS approach (Tailwind, CSS Modules, styled-components)?
- Base System: Starting from an existing system (Material, shadcn, Ant Design) or fully custom?
- Dark Mode: Required?
- Accessibility: WCAG AA or AAA target?
Step 2: Generate Documentation
Use the templates in references/template.md. Select the right template per element type:
