Show HN: StyleSeed——让 AI Agent 停止生成千篇一律 UI 的设计规则引擎

你的 AI 写的 UI 看起来就像 AI 写的。

StyleSeed 是解决这个问题的设计引擎。

为 Claude Code · Codex · Cursor · vibe coding 提供设计判断力——让输出不再有生成痕迹。

同一个组件，三种品牌 DNA。 同一聊天 UI 在 Toss · Raycast · Arc 之间变换——颜色、圆角、动效、阴影、渐变全部由 StyleSeed 设计令牌驱动。只需一个 data-skin 属性。

皮肤是_灵感取自_的令牌集——品牌风格的颜色/圆角/阴影/动效值，并非这些公司设计语言的复制品。真正重构实际设计的层是预设（下方的 /ss-restyle）。

每一项设计-AI 技能让你的 UI 协调一致。StyleSeed 还要对抗_千篇一律的 AI 风格_——并执行下去。

判断力，而非数据——设计师如何_思考_，不是一个调色板合集 · 打击 AI 特征——默认靛蓝色、图标芯片俗套、模板布局、彩虹列表 · 评分质量门——在你看之前就评审并修复至 ≥80/100 · 每一个 Agent——内置 CLAUDE.md + AGENTS.md + .cursorrules · 一个防止漂移的设计锁 · 免费 & MIT 许可证

完整页面：之前 · 之后 · 更多前后对比 →

🔥 我们用自家质量门跑了一遍_本页面_的早期版本。评分 58/100 → 这里是成绩单

同一产品，六种外观——只需 /ss-restyle <预设>。连贯、独特、绝不千篇一律。

开始使用 · 引擎 + 皮肤 · 动效 · 技能 · 维基 · 한국어

---

30 秒快速开始

最快的方式——把下面这句话粘贴给 Claude Code、Codex、Cursor 或任何 AI Agent。它会安装 StyleSeed _并_运行整套流程：

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.

为什么提示词要先安装： 质量门是让输出不再千篇一律的关键一步——但 ss-score 和 ss-build 技能只有在安装后才能_运行_。只把规则 URL 丢给 Agent，“门控”就会降级为它通常跳过的自觉型自检。安装让循环真正生效：设计锁持久保存在 STYLESEED.md 中（无漂移），门控在你看之前真正评分并修复。无法安装？规则 URL 仍然能教会它——只是弱一些。支持 Claude Code (CLAUDE.md)、Codex / Amp / Gemini CLI (AGENTS.md) 和 Cursor (.cursorrules)——StyleSeed 全都提供。（先做规划是防止结果看起来随意的关键——参见故障排除。）

加载 StyleSeed 后你的 Agent 实际会怎么做：

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.

STYLESEED.md 锁定是防漂移机制。 你的皮肤、主色、圆角和动效会一次写入，规则会让每个 Agent 在_每次_提示时都重新读取并遵守——这样设计就不会每次会话都不一样。质量门随后会在你看之前自评并修复 UI（彩虹列表、两个强调色、缺失的状态），而且它也能改造旧的通用构建。

规则就是产品——无需安装或权限。 它们是纯 Markdown（CLAUDE.md / AGENTS.md / DESIGN-LANGUAGE.md），所以上面的提示——或者直接复制这些文件——就能实现 StyleSeed 90% 的效果，无需任何批准。

还需要 19 个 ss-* Agent 技能吗？（可选的自动化：设置向导、评审、评分）

npx skills add bitjaru/styleseed

安装全部 19 个技能到 Claude Code、Codex、Cursor、Gemini CLI、Amp 等。然后在 Claude Code 中运行 /ss-setup，或在 Codex 中运行 $ss-setup（你也可以从 Codex 的 /skills 选择器中选择）。你的 Agent 可能要求你批准首次使用的工具。无法安装？单靠规则仍能完成核心工作。

你的 Agent，它的确切路径：

