Design System Generator
Transform natural language descriptions into production-ready design tokens. Powered by 24 design trends, 31 AI-ready styles, and 2,800+ component examples.
DECISION POINTS
1. Confidence Threshold Rules
If trend match confidence >= 80%:
→ Generate immediately with primary trend
If confidence 60-79%:
→ Show top 2 matches, ask user to choose
→ Example: "Swiss-modern (65%) vs. Hyperminimalism (62%) - which feels right?"
If confidence < 60%:
→ Use vibe-matcher skill first for emotional clarity
→ Re-run trend matching with vibe context
2. Multi-Trend Disambiguation
If 2+ trends score within 10% of each other:
├─ Business/professional context?
│ → Prefer: swiss-modern, hyperminimalism, dark-mode
├─ Creative/agency context?
│ → Prefer: neobrutalism, maximalism, experimental-navigation
├─ Tech/developer context?
│ → Prefer: terminal-aesthetic, glassmorphism, web3-crypto
└─ Consumer app context?
→ Prefer: claymorphism, botanical-organic, gamified-design
3. Output Format Selection
If user mentions specific framework:
├─ "Next.js", "React", "Vite" → generate-tailwind.ts
├─ "Vue", "Angular", "vanilla" → generate-css-vars.ts
└─ "Figma", "Style Dictionary" → generate-tokens.ts (DTCG)
If no framework mentioned:
→ Ask: "What's your tech stack?" or generate all three formats
4. Accessibility Requirements
If trend has accessibility warnings (glassmorphism, claymorphism):
→ Generate standard tokens first
→ Run contrast checker
→ If violations found:
├─ Adjust color values to meet WCAG AA
├─ Document overrides in comments
└─ Warn user about visual changes
5. Scope Determination
If user mentions theming:
├─ "dark mode" → Generate with --scope=.dark
├─ "multiple brands" → Generate with --scope=[data-theme="name"]
└─ "component library" → Use :root scope (default)
If existing design system mentioned:
→ Generate with theme.extend structure only
FAILURE MODES
1. Wrong Color Direction (Vibrant when user wanted muted)
Detection: User says "too bright", "too colorful", "more subtle"
Symptoms: High saturation values, neon/electric colors in conservative context
Fix: Re-run with lower-energy trend (swiss-modern instead of neobrutalism)
# Wrong
npx ts-node generate-tailwind.ts neobrutalism # Generates #FF5252, #00E676
# Fixed
npx ts-node generate-tailwind.ts swiss-modern # Generates #374151, #6B7280
2. Compilation Chaos (Generated tokens break build)
Detection: Tailwind purge warnings, CSS custom property undefined errors
Symptoms: Missing quotes in font names, invalid CSS values, circular references
Fix: Validate output before deployment
# Check Tailwind compilation
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# Check CSS syntax
npx stylelint tokens.css
3. Contrast Violation (Accessibility failure in production)
Detection: Lighthouse audit < 90, WAVE tool errors
Symptoms: Text invisible on backgrounds, pale borders, low-contrast buttons
Fix: Run contrast audit before finalizing
# Audit generated tokens
npx ts-node scripts/check-contrast.ts swiss-modern
# → Warning: text-gray-400 on bg-white = 2.1:1 (needs 4.5:1)
4. Semantic Mismatch (Token names don't match visual result)
Detection: Developer confusion, "primary" color isn't prominent
Symptoms: brutal-red is actually orange, glass-white is gray
Fix: Check trend mapping accuracy
# Verify semantic alignment
npx ts-node scripts/preview-tokens.ts neobrutalism
# Opens browser with all colors labeled
5. Scope Pollution (CSS variables leak across themes)
Detection: Theme switching doesn't work, colors persist incorrectly
Symptoms: Dark mode shows light colors, component themes interfere
Fix: Use explicit scoping
/* Wrong - leaks to global */
:root { --color-primary: #FF0000; }
/* Fixed - scoped properly */
[data-theme="brand-a"] { --color-primary: #FF0000; }
[data-theme="brand-b"] { --color-primary: #00FF00; }
WORKED EXAMPLES
Scenario: SaaS Dashboard for Developer Tools
Input: "Clean dashboard for developers, needs to feel professional but not boring"
Step 1: Trend Matching
npx ts-node scripts/match-trend.ts "clean dashboard for developers professional"
Result: swiss-modern (78%), terminal-aesthetic (45%)
Decision: 78% confidence is good, but "not boring" suggests terminal-aesthetic could add personality. Check both.
Step 2: Preview Both Options
- Swiss-modern: #374151 grays, Helvetica fonts, subtle shadows
- Terminal-aesthetic: #00E676 greens, monospace, sharp edges
Expert insight: For developer tools, terminal-aesthetic creates better brand differentiation while maintaining professionalism.
Step 3: Generate Tailwind Config
npx ts-node generate-tailwind.ts terminal-aesthetic > tailwind.tokens.ts
Step 4: Quality Check
// Generated output includes:
colors: {
'terminal-green': '#00E676',
'terminal-dark': '#0D1117',
'terminal-gray': '#21262D'
}
Step 5: Accessibility Verification
- terminal-green on terminal-dark = 7.2:1 ✅ (exceeds AAA)
- All text combinations pass WCAG AA
Result: Professional developer aesthetic with personality, fully accessible.
QUALITY GATES
Pre-deployment checklist for generated tokens:
NOT-FOR BOUNDARIES
❌ DO NOT use for:
- Color exploration/mood boarding → Use
vibe-matcher skill instead
- Existing design system refinement → Use
design-system-documenter for optimization
- Component code generation → Use
component-template-generator with these tokens
- Brand identity creation → Use
color-theory-palette-harmony-expert for strategic color work
- Single token adjustments → Just edit the values directly
- Complex animation systems → Use
web-design-expert for motion design
- Marketing site aesthetics → This generates systematic tokens, not one-off visual styles
✅ Perfect for:
- New project foundation setup
- Converting design descriptions to code
- Standardizing ad-hoc color usage
- Cross-format token consistency (Tailwind + CSS vars + DTCG)
Delegation Rules:
- If user needs emotional/conceptual clarity →
vibe-matcher first, then return here
- If user has existing system →
design-system-documenter for analysis
- If user needs components, not tokens →
component-template-generator with generated tokens
- If user needs color strategy →
color-theory-palette-harmony-expert for theory, then return here