styleseed

The design system for Claude Code, Cursor, and vibe coding.

One component. Three brand DNAs. Same chat UI morphing across Toss · Raycast · Arc — colors, radius, motion, shadows, gradients all driven by StyleSeed tokens. No rewrites. No conditional code. Just a data-skin attribute.

Other repos teach LLMs what brands look like. StyleSeed teaches LLMs how designers think. Data vs judgment. 69 design rules that Claude Code and Cursor read automatically — so the output stops looking generated and starts looking designed.

Get Started · Engine + Skins · Skills · Wiki · 한국어

Who is this for?

• You asked Claude Code or Cursor to build a dashboard and it came out amateur-looking
• You're vibe coding a SaaS app and don't want to hire a designer
• You use shadcn/ui but the output still feels generic
• You want Toss-style refinement without reverse-engineering it yourself
• You're building a Claude Code skill or Cursor rules setup for design
• You ship fast with AI and need professional UI that doesn't look AI-generated

Data vs Judgment

Every "help LLMs design better" project solves the wrong half of the problem. They feed the model more design data — brand palettes, font specs, shadow tokens, component libraries. I tried that first. Dumped Toss's entire design token JSON into my prompts. The output was still generic.

Then it hit me: a junior designer with Toss's palette still ships ugly dashboards. A senior designer with only grayscale ships something refined. The difference isn't what they have. It's what they know to do with it.

Design data is the paint. Design judgment is knowing where to put it.

StyleSeed is a design engine — 69 visual rules, 48 components, and 11 slash commands that teach LLMs the judgment, not just the data:

"The most refined black isn't #000 — it's #2A2A2A"
"One accent color in the entire app. Everything else grayscale. Restraint is elegance."
"Shadows at 4% opacity. If you can see it, it's already too much."
"Numbers and units at 2:1 ratio. 48px number, 24px unit. Always."
"Never repeat the same section type twice. Alternate tall and compact for rhythm."
"Card/background separation matters more than any border."

Nobody writes these down. They're baked into years of experience — invisible to outsiders, invisible to LLMs. StyleSeed writes them down, organizes them into six categories (color discipline, spatial rhythm, information hierarchy, shadow/elevation, component variance, motion/feedback), and hands them to Claude as a single markdown file it reads automatically.

The rules are brand-agnostic — they don't reference specific colors, only semantic tokens. Which means the same rulebook works whether your app looks like Toss, Vercel, or your client's weird purple brand. Swap the skin, the judgment carries over.

Works with Claude Design

Claude Design generates UI fast — but it still picks #000 for text, reaches for six accent colors, and floats cards with no background separation. The missing piece isn't more templates. It's the 69 rules that tell the model when to use which pattern and why.

StyleSeed + Claude Design together:

1. Claude Design generates the layout and components (fast scaffolding)
2. StyleSeed's 69 rules refine the output (design judgment layer)
3. Brand skins make it look like your brand, not like "AI made this"

Drop DESIGN-LANGUAGE.md into your Claude Design workflow and the same model produces noticeably more refined output — without changing a single prompt.

Get Started

Option 1: Interactive Setup (Recommended)

# Copy the engine into your project
cp -r engine/* your-project/

# Run the setup wizard
/ss-setup

The wizard walks you through:

1. App type (SaaS, e-commerce, fintech...)
2. Brand color or pick a skin (Toss, Stripe, Linear, Vercel, Notion...)
3. Or fetch any brand from awesome-design-md (58+ brands)
4. Font preference
5. Generates your first page automatically

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)

Data vs Judgment — how StyleSeed differs from every other "design for AI" repo

Most projects trying to fix AI-generated UI give the model more data. StyleSeed gives it judgment. They're complementary, not competing:

| | Data repos (e.g. awesome-design-md) | StyleSeed | |---|---|---| | Approach | Brand palette collection | Design judgment engine | | Teaches the model | What brands look like | How designers think | | Provides | Colors, fonts, shadow values | 69 rules + semantic tokens + executable skills | | Example output | "Use this shade of blue" | "The refined black isn't #000, it's #2A2A2A" | | Brand-specific? | Yes — rules are tied to one brand | No — rules reference semantic tokens, work with any skin | | Components | None | 48 React components | | AI skills | None | 11 slash commands (executable rules) | | Scales with new brands | Re-extract everything | Write one theme.css, reuse all rules |

Data repos = paint colors. StyleSeed = the rulebook for where to put the paint.

Use them together: data repos provide 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 /ss-setup |

Engine Contents

engine/
├── CLAUDE.md                 # AI reads this automatically
├── DESIGN-LANGUAGE.md        # 69 visual design rules (brand-agnostic)
├── .claude/skills/           # 13 slash commands (/ss-*)
│   ├── ss-setup/             #   Interactive setup wizard
│   ├── ss-page/              #   Scaffold pages
│   ├── ss-component/         #   Generate components
│   ├── ss-pattern/           #   Compose layouts
│   ├── ss-review/            #   D