你的智能体	读取文件	最快安装
Claude Code	CLAUDE.md + /ss-* 技能	npx skills add bitjaru/styleseed
Cursor	.cursorrules	cp engine/.cursorrules .cursorrules——或粘贴上方提示
Codex	AGENTS.md + $ss-* 技能（.agents/skills）	npx skills add bitjaru/styleseed
Amp · Gemini CLI	AGENTS.md + 技能	npx skills add bitjaru/styleseed
Windsurf · Copilot · 任何其他	上方粘贴提示	无需安装——粘贴即用

更多路径（手动复制、Cursor、awesome-design-md 品牌）见下方“手动安装”。

---

• 你让 Claude Code 或 Cursor 构建仪表板，结果看起来很业余
• 你在 vibe coding 一个 SaaS 应用，不想雇设计师
• 你用 shadcn/ui 但输出还是感觉千篇一律
• 你想实现 Toss 风格 的精致，又不想自己逆向工程
• 你正在为设计构建 Claude Code 技能 或 Cursor 规则 设置
• 你用 AI 快速交付，需要不显 AI 痕迹的专业 UI

StyleSeed 在设计-AI 技能中的定位

现在有很多“帮你 AI 设计”的项目。大多解决一部分问题。StyleSeed 是针对整个_“看起来像 AI 生成的”_问题——并强制执行修复的那个。

StyleSeed	品牌 / DESIGN.md 合集	“让它更好看”技能	UI 生成器（Claude Design, v0…）
教授设计判断力（设计师如何_思考_）	✅	❌ 只有数据	⚠️ 少量提示
对抗 AI 风格本身——默认靛蓝、图标芯片俗套、模板布局、彩虹列表	✅	❌	❌
评分质量门——在你看之前评审 + 修复 UI	✅	❌	❌
防漂移设计锁——决策跨会话持久保留	✅	❌	❌
跨所有 Agent 工作（Claude Code · Cursor · Codex · Amp · Gemini）	✅	⚠️	⚠️
品牌皮肤 + 命名动效系统	✅	⚠️ 只有颜色	❌
免费 & MIT	✅	✅	通常

它们并非都是竞争关系——DESIGN.md 能给 StyleSeed 提供一套皮肤；生成器能给它一个初稿。StyleSeed 是其他工具所不具备的判断 + 执行层。

它实际执行什么（一瞥）

那些资深设计师不假思索就能做出的具体、具名判断——写下来让 AI 每次都执行：

• 精炼的黑是 #2A2A2A，不是 #000——一个 5 阶灰度色阶，绝不用纯黑
• 一个强调色，其他全用灰色——单强调色法则；出现第二种色调是最快的“非设计”信号
• 数字与单位保持 2:1 比例——48px 的值配 24px 的单位；等大尺寸会把层次压平成噪音
• 嵌套圆角法则：内层 = 外层 − 内边距——同心圆角，让卡片和它内部的按钮圆角协调
• 分层、低透明度阴影（≤8%），从单一方向投射——不用一个生硬的投影
• 等宽数字用于任何会变动的数值——值变化时宽度不跳
• 状态色 = 仅表严重性——“正常”行是灰色；颜色标记例外，绝不做彩虹列表
• 不使用 emoji 图标，也不在每个卡片上放浅灰色 Lucide 图标（§CC-9b）——两种对立的 AI 图标通病
• 8px 空间网格；一组周围的间隙 > 内部的间隙——通过亲近感体现结构
• 光学对齐，而非像素对齐——微调箭头/播放图标；按大写高度居中文字
• 桌面正文字号 ≥16px，每屏一个焦点——紧凑的移动端比例和全偶数网格都显得“机器味”
• 一个圆角个性 · 一个图标集 · 一种阴影语言——连贯性法则（§C0），解决“看起来像 AI 生成的”第一要素
• 动效按界面区域限定——仪表板保持平静；着陆页用_电影级_（滚动联动揭示、3D 主视觉、动态渐变——Stripe/Linear 的风格）。滚动_劫持_仍然被处处禁止（§43）

