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.
Stop AI coding tools from generating ugly, generic UI.
Drop StyleSeed into Claude Code, Cursor, or any AI coding workflow and get Toss / Stripe / Linear quality output — instantly.
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
AI coding tools generate functional UI — but it looks generic. The missing piece isn't components or color tokens. It's design judgment.
StyleSeed is a design engine — 69 visual design rules, 48 components, and 11 AI skills that teach AI how professional designers think:
"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."
The engine is brand-agnostic — pair it with any color skin and it works.
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)
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.
| 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