aboudjem /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.jstheme extension - json: W3C Design Tokens Community Group format
- js: JavaScript module export