design-system-generator
Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config
npx skills add vibeeval/vibecosystem --skill design-system-generator --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Design System Generator Input'a gore tutarli design system uret. 3-layer token mimarisi. ## Input Asagidaki bilgileri iste veya cikar: - **Product type**: SaaS, e-commerce, blog, dashboard, mobile app - **Industry**: Fintech, healthcare, education, developer tools, etc. - **Style preference**: Minimal, bold, playful, corporate, dark-first - **Brand colors** (varsa): Primary HEX, secondary HEX - **Font preference** (varsa): Sans-serif, serif, mono ## 3-Layer Token Architecture ### Layer 1: Primitive Tokens (Ham degerler) ```css /* Primitive - ASLA direkt kullanilmaz */ --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-blue-700: #1d4ed8; --color-blue-900: #1e3a5f; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-500: #6b7280; --color-gray-700: #374151; --color-gray-900: #111827; --color-green-500: #22c55e; --color-red-500: #ef4444; --color-yellow-500: #eab308; ``` ### Layer 2: Semantic Tokens (Anlam tasiyan) ```css /* Light mode */ --color-primary: var(--color-blue-600); --color-primary-hover: var(--color-blue-700); --color-primary-subtle: var(--co
- Input
- 3-Layer Token Architecture
- Layer 1: Primitive Tokens (Ham degerler)
- Layer 2: Semantic Tokens (Anlam tasiyan)
- Layer 3: Component Tokens (Kullanim yeri)
- Typography System
- Font Pairing Onerileri
- Spacing Scale (4px base)
- Tailwind Config Ciktisi
- Checklist
What does the design-system-generator skill do?
Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config
How do I install it?
Run `npx skills add vibeeval/vibecosystem --skill design-system-generator --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From vibeeval/vibecosystem, a repository with 521 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.