Option 2: Manual Setup

# Copy engine (rules, components, skills)
cp -r engine/* your-project/

# Copy engine css to src/styles
cp -r engine/css/* your-project/src/styles/

# Pick a skin — copy theme.css alongside other css files
cp skins/stripe/theme.css your-project/src/styles/theme.css

# Copy components
cp -r engine/components/* your-project/src/components/

Option 3: Just give AI the URL

Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md 
and engine/DESIGN-LANGUAGE.md, then build a SaaS dashboard.
Use skins/stripe/theme.css for the color palette.

Option 4: Cursor

cp engine/.cursorrules your-project/.cursorrules

How It Works: Engine + Skins

┌─────────────────────────────────────────────────┐
│  StyleSeed Engine (brand-agnostic)              │
│                                                 │
│  69 design rules · 48 components · 13 skills    │
│  Layout · Composition · Typography · UX · A11y  │
└──────────────────────┬──────────────────────────┘
                       │
              Pick a skin ↓
                       │
    ┌──────┬──────┬──────┬──────┬──────┬─────────┐
    │ Toss │Stripe│Linear│Vercel│Notion│ 58 more │
    │      │      │      │      │      │(awesome)│
    └──────┴──────┴──────┴──────┴──────┴─────────┘

Engine = how your app is structured (design intelligence)

• 69 visual design rules (layout, composition, rhythm, forbidden patterns)
• 48 React components (32 primitives + 16 patterns)
• 11 Claude Code skills (setup, UI, UX, accessibility)
• Works with ANY color palette

Skin = what your app looks like (visual identity)

• Just a theme.css file with color variables
• 5 built-in skins: Toss, Stripe, Linear, Vercel, Notion
• 58+ more available from awesome-design-md
• Or create your own (change --brand and you're done)

StyleSeed vs awesome-design-md

They're complementary, not competing:

| | awesome-design-md | StyleSeed | |---|---|---| | What it is | Brand color palette collection | Design intelligence engine | | Provides | Colors, fonts, shadow values | Layout rules, composition recipes, UX patterns | | Components | None | 48 React components | | AI Skills | None | 13 slash commands | | Makes AI understand | "Use this shade of blue" | "How to structure a page like a pro designer" |

awesome-design-md = paint colors StyleSeed = architecture + interior design rules

Use them together: awesome-design-md provides the skin, StyleSeed provides the brain.

Available Skins

| Skin | Style | Source | |------|-------|--------| | toss | Korean fintech — purple, minimal, data-focused | Original | | stripe | Professional — indigo, clean, multi-layer shadows | awesome-design-md | | linear | Dark-first — violet, minimal, developer-focused | awesome-design-md | | vercel | Monochrome — black & white, geometric | awesome-design-md | | notion | Warm — blue accent, friendly, warm neutrals | awesome-design-md | | 58+ more | Any brand from awesome-design-md | Auto-fetch via /ui-setup |

Engine Contents

engine/
├── CLAUDE.md                 # AI reads this automatically
├── DESIGN-LANGUAGE.md        # 69 visual design rules (brand-agnostic)
├── .claude/skills/           # 13 slash commands
│   ├── ui-setup/             #   Interactive setup wizard
│   ├── ui-component/         #   Generate components
│   ├── ui-page/              #   Scaffold pages
│   ├── ui-pattern/           #   Compose layouts
│   ├── ui-review/            #   Design compliance check
│   ├── ui-tokens/            #   Manage tokens
│   ├── ui-a11y/              #   Accessibility audit
│   ├── ux-flow/              #   Design user flows
│   ├── ux-audit/             #   UX heuristic evaluation
│   ├── ux-copy/              #   Generate microcopy
│   └── ux-feedback/          #   Add loading/error/empty states
├── components/
│   ├── ui/                   # 32 primitives (shadcn/ui + motion)
│   └── patterns/             # 16 dashboard patterns
├── css/                      # base.css, fonts.css, index.css
├── tokens/                   # 6 JSON token files
├── utils/                    # Formatting utilities
├── icons/                    # Custom SVG icon library
└── scaffold/                 # Vite 6 + React 18 starter

13 AI-Powered Skills

Setup

| Skill | What It Does | |-------|-------------| | /ui-setup | Interactive wizard — pick skin, brand color, font, generates first page |

UI — Build It Right

| Skill | What It Does | |-------|-------------| | /ui-component | Generate components following design conventions | | /ui-page | Scaffold pages with proper layout structure | | /ui-pattern | Compose UI patterns (card grid, chart, list) | | /ui-review | Audit code for design system violations | | /ui-tokens | View, add, or modify design tokens | | /ui-a11y | Accessibility audit (WCAG 2.2 AA) | | /ui-lint | Quick automated lint — catches common violations in seconds | | /ui-update | Pull latest engine updates — analyzes your project and updates safely |

UX — Design It Right (No Designer Needed)

| Skill | What It Does | |-------|-------------| | /ux-flow | Design user flows (progressive disclosure, information pyramid) | | /ux-audit | Nielsen's 10 usability heuristics evaluation | | /ux-copy | Generate UX microcopy (buttons, errors, empty states, toasts) | | /ux-feedback | Add loading/success/error/empty states to any component |

Example Workflow

/ui-setup                    # Pick skin, configure project
/ui-page Dashboard           # Scaffold main page
/ux-copy "dashboard"         # Generate all microcopy
/ux-feedback src/Dashboard   # Add loading/error states
/ux-audit src/Dashboard      # Check UX quality
/ui-lint src/Dashboard       # Quick violation scan
/ui-review src/Dashboard     # Deep design compliance check
/ui-update                   # Pull latest engine updates

Example Prompts

New project:

Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md 
and engine/DESIGN-LANGUAGE.md. Use skins/stripe/theme.css for colors.
Build a SaaS dashboard with revenue, users, and activity.

Add a page (engine already in project):

Follow CLAUDE.md and DESIGN-LANGUAGE.md rules.
Create a settings page with profile, notifications, and danger zone.
Run /ui-review when done.

Improve existing page:

Refactor src/Dashboard.tsx to follow DESIGN-LANGUAGE.md.
Check visual rhythm (rule 61) and KPI variation (rule 62).

Update engine:

/ui-update

Example Design Rules

These are the kind of rules that make AI output look professional:

Rule: The most refined black isn't #000 — it's #2A2A2A.
      5-level grayscale: #2A → #3C → #6A → #7A → #9B

Rule: All content lives inside cards. Never on page background.
      Card (#FFF) vs background (#FAFAFA) contrast IS the separator.

Rule: Never repeat the same section type consecutively.
      Hero → Grid → Chart → Carousel → List (visual rhythm)

Rule: KPI cards must vary: 2 with trend arrows, 1 with progress bar,
      1 with comparison text. Never 4 identical cards.

Rule: Information density increases as you scroll down.
      Top: 48px (one number) → Bottom: 14px (detailed lists