メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/curiositech/windags-skills --skill design-system-generatorコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Design and build beautiful, accessible graphical interfaces — web, desktop (Electron/Tauri), and native (iOS/macOS/Android). Use for visual hierarchy and layout, color and theming (light/dark, semantic tokens, WCAG contrast), typography systems, motion and micro-interactions, accessibility, component systems and design tokens, responsive/adaptive layout, and platform-native idioms. The GUI counterpart to beautiful-cli-design. NOT for terminal/CLI output (use beautiful-cli-design) or API/data schemas.
Capstone/orchestration skill — build an M-Agent + N-Human cooperative IDE in Rust gpui (the Harbor): many agents and humans co-editing the same files as co-equal CRDT replicas, governed by claims/guard/salvage, across LAN/shared/remote harbors. The INDEX that dispatches into the sibling rust skills. Use when building the collaborative editor, the agent-fleet console, multiplayer editing with agents-as-peers, or any slice of the Harbor. Trigger on: cooperative IDE, collaborative editor, multiplayer editor, agents and humans co-editing, gpui IDE, Loro CRDT editor, harbor editor, claims/salvage, "build the cooperative IDE". NOT for: a single non-collaborative gpui screen (compose the siblings directly), web editors, or non-editor apps.
Build and extend pd-console — Port Daddy's GPU-native macOS operator console (GPUI 0.2.x, Zed's Rust UI). Covers the render-agnostic Block/Pane(Surface) contract, the two-thread reqwest↔smol refresh pipeline, Taffy flexbox layout, uniform_list virtual scroll, focus + keyboard nav, the OKLCH theme and ICS maritime flag badges, GPUI's missing text-input, and the real feature-gated cargo/CI gate. Use when adding panes, visual polish, or debugging GPUI rendering/layout/focus in core/pd-console. NOT for the TypeScript daemon, generic Rust toolchain/borrow-checker help (use rust-with-claude-code), or non-pd GPUI apps with a different theme/architecture.
SOC 職業分類に基づく
SKILL.md を表示中
| 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"}] |
Transform natural language descriptions into production-ready design tokens. Powered by 24 design trends, 31 AI-ready styles, and 2,800+ component examples.
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
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
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
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
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
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
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
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)
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
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; }
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
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
Result: Professional developer aesthetic with personality, fully accessible.
Pre-deployment checklist for generated tokens:
npx tailwindcss builds without warnings or errors❌ DO NOT use for:
vibe-matcher skill insteaddesign-system-documenter for optimizationcomponent-template-generator with these tokenscolor-theory-palette-harmony-expert for strategic color workweb-design-expert for motion design✅ Perfect for:
Delegation Rules:
vibe-matcher first, then return heredesign-system-documenter for analysiscomponent-template-generator with generated tokenscolor-theory-palette-harmony-expert for theory, then return here