{"slug": "show-hn-styleseed-a-design-rules-engine-so-ai-agents-stop-building-generic-ui", "title": "Show HN: StyleSeed – a design-rules engine so AI agents stop building generic UI", "summary": "StyleSeed, a free and MIT-licensed design-rules engine, launched to help AI coding agents like Claude Code, Codex, and Cursor generate consistent, branded UI instead of generic output. The tool enforces brand-specific tokens, a quality gate that scores designs above 80/100, and a persistent lock file to prevent visual drift across sessions.", "body_md": "Design judgment for Claude Code · Codex · Cursor · vibe coding — so the output stops looking generated.\n\n**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`\n\nattribute.\n\nSkins 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).\n\n**Every design-AI skill makes your UI coherent. StyleSeed also fights the generic-AI look — and enforces it.**\n\n**Judgment, not data** — how designers *think*, not a palette collection ·\n**Fights the AI tells** — the default indigo, the icon-chip cliché, template layouts, rainbow lists ·\n**A scored Quality Gate** — reviews + fixes to ≥80/100 *before you see it* ·\n**Every agent** — ships `CLAUDE.md`\n\n+ `AGENTS.md`\n\n+ `.cursorrules`\n\n·\n**A design lock that stops drift** ·\n**Free & MIT**\n\nFull pages: before · after ·\n\n**more before/afters →**\n\n🔥 We ran an early version of this page through our own gate.\n\n[It scored 58/100 → here's the receipt](https://styleseed-demo.vercel.app/scorecard)\n\nSame product, six looks — each one /ss-restyle <preset> away. Coherent, distinct, never generic.\n\n[Get Started](#get-started-in-30-seconds) · [Engine + Skins](#how-it-works-engine--skins) · [Motion](#named-motion-system) · [Skills](#15-ai-powered-skills) · [Wiki](/bitjaru/styleseed/wiki) · [한국어](/bitjaru/styleseed/blob/main/README-KR.md)\n\n**The fastest way — paste this one sentence** into Claude Code, Codex, Cursor, or any AI agent. It installs StyleSeed *and* runs the whole loop:\n\n```\nInstall 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.\n```\n\n**Why the prompt installs first:** the quality gate is the step that makes output stop looking generic — but the `ss-score`\n\nand `ss-build`\n\nskills 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`\n\n(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\n\n[Troubleshooting](#troubleshooting--i-applied-styleseed-but-the-ui-still-looks-bad).)\n\n**What your agent actually does with StyleSeed loaded:**\n\n```\nyou    ▸  build me a billing settings page\nagent  ▸  (plan mode) key color? for billing I'd go deep teal — #0F766E, mood: sharp · calm ·\n          trustworthy (not the default indigo). Motion: Snap. ok?  ▸ y\nagent  ▸  ✓ wrote STYLESEED.md — skin, accent, font, radius, motion locked, re-read every prompt\nagent  ▸  building… running the quality gate before I show you anything\ngate   ▸  ✗ two accent colors   ✗ \"normal\" rows colored   ✗ no empty state   → fixing\nagent  ▸  ✓ 88/100 — one accent, grey normal states, real empty/error states. here's the page.\n```\n\n**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\n\n*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)\n\n*before*you ever see it — and it can\n\n[retrofit an old generic build](#already-built-something-generic-retrofit-it)too.\n\nThe rules are the product — and they need zero install or permissions.They're plain markdown (`CLAUDE.md`\n\n/`AGENTS.md`\n\n/`DESIGN-LANGUAGE.md`\n\n), so the prompt above — or just copying those files in — is 90% of StyleSeed with nothing to approve.\n\n**Want the 19 ss-* agent skills too** (optional automation: setup wizard, review, score)?\n\n```\nnpx skills add bitjaru/styleseed\n```\n\nInstalls all 19 skills into Claude Code, Codex, Cursor, Gemini CLI, Amp and more. Then run `/ss-setup`\n\nin Claude Code or `$ss-setup`\n\nin Codex (you can also choose it from Codex's `/skills`\n\npicker). Your agent may ask you to approve tools on first use. No install possible? The rules alone still do the core work.\n\n**Your agent, its exact path:**\n\n| Your agent | Reads | Fastest install |\n|---|---|---|\nClaude Code |\n`CLAUDE.md` + `/ss-*` skills |\n`npx skills add bitjaru/styleseed` |\nCursor |\n`.cursorrules` |\n`cp engine/.cursorrules .cursorrules` — or paste the prompt above |\nCodex |\n`AGENTS.md` + `$ss-*` skills (`.agents/skills` ) |\n`npx skills add bitjaru/styleseed` |\nAmp · Gemini CLI |\n`AGENTS.md` + skills |\n`npx skills add bitjaru/styleseed` |\nWindsurf · Copilot · any other |\nthe paste-prompt above | no install — paste & go |\n\nMore paths (manual copy, Cursor, awesome-design-md brands) in Install by hand below.\n\n- You asked\n**Claude Code** or**Cursor** to build a dashboard and it came out amateur-looking - You're\n**vibe coding** a SaaS app and don't want to hire a designer - You use\n**shadcn/ui** but the output still feels generic - You want\n**Toss-style** refinement without reverse-engineering it yourself - You're building a\n**Claude Code skill** or**Cursor rules** setup for design - You ship fast with AI and need professional UI that doesn't look AI-generated\n\nThere are lots of \"help your AI design\" projects now. Most solve a slice. StyleSeed is the one that\ntargets the whole *\"looks AI-generated\"* problem — and **enforces** the fix.\n\nStyleSeed |\nBrand / `DESIGN.md` collections |\n\"Make-it-prettier\" skills | UI generators (Claude Design, v0…) | |\n|---|---|---|---|---|\nTeaches design judgment (how designers think) |\n✅ | ❌ data only | ❌ | |\nFights the AI-look itself — default indigo, icon-chip cliché, template layouts, rainbow lists |\n✅ | ❌ | ❌ | ❌ |\nScored Quality Gate — reviews + fixes the UI before you see it |\n✅ | ❌ | ❌ | ❌ |\nAnti-drift design lock — decisions persist across sessions |\n✅ | ❌ | ❌ | ❌ |\nWorks across every agent (Claude Code · Cursor · Codex · Amp · Gemini) |\n✅ | ❌ one tool | ||\nBrand skins + named motion system |\n✅ | ❌ | ||\n| Free & MIT | ✅ | ✅ | usually | freemium |\n\nThey're not all competitors — a `DESIGN.md`\n\ngives StyleSeed a skin; a generator gives it a first\ndraft. StyleSeed is the **judgment + enforcement layer** the others don't have.\n\nThe kind of specific, named calls a senior designer makes without thinking — written down so an AI applies them every time:\n\n**The refined black is**— a 5-step grayscale ramp, never pure black`#2A2A2A`\n\n, not`#000`\n\n**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:**— concentric corners, so a card and its inner button agree`inner = outer − padding`\n\n**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)\n\n[See all 74 rules →](/bitjaru/styleseed/blob/main/engine/DESIGN-LANGUAGE.md) · [the craft & coherence laws →](/bitjaru/styleseed/blob/main/engine/VISUAL-CRAFT.md)\n\nEvery \"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.\n\nThen 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.\n\nDesign data is the paint. Design judgment is knowing where to put it.\n\n** See the before/after →** — the same dashboard brief, generated generically vs. with the 74 rules applied. Every fix annotated with the rule behind it.\n\nStyleSeed 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:\n\n```\n\"The most refined black isn't #000 — it's #2A2A2A\"\n\"One accent color in the entire app. Everything else grayscale. Restraint is elegance.\"\n\"Shadows at 4% opacity. If you can see it, it's already too much.\"\n\"Numbers and units at 2:1 ratio. 48px number, 24px unit. Always.\"\n\"Never repeat the same section type twice. Alternate tall and compact for rhythm.\"\n\"Card/background separation matters more than any border.\"\n```\n\nNobody 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.\n\nThe 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.\n\n[Claude Design](https://claude.ai/design/) generates UI fast — but it still picks `#000`\n\nfor 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*.\n\n**StyleSeed + Claude Design together:**\n\n- Claude Design generates the layout and components (fast scaffolding)\n- StyleSeed's 74 rules refine the output (design judgment layer)\n- Brand skins make it look like your brand, not like \"AI made this\"\n\nDrop `DESIGN-LANGUAGE.md`\n\ninto your Claude Design workflow and the same model produces noticeably more refined output — without changing a single prompt.\n\nUse both — they solve different halves of the problem. Anthropic's official [ frontend-design](https://github.com/anthropics/skills) skill scaffolds a clean screen fast, and it's a great starting point. StyleSeed is the layer\n\n**on top**:\n\nOfficial `frontend-design` |\nStyleSeed |\n|\n|---|---|---|\n| Gets you a coherent screen | ✅ | ✅ |\n| Names & bans the generic-AI tells | — | ✅ by name (default indigo, icon-chip, rainbow lists…) |\n| Scored gate that fixes before you see it | — | ✅ `/ss-score` loops to ≥80 |\n| Locks decisions so they don't drift across prompts | — | ✅ `STYLESEED.md` |\n| Presets + dials to move the whole look at once | — | ✅ `/ss-restyle` , `/ss-dial` |\n\nOfficial gets you *coherent*. StyleSeed keeps you from looking *templated*. Run the official skill to scaffold, then let StyleSeed's gate refine and enforce.\n\nThe fastest paths are at the top — [paste one prompt](#get-started-in-30-seconds), or `npx skills add bitjaru/styleseed`\n\n. To wire StyleSeed into an existing project manually, use one of the options below.\n\nNew 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/`\n\n; Codex scans`.agents/skills/`\n\n.\n\n**Step 1 — Install the skills.** The portable path for every supported agent is:\n\n```\nnpx skills add bitjaru/styleseed\n```\n\nFor a manual project-local install, clone StyleSeed and copy the canonical skill folders into the path your agent scans:\n\n```\ngit clone https://github.com/bitjaru/styleseed.git /tmp/styleseed\n\n# Claude Code\nmkdir -p .claude/skills\ncp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/\n\n# Codex (repository-scoped skills)\nmkdir -p .agents/skills\ncp -r /tmp/styleseed/engine/.claude/skills/* .agents/skills/\n```\n\n**Step 2 — Start a fresh agent session**, open your project, and invoke setup:\n\n```\nClaude Code: /ss-setup\nCodex:       $ss-setup   # or open /skills and choose ss-setup\n```\n\nThe wizard then walks you through:\n\n- App type (SaaS, e-commerce, fintech...)\n- Brand color or pick a skin (Toss, Stripe, Linear, Vercel, Notion...)\n- Or fetch any brand from\n[awesome-design-md](https://github.com/VoltAgent/awesome-design-md)(58+ brands) - Font preference\n- Generates your first page automatically\n\nDon't see the skills? For Claude Code, check\n\n`.claude/skills/`\n\nand use the`/ss-`\n\nprefix. For Codex, check`.agents/skills/`\n\n, open`/skills`\n\n, or invoke`$ss-setup`\n\n. Start a new session after installing if discovery looks stale.\n\nAlready did step 1 above? These commands copy the rest of the engine into a typical `src/`\n\n-based React project. **The source folder is engine/** (replace\n\n`/tmp/styleseed`\n\nwith wherever you cloned it):\n\n```\n# Design reference + AI guide\nmkdir -p .claude\ncp /tmp/styleseed/engine/DESIGN-LANGUAGE.md .claude/DESIGN-LANGUAGE.md\ncp /tmp/styleseed/engine/CLAUDE.md          ./CLAUDE.md\n\n# Styles and components\nmkdir -p src/styles src/components\ncp -r /tmp/styleseed/engine/css/*        src/styles/\ncp -r /tmp/styleseed/engine/components/*  src/components/\n\n# Pick a skin — copy its theme.css alongside the other css files\ncp /tmp/styleseed/skins/stripe/theme.css src/styles/theme.css\nRefer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md \nand engine/DESIGN-LANGUAGE.md, then build a SaaS dashboard.\nUse skins/stripe/theme.css for the color palette.\ncp engine/.cursorrules your-project/.cursorrules\n```\n\nWant just some skills? npx skills add bitjaru/styleseed --skill ss-motion,ss-page cherry-picks.\n\nThe honest reason: **consistency comes from constraints.** If you used a bare *\"apply StyleSeed\"*\nprompt (without the plan-mode + key-color + quality-gate steps [the prompt above](#get-started-in-30-seconds)\nincludes), the agent reads a summary once and improvises — so colors land at random and there's\nno key color. The reference demo ([styleseed-demo.vercel.app](https://styleseed-demo.vercel.app))\ncame out polished because it was built with the full rules in context and iterated with\n`/ss-review`\n\n— not one-shot. Recreate those conditions:\n\n**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`\n\n(the short`llms.txt`\n\nis an index, not the 74 rules).**Lock the decisions in a file.** Run`/ss-setup`\n\n(or just ask the agent to \"write a`STYLESEED.md`\n\ndesign lock\"). It records your skin, key color, radius, and motion in`STYLESEED.md`\n\nat 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`\n\n/`AGENTS.md`\n\n/`.cursorrules`\n\nso 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`\n\nor`/ss-score`\n\n, 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.\"*\n\nMore constraints = less variance.Plan mode + a pinned key color + installed rules + a review pass is the difference between \"looks generated\" and \"looks designed.\"\n\nStyleSeed isn't only for new screens — it's **the design counterpart to a code review** for UI you\nalready shipped. If an earlier build looks *coherent but generic* (default indigo, tiny desktop\ntext, the same Lucide-icon-in-a-pale-chip on every card, no focal point):\n\n— 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-score src/…`\n\n— 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`/ss-review src/…`\n\n**≥80**.— no design lock yet? It writes a`/ss-update`\n\n→ Retrofit`STYLESEED.md`\n\n(mood, key color, font, surface) so the whole project stops drifting, then upgrades screen by screen.\n\nThe rules got stronger in [v2.5.0](https://github.com/bitjaru/styleseed/releases/tag/v2.5.0), so a\nscreen that passed the old bar may score lower now — that's the point. Fixing it is what makes it\nstop looking AI-made.\n\n```\n┌─────────────────────────────────────────────────┐\n│  StyleSeed Engine (brand-agnostic)              │\n│                                                 │\n│  74 rules · 48 components · 19 skills · motion  │\n│  Layout · Composition · Typography · UX · A11y  │\n└──────────────────────┬──────────────────────────┘\n                       │\n              Pick a skin ↓\n                       │\n    ┌──────┬──────┬──────┬──────┬──────┬─────────┐\n    │ Toss │Stripe│Linear│Vercel│Notion│ 58 more │\n    │      │      │      │      │      │(awesome)│\n    └──────┴──────┴──────┴──────┴──────┴─────────┘\n```\n\n**Engine** = how your app is structured (design intelligence)\n\n- 74 visual design rules (layout, composition, rhythm, forbidden patterns)\n- 48 React components (32 primitives + 16 patterns)\n- A named motion system (5 seeds + a copy-paste keyword library)\n- 19 cross-agent skills (setup, UI, motion, UX, accessibility)\n- Works with ANY color palette\n\n**Skin** = what your app looks like (visual identity)\n\n- Just a\n`theme.css`\n\nfile with color variables - 7 built-in skins: Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel\n- 58+ more available from\n[awesome-design-md](https://github.com/VoltAgent/awesome-design-md) - Or create your own (change\n`--brand`\n\nand you're done)\n\n**Data repos** ([awesome-design-md](https://github.com/VoltAgent/awesome-design-md)) = paint colors.\n**StyleSeed** = the rulebook for where to put the paint. Use them together: they provide the skin,\nStyleSeed provides the brain. (Full comparison in [Where StyleSeed fits](#where-styleseed-fits-among-design-ai-skills).)\n\nMost 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:\n\n**1. Seeds = personality.** Five named presets, each a spreadable framer-motion recipe in five contexts (`entrance`\n\n/ `exit`\n\n/ `hover`\n\n/ `press`\n\n/ `layout`\n\n):\n\n| Seed | Vibe | Inspiration |\n|---|---|---|\nSpring |\nbouncy, energetic, playful | Arc, Toss |\nSilk |\nsmooth, elegant, continuous | Stripe, Linear |\nSnap |\ninstant, decisive, precise | Raycast, Linear |\nFloat |\nweightless, gentle, dreamy | Apple |\nPulse |\nrhythmic, alive, punchy | Discord, music apps |\n\n``` js\nimport { spring } from \"@engine/motion\";\n\n<motion.button {...spring.hover} {...spring.press}>Save</motion.button>\n```\n\n**2. Keywords = distinctive moves.** A library of copy-paste named motions behind one handle — `toggle-flip`\n\n, `toggle-curtain`\n\n, `reveal-blur`\n\n, `pop-in`\n\n, `tilt-3d`\n\n, `magnetic`\n\n, `glow-pulse`\n\n, `confetti-pop`\n\n, `shimmer`\n\n, and more. Say the keyword while vibe coding (or run `/ss-motion toggle-flip`\n\n) and the same recipe lands in your code.\n\n▶ ** Preview & copy every motion at the live gallery →**\n·\n\n[Vibe-code your own → the motion guide](https://styleseed-demo.vercel.app/motion/guide)\n\n**3. 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:\n\n| Surface | Motion posture |\n|---|---|\nApp / dashboard / data / forms |\nCalm. No scroll-jacking, no gimmick 3D, never animate a balance. The UI gets out of the way. |\nMarketing / landing / brand pages |\nCinematic tier. Scroll-linked reveals, pinned/sticky sections, the \"product assembles as you scroll\" move, subtle parallax, a 3D/tilt hero, animated gradient/mesh or video backgrounds, rich hover — the family.co / stripe.com / linear.app playbook. |\n\nThe line StyleSeed draws: **scroll- linked** (native scroll drives it, you stay in control) is encouraged on brand pages;\n\n**scroll-**(hijacking scroll speed, trapping you) is banned everywhere. The Cinematic tier keeps its guardrails — 60fps (\n\n*jacking*`transform`\n\n/`opacity`\n\nonly), never blocks the first read or the CTA, and `prefers-reduced-motion`\n\nalways 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.\n\n(Rules: DESIGN-LANGUAGE §43 · PAGE-TYPES → Landing)\n\nAll seeds auto-respect `prefers-reduced-motion`\n\n, and the `/ss-motion`\n\nskill pulls every recipe from one source of truth — so motion stays consistent no matter who (or what) writes the code.\n\n| Skin | Style | Source |\n|---|---|---|\n|\nKorean fintech — purple, minimal, data-focused | Original |\n|\nProfessional — indigo, clean, multi-layer shadows | awesome-design-md |\n|\nDark-first — violet, minimal, developer-focused | awesome-design-md |\n|\nMonochrome — black & white, geometric | awesome-design-md |\n|\nWarm — blue accent, friendly, warm neutrals | awesome-design-md |\n|\nDark, punchy — red accent, snappy, launcher energy | awesome-design-md |\n|\nPlayful — bold gradients, rounded, expressive | awesome-design-md |\n58+ more |\nAny brand from\n|\n\n`/ss-setup`\n\n— nothing vendored\n\n```\nengine/\n├── CLAUDE.md                 # AI reads this automatically\n├── AGENTS.md                 # Codex and other AGENTS.md-compatible agents\n├── DESIGN-LANGUAGE.md        # 74 visual design rules (brand-agnostic)\n├── .claude/skills/           # 19 canonical skills (Claude: /ss-*)\n│   ├── ss-setup/             #   Interactive setup wizard\n│   ├── ss-page/              #   Scaffold pages\n│   ├── ss-component/         #   Generate components\n│   ├── ss-pattern/           #   Compose layouts\n│   ├── ss-motion/            #   Apply named motion (seeds + keywords)\n│   ├── ss-review/            #   Design compliance check\n│   ├── ss-tokens/            #   Manage tokens\n│   ├── ss-a11y/              #   Accessibility audit\n│   ├── ss-lint/              #   Quick violation scan\n│   ├── ss-score/             #   Score UI 0-100 + fix list\n│   ├── ss-update/            #   Pull latest engine\n│   ├── ss-flow/              #   Design user flows\n│   ├── ss-audit/             #   UX heuristic evaluation\n│   ├── ss-copy/              #   Generate microcopy\n│   └── ss-feedback/          #   Add loading/error/empty states\n├── motion/                   # 5 motion seeds + keyword library\n├── components/\n│   ├── ui/                   # 32 primitives (shadcn/ui + motion)\n│   └── patterns/             # 16 dashboard patterns\n├── css/                      # base.css, fonts.css, index.css\n├── tokens/                   # 6 JSON token files\n├── utils/                    # Formatting utilities\n├── icons/                    # Custom SVG icon library\n└── scaffold/                 # Vite 6 + React 18 starter\n```\n\n| Skill | What It Does |\n|---|---|\n`/ss-build` |\nThe whole loop, enforced — lock the look → build → score → fix to ≥80 → then show. Use this instead of building UI free-hand |\n`/ss-dial` |\nTurn one axis up/down deterministically — `density denser` , `radius sharper` , `color more-muted` , `weight bolder` . Moves many tokens together, keeps the guardrails, re-gates |\n`/ss-restyle` |\nRe-style to a named aesthetic — `swiss` · `editorial` · `technical` · `warm-dtc` · `minimal-mono` · `brutalist-lite` . A coherent coordinate, not a stacked filter |\n`/ss-setup` |\nInteractive wizard — pick skin, brand color, font, generates first page |\n\n| Skill | What It Does |\n|---|---|\n`/ss-component` |\nGenerate components following design conventions |\n`/ss-page` |\nScaffold pages with proper layout structure |\n`/ss-pattern` |\nCompose UI patterns (card grid, chart, list) |\n`/ss-motion` |\nApply a named motion — a seed or a keyword move (`toggle-flip` , `tilt-3d` ...) |\n`/ss-review` |\nAudit code for design system violations |\n`/ss-tokens` |\nView, add, or modify design tokens |\n`/ss-a11y` |\nAccessibility audit (WCAG 2.2 AA) |\n`/ss-lint` |\nQuick automated lint — catches common violations in seconds |\n`/ss-score` |\nScore UI quality 0-100 with a category breakdown + prioritized fix list (reads the code) |\n`/ss-verify` |\nThe visual gate — render the screen, screenshot it, score what you see (dead whitespace, unloaded fonts, no focal, blank empty states), fix + re-render |\n`/ss-update` |\nPull latest engine updates — analyzes your project and updates safely |\n\n| Skill | What It Does |\n|---|---|\n`/ss-flow` |\nDesign user flows (progressive disclosure, information pyramid) |\n`/ss-audit` |\nNielsen's 10 usability heuristics evaluation |\n`/ss-copy` |\nGenerate UX microcopy (buttons, errors, empty states, toasts) |\n`/ss-feedback` |\nAdd loading/success/error/empty states to any component |\n\n```\n/ss-setup                    # Pick skin, configure project\n/ss-page Dashboard           # Scaffold main page\n/ss-copy \"dashboard\"         # Generate all microcopy\n/ss-feedback src/Dashboard   # Add loading/error states\n/ss-audit src/Dashboard      # Check UX quality\n/ss-lint src/Dashboard       # Quick violation scan\n/ss-review src/Dashboard     # Deep design compliance check\n/ss-update                   # Pull latest engine updates\n```\n\n**New project:**\n\n```\nRefer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md \nand engine/DESIGN-LANGUAGE.md. Use skins/stripe/theme.css for colors.\nBuild a SaaS dashboard with revenue, users, and activity.\n```\n\n**Add a page (engine already in project):**\n\n```\nFollow CLAUDE.md and DESIGN-LANGUAGE.md rules.\nCreate a settings page with profile, notifications, and danger zone.\nRun /ss-review when done.\n```\n\n**Improve existing page:**\n\n```\nRefactor src/Dashboard.tsx to follow DESIGN-LANGUAGE.md.\nCheck visual rhythm (rule 61) and KPI variation (rule 62).\n```\n\n**Update engine:**\n\n```\n/ss-update\n```\n\nReact 18 · TypeScript · Tailwind CSS v4 · Radix UI · Vite 6 · Lucide Icons · CVA\n\n| StyleSeed | shadcn/ui | Tailwind UI | Material UI | Generic AI output | |\n|---|---|---|---|---|---|\n| Components | ✅ 48 | ✅ 50+ | ✅ | ✅ | ❌ |\nDesign judgment (when to use what) |\n✅ 74 rules | ❌ | ❌ | Partial | ❌ |\n| Claude Code / Cursor integration | ✅ 19 skills | ❌ | ❌ | ❌ | — |\n| Brand skins (Toss, Stripe, Linear...) | ✅ | ❌ | ❌ | ❌ | ❌ |\n| Price | Free (MIT) | Free | $299+ | Free | — |\nWorks with AI coding tools |\n✅ | Indirect | Indirect | Indirect | — |\n\n**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.\n\n**Q: Why does Claude Code / Cursor generate ugly UI?**\nBecause LLMs optimize for functional correctness, not visual refinement. They'll pick `#000`\n\nfor text, `py-4`\n\nfor spacing, `text-xl`\n\nfor everything — all technically valid, all amateur. StyleSeed gives them the rules professional designers use.\n\n**Q: Is this a shadcn/ui replacement?**\nNo — 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.\n\n**Q: Does it work with Cursor too?**\nYes. The 74 design rules live in a `.cursorrules`\n\nfile and `CLAUDE.md`\n\n. Cursor reads them automatically.\n\n**Q: How is this different from awesome-design-md?**\nawesome-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.\n\n**Q: Can I use it for a non-fintech app?**\nYes. The engine is brand-agnostic. Pick any skin, swap the brand color, ship.\n\nFull docs in the ** Wiki** — design rules reference, composition recipes, chart guides, skills reference.\n\nStyleSeed is a **living judgment framework** — the rules aren't carved in stone. If you use it and\nfind a pattern that reliably makes UI better, teach it to everyone's AI by proposing it as a rule.\n\nA good rule is a **decision + the reason it works**, written so a model can apply it — not an opinion.\n\n```\n**Rule:** Numbers are 2:1 with their unit (a 48px value over a 24px unit).\n**Why it works:** The eye locks onto magnitude first; equal sizes flatten the value into noise.\n**Source:** Refactoring UI.\n```\n\nOpen a ** \"Propose a design rule\"**\nissue, or PR it into\n\n`engine/DESIGN-LANGUAGE.md`\n\n(visual/layout) or `engine/VISUAL-CRAFT.md`\n\n(craft &\ncoherence). The judgment compounds as the community adds to it.Just a `theme.css`\n\n+ `skin.json`\n\n:\n\n```\nmkdir skins/your-brand\ncp skins/toss/theme.css skins/your-brand/theme.css   # copy a skin as a starting point\n# Change the --brand color and other values\n```\n\nBetter rules → better AI output: more specific design rules, new pattern components, accessibility improvements, new AI skills.\n\nSee [CONTRIBUTING.md](/bitjaru/styleseed/blob/main/CONTRIBUTING.md) for the full rule format and quality checklist.\n\nAlready using StyleSeed? Quick update (always safe):\n\n```\n# Pull latest\ncd styleseed && git pull\n\n# Update design rules + skills (safe — no project-specific content)\ncp styleseed/engine/DESIGN-LANGUAGE.md your-project/.claude/DESIGN-LANGUAGE.md\n# Claude Code\ncp -r styleseed/engine/.claude/skills/ your-project/.claude/skills/\n# Codex\nmkdir -p your-project/.agents/skills\ncp -r styleseed/engine/.claude/skills/* your-project/.agents/skills/\n```\n\n**Don't overwrite:** your `theme.css`\n\n(brand colors), `CLAUDE.md`\n\n(if project-specific), or customized components.\n\nFull guide: [engine/UPDATE.md](/bitjaru/styleseed/blob/main/engine/UPDATE.md)\n\n**Get notified:** Click **Watch** → **Custom** → **Releases** on this repo.\n\n- Design language inspired by\n[Toss](https://toss.im) - Components based on\n[shadcn/ui](https://ui.shadcn.com/) - Brand skins sourced from\n[awesome-design-md](https://github.com/VoltAgent/awesome-design-md) - UX principles from\n[Laws of UX](https://lawsofux.com/)and[Nielsen Norman Group](https://www.nngroup.com/)", "url": "https://wpnews.pro/news/show-hn-styleseed-a-design-rules-engine-so-ai-agents-stop-building-generic-ui", "canonical_source": "https://github.com/bitjaru/styleseed", "published_at": "2026-07-15 13:55:23+00:00", "updated_at": "2026-07-15 15:45:33.395913+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "ai-agents", "generative-ai"], "entities": ["StyleSeed", "Claude Code", "Codex", "Cursor", "Toss", "Raycast", "Arc"], "alternates": {"html": "https://wpnews.pro/news/show-hn-styleseed-a-design-rules-engine-so-ai-agents-stop-building-generic-ui", "markdown": "https://wpnews.pro/news/show-hn-styleseed-a-design-rules-engine-so-ai-agents-stop-building-generic-ui.md", "text": "https://wpnews.pro/news/show-hn-styleseed-a-design-rules-engine-so-ai-agents-stop-building-generic-ui.txt", "jsonld": "https://wpnews.pro/news/show-hn-styleseed-a-design-rules-engine-so-ai-agents-stop-building-generic-ui.jsonld"}}