Show HN: StyleSeed – a design-rules engine so AI agents stop building generic UI
By bitjaru0402
AI 摘要
Hacker News 讨论热度 24 points · 9 comments
原文正文
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
Same product, six looks — each one /ss-restyle <preset> away. Coherent, distinct, never generic.
Get Started · Engine + Skins · Motion · Skills · Wiki · 한국어
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/styleseedInstalls 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.
- 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
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