StyleSeed
Your AI writes UI that looks like an AI wrote it.StyleSeed is the design engine that fixes that.
Design judgment for Claude Code · Codex · Cursor · vibe coding — so the output stops looking generated.
One component. Three brand DNAs. Same chat UI morphing across Toss · Raycast · Arc — colors, radius, motion, shadows, gradients all driven by StyleSeed tokens. Just a data-skin attribute.
Skins are inspired-by token sets — brand-flavored color/radius/shadow/motion values, not recreations of those companies' design languages. The layer that restructures the actual design is the presets (/ss-restyle, below).
Every design-AI skill makes your UI coherent. StyleSeed also fights the generic-AI look — and enforces it.
Judgment, not data — how designers think, not a palette collection ·
Fights the AI tells — the default indigo, the icon-chip cliché, template layouts, rainbow lists ·
A scored Quality Gate — reviews + fixes to ≥80/100 before you see it ·
Every agent — ships CLAUDE.md + AGENTS.md + .cursorrules ·
A design lock that stops drift ·
Free & MIT
Full pages: before · after · more before/afters →
🔥 We ran an early version of this page through our own gate. It scored 58/100 → here's the receipt
It scored 58/100 → here's the receipt
Same product, six looks — each one /ss-restyle <preset> away. Coherent, distinct, never generic.
Get Started · Engine + Skins · Motion · Skills · Wiki · 한국어
Get started in 30 seconds
The fastest way — paste this one sentence into Claude Code, Codex, Cursor, or any AI agent. It installs StyleSeed and runs the whole loop:
Why the prompt installs first: the quality gate is the step that makes output stop looking generic — but the ss-score and ss-build skills can only run if they are installed. Point an agent at the rules-URL alone and the "gate" degrades to an honor-system self-check it usually skips. Installing makes the loop real: the lock persists in STYLESEED.md (no drift), and the gate actually scores and fixes before you see anything. Can't install? The URL still teaches the rules — just weaker. Works with Claude Code (CLAUDE.md), Codex / Amp / Gemini CLI (AGENTS.md), and Cursor (.cursorrules) — StyleSeed ships all three. (Planning first is what keeps the result from looking random — see Troubleshooting.)
What your agent actually does with StyleSeed loaded:
The STYLESEED.md lock is the anti-drift mechanic. Your skin, key color, radius, and motion get written once and the rules make every agent re-read and obey them on every prompt — so the design stops being different each session. The Quality Gate then self-reviews and fixes the UI (rainbow lists, two accents, missing states) before you ever see it — and it can retrofit an old generic build too.
The rules are the product — and they need zero install or permissions. They're
plain markdown (CLAUDE.md / AGENTS.md / DESIGN-LANGUAGE.md), so the prompt above —
or just copying those files in — is 90% of StyleSeed with nothing to approve.
Want the 19 ss-* agent skills too (optional automation: setup wizard, review, score)?
Installs all 19 skills into Claude Code, Codex, Cursor, Gemini CLI, Amp and more. Then run /ss-setup in Claude Code or $ss-setup in Codex (you can also choose it from Codex's /skills picker). Your agent may ask you to approve tools on first use. No install possible? The rules alone still do the core work.
Your agent, its exact path:
More paths (manual copy, Cursor, awesome-design-md brands) in Install by hand below.
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
Where StyleSeed fits among design-AI skills
There are lots of "help your AI design" projects now. Most solve a slice. StyleSeed is the one that
targets the whole "looks AI-generated" problem — and enforces the fix.
They're not all competitors — a DESIGN.md gives StyleSeed a skin; a generator gives it a first
draft. StyleSeed is the judgment + enforcement layer the others don't have.
What it actually enforces (a taste)
The kind of specific, named calls a senior designer makes without thinking — written down so an AI
applies them every time:
The refined black is #2A2A2A, not #000 — a 5-step grayscale ramp, never pure black
One accent, everything else greyscale — the single-accent law; a second hue is the fastest "un-designed" tell
Numbers 2:1 with their unit — a 48px value over a 24px unit; equal sizes flatten magnitude into noise
Nested-radius law: inner = outer − padding — concentric corners, so a card and its inner button agree
Layered, low-opacity shadows (≤8%) lit from one direction — not one hard drop shadow
Tabular numbers for anything that updates — no width jitter as values change
Status color = severity only — a "normal" row is grey; color marks the exception, never a rainbow list
No emoji icons, and no Lucide-in-a-pale-chip on every card (§CC-9b) — the two opposite AI icon tells
8px spatial grid; gap-around-a-group > gap-inside it — proximity that reads as structure
Optical, not pixel, alignment — nudge arrows/play glyphs; center type by cap-height
Desktop body ≥16px, one focal point per screen — the tight mobile scale and an all-even grid both read "machine-made"
One radius personality · one icon set · one shadow language — the coherence laws (§C0), the #1 fix for "looks AI-generated"
Motion scoped by surface — a dashboard stays calm; a landing page gets the Cinematic tier (scroll-linked reveals, 3D hero, animated gradients — the Stripe/Linear playbook). Scroll-jacking is still banned everywhere (§43)
See all 74 rules → · the craft & coherence laws →
the craft & coherence laws →
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.
See the before/after → — the same dashboard brief, generated generically vs. with the 74 rules applied. Every fix annotated with the rule behind it.
StyleSeed is a design engine — 74 visual rules, 48 components, a named motion system, and 19 agent skills that teach LLMs the judgment, not just the data:
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 74 rules that tell the model when to use which pattern and why.
StyleSeed + Claude Design together:
Claude Design generates the layout and components (fast scaffolding)
StyleSeed's 74 rules refine the output (design judgment layer)
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.
"Why not just use the official frontend-design skill?"
Use both — they solve different halves of the problem. Anthropic's official frontend-design skill scaffolds a clean screen fast, and it's a great starting point. StyleSeed is the layer on top:
Official gets you coherent. StyleSeed keeps you from looking templated. Run the official skill to scaffold, then let StyleSeed's gate refine and enforce.
Install by hand
The fastest paths are at the top — paste one prompt, or npx skills add bitjaru/styleseed. To wire StyleSeed into an existing project manually, use one of the options below.
New to this? Read top to bottom — every step matters. The most common
mistake is expecting setup to work before the skill is installed. Claude
Code scans .claude/skills/; Codex scans .agents/skills/.
Option 1: Interactive Setup (Recommended)
Step 1 — Install the skills. The portable path for every supported agent is:
For a manual project-local install, clone StyleSeed and copy the canonical
skill folders into the path your agent scans:
Step 2 — Start a fresh agent session, open your project, and invoke setup:
The wizard then 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
Don't see the skills? For Claude Code, check .claude/skills/ and use the
/ss- prefix. For Codex, check .agents/skills/, open /skills, or invoke
$ss-setup. Start a new session after installing if discovery looks stale.
Option 2: Manual Setup
Already did step 1 above? These commands copy the rest of the engine into a typical src/-based React project. The source folder is engine/ (replace /tmp/styleseed with wherever you cloned it):
Option 3: Just give AI the URL
Option 4: Cursor
Want just some skills? npx skills add bitjaru/styleseed --skill ss-motion,ss-page cherry-picks.
Troubleshooting — "I applied StyleSeed but the UI still looks bad"
The honest reason: consistency comes from constraints. If you used a bare "apply StyleSeed"
prompt (without the plan-mode + key-color + quality-gate steps the prompt above
includes), the agent reads a summary once and improvises — so colors land at random and there's
no key color. The reference demo (styleseed-demo.vercel.app)
came out polished because it was built with the full rules in context and iterated with
/ss-review — not one-shot. Recreate those conditions:
Plan first. In Claude Code press Shift+Tab to enter Plan Mode, then decide the design one step at a time, with full context, before any code is written. This is the single biggest fix.
Pin one key color. Give the agent a brand hex — or pick a skin (Linear / Stripe / Toss / …). The rule is one accent, everything else greyscale. No key color = the "random colors" look.
Point it at the full rules, not the summary: read https://styleseed-demo.vercel.app/llms-full.txt (the short llms.txt is an index, not the 74 rules).
Lock the decisions in a file. Run /ss-setup (or just ask the agent to "write a STYLESEED.md design lock"). It records your skin, key color, radius, and motion in STYLESEED.md at the repo root, and the rules tell the agent to obey it on every prompt — so the design stops being "different every time." This is the single strongest fix for inconsistency. (Also install CLAUDE.md / AGENTS.md / .cursorrules so the rules themselves are re-read every prompt.)
Be specific: "Build a dashboard in the Linear skin, one blue accent, Snap motion, following StyleSeed's rules" beats "build a dashboard."
Check & iterate. Run /ss-review or /ss-score, or tell it: "self-check coherence — one radius, one accent, real empty/loading/error states — and fix violations." If it drifts: "re-read CLAUDE.md and fix the coherence violations."
More constraints = less variance. Plan mode + a pinned key color + installed rules + a review pass is the difference between "looks generated" and "looks designed."
Already built something generic? Retrofit it
StyleSeed isn't only for new screens — it's the design counterpart to a code review for UI you
already shipped. If an earlier build looks coherent but generic (default indigo, tiny desktop
text, the same Lucide-icon-in-a-pale-chip on every card, no focal point):
/ss-score src/… — grades the screen 0–100 and names the exact "AI-made" tells (default
accent, icon-chip cliché, sub-16px body on desktop, no focal point, missing states).
/ss-review src/… — the design code-review: applies the fixes (retint to your key color,
drop the chips, bump the type scale, create a focal point), then re-score to ≥80.
/ss-update → Retrofit — no design lock yet? It writes a STYLESEED.md (mood, key color,
font, surface) so the whole project stops drifting, then upgrades screen by screen.
The rules got stronger in v2.5.0, so a
screen that passed the old bar may score lower now — that's the point. Fixing it is what makes it
stop looking AI-made.
How It Works: Engine + Skins
Engine = how your app is structured (design intelligence)
74 visual design rules (layout, composition, rhythm, forbidden patterns)
48 React components (32 primitives + 16 patterns)
A named motion system (5 seeds + a copy-paste keyword library)
19 cross-agent skills (setup, UI, motion, UX, accessibility)
Works with ANY color palette
Skin = what your app looks like (visual identity)
Just a theme.css file with color variables
7 built-in skins: Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel
58+ more available from awesome-design-md
Or create your own (change --brand and you're done)
Data repos (awesome-design-md) = paint colors.
StyleSeed = the rulebook for where to put the paint. Use them together: they provide the skin,
StyleSeed provides the brain. (Full comparison in Where StyleSeed fits.)
Named Motion System
Most AI-generated motion is the same default fade. StyleSeed gives motion a vocabulary — so you (and the LLM) can name a feel and get consistent, intentional animation across every page. Two layers:
- Seeds = personality. Five named presets, each a spreadable framer-motion recipe in five contexts (entrance / exit / hover / press / layout):
- Keywords = distinctive moves. A library of copy-paste named motions behind one handle — toggle-flip, toggle-curtain, reveal-blur, pop-in, tilt-3d, magnetic, glow-pulse, confetti-pop, shimmer, and more. Say the keyword while vibe coding (or run /ss-motion toggle-flip) and the same recipe lands in your code.
▶ Preview & copy every motion at the live gallery →
· Vibe-code your own → the motion guide
Preview & copy every motion at the live gallery →
Vibe-code your own → the motion guide
- Motion is scoped by surface — calm apps, cinematic landing pages. This is the part most rule-sets get wrong: they ban scroll animation everywhere (so your marketing page ends up flat), or allow it everywhere (so your dashboard scroll-jacks). StyleSeed splits it:
The line StyleSeed draws: scroll-linked (native scroll drives it, you stay in control) is encouraged on brand pages; scroll-jacking (hijacking scroll speed, trapping you) is banned everywhere. The Cinematic tier keeps its guardrails — 60fps (transform/opacity only), never blocks the first read or the CTA, and prefers-reduced-motion always leaves a complete static page. So you can build a Stripe-grade landing page and a calm dashboard from the same engine, each with the right restraint. (Rules: DESIGN-LANGUAGE §43 · PAGE-TYPES → Landing)
All seeds auto-respect prefers-reduced-motion, and the /ss-motion skill pulls every recipe from one source of truth — so motion stays consistent no matter who (or what) writes the code.
Available Skins
Engine Contents
15 AI-Powered Skills
Setup
UI — Build It Right
UX — Design It Right (No Designer Needed)
Example Workflow
Example Prompts
New project:
Add a page (engine already in project):
Improve existing page:
Update engine:
Tech Stack
React 18 · TypeScript · Tailwind CSS v4 · Radix UI · Vite 6 · Lucide Icons · CVA
StyleSeed vs. the alternatives
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.
FAQ
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 74 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.
Documentation
Full docs in the Wiki — design rules reference, composition recipes, chart guides, skills reference.
Contributing
StyleSeed is a living judgment framework — the rules aren't carved in stone. If you use it and
find a pattern that reliably makes UI better, teach it to everyone's AI by proposing it as a rule.
⭐ Propose a design rule (the heart of it)
A good rule is a decision + the reason it works, written so a model can apply it — not an opinion.
Open a "Propose a design rule"
issue, or PR it into engine/DESIGN-LANGUAGE.md (visual/layout) or engine/VISUAL-CRAFT.md (craft &
coherence). The judgment compounds as the community adds to it.
"Propose a design rule"
Create a New Skin
Just a theme.css + skin.json:
Improve the Engine
Better rules → better AI output: more specific design rules, new pattern components, accessibility
improvements, new AI skills.
See CONTRIBUTING.md for the full rule format and quality checklist.
Updating
Already using StyleSeed? Quick update (always safe):
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.
License
MIT
Acknowledgments
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