# UI Score

> 按 StyleSeed 设计语言对 UI 文件的设计质量进行 0-100 评分 — 包含分类细分、最严重问题清单与按优先级排序的修复列表。`/ss-review` 的量化版本。UI 评分、UX 评分、设计质量、可用性评分、style score、设计审查、设计度量。

- Skill: `kscz0000/ui-score` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kscz0000/ui-score`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kscz0000/ui-score/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: kscz0000 (https://skillmd.com/u/kscz0000)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/kscz0000/ui-score

---


# 设计评分
## 何时使用

当你需要按 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` 作为循环运行，而非一次性
执行：

1. 对刚生成的 UI 进行评分。
2. 若 **< 80**，应用"先修复"清单（使用 `/ss-review` 完成编辑），然后**重新评分**。
3. 重复最多约 3 轮，或直到 ≥ 80。
4. 展示最终评分和一行"fixed: …"给用户。

通过门槛是**底线，不是上限** — 达到 ≥ 80 就停；不要追求 100。目的在于
没有任何一份初稿就明显不协调的 UI 到达用户。尤其绝不能以
低于 80 分的状态交付：彩虹色状态列表、emoji 图标、两种强调色或缺少状态 —
这些正是此门控要拦截的典型信号。

## 规则

- **阅读文件** — 基于真实证据（行号）评分，绝不猜测。
- "先修复"清单按**分数提升幅度**排序，而非仅按严重程度 — 目标是
  以最快路径获得更好的分数。
- 对目录，输出每个文件一行评分，再展示得分最低文件的完整细分。
- 在普通评分模式下不要自动编辑。`/ss-score` 用于度量；`/ss-review` 与 `/ss-motion` 用于修复。
  在**门控模式**（如上）下，需进行"修复-重评分"循环直到达到门槛。
- 作为*门控*，≥ 80 是向用户展示前的底线 — 但不要过度打磨：为了追求
  95→100 而延迟交付，不如交付一个干净的 85。

## 局限性

- 仅当任务与上游来源及本地项目上下文明确匹配时使用本技能。
- 在应用更改前，请验证命令、生成的代码、依赖、凭据和外部服务行为。
- 不要将示例视为环境特定测试、安全审查或用户对破坏性/高成本操作的批准的替代品。