UI Quality Inspector · 接活验收闭环示例

AI 交付 → 质检 REJECT → 修复 → 复检 EXCELLENT
一个真实接活场景的完整闭环

用「香醇咖啡屋」预约页的真实案例,演示 UI Quality Inspector 如何拦截 AI 生成代码里的 10 类典型缺陷:初版 0 分被拒收,修复 AI 消费机器可读的修复指令后复检 100 分通过。全程零人工判断,判定可逐条复现。

0 分
AI 初版判定 REJECT(3 P0 + 7 P1)
100 分
修复后复检 EXCELLENT(P0/P1 全过)
10 / 10
埋入缺陷检出率 100%
退出码 1 → 0
CI 门禁可直接消费的判定信号

01接活验收闭环

这是独立开发者在接单场景里的标准流程:AI 干活 → 引擎验收 → 不过就修 → 过了交付。质检官(UI Quality Inspector)取代了人肉逐行看代码,用量化红线给判定。

STEP 1
AI 交付初版
ai-v1.html · 埋了 10 类 AI 典型缺陷
STEP 2
质检 REJECT
0 分 · P0 硬门槛未过 · 退出码 1
STEP 3
修复 AI 消费 fixInput
读机器可读修复指令,10 条全消费
STEP 4
复检 EXCELLENT
100 分 · P0/P1 全过 · 退出码 0

闭环的差异化:引擎只报不改,输出机器可读修复指令(fixInput),修复仍由生成侧 AI 完成——这避免了"质检工具替你改代码"的越界风险,也让修复 AI 有明确的消费输入。

02真实渲染对比

同一份需求、同一个页面的两个版本。左侧是 AI 初版(0 分拒收),右侧是修复后的交付版(100 分通过)。截图来自真实浏览器渲染。

AI 初版 · ai-v1.html REJECT
ai-v1 真实渲染截图
0 分

P0 硬门槛未过(3 项 P0 违规),判定拒绝交付,不进入评分。

  • emoji 当图标(☕)
  • :root 外裸 HEX ×9
  • img 缺 alt / 占位图源 / 默认字体栈
  • 间距、字号、圆角非标准值
  • AI 默认渐变 / 缺 favicon
screenshots/ai-v1.png · 真实浏览器渲染
修复版 · ai-v2.html EXCELLENT
ai-v2 真实渲染截图
100 分

P0 全过、P1 警告 0 处,扣分后 100 分,达到可交付标准。

  • 设计令牌 :root 全部就位
  • SVG 图标替代 emoji / 占位图
  • 间距、字号、圆角全部标准值
  • favicon + 语义化标题齐备
screenshots/ai-v2.png · 真实浏览器渲染

0310 类缺陷 · 检出明细

AI 初版检出的 10 条缺陷(以真实质检报告 ai-v1.md 为准),引擎全部检出,命中规则逐条可查:

#缺陷规则级别修复方向
1emoji 当图标(☕)A-01 emoji 禁用P0替换为 SVG 图标
2:root 外裸 HEX ×9A-02 裸 HEX 色值P0改为 var(--token) 引用
3img 缺 alt(1 处无 alt)A-09 img alt 必填P0img 补 alt 描述
4间距非 4px 倍数(13px)A-11 间距 4px 倍数P1就近取 4px 倍数标准值
5AI 默认渐变(135deg 紫粉)A-12 渐变黑名单P1替换为品牌色渐变
6非标准字号(15/17/13px)A-14 字号标准值P1就近取 [12,14,16,18,20,24,32]
7圆角非标准值(10/6/12px)A-16 圆角标准值P1就近取 [0,4,8,12,16,24,9999]
8picsum 占位图 ×3D-04 占位图源P1替换为真实/本地图源
9默认字体栈(Arial)D-06 默认字体栈P1替换为中文字体栈
10缺 faviconD-09 缺 faviconP1补 favicon

数据来源:真实质检报告 ai-v1.md(轨道 A 违规 7 项含 3 P0,轨道 D 违规 3 项,合计 10 条)——全部 FAIL 均带 evidence,判定可逐条复现。

04机器可读的修复指令

质检报告以 JSON 为主输出(人读 Markdown 为辅)。修复 AI 直接消费 JSON 里的 fixInput 逐条修复,不依赖人工解读。

// ai-v1.json(片段示意,完整内容见同目录 .json)
{
  "verdict": "REJECT",
  "score": 0,
  "exitCode": 1,
  "issues": [
    { "rule": "A-01", "severity": "P0", "count": 1,
      "evidence": ["<h1>☕ 香醇咖啡屋</h1>"],
      "fix": "将 emoji 替换为 SVG 图标" }
  ],
  "fixInput": [ ... 全部可消费的修复指令 ... ]
}

05怎么复现

# 初版质检(应 REJECT,退出码 1)
node engine/index.js 05-交付/示例-宠物医院接活闭环/ai-v1.html --out=./reports

# 复检(应 EXCELLENT,退出码 0)
node engine/index.js 05-交付/示例-宠物医院接活闭环/ai-v2.html --out=./reports

注意:05-交付/ 在 skill 包内可能只读,复现时把 --out 指到可写的工作目录。