查看全部 74 条规则 → · 工艺与连贯法则 →

每个“帮助 LLM 更好设计”的项目都解决了问题的错误部分。它们给模型喂更多设计数据——品牌调色板、字体规格、阴影令牌、组件库。我最开始也试过。把 Toss 整个设计令牌 JSON 塞进提示。输出还是千篇一律。

后来我恍然大悟：拿着 Toss 调色板的初级设计师依然会做出丑陋的仪表板。只有灰色调的资深设计师却能做出精致的东西。 区别不在于他们有什么。而在于他们知道该怎么用。

设计数据是颜料。设计判断力是知道该往哪里落笔。

查看前后对比 →——同一个仪表板需求，通用生成 vs. 应用 74 条规则之后。每个修正都标注了背后的规则。

StyleSeed 是一个设计引擎——74 条视觉规则、48 个组件、一套命名动效系统和 19 个 Agent 技能，教给 LLM 的是判断力，而不仅仅是数据：

"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."
"N

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

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.

TheSTYLESEED.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 19ss-* 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.

---

• 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 →

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

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:

1. Claude Design generates the layout and components (fast scaffolding)
2. StyleSeed's 74 rules refine the output (design judgment layer)
3. 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 frontend-design | StyleSeed
---|---|---
Gets you a coherent screen | ✅ | ✅
Names & bans the generic-AI tells | — | ✅ by name (default indigo, icon-chip, rainbow lists…)
Scored gate that fixes before you see it | — | ✅ /ss-score loops to ≥80
Locks decisions so they don't drift across prompts | — | ✅ STYLESEED.md
Presets + dials to move the whole look at once | — | ✅ /ss-restyle, /ss-dial

Official gets you coherent. StyleSeed keeps you from looking templated. Run the official skill to scaffold, then let StyleSeed's gate refine and enforce.

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:

npx skills add bitjaru/styleseed

For a manual project-local install, clone StyleSeed and copy the canonical skill folders into the path your agent scans:

git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed

# Claude Code
mkdir -p .claude/skills
cp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/

