Back to Details

styleseed-design-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

StyleSeed Design Review

StyleSeed 设计评审

Overview

概述

A UI reads as "AI-generated" not because the components are ugly, but because the parts don't agree with each other — mixed corner radii, three accent colors, pure-black text, no hierarchy, missing states, robotic copy. This skill reviews a UI file (or a whole directory) against a concrete design rubric, scores it 0–100, and returns a prioritized fix list. It reviews and recommends; it never edits or deletes without you asking.
Full rule set (74 rules) and components: https://github.com/bitjaru/styleseed
一个UI看起来像“AI生成的”，并非因为组件丑陋，而是因为各个部分不协调——圆角半径混杂、三种强调色、纯黑文本、缺乏层级、缺失状态、生硬的文案。本技能会根据明确的设计准则评审UI文件（或整个目录），给出0-100分的评分，并返回按优先级排序的修复清单。它仅做评审和建议，未经你请求绝不会编辑或删除内容。
完整规则集（74条规则）及组件：https://github.com/bitjaru/styleseed

When to use

使用场景

  • A React / Tailwind / HTML UI "looks off," generic, or unfinished and you can't say why.
  • You want a design score / pre-ship check.
  • The user asks to make UI "look professional / polished / designed, not AI-generated."
  • After generating UI, to verify it before shipping.
  • React / Tailwind / HTML UI看起来不协调、通用化或未完成，但你说不清原因。
  • 你需要设计评分/上线前检查。
  • 用户要求让UI“看起来专业/精致/人工设计而非AI生成”。
  • 生成UI后，在上线前进行验证。

How to review

评审方法

Read the file(s). Score these seven categories (total 100); start each at full marks and subtract for violations you can cite by line. Be specific and evidence-based.
读取文件。对以下七个类别进行评分（总分100）；每个类别初始为满分，根据你能定位到行号的违规项扣分。评分需具体且基于证据。

