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 · 한국어
- 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
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.
Same engine, different skins. Built with Claude Code. Zero designer.
See full page
# Copy the engine into your project
cp -r engine/* your-project/
# Run the setup wizard
/ss-setupThe wizard walks you through:
- App type (SaaS, e-commerce, fintech...)
- Brand color or pick a skin (Toss, Stripe, Linear, Vercel, Notion...)
- Or fetch any brand from awesome-design-md (58+ brands)
- Font preference
- Generates your first page automatically
# 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/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.
cp engine/.cursorrules your-project/.cursorrules┌─────────────────────────────────────────────────┐
│ 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.cssfile with color variables - 5 built-in skins: Toss, Stripe, Linear, Vercel, Notion
- 58+ more available from awesome-design-md
- Or create your own (change
--brandand you're done)
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.
| 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/
├── 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/ # Design compliance check
│ ├── ss-tokens/ # Manage tokens
│ ├── ss-a11y/ # Accessibility audit
│ ├── ss-lint/ # Quick violation scan
│ ├── ss-update/ # Pull latest engine
│ ├── ss-flow/ # Design user flows
│ ├── ss-audit/ # UX heuristic evaluation
│ ├── ss-copy/ # Generate microcopy
│ └── ss-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
| Skill | What It Does |
|---|---|
/ss-setup |
Interactive wizard — pick skin, brand color, font, generates first page |
| Skill | What It Does |
|---|---|
/ss-component |
Generate components following design conventions |
/ss-page |
Scaffold pages with proper layout structure |
/ss-pattern |
Compose UI patterns (card grid, chart, list) |
/ss-review |
Audit code for design system violations |
/ss-tokens |
View, add, or modify design tokens |
/ss-a11y |
Accessibility audit (WCAG 2.2 AA) |
/ss-lint |
Quick automated lint — catches common violations in seconds |
/ss-update |
Pull latest engine updates — analyzes your project and updates safely |
| Skill | What It Does |
|---|---|
/ss-flow |
Design user flows (progressive disclosure, information pyramid) |
/ss-audit |
Nielsen's 10 usability heuristics evaluation |
/ss-copy |
Generate UX microcopy (buttons, errors, empty states, toasts) |
/ss-feedback |
Add loading/success/error/empty states to any component |
/ss-setup # Pick skin, configure project
/ss-page Dashboard # Scaffold main page
/ss-copy "dashboard" # Generate all microcopy
/ss-feedback src/Dashboard # Add loading/error states
/ss-audit src/Dashboard # Check UX quality
/ss-lint src/Dashboard # Quick violation scan
/ss-review src/Dashboard # Deep design compliance check
/ss-update # Pull latest engine updatesNew 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 /ss-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:
/ss-update
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)
69 rules total. See the full design language →
React 18 · TypeScript · Tailwind CSS v4 · Radix UI · Vite 6 · Lucide Icons · CVA
| StyleSeed | shadcn/ui | Tailwind UI | Material UI | Generic AI output | |
|---|---|---|---|---|---|
| Components | ✅ 48 | ✅ 50+ | ✅ | ✅ | ❌ |
| Design judgment (when to use what) | ✅ 69 rules | ❌ | ❌ | Partial | ❌ |
| Claude Code / Cursor integration | ✅ 11 skills | ❌ | ❌ | ❌ | — |
| Brand skins (Toss, Stripe, Linear...) | ✅ | ❌ | ❌ | ❌ | ❌ |
| Price | Free (MIT) | Free | $299+ | Free | — |
| Works with AI coding tools | ✅ | Indirect | Indirect | Indirect | — |
TL;DR: shadcn/ui gives you components. Tailwind UI gives you templates. StyleSeed gives you the design judgment that makes AI output stop looking like AI output.
Q: Why does Claude Code / Cursor generate ugly UI?
Because LLMs optimize for functional correctness, not visual refinement. They'll pick #000 for text, py-4 for spacing, text-xl for everything — all technically valid, all amateur. StyleSeed gives them the rules professional designers use.
Q: Is this a shadcn/ui replacement? No — it's built on top of shadcn/ui patterns. StyleSeed components use the same Radix primitives and CVA conventions. Think of it as shadcn/ui + design judgment + AI-tool integration.
Q: Does it work with Cursor too?
Yes. The 69 design rules live in a .cursorrules file and CLAUDE.md. Cursor reads them automatically.
Q: How is this different from awesome-design-md? awesome-design-md gives you brand DESIGN.md files (what). StyleSeed gives you the engine that turns any brand into a working app (how). They pair well.
Q: Can I use it for a non-fintech app? Yes. The engine is brand-agnostic. Pick any skin, swap the brand color, ship.
Full docs in the Wiki — design rules reference, composition recipes, chart guides, skills reference.
Just a theme.css + skin.json:
mkdir skins/your-brand
# Copy any existing skin as starting point
cp skins/toss/theme.css skins/your-brand/theme.css
# Change the --brand color and other valuesBetter rules → better AI output:
- More specific design rules
- New pattern components
- Accessibility improvements
- New AI skills
See CONTRIBUTING.md for details.
Already using StyleSeed? Quick update (always safe):
# Pull latest
cd styleseed && git pull
# Update design rules + skills (safe — no project-specific content)
cp styleseed/engine/DESIGN-LANGUAGE.md your-project/.claude/DESIGN-LANGUAGE.md
cp -r styleseed/engine/.claude/skills/ your-project/.claude/skills/Don't overwrite: your theme.css (brand colors), CLAUDE.md (if project-specific), or customized components.
Full guide: engine/UPDATE.md
Get notified: Click Watch → Custom → Releases on this repo.
- Design language inspired by Toss
- Components based on shadcn/ui
- Brand skins sourced from awesome-design-md
- UX principles from Laws of UX and Nielsen Norman Group