design-system-generator

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)

# Wrong
npx ts-node generate-tailwind.ts neobrutalism  # Generates #FF5252, #00E676

# Fixed  
npx ts-node generate-tailwind.ts swiss-modern