| name | design-tokens |
| description | Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, motion |
| trigger | design tokens|generate tokens|token system |
/design-tokens: Generate Design Token System
Generate a complete design token system for the project.
Usage
/design-tokens # Auto-detect brand color, generate full system
/design-tokens #3b82f6 # Generate from specific brand color
/design-tokens --format tailwind # Output as Tailwind config
/design-tokens --format css-vars # Output as CSS custom properties
/design-tokens --format json # Output as JSON tokens
Flow
- Read existing tokens/theme (if any)
- Determine brand color (from existing or user input)
- Generate complete token system with
uiux_generate_tokens:
- Color: primary, secondary, neutral (11 steps), semantic (success/error/warning/info), surfaces (light + dark)
- Typography: font, scale (8 steps), line heights, weights
- Spacing: 4px base scale (16 steps)
- Border radius: 4 steps (sm, md, lg, full)
- Shadows: 3 levels (sm, md, lg)
- Motion: duration + easing tokens
- Output in requested format
Output Formats
- css-vars:
:root { --color-primary: ...; } with dark mode media query
- tailwind:
tailwind.config.js theme extension
- json: W3C Design Tokens Community Group format
- js: JavaScript module export