1. Coherence — 20 (the #1 "AI-generated" tell)

1. 一致性 — 20分（判断“AI生成”的首要标志）

One choice per axis, applied everywhere. Deduct for each mixed axis:
  • mixed corner radii — e.g. a sharp card with pill buttons (−6)
  • two or more accent colors used for emphasis (−5)
  • emoji used as UI icons (🚗🧺⭐ as list/nav/status/category markers) — injects many uncontrolled hues; use one line-icon set in currentColor (−6)
  • mixed shadow languages / light directions (−3)
  • mixed icon families, fill modes, or stroke weights (−3)
  • inconsistent control heights (buttons/inputs differ) (−3)
每个维度保持单一选择，并全局应用。每个混杂维度扣分：
  • 圆角半径混杂——例如尖锐边角的卡片搭配胶囊按钮（扣6分）
  • 使用两种或更多强调色用于突出（扣5分）
  • 用表情符号作为UI图标（🚗🧺⭐作为列表/导航/状态/分类标记）——引入大量不受控色调；应使用统一的线性图标集并继承currentColor（扣6分）
  • 阴影风格/光照方向混杂（扣3分）
  • 图标家族、填充模式或描边粗细混杂（扣3分）
  • 控件高度不一致（按钮/输入框高度不同）（扣3分）

2. Color discipline — 16

2. 色彩规范 — 16分

  • pure black (
    #000
    / 
    text-black
    ) text — the refined black is ~
    #2A2A2A
    (−4 each, cap −8)
  • hardcoded hex where a semantic token exists (−2 each, cap −6)
  • a normal / OK / default ("보통") state shown in a status color instead of neutral grey (−4)
  • status color on most/every row (no severity hierarchy — color should mark the minority that needs attention) (−4)
  • decorative hues — gold stars, rainbow category dots, a different color per card — instead of accent/grey (−3)
  • status conveyed by color alone, no icon/text (−4)
  • contrast below WCAG AA (4.5:1 body, 3:1 large/UI) (−6)
  • 纯黑（
    #000
    / 
    text-black
    ）文本——精致的黑色应为
    #2A2A2A
    左右（每次扣4分，最高扣8分）
  • 存在语义化令牌却硬编码十六进制颜色（每次扣2分，最高扣6分）
  • 正常/默认状态使用状态色显示而非中性灰色（扣4分）
  • 大多数/每一行都使用状态色（没有严重程度层级——颜色应标记需要关注的少数项）（扣4分）
  • 装饰性色调——金色星星、彩虹色分类点、每张卡片不同颜色——而非使用强调色/灰色（扣3分）
  • 仅通过颜色传达状态，无图标/文本辅助（扣4分）
  • 对比度低于WCAG AA标准（正文4.5:1，大文本/UI元素3:1）（扣6分）

3. Hierarchy & typography — 16

3. 层级与排版 — 16分

  • number and its unit not ~2:1 (48px number / 24px unit) (−4)
  • everything the same size and weight, no clear primary (−5)
  • arbitrary font sizes; no scale (−4)
  • wrong line-height (loose on display, cramped on body) (−3)
  • 数字与单位的大小比例未达到约2:1（如48px数字/24px单位）（扣4分）
  • 所有元素大小和字重相同，无明确的主视觉（扣5分）
  • 字体大小随意，无统一比例（扣4分）
  • 行高错误（标题行高过松，正文行高过挤）（扣3分）

4. Layout & spacing — 12

4. 布局与间距 — 12分

  • content on a bare page background, not in cards (−6)
  • off-grid spacing (7/13/19px instead of an 8px scale) (−3)
  • the gap around a group not larger than the gap inside it (−3)
  • the same section type repeated in a row (−4)
  • 内容直接放在页面背景上，未置于卡片内（扣6分）
  • 非网格间距（使用7/13/19px而非8px倍数的间距规范）（扣3分）
  • 组外间距不大于组内间距（扣3分）
  • 同一类型的区块连续重复排列（扣4分）

5. States — 12

5. 状态处理 — 12分

  • missing empty / loading / error state on a data surface (−5 each, cap −10)
  • empty state with no next action; error that blames instead of helping (−4)
  • 数据展示区域缺失空状态/加载状态/错误状态（每个扣5分，最高扣10分）
  • 空状态无后续操作指引；错误状态仅归咎问题而非提供帮助（扣4分）

6. UX writing — 12

6. UX文案 — 12分

  • buttons that don't name the action ("Submit" / "OK" instead of "Send $2,400") (−4)
  • error copy that blames or uses system-speak ("Invalid input", "An error occurred") (−4)
  • two terms for one concept (delete vs remove); filler words ("please", "successfully") (−2)
  • 按钮未明确说明操作内容（用“提交”/“确定”而非“转账2400美元”）（扣4分）
  • 错误文案归咎用户或使用系统术语（如“无效输入”、“发生错误”）（扣4分）
  • 同一概念使用两种表述（删除vs移除）；存在冗余词（如“请”、“成功地”）（扣2分）

7. Motion & polish — 12

7. 动效与精致度 — 12分

  • ad-hoc fades instead of one consistent, named feel (−3)
  • motion that delays content or blocks an action (−4)
  • no 
    prefers-reduced-motion
    handling on custom motion (−3)
  • a single hard black shadow instead of a layered, low-opacity, tinted one (−2)
Clamp each category at 0; sum to a total. Bands: 90+ A · 80–89 B · 70–79 C · 60–69 D · <60 F.
  • 使用临时的淡入淡出效果而非统一的、命名的动效风格（扣3分）
  • 动效延迟内容加载或阻碍操作（扣4分）
  • 自定义动效未处理
    prefers-reduced-motion
    （扣3分）
  • 使用单一的纯黑阴影而非分层、低透明度、带色调的阴影（扣2分）
每个类别最低分为0；累加得到总分。评分等级：90+分 优秀（A）· 80–89分 良好（B）· 70–79分 中等（C）· 60–69分 及格（D）· <60分 不及格（F）

Output format

输出格式

undefined
undefined

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

设计评分: 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)
一致性 13/20 尖锐边角卡片（第22行）+ 胶囊按钮（第48行）；3种强调色调 色彩规范 12/16 标题使用#000纯黑（第12、40行） 层级与排版 15/16 首页数字与单位比例为1:1（第18行） 布局与间距 10/12 两行相同的KPI区块（第22-31行） 状态处理 7/12 订单列表无空状态/加载状态 UX文案 8/12 “提交”按钮（第55行）；“无效输入”提示（第61行） 动效与精致度 10/12 使用单一纯黑阴影（第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.
undefined
  1. 统一圆角半径（选择8–12px的柔和圆角）+ 合并为一种强调色 → 一致性/色彩规范+11分
  2. 为订单列表添加空状态+加载状态 → 状态处理+7分
  3. 将“提交”重命名为“转账2400美元”；将“无效输入”改为“请检查卡号” → UX文案+6分
修复后预估评分: ~90 / 100.
undefined

Rules

规则

  • Review from real evidence (cite line numbers); never guess.
  • Order the fix list by score gain, not severity alone — fastest path to a better number.
  • For a directory: one-line score per file, then the lowest file's full breakdown.
  • Don't auto-edit. This skill measures and recommends. Apply fixes only when asked.
  • Use it as a quality gate: review right after generating UI, apply the fix list, and re-review until the score clears ~80 before showing the user — no first-draft, incoherent UI (rainbow status lists, emoji icons, two accents, missing states) should reach them. The bar is a floor, not a ceiling: clear 80 and ship; don't chase 100 to delay.
Based on StyleSeed — an open-source (MIT) design engine that gives Claude Code, Cursor, and Codex design judgment so AI-built UI stops looking generated. Full 74-rule reference, components, brand skins, and motion: https://github.com/bitjaru/styleseed
  • 基于真实证据进行评审（标注行号）；绝不猜测。
  • 修复清单按分数提升幅度排序，而非仅按严重程度——以最快路径提升评分。
  • 若评审目录：每个文件给出一行评分，然后展示得分最低文件的完整评审细节。
  • 不要自动编辑。本技能仅做评估和建议。仅在收到请求时再应用修复。
  • 将其作为质量门槛：生成UI后立即评审，应用修复清单，重新评审直到评分达到80分以上再展示给用户——绝不能让初稿、不协调的UI（彩虹色状态列表、表情符号图标、两种强调色、缺失状态）送达用户。80分是底线而非上限：达到80分即可上线；不要为追求100分而延误进度。
基于StyleSeed——一个开源（MIT协议）的设计引擎，为Claude Code、Cursor和Codex提供设计判断力，让AI构建的UI不再看起来像生成的。完整的74条规则参考、组件、品牌皮肤和动效：https://github.com/bitjaru/styleseed