by bitjaru
Claude Code & Cursor design system. Stop generating ugly AI UI. 69 design rules + 48 shadcn components + Toss/Stripe/Linear/Vercel/Notion brand skins. Tailwind v4 + Radix.
# Add to your Claude Code skills
git clone https://github.com/bitjaru/styleseedNo comments yet. Be the first to share your thoughts!
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 · 한국어
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.
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:
Drop DESIGN-LANGUAGE.md into your Claude Design workflow and the same model produces noticeably more refined output — without changing a single prompt.
# Copy the engine into your project
cp -r engine/* your-project/
# Run the setup wizard
/ss-setup
The wizard walks you through:
# 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)
Skin = what your app looks like (visual identity)
theme.css file with color variables--brand and 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/ # D