| name | qa-review |
| description | 交付前五道质量检查合为一体：AI 味检测、可访问性审查、层级与节奏审查、交互状态审查、终检汇总。前四项独立检测，第五项引用前四项结果做汇总判定，不重复检测。产出最终 QAReport（含 P0/P1/P2 优先级和交付判定）。 |
| trigger | ["原型生成后，交付前","make-prototype 或 generate-variations 完成后","每次修改原型后（仅 AI 味检测部分自动触发）","用户要求做质量检查时"] |
质量检查（QA Review）
合并了五项独立检查为一个技能，按顺序执行。前四项各自检测，第五项（终检汇总）引用前四项结果，不重复检测。
触发时机
- 交付前 QA 阶段（Phase 7: QAReport）
make-prototype 完成后自动触发（仅第一项 AI 味检测）- 每次修改原型后（PatchLog 记录后，仅第一项 AI 味检测）
- 用户手动要求做质量检查
前置条件
- PrototypeSpec — 待审查的原型 HTML 文件
- DesignSystemManifest — 设计系统 Token 定义
- ComponentSpec — 组件规范（如有，来自
design-system-extract）
检查一：AI 味检测
逐项检测以下 10 项 AI slop 特征。每项给出判定结果（检测到 / 未检测到），如果检测到则给出修改建议并自动修复。
检测清单
1. 紫色或蓝紫渐变
- 检测方法：扫描 CSS 中所有
linear-gradient、radial-gradient、conic-gradient，检查色值是否落在紫/蓝紫色域（hue 240°-290°）
- 判定标准：渐变中任一色标落在紫蓝色域即为"检测到"
- 修复建议：替换为与品牌色一致的非紫蓝渐变，或改为纯色 + 微妙明暗变化
- 例外：用户在 DesignBrief 中明确要求紫蓝渐变，且在文档中注明为有意识选择
2. 三列 icon 卡片
- 检测方法：检查 HTML 结构中是否存在连续 3 个等宽卡片，每个卡片包含一个图标 + 标题 + 描述的固定模式
- 判定标准：≥3 个等宽且结构同构的 icon+title+desc 卡片出现在同一行即为"检测到"
- 修复建议：打破等宽对称——改为非对称布局（如 2+1、错落式）、用不同卡片尺寸、或合并为单一叙事区块
3. 奶油底配赤陶橙（Claude 默认审美）
- 检测方法：检查背景色是否为奶油色系（hex 近似 #FFF8F0 ~ #FAF0E6，oklch L>0.95 C<0.03），且强调色是否为赤陶橙系（hex 近似 #C66B3D ~ #D97149，oklch hue 40°-55°）
- 判定标准：背景和强调色同时命中即为"检测到"
- 修复建议：更换背景色或强调色，至少改变其中一个维度
4. 近黑底配酸性绿或朱红
- 检测方法：检查背景色是否为近黑色（L<0.15），且唯一强调色是否为酸性绿（hue 100°-140°，C>0.15）或朱红（hue 15°-35°，C>0.15）
- 判定标准：近黑底 + 单一酸性绿/朱红强调色即为"检测到"
- 修复建议：引入第二个强调色或改变色调，打破单色点缀的刻板模式
5. 报纸风零圆角
- 检测方法：检查所有组件的
border-radius 是否全部为 0 或未设置，同时检查是否使用密集多列布局（≥3列）
- 判定标准：全零圆角 + 密集多列布局同时出现即为"检测到"
- 修复建议：为卡片和按钮添加适度圆角，或减少列数
6. 默认字体（Inter、Roboto、Arial、系统字体）
- 检测方法：检查 CSS 中
font-family 声明，匹配以下黑名单：Inter、Roboto、Arial、Helvetica、system-ui、-apple-system、sans-serif（作为主字体而非 fallback）
- 判定标准：display 字体或 body 字体命中黑名单即为"检测到"
- 修复建议：根据设计系统的美学方向替换为有辨识度的字体，从 Google Fonts 或其他 CDN 引入
7. 无意义的 emoji 装饰
- 检测方法：扫描 HTML 内容中的 emoji 字符，排除品牌系统明确使用的场景
- 判定标准：emoji 出现在标题、按钮文字、导航项等非内容区域即为"检测到"
- 修复建议：替换为 SVG 图标或品牌自定义图标
8. lorem ipsum 或假数据
- 检测方法：扫描文本内容，匹配
lorem、ipsum、dolor、sit amet、consectetur、placeholder text、sample text、your text here 等模式
- 判定标准：出现上述任一模式即为"检测到"
- 修复建议：替换为与产品定位和目标用户匹配的真实文案
9. 无意义的 stock 插图
- 检测方法：检查
<img> 标签的 src 和 alt，匹配 placeholder、stock、dummy、picsum（无语义 seed）等模式
- 判定标准：图片 src 为无语义占位或 alt 为空/通用描述即为"检测到"
- 修复建议：替换为有语义 seed 的占位图（如
picsum.photos/seed/coffee-brand-hero）或真实图片
10. 千篇一律的 dashboard 布局
- 检测方法：检查布局是否为标准 dashboard 模板：顶部导航 + 左侧边栏 + 主区域 2×2 或 3×2 统计卡片网格 + 下方图表区
- 判定标准：布局结构完全匹配标准模板即为"检测到"
- 修复建议：打破网格对称——改变卡片尺寸比例、引入非卡片元素（如时间线、活动流）、重组信息层级
输出：AISlopReport
# AISlopReport
> 检测对象：{原型文件名}
> 检测时间：{日期}
> 总结：{N}/10 项检测到 AI slop 特征
| # | 检测项 | 判定 | 详情 | 修复状态 |
|---|--------|------|------|---------|
| 1 | 紫色或蓝紫渐变 | 未检测到 / 检测到 | {详情} | — / 已自动修复 |
| 2 | 三列 icon 卡片 | 未检测到 / 检测到 | {详情} | — / 已自动修复 |
| ... | ... | ... | ... | ... |
## 自动修复摘要
- {修复项1}：{修改前 → 修改后}
## 人工确认建议
- {需要用户决策的项目，如有}
自动修复规则
- 修复不改变设计系统：所有修复必须使用 DesignSystemManifest 中定义的 Token，不引入新 Token
- 修复不改变信息架构：只改视觉表现，不改内容结构和文案含义
- 修复后重新检测：自动修复后重新跑一轮检测，确保修复没有引入新的 slop
- 无法自动修复的项：标注"需人工确认"，在报告中给出具体建议但不自动执行
检查二：可访问性审查
检查以下 5 个维度，每个维度给出通过/不通过判定，不通过项给出具体修复方案。
1. 文字对比度（WCAG 标准）
检测标准：
- 正常文字（< 18px 或 < 14px bold）：对比度 ≥ 4.5:1（WCAG AA）
- 大文字（≥ 18px 或 ≥ 14px bold）：对比度 ≥ 3.0:1（WCAG AA）
- 非文字元素（图标、边框）：对比度 ≥ 3.0:1
- 推荐达到 AAA：正常文字 ≥ 7:1，大文字 ≥ 4.5:1
检测方法：遍历所有文本元素的 color 和有效背景色，计算 WCAG 对比度比值 (L1 + 0.05) / (L2 + 0.05)。对 DesignSystemManifest 中每对前景/背景色 Token 组合预计算对比度。
修复方案（不通过时）：调整前景色明度直至达标，给出具体的 oklch/hex 替换值，同步更新 DesignSystemManifest。
2. 语义化 HTML
| 检测项 | 判定标准 |
|---|
| 按钮语义 | 所有可点击元素用 <button> 或 <a>，非 <div onclick> |
| 表单标签关联 | 每个 <input> 有关联的 <label>（for/id 或包裹） |
| 标题层级 | <h1> → <h2> → <h3> 连续不跳级，每页仅一个 <h1> |
| 列表语义 | 列表内容用 <ul>/<ol> + <li> |
| 图片 alt | 装饰图 alt=""，内容图有描述性 alt |
| Landmark | 包含 <header>、<nav>、<main>、<footer> |
| ARIA | 动态组件有正确 ARIA 属性（role="dialog" 等） |
3. 键盘可达性
| 检测项 | 判定标准 |
|---|
| Tab 顺序 | 不使用正整数 tabindex，DOM 顺序即视觉顺序 |
| 可聚焦 | 所有 <button>/<a>/<input> 默认可聚焦 |
| Focus ring 可见 | ≥2px 可见焦点指示器，对比度 ≥3:1 |
| 跳过导航 | ≥3 个导航项时必须有 skip link |
| 键盘陷阱 | 模态框/下拉可用 Esc/Tab 关闭或退出 |
| 快捷键冲突 | 不使用单一字母键作为快捷键 |
4. 动效偏好
| 检测项 | 判定标准 |
|---|
| prefers-reduced-motion | CSS 包含 @media (prefers-reduced-motion: reduce) |
| 动效降级 | reduced-motion 内 transition-duration: 0.01ms 或 animation: none |
| 自动播放 | 无自动播放大段动画（≥2秒） |
| 闪烁内容 | 无 >3Hz 闪烁（防光敏癫痫） |
5. 表单设计
| 检测项 | 判定标准 |
|---|
| 必填项标注 | 视觉标记 + required 属性 |
| 错误信息 | 具体说明问题，通过 aria-describedby 关联 |
| 错误状态视觉 | 边框/背景变色 + 文字提示 + 图标，不仅依赖颜色 |
| label 位置 | label 在 input 上方或左侧，紧邻 |
| placeholder | 不替代 label |
| 提交反馈 | 加载/成功/失败三种状态都有明确反馈 |
输出：AccessibilityReport
# AccessibilityReport
> 审查对象：{原型文件名}
> 审查时间：{日期}
> 总结：{通过项数}/{总项数} 通过
## 1. 文字对比度
| 元素 | 前景 | 背景 | 对比度 | 要求 | 判定 |
...
## 2-5. {其他维度}
...
## 修复汇总
- 自动修复：{N} 项
- 需人工确认：{N} 项
注意：对比度不通过的修复需要调整 Token 值，属于设计系统变更，必须提示用户确认。如果原型不含表单，跳过第 5 项并标注"不适用"。
检查三：层级与节奏审查
检查 4 个维度，每个维度给出通过/需改进判定，需改进项给出具体修改建议和具体值。
1. 视觉层级
- 大小层级：标题层级字号递减，相邻比 ≥ 1.2，无相同字号不同语义，无跳跃过大（比 > 2.0）
- 权重层级：标题与正文字重差 ≥ 200，粗体仅用于强调（一屏内 ≤ 3 处非标题粗体）
- 颜色层级：主/次/辅助文本 oklch L 值差 ≥ 0.10，强调色面积 < 15%，不仅靠颜色区分信息
- 位置层级：核心内容在首屏可见区域，CTA 在阅读路径自然终点
- 密度层级：密度分布均匀或有意识渐变，无局部密度突变
2. 节奏感
- 间距标尺遵循：所有
padding/margin/gap 都是标尺中的值，零野生间距值
- 垂直节奏：Section 间距 > Block 间距 > Element 间距，递减关系，无异常间距
- 重复模式变化：完全相同重复 ≥ 4 次时有变化（交替色、间距变化、特殊项突出），布局有节奏
- 喘息空间：至少 1 个占整屏 30%+ 的留白区域，容器内 padding ≥ 间距标尺 md 值
3. 色彩权重
- 强调色面积：强调色面积 < 15% 总可见面积
- 强调色用途：仅用于 CTA 按钮、关键数据、选中状态、重要提示
- 色彩平衡：大面积低饱和 + 小面积高饱和，一屏内 ≤ 4 种独立色相，60:30:10 法则
4. 排版节奏
- 字号梯度连续性：字号构成连续梯度（无跳级），比例一致，无野生字号
- 行高舒适度：标题 1.1-1.3，正文 1.5-1.7，长文本不过紧（< 1.4）或过松（> 1.8）
- 段间距一致性：段间距一致，段间距 = 1.5-2x 行高
输出：HierarchyRhythmReport
# HierarchyRhythmReport
> 审查对象：{原型文件名}
## 1. 视觉层级
| 子项 | 判定 | 详情 | 修改建议 |
## 2. 节奏感
## 3. 色彩权重
## 4. 排版节奏
## 总结
- 总通过率：{通过项}/{总项}
- P1（建议修复）：{N} 项
- P2（可选优化）：{N} 项
## 修改建议汇总
1. {建议1}
2. {建议2}
检查四：交互状态审查
逐个遍历原型中所有交互元素，检查是否包含完整的状态集。缺失状态必须补齐。
状态集定义
| 状态 | 必须性 | 视觉要求 |
|---|
| default | 必须 | 默认外观 |
| hover | 必须 | 明显视觉变化（背景色变化、阴影提升、微缩放等） |
| active / pressed | 必须 | 按下反馈（缩放 0.97、颜色加深、阴影减弱） |
| focus | 必须 | 可见 focus ring（≥2px outline 或 box-shadow，对比度 ≥ 3:1） |
| disabled | 必须 | 视觉弱化但不消失（opacity 0.4-0.6，cursor: not-allowed） |
| loading | 条件必须 | 触发异步操作的元素有加载状态 |
| error | 条件必须 | 表单验证元素有错误状态（边框变色 + 文字提示 + 图标） |
检测方法
- 识别交互元素：
<button>、<a>、<input>、<select>、<textarea>、<[role="button"]>、<[tabindex]>
- 逐元素状态检查：检查 CSS 中是否定义了对应状态样式
- focus ring 专项：检查
:focus/:focus-visible，是否有 outline 或 box-shadow，对比度 ≥ 3:1，不存在 outline: none 无替代
- hover/active 差异：hover 和 active 不应完全相同
自动修复规则
- focus：自动添加
:focus-visible，使用设计系统强调色作为 ring 色
- disabled：自动添加
:disabled，设置 opacity: 0.5 和 cursor: not-allowed
- error：自动添加
.is-error，使用设计系统 danger 色
- hover/active 差异：相同则为 active 添加
transform: scale(0.97)
- loading：不自动修复（需了解异步逻辑），在报告中建议
修复后重新检查，确保所有必须状态已补齐。
输出：InteractionStatesReport
# InteractionStatesReport
> 交互元素总数：{N}
> 缺失状态总数：{M}
## 元素状态矩阵
| # | 元素 | 类型 | default | hover | active | focus | disabled | loading | error |
## 缺失状态详情
### 元素 1: {描述}
- **缺失 focus**: {修复建议 + CSS 代码}
## focus ring 专项检查
## hover/active 差异检查
## 自动修复汇总
## 需人工确认
检查五：终检汇总（引用前四项，不重复检测）
核心原则：本步骤只汇总，不重新检测。所有检测数据来自前四项的报告结果。
执行内容
- 收集前四项报告：AISlopReport、AccessibilityReport、HierarchyRhythmReport、InteractionStatesReport
- 补充终检独有项（前四项未覆盖的）：
- 过渡动画：所有
transition 的 duration 是否在 0.2s-0.3s（微交互）；页面转场可到 0.4s 但需注明
- 反馈即时性：按钮点击即时反馈、表单提交 loading 状态、异步操作加载指示器
- 悬停目标大小：可点击元素实际触控区域（含 padding）≥ 44px × 44px（移动端）
- 汇总 P0/P1/P2 问题清单：
- P0（阻塞交付）：categories 非法、必填字段缺失、双语字段缺失、artifacts 文件不存在、对比度严重不达标、focus ring 完全缺失
- P1（建议修复）：description 不符合三段式、产物内容空洞、prompt 目标不清晰、对比度 AA 不通过、状态缺失、间距野生值
- P2（可选优化）：标签可更精准、排版可更好、行高微调、段间距微调
- 交付判定：
- 可以交付：所有问题已修复或确认为可接受
- 需修复后交付：存在 P0 问题，修复后重新检查
- 不可交付：存在多个 P0 问题或设计系统一致性严重破坏
输出：最终 QAReport
# QAReport（最终）
> 原型：{文件名}
> 检查时间：{日期}
> 设计系统版本：{DesignSystemManifest 版本}
---
## 一、AI 味检测
> 引用 AISlopReport
- AI slop 检出：{N}/10 项
- 自动修复：{N} 项
- 状态：通过 / 需人工确认
## 二、可访问性审查
> 引用 AccessibilityReport
- 通过率：{通过项}/{总项}
- 状态：通过 / 需修复
## 三、层级与节奏审查
> 引用 HierarchyRhythmReport
- 总通过率：{通过项}/{总项}
- 状态：通过 / 需改进
## 四、交互状态审查
> 引用 InteractionStatesReport
- 交互元素：{N}，缺失状态：{M}
- 状态：通过 / 需修复
## 五、终检独有项
| 子项 | 判定 | 详情 | 建议 |
|------|------|------|------|
| 过渡动画 | {判定} | {详情} | {建议} |
| 反馈即时性 | {判定} | {详情} | {建议} |
| 悬停目标大小 | {判定} | {详情} | {建议} |
---
## 总结
- 总通过率：{通过项数}/{总项数}
- 需修复项：{N}
- 阻塞交付的问题：{N}
### 修复优先级
1. **P0（阻塞交付）**：{问题列表}
2. **P1（建议修复）**：{问题列表}
3. **P2（可选优化）**：{问题列表}
### 交付判定
- [ ] **可以交付** — 所有问题已修复或确认为可接受
- [ ] **需修复后交付** — 存在 P0 问题，修复后重新检查
- [ ] **不可交付** — 存在多个 P0 问题或设计系统一致性严重破坏
注意事项
- 前四项检查可独立调用（用户只想查某一项时），但终检汇总必须在前四项都完成后执行
- 所有"需改进"项必须给出具体的修改建议和具体值，不能只说"需要改进"
- 自动修复仅限于不改变设计系统 Token 值的安全修复（如添加
aria 属性、补全 alt 文本、添加 focus 样式）
- 对比度不通过的修复需要调整 Token 值，属于设计系统变更，必须提示用户确认
- 修复后的 CSS 必须使用 DesignSystemManifest 中的 Token，不引入新 Token
- 如果用户在 DesignBrief 中明确要求使用某项被禁止的风格，该检测项标注"用户明确要求，跳过"但仍然记录
- 终检独有项的过渡动画 0.2s-0.3s 标准适用于微交互；页面转场动画可以到 0.4s，但需在报告中注明