# Codex (repository-scoped skills)
mkdir -p .agents/skills
cp -r /tmp/styleseed/engine/.claude/skills/* .agents/skills/

Step 2 — Start a fresh agent session , open your project, and invoke setup:

Claude Code: /ss-setup
Codex:       $ss-setup   # or open /skills and choose ss-setup

The wizard then walks you through:

1. App type (SaaS, e-commerce, fintech...)
2. Brand color or pick a skin (Toss, Stripe, Linear, Vercel, Notion...)
3. Or fetch any brand from awesome-design-md (58+ brands)
4. Font preference
5. 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.

Already did step 1 above? These commands copy the rest of the engine into a typical src/-based React project. The source folder isengine/ (replace /tmp/styleseed with wherever you cloned it):

# Design reference + AI guide
mkdir -p .claude
cp /tmp/styleseed/engine/DESIGN-LANGUAGE.md .claude/DESIGN-LANGUAGE.md
cp /tmp/styleseed/engine/CLAUDE.md          ./CLAUDE.md

# Styles and components
mkdir -p src/styles src/components
cp -r /tmp/styleseed/engine/css/*        src/styles/
cp -r /tmp/styleseed/engine/components/*  src/components/

# Pick a skin — copy its theme.css alongside the other css files
cp /tmp/styleseed/skins/stripe/theme.css src/styles/theme.css

Option 3: Just give AI the URL

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

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:

1. 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.
2. 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.
3. 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).
4. 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.)
5. Be specific: "Build a dashboard in the Linear skin, one blue accent, Snap motion, following StyleSeed's rules" beats "build a dashboard."
6. 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):

1. /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).
2. /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.
3. /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

┌─────────────────────────────────────────────────┐
│  StyleSeed Engine (brand-agnostic)              │
│                                                 │
│  74 rules · 48 components · 19 skills · motion  │
│  Layout · Composition · Typography · UX · A11y  │
└──────────────────────┬──────────────────────────┘
                       │
              Pick a skin ↓
                       │
    ┌──────┬──────┬──────┬──────┬──────┬─────────┐
    │ Toss │Stripe│Linear│Vercel│Notion│ 58 more │
    │      │      │      │      │      │(awesome)│
    └──────┴──────┴──────┴──────┴──────┴─────────┘

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.)

Flashy, named, copy-paste moves — live at/motion

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:

1. Seeds = personality. Five named presets, each a spreadable framer-motion recipe in five contexts (entrance / exit / hover / press / layout):

Seed	Vibe	Inspiration
Spring	bouncy, energetic, playful	Arc, Toss
Silk	smooth, elegant, continuous	Stripe, Linear
Snap	instant, decisive, precise	Raycast, Linear
Float	weightless, gentle, dreamy	Apple
Pulse	rhythmic, alive, punchy	Discord, music apps

import { spring } from "@engine/motion";

<motion.button {...spring.hover} {...spring.press}>Save</motion.button>

2. 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

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:

Surface	Motion posture
App / dashboard / data / forms	Calm. No scroll-jacking, no gimmick 3D, never animate a balance. The UI gets out of the way.
Marketing / landing / brand pages	Cinematic 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.

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.

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
raycast	Dark, punchy — red accent, snappy, launcher energy	awesome-design-md
arc	Playful — bold gradients, rounded, expressive	awesome-design-md
58+ more	Any brand from awesome-design-md	Auto-fetched via /ss-setup — nothing vendored

engine/
├── CLAUDE.md                 # AI reads this automatically
├── AGENTS.md                 # Codex and other AGENTS.md-compatible agents
├── DESIGN-LANGUAGE.md        # 74 visual design rules (brand-agnostic)
├── .claude/skills/           # 19 canonical skills (Claude: /ss-*)
│   ├── ss-setup/             #   Interactive setup wizard
│   ├── ss-page/              #   Scaffold pages
│   ├── ss-component/         #   Generate components
│   ├── ss-pattern/           #   Compose layouts
│   ├── ss-motion/            #   Apply named motion (seeds + keywords)
│   ├── ss-review/            #   Design compliance check
│   ├── ss-tokens/            #   Manage tokens
│   ├── ss-a11y/              #   Accessibility audit
│   ├── ss-lint/              #   Quick violation scan
│   ├── ss-score/             #   Score UI 0-100 + fix list
│   ├── ss-update/            #   Pull latest engine
│   ├── ss-flow/              #   Design user flows
│   ├── ss-audit/             #   UX heuristic evaluation
│   ├── ss-copy/              #   Generate microcopy
│   └── ss-feedback/          #   Add loading/error/empty states
├── motion/                   # 5 motion seeds + keyword library
├── components/
│   ├── ui/                   # 32 primitives (shadcn/ui + motion)
│   └── patterns/             # 16 dashboard patterns
├── css/                      # base.css, fonts.css, index.css
├── tokens/                   # 6 JSON token files
├── utils/                    # Formatting utilities
├── icons/                    # Custom SVG icon library
└── scaffold/                 # Vite 6 + React 18 starter

Skill	What It Does
/ss-build	The whole loop, enforced — lock the look → build → score → fix to ≥80 → then show. Use this instead of building UI free-hand
/ss-dial	Turn one axis up/down deterministically — density denser, radius sharper, color more-muted, weight bolder. Moves many tokens together, keeps the guardrails, re-gates
/ss-restyle	Re-style to a named aesthetic — swiss · editorial · technical · warm-dtc · minimal-mono · brutalist-lite. A coherent coordinate, not a stacked filter
/ss-setup	Interactive wizard — pick skin, brand color, font, generates first page
Skill	What It Does
---	---
/ss-component	Generate components following design conventions
/ss-page	Scaffold pages with proper layout structure
/ss-pattern	Compose UI patterns (card grid, chart, list)
/ss-motion	Apply a named motion — a seed or a keyword move (toggle-flip, tilt-3d...)
/ss-review	Audit code for design system violations
/ss-tokens	View, add, or modify design tokens
/ss-a11y	Accessibility audit (WCAG 2.2 AA)
/ss-lint	Quick automated lint — catches common violations in seconds
/ss-score	Score UI quality 0-100 with a category breakdown + prioritized fix list (reads the code)
/ss-verify	The visual gate — render the screen, screenshot it, score what you see (dead whitespace, unloaded fonts, no focal, blank empty states), fix + re-render
/ss-update	Pull latest engine updates — analyzes your project and updates safely

UX — Design It Right (No Designer Needed)

Skill	What It Does
/ss-flow	Design user flows (progressive disclosure, information pyramid)
/ss-audit	Nielsen's 10 usability heuristics evaluation
/ss-copy	Generate UX microcopy (buttons, errors, empty states, toasts)
/ss-feedback	Add loading/success/error/empty states to any component

/ss-setup                    # Pick skin, configure project
/ss-page Dashboard           # Scaffold main page
/ss-copy "dashboard"         # Generate all microcopy
/ss-feedback src/Dashboard   # Add loading/error states
/ss-audit src/Dashboard      # Check UX quality
/ss-lint src/Dashboard       # Quick violation scan
/ss-review src/Dashboard     # Deep design compliance check
/ss-update                   # Pull latest engine updates

New project:

Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md 
and engine/DESIGN-LANGUAGE.md. Use skins/stripe/theme.css for colors.
Build a SaaS dashboard with revenue, users, and activity.

Add a page (engine already in project):

Follow CLAUDE.md and DESIGN-LANGUAGE.md rules.
Create a settings page with profile, notifications, and danger zone.
Run /ss-review when done.

Improve existing page:

Refactor src/Dashboard.tsx to follow DESIGN-LANGUAGE.md.
Check visual rhythm (rule 61) and KPI variation (rule 62).

Update engine:

React 18 · TypeScript · Tailwind CSS v4 · Radix UI · Vite 6 · Lucide Icons · CVA

StyleSeed vs. the alternatives

| StyleSeed | shadcn/ui | Tailwind UI | Material UI | Generic AI output
---|---|---|---|---|---
Components | ✅ 48 | ✅ 50+ | ✅ | ✅ | ❌
Design judgment (when to use what) | ✅ 74 rules | ❌ | ❌ | Partial | ❌
Claude Code / Cursor integration | ✅ 19 skills | ❌ | ❌ | ❌ | —
Brand skins (Toss, Stripe, Linear...) | ✅ | ❌ | ❌ | ❌ | ❌
Price | Free (MIT) | Free | $299+ | Free | —
Works with AI coding tools | ✅ | Indirect | Indirect | Indirect | —

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.

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.

Full docs in the Wiki — design rules reference, composition recipes, chart guides, skills reference.

Field notes — the thinking behind the rules

Longer-form writing on why AI-built UI looks the way it does (and what actually fixed it):

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.

**Rule:** Numbers are 2:1 with their unit (a 48px value over a 24px unit).
**Why it works:** The eye locks onto magnitude first; equal sizes flatten the value into noise.
**Source:** Refactoring UI.

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.

Just a theme.css + skin.json:

mkdir skins/your-brand
cp skins/toss/theme.css skins/your-brand/theme.css   # copy a skin as a starting point
# Change the --brand color and other values

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.

Already using StyleSeed? Quick update (always safe):

# Pull latest
cd styleseed && git pull

# Update design rules + skills (safe — no project-specific content)
cp styleseed/engine/DESIGN-LANGUAGE.md your-project/.claude/DESIGN-LANGUAGE.md
# Claude Code
cp -r styleseed/engine/.claude/skills/ your-project/.claude/skills/
# Codex
mkdir -p your-project/.agents/skills
cp -r styleseed/engine/.claude/skills/* your-project/.agents/skills/

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.

MIT