kscz0000 设计评分
何时使用
当你需要按 StyleSeed 设计语言对 UI 文件的设计质量进行 0-100 评分时使用本技能 — 包含分类细分、最严重问题清单与按优先级排序的修复列表。/ss-review 的量化版本。
/ss-review 告诉你"哪里有问题"。/ss-score 告诉你"整体质量如何"
以及"先修什么" — 一个数字加上分类细分，让你像跟踪测试覆盖率
一样跟踪 UI 质量。
何时不使用
- 提交前需要快速通过/失败判定 → 使用
/ss-lint - 需要带修复建议的完整散文式审查 → 使用
/ss-review - 非 UI 文件（逻辑、配置） — 评分无意义
评分对象
按六个加权类别对文件（或目录中的每个文件）进行评分，类别与 设计语言对应。总分 = 100。
| 类别 | 权重 | 依据 |
|---|---|---|
| 色彩规范 | 18 | DESIGN-LANGUAGE §1、§18、§72 + VISUAL-CRAFT §C4 |
| 层级与字体 | 18 | §2、§3、§4、§16 + 字体大小表 + VISUAL-CRAFT §C2 |
| 布局与节奏 | 14 | §13、§14、§15、§61 + VISUAL-CRAFT §C1 |
| 卡片与层次 | 12 | §7、§8、§12、§1 + VISUAL-CRAFT §C3 |
| 状态与可访问性 | 18 | §11、§70、§71、§72 + VISUAL-CRAFT §C3 |
| 动效与交互 | 8 | §24、§59 + engine/motion |
| 一致性 | 12 | VISUAL-CRAFT §C0（每个轴一种选择） |
如何为每个类别评分
对每个类别，从满分开始，逐项扣分，依据来自阅读代码时发现的问题。 必须具体、基于证据 — 注明行号。
色彩规范（20） — 扣分项：出现任何 #000/text-black（每处 −4，上限 −8）；
装饰性使用多于一种强调色（−5）；使用 emoji 作为 UI 图标（多色，破坏单一强调色）
（−5）；正常/OK/"보통"状态使用状态色而非中性灰（−4）；大多数/每行都使用
状态色（无严重程度分层）（−4）；装饰性色相（金色星星、彩虹类别点）
替代强调色/灰色（−3）；存在语义令牌时使用硬编码十六进制色（每处 −2，上限 −6）；
仅靠颜色传达状态（−4）。
层级与字体（20） — 扣分项：数字/单位未遵循 ~2:1（−4）；字体大小
不符合字体大小表 / 字号使用 text-[var(--…)]（−5）；所有元素字重相同，
无明确主次（−5）；正文字距过紧或行高错误（−3）。
布局与节奏（15） — 扣分项：内容直接置于裸背景上，未放入卡片中
（−6）；使用 px-4/px-8/mx-4 而非 px-6/mx-6（−3）；相同区块
类型在行内重复（−4）；缺少 space-y-6 节奏（−3）。
卡片与层次（15） — 扣分项：用 1px 边框承担本应由色调+阴影承担的 分隔工作（−4）；阴影透明度超过 ~8% / 明显过重（−4）；卡片/背景之间 无色调分层（−5）。
状态与可访问性（20） — 扣分项：数据型界面缺少空/加载/错误状态
（每项 −5，上限 −10）；正文对比度低于 4.5:1 / 大字体低于 3:1（−6）；
触摸目标 < 44px（−4）；无可见焦点 / 使用 outline:none（−5）；
仅图标控件缺少 aria-label（−3）。
动效与交互（8） — 扣分项：使用随机/临时淡入淡出而非命名的
seed/keyword（−3）；动效延迟内容呈现或阻塞操作（−4）；自定义动效
未处理 prefers-reduced-motion（−3）；滚动联动/视差（§59 禁止）（−5）。
一致性（12） — "每个轴一种选择"的法则（VISUAL-CRAFT §C0）。对
文件中混乱而非统一的每个轴扣分：圆角风格混用，例如硬角面板 + 胶囊按钮
（−5）；使用两种及以上互相竞争的强调色来强调（−4）；阴影语言/
光源方向混用（−3）；图标族、填充模式或描边粗细混用（−3）；嵌套元素
使用与父级相同圆角而非 inner = outer − padding（−2）；按钮/输入框
控件高度不一致（−2）。该类别最能预测"看起来像 AI 生成的" —
权衡证据是系统级一致性，而非单个组件的好看程度。
每个类别下限为 0。汇总为总分。
输出格式
## Design Score: 70 / 100 (src/app/Dashboard.tsx)
████████████████░░░░░░ C-
Color discipline 13/18 ▓▓▓░ #000 headings (l.12,40); orange+blue+green accents (l.28-34)
Hierarchy & typography 15/18 ▓▓▓▓ number/unit 1:1 on hero (l.18)
Layout & rhythm 11/14 ▓▓▓░ two identical KPI rows (l.22-31)
Cards & elevation 8/12 ▓▓░░ 1px borders doing separation (l.22)
States & a11y 11/18 ▓▓░░ no empty/loading state; focus ring missing (l.55)
Motion & interaction 6/8 ▓▓▓░ default fade, not a named seed
Coherence 6/12 ▓▓░░ sharp cards (l.22) + pill buttons (l.48); 3 accent hues (§C0)
### Fix first (highest score gain)
1. Add empty + loading states to the orders list → +7 states (§71)
2. Unify radius (pick soft 8-12px) + collapse to one accent → +9 coherence+color (§C0, §2)
3. Drop the 1px borders, use tone + ≤8% shadow → +4 cards (§7)
Re-score after: ~92 / 100.
使用字母等级：90+ A · 80-89 B · 70-79 C · 60-69 D · <60 F。
门控模式（作为向用户展示 UI 之前的质量门）
质量门（CLAUDE.md / AGENTS.md）是将 /ss-score 作为循环运行，而非一次性
执行：
- 对刚生成的 UI 进行评分。
- 若 < 80，应用"先修复"清单（使用
/ss-review完成编辑），然后重新评分。 - 重复最多约 3 轮，或直到 ≥ 80。
- 展示最终评分和一行"fixed: …"给用户。
通过门槛是底线，不是上限 — 达到 ≥ 80 就停；不要追求 100。目的在于 没有任何一份初稿就明显不协调的 UI 到达用户。尤其绝不能以 低于 80 分的状态交付：彩虹色状态列表、emoji 图标、两种强调色或缺少状态 — 这些正是此门控要拦截的典型信号。
规则
- 阅读文件 — 基于真实证据（行号）评分，绝不猜测。
- "先修复"清单按分数提升幅度排序，而非仅按严重程度 — 目标是 以最快路径获得更好的分数。
- 对目录，输出每个文件一行评分，再展示得分最低文件的完整细分。
- 在普通评分模式下不要自动编辑。
/ss-score用于度量；/ss-review与/ss-motion用于修复。 在门控模式（如上）下，需进行"修复-重评分"循环直到达到门槛。 - 作为门控，≥ 80 是向用户展示前的底线 — 但不要过度打磨：为了追求 95→100 而延迟交付，不如交付一个干净的 85。
局限性
- 仅当任务与上游来源及本地项目上下文明确匹配时使用本技能。
- 在应用更改前，请验证命令、生成的代码、依赖、凭据和外部服务行为。
- 不要将示例视为环境特定测试、安全审查或用户对破坏性/高成本操作的批准的替代品。