styleseed-design-review

StyleSeed 设计审查

概述

界面给人“AI 生成”的感觉，并不是因为组件难看，而是因为各个部分彼此不协调——圆角半径混杂、强调色有三种、文字纯黑、缺少层级、状态缺失、文案机械。本技能会依据具体的设计规范，审查一个 UI 文件（或整个目录），给出 0–100 的评分，并返回按优先级排序的修复清单。它只会审查并提出建议；未经你的要求，绝不会编辑或删除内容。

完整规则集（74 条规则）和组件：https://github.com/bitjaru/styleseed

适用场景

• React / Tailwind / HTML 界面“看起来不对”、过于普通或尚未完成，但你说不清原因。
• 你想要设计评分或发布前检查。
• 用户要求让 UI “看起来专业、精致、有设计感，而不是 AI 生成的”。
• UI 生成后，在发布前进行验证。

审查方法

阅读文件。对以下七个类别评分（总分 100）；每个类别从满分开始，针对可引用行号的违规项扣分。具体且基于证据。

1. 一致性 — 20（最能体现“AI 生成”感的问题）

每个维度只采用一种选择，并在所有地方一致应用。每种混用情况均扣分：

• 圆角半径混杂，例如锐利的卡片搭配胶囊按钮（−6）
• 强调内容时使用两种或更多强调色（−5）
• 将 emoji 用作 UI 图标（🚗🧺⭐ 作为列表 / 导航 / 状态 / 类别标记）——会引入大量不可控的色彩；应使用一套采用 currentColor 的线性图标（−6）
• 阴影风格 / 光照方向混杂（−3）
• 图标系列、填充模式或描边粗细混杂（−3）
• 控件高度不一致（按钮 / 输入框高度不同）（−3）

2. 色彩规范 — 16

• 文字使用纯黑（#000 / text-black）——更精致的黑色约为 #2A2A2A（每处 −4，最多扣 8 分）
• 存在语义化令牌时仍使用硬编码十六进制颜色（每处 −2，最多扣 6 分）
• 正常 / 正常 / 默认（“보통”）状态使用状态色，而不是中性灰色（−4）
• 大多数 / 每一行都使用状态色（没有严重程度层级——颜色应标记少数需要关注的项目）（−4）
• 使用装饰性色调——例如金色星星、彩虹类别圆点、每张卡片使用不同颜色，而不是强调色 / 灰色（−3）
• 仅通过颜色传达状态，没有图标 / 文本（−4）
• 对比度低于 WCAG AA（正文 4.5:1，大号文字 / UI 3:1）（−6）

3. 层级与排版 — 16

• 数字与单位的字号比例未达到约 2:1（48px 数字 / 24px 单位）（−4）
• 所有内容字号和字重相同，没有明确的主次关系（−5）
• 字号随意，没有级数规范（−4）
• 行高不合适（展示文字过松，正文过挤）（−3）

4. 布局与间距 — 12

• 内容直接放在裸露的页面背景上，而非卡片中（−6）
• 间距偏离网格（使用 7 / 13 / 19px，而不是 8px 间距级数）（−3）
• 组外间距不大于组内间距（−3）
• 连续重复相同类型的区块（−4）

5. 状态 — 12

• 数据界面缺少空白 / 加载 / 错误状态（每项 −5，最多扣 10 分）
• 空白状态没有下一步操作；错误提示只会指责而没有帮助（−4）

6. UX 文案 — 12

• 按钮没有明确说明操作（例如用“提交” / “确定”代替“发送 $2,400”）（−4）
• 错误文案带有指责意味或使用系统术语（“输入无效”“发生错误”）（−4）
• 同一概念使用两种说法（删除 vs 移除）；使用填充词（“请”“成功地”）（−2）

7. 动效与润色 — 12

• 随意添加淡入淡出效果，而非采用一种统一、明确的动效风格（−3）
• 动效延迟内容显示或阻碍操作（−4）
• 自定义动效未处理 prefers-reduced-motion（−3）
• 仅使用单层、纯黑的硬阴影，而非多层、低不透明度、带色调的阴影（−2）

每个类别最低计为 0 分；将各类别分数相加得出总分。等级：90+ A · 80–89 B · 70–79 C · 60–69 D · <60 F。

输出格式

## Design Score: 72 / 100   (src/Dashboard.tsx)   C

Coherence            13/20   sharp cards (l.22) + pill buttons (l.48); 3 accent hues
Color discipline     12/16   #000 headings (l.12, 40)
Hierarchy & type     15/16   number/unit 1:1 on hero (l.18)
Layout & spacing     10/12   two identical KPI rows (l.22-31)
States                7/12   no empty/loading state on the orders list
UX writing            8/12   "Submit" button (l.55); "Invalid input" (l.61)
Motion & polish      10/12   one hard black shadow (l.22)

### Fix first (highest score gain)
1. Unify radius (pick soft 8–12px) + collapse to one accent   → +11 coherence/color
2. Add empty + loading states to the orders list              → +7  states
3. Rename "Submit" → "Send $2,400"; "Invalid input" → "Check the card number" → +6 copy

Re-score after: ~90 / 100.

规则

• 根据真实证据进行审查（引用行号）；绝不猜测。
• 按分数提升幅度排列修复清单，而不只是按严重程度排列——以最快的方式提高分数。
• 对于目录：为每个文件提供一行评分，然后详细分析得分最低的文件。
• **不要自动编辑。**此技能用于衡量和提出建议。只有在用户要求时才应用修复。
• 将其用作质量门槛：生成 UI 后立即审查，应用修复清单，然后重新审查，直到分数超过约 80 再展示给用户——不要让未经润色、前后不一致的 UI（彩虹色状态列表、表情符号图标、两种强调色、缺少状态）出现在用户面前。80 分是底线，不是上限：达到 80 分就交付；不要为了追求 100 分而拖延。

---

基于 StyleSeed——一款开源（MIT）设计引擎，为 Claude Code、Cursor 和 Codex 提供设计判断力，让 AI 构建的 UI 不再显得像机器生成。完整的 74 条规则参考、组件、品牌皮肤和动态效果：https://github.com/bitjaru/styleseed