GitHub - bitjaru/styleseed: Design engine for Claude Code, Codex & Cursor — teaches design judgment, not just data. 74 rules, 48 components, 7 brand skins (Toss/Stripe/Linear/Notion/Raycast/Arc/Vercel), a named motion system (5 seeds + 20+ moves), 15 /ss-* skills. Stop shipping AI UI that looks generated. MIT.

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.

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

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: Install StyleSeed so its checks actually run: `npx skills add bitjaru/styleseed` (if you can't, read https://styleseed-demo.vercel.app/llms-full.txt instead). Then use it for every UI in this project. First, in plan mode, lock my key color, font, and motion with me and save them to STYLESEED.md so they don't drift. Build to the rules with ONE focal point and one accent. Before showing me anything, run the quality gate (`/ss-score` in Claude Code, `$ss-score` in Codex) to ≥ 80 and fix what fails.

For a full screen, run `/ss-build` in Claude Code or `$ss-build` in Codex — it enforces this 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: you ▸ build me a billing settings page agent ▸ (plan mode) key color? for billing I'd go deep teal — #0F766E, mood: sharp · calm · trustworthy (not the default indigo). Motion: Snap. ok? ▸ y agent ▸ ✓ wrote STYLESEED.md — skin, accent, font, radius, motion locked, re-read every prompt agent ▸ building… running the quality gate before I show you anything gate ▸ ✗ two accent colors ✗ "normal" rows colored ✗ no empty state → fixing agent ▸ ✓ 88/100 — one accent, grey normal states, real empty/error states. here's the page.

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)? npx skills add bitjaru/styleseed 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:

Your agent Reads Fastest install

Claude Code CLAUDE.md + /ss-* skills npx skills add bitjaru/styleseed

Cursor .cursorrules cp engine/.cursorrules .cursorrules — or paste the prompt above

Codex AGENTS.md + $ss-* skills (.agents/skills) npx skills add bitjaru/styleseed

Amp · Gemini CLI AGENTS.md + skills npx skills add bitjaru/styleseed

Windsurf · Copilot · any other the paste-prompt above no install — paste & go

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.

StyleSeed Brand / DESIGN.md collections "Make-it-prettier" skills UI generators (Claude Design, v0…)

Teaches design judgment (how designers think) ✅ ❌ data only ⚠ a few tips ❌

Fights the AI-look itself — default indigo, icon-chip cliché, template layouts, rainbow lists ✅ ❌ ❌ ❌

Scored Quality Gate — reviews + fixes the UI before you see it ✅ ❌ ❌ ❌

Anti-drift design lock — decisions persist across sessions ✅ ❌ ❌ ❌

Works across every agent (Claude Code · Cursor · Codex · Amp · Gemini) ✅ ⚠ ⚠ ❌ one tool

Brand skins + named motion system ✅ ⚠ colors only ❌ ⚠

Free & MIT ✅ ✅ usually freemium

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 → 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: "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

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.