概述
StyleSeed Design Review 是一个审查 UI/前端代码并解释为何界面“看起来像 AI 生成”的技能，同时给出修复方法。界面被判定为 AI 生成，通常不是因为组件难看，而是因为各部分之间不协调——混合的圆角、三种强调色、纯黑文字、缺乏层级、缺少状态、机械的文案。该技能依据一套具体的设计规则审查 UI 文件（或整个目录），给出 0–100 分，并返回按优先级排列的修复清单。它只审查和建议，不会在未要求时自动编辑或删除。
完整规则集（74 条规则）与组件见：https://github.com/bitjaru/styleseed
适用场景
- 一个 React / Tailwind / HTML 界面“看起来不对劲”、通用或未完成，但你说不清原因。
- 你想要一个设计评分或上线前检查。
- 用户要求让 UI “看起来专业/精致/有设计感，而非 AI 生成”。
- 生成 UI 之后，在交付前进行验证。
审查方法
读取文件，对以下七个类别评分（总分 100）。每个类别从满分开始，对能以行号引证的违规逐项扣分。要求具体且基于证据。
- 一致性 — 20（头号“AI 生成”特征） 每个维度只应有一种选择，并在所有地方统一应用。每个混合维度扣分：
- 混合圆角——例如直角卡片配胶囊按钮（−6）
- 使用两种或以上强调色（−5）
- 用 emoji 作为 UI 图标（如用 🚗🧺⭐ 作为列表/导航/状态/分类标记）——会引入大量不受控色彩；应使用一套 currentColor 的单线图标（−6）
- 混合阴影语言/光照方向（−3）
- 混合图标族、填充模式或描边粗细（−3）
- 控件高度不一致（按钮/输入框不同）（−3）
- 色彩规范 — 16
- 纯黑（#000 / text-black）文字——精致的黑色约为 #2A2A2A（每处 −4，上限 −8）
- 已有语义 token 却硬编码十六进制色值（每处 −2，上限 −6）
- 将正常/OK/默认（“보통”）状态用状态色而非中性灰显示（−4）
- 大多数或每一行都用状态色（缺乏严重度层级——颜色应只标记少数需要注意的项）（−4）
- 装饰性色相——金星、彩虹分类圆点、每张卡片不同颜色——而非强调色/灰色（−3）
- 仅用颜色传达状态，无图标/文字（−4）
- 对比度低于 WCAG AA（正文 4.5:1，大字/UI 3:1）（−6）
- 层级与字体 — 16
- 数字与其单位未约 2:1（48px 数字 / 24px 单位）（−4）
- 所有内容字号和字重相同，无明确主次（−5）
- 任意字号，没有尺度（−4）
- 行高错误（展示文字过松、正文过紧）（−3）
- 布局与间距 — 12
- 内容直接放在空白页面背景上，而非卡片中（−6）
- 脱离栅格的间距（7/13/19px 而非 8px 尺度）（−3）
- 组周围的间距不大于组内间距（−3）
- 同类型区块连续重复（−4）
- 状态 — 12
- 数据界面缺少空/加载/错误状态（每项 −5，上限 −10）
- 空状态没有下一步操作；错误状态只责备而不提供帮助（−4）
- UX 文案 — 12
- 按钮未说明动作（“Submit” / “OK” 而非 “Send $2,400”）（−4）
- 错误文案责备用户或使用系统腔（“Invalid input”、“An error occurred”）（−4）
- 同一概念用两个术语（delete 与 remove）；填充词（“please”、“successfully”）（−2）
- 动效与打磨 — 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
一致性 13/20 直角卡片（L22）+ 胶囊按钮（L48）；3 种强调色相 色彩规范 12/16 #000 标题（L12, 40） 层级与字体 15/16 主视觉数字/单位 1:1（L18） 布局与间距 10/12 两行相同的 KPI（L22-31） 状态 7/12 订单列表无空/加载状态 UX 文案 8/12 “Submit”按钮（L55）；“Invalid input”（L61） 动效与打磨 10/12 一处硬黑阴影（L22）
优先修复（分数提升最高）
- 统一圆角（选柔和 8–12px）+ 收敛为一种强调色 → +11 一致/色彩
- 为订单列表添加空 + 加载状态 → +7 状态
- 将“Submit”改为“Send $2,400”；“Invalid input”改为“Check the card number” → +6 文案
复查后：约 90 / 100。
规则
- 基于真实证据审查（引用行号），绝不猜测。
- 修复清单按分数提升排序，而非仅按严重度——以最快路径获得更好分数。
- 对目录：每个文件一行评分，然后对最低分文件给出完整分解。
- 不要自动编辑。该技能只测量和建议。仅在要求时应用修复。
- 将其作为质量门槛：生成 UI 后立即审查，应用修复清单，再复查直到分数超过约 80 再展示给用户——不应让初稿、不协调的 UI（彩虹状态列表、emoji 图标、两种强调色、缺少状态）到达用户。标准是下限而非上限：过 80 即交付；不要为追求 100 而拖延。
本技能基于 StyleSeed——一个开源（MIT）设计引擎，为 Claude Code、Cursor 和 Codex 提供设计判断力，让 AI 构建的 UI 不再显得像生成的。完整 74 条规则参考、组件、品牌皮肤与动效见：https://github.com/bitjaru/styleseed