用「香醇咖啡屋」预约页的真实案例,演示 UI Quality Inspector 如何拦截 AI 生成代码里的 10 类典型缺陷:初版 0 分被拒收,修复 AI 消费机器可读的修复指令后复检 100 分通过。全程零人工判断,判定可逐条复现。
这是独立开发者在接单场景里的标准流程:AI 干活 → 引擎验收 → 不过就修 → 过了交付。质检官(UI Quality Inspector)取代了人肉逐行看代码,用量化红线给判定。
闭环的差异化:引擎只报不改,输出机器可读修复指令(fixInput),修复仍由生成侧 AI 完成——这避免了"质检工具替你改代码"的越界风险,也让修复 AI 有明确的消费输入。
同一份需求、同一个页面的两个版本。左侧是 AI 初版(0 分拒收),右侧是修复后的交付版(100 分通过)。截图来自真实浏览器渲染。
P0 硬门槛未过(3 项 P0 违规),判定拒绝交付,不进入评分。
P0 全过、P1 警告 0 处,扣分后 100 分,达到可交付标准。
AI 初版检出的 10 条缺陷(以真实质检报告 ai-v1.md 为准),引擎全部检出,命中规则逐条可查:
| # | 缺陷 | 规则 | 级别 | 修复方向 |
|---|---|---|---|---|
| 1 | emoji 当图标(☕) | A-01 emoji 禁用 | P0 | 替换为 SVG 图标 |
| 2 | :root 外裸 HEX ×9 | A-02 裸 HEX 色值 | P0 | 改为 var(--token) 引用 |
| 3 | img 缺 alt(1 处无 alt) | A-09 img alt 必填 | P0 | img 补 alt 描述 |
| 4 | 间距非 4px 倍数(13px) | A-11 间距 4px 倍数 | P1 | 就近取 4px 倍数标准值 |
| 5 | AI 默认渐变(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] |
| 8 | picsum 占位图 ×3 | D-04 占位图源 | P1 | 替换为真实/本地图源 |
| 9 | 默认字体栈(Arial) | D-06 默认字体栈 | P1 | 替换为中文字体栈 |
| 10 | 缺 favicon | D-09 缺 favicon | P1 | 补 favicon |
数据来源:真实质检报告 ai-v1.md(轨道 A 违规 7 项含 3 P0,轨道 D 违规 3 项,合计 10 条)——全部 FAIL 均带 evidence,判定可逐条复现。
质检报告以 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": [ ... 全部可消费的修复指令 ... ]
}
# 初版质检(应 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 指到可写的工作目录。