Menu
Generate or improve a complete design token system covering color, typography, spacing, radius, shadows, motion
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Full project design audit that orchestrates all agents, scores across 12 dimensions, generates prioritized action plan
Accessibility audit covering WCAG 2.2, contrast, focus, keyboard, screen reader, touch targets
Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Component consistency audit covering state coverage, hierarchy, patterns
Interactive pre-launch design quality checklist
Compare current design against a reference or competitor
| 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 |
Generate a complete design token system for the project.
/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
uiux_generate_tokens:
:root { --color-primary: ...; } with dark mode media querytailwind.config.js theme extension