Design system generator

Skill vibeeval/vibecosystem/skills/design-system-generator

AI software team for Claude Code - 138 agents, 295 skills, 73 hooks. Self-learning, multi-agent swarm, autonomous skill evolution.

Install

npx -y skills add vibeeval/vibecosystem --skill design-system-generator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Generate design systems with color palettes, typography, spacing scales, component tokens, and Tailwind config

SKILL.md

5.5 KB, as published. Nobody here has run it

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)

/* 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)

/* Light mode */
--color-primary: var(--color-blue-600);
--color-primary-hover: var(--color-blue-700);
--color-primary-subtle: var(--color-blue-50);

--color-danger: var(--color-red-500);
--color-success: var(--color-green-500);
--color-warning: var(--color-yellow-500);

--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-500);
--color-text-muted: var(--color-gray-300);

--color-bg-primary: #ffffff;
--color-bg-secondary: var(--color-gray-50);
--color-bg-tertiary: var(--color-gray-100);

--color-border: var(--color-gray-200);
--color-border-strong: var(--color-gray-300);

/* Dark mode */
.dark {
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-primary-subtle: var(--color-blue-900);

  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-300);
  --color-text-muted: var(--color-gray-500);

  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: #1a1a2e;
  --color-bg-tertiary: var(--color-gray-700);

  --color-border: var(--color-gray-700);
  --color-border-strong: var(--color-gray-500);
}

Layer 3: Component Tokens (Kullanim yeri)

/* Button */
--btn-primary-bg: var(--color-primary);
--btn-primary-hover: var(--color-primary-hover);
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: var(--color-border-strong);
--btn-danger-bg: var(--color-danger);

/* Input */
--input-bg: var(--color-bg-primary);
--input-border: var(--color-border);
--input-border-focus: var(--color-primary);
--input-text: var(--color-text-primary);
--input-placeholder: var(--color-text-muted);

/* Card */
--card-bg: var(--color-bg-primary);
--card-border: var(--color-border);
--card-shadow: 0 1px 3px rgb(0 0 0 / 0.1);

Typography System

Eleman	Font	Weight	Size	Line Height
Display	Primary	700	3rem (48px)	1.1
H1	Primary	600	2.25rem (36px)	1.2
H2	Primary	600	1.5rem (24px)	1.25
H3	Primary	500	1.25rem (20px)	1.3
Body	Primary	400	1rem (16px)	1.5
Small	Primary	400	0.875rem (14px)	1.4
Caption	Primary	400	0.75rem (12px)	1.3

Font Pairing Onerileri

Industry	Heading	Body	Karakter
SaaS / Tech	Inter	Inter	Temiz, notr
Fintech	DM Sans	DM Sans	Guvenir, profesyonel
Healthcare	Source Sans Pro	Source Sans Pro	Okunabilir, sicak
Education	Nunito	Open Sans	Samimi, erisilebilir
Dev Tools	JetBrains Mono	Inter	Teknik, modern
Luxury	Playfair Display	Lato	Sofistike, zarif

Spacing Scale (4px base)

Token    Value    Use Case
xs       4px      Icon gap, compact badges
sm       8px      Input padding-y, small gaps
md       12px     Button padding-y
base     16px     Card padding, standard gap
lg       24px     Section padding, comfortable gap
xl       32px     Section gap
2xl      48px     Page section gap
3xl      64px     Hero padding

Tailwind Config Ciktisi

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          hover: 'var(--color-primary-hover)',
          subtle: 'var(--color-primary-subtle)',
        },
        danger: { DEFAULT: 'var(--color-danger)' },
        success: { DEFAULT: 'var(--color-success)' },
        warning: { DEFAULT: 'var(--color-warning)' },
        surface: {
          DEFAULT: 'var(--color-bg-primary)',
          secondary: 'var(--color-bg-secondary)',
          tertiary: 'var(--color-bg-tertiary)',
        },
      },
      borderColor: {
        DEFAULT: 'var(--color-border)',
        strong: 'var(--color-border-strong)',
      },
      textColor: {
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
        muted: 'var(--color-text-muted)',
      },
    },
  },
} satisfies Config

Checklist

Primitive token'lar tanimli
Semantic token'lar tanimli (light + dark)
Component token'lar tanimli
Typography scale tanimli
Spacing scale tanimli
Tailwind config uretildi
Kontrast oranlar kontrol edildi (min 4.5:1)
Dark mode token'lari dogru