| license | Apache-2.0 |
| name | design-system-generator |
| description | Generates production-ready design tokens from natural language descriptions. Outputs Tailwind configs, CSS custom properties, and DTCG W3C tokens from 24 trends + 31 AI-ready styles with 2800+ component examples. |
| allowed-tools | Read,Write,Bash,Glob |
| category | Design & Creative |
| tags | ["design-system","tokens","tailwind","css","dtcg"] |
| pairs-with | [{"skill":"vibe-matcher","reason":"Clarify emotional direction before generating tokens"},{"skill":"web-design-expert","reason":"Implement generated tokens in actual designs"},{"skill":"color-theory-palette-harmony-expert","reason":"Deep-dive on color choices within generated palette"},{"skill":"component-template-generator","reason":"Generate component code using these tokens"},{"skill":"design-system-documenter","reason":"Document generated tokens for team adoption"}] |
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)
npx ts-node generate-tailwind.ts neobrutalism
npx ts-node generate-tailwind.ts swiss-modern
