@umacloud/knowledge 1.0.1

package/design/02-playbooks/design-review-playbook.md

@@ -0,0 +1,388 @@
+---
+id: design-review-playbook
+title: 设计评审作战手册 (Design Review Playbook)
+domain: design
+category: 02-playbooks
+difficulty: intermediate
+tags: [design, issue, playbook, review, 严重程度, 列表, 前置条件, 搜索结果页缺少空状态设计]
+quality_score: 70
+last_updated: 2026-06-15
+---
+# 设计评审作战手册 (Design Review Playbook)
+
+## 概述
+
+本手册定义了设计评审的完整流程，涵盖评审准备、六大评审维度（一致性、可用性、无障碍、响应式、性能、品牌）、评审模板、反馈格式和跟踪机制。目标是在设计交付开发前拦截问题，减少返工成本。
+
+## 前置条件
+
+### 必须满足
+
+- [ ] 设计稿已在 Figma / Sketch 中完成至少 High-Fidelity 程度
+- [ ] 设计稿覆盖所有核心用户流程（Happy Path + Edge Cases）
+- [ ] 已定义 Design System / Token 基础（颜色、字体、间距）
+- [ ] PRD 已确认，需求无歧义
+- [ ] 已指定评审参与者（设计师、前端开发、PM、QA）
+
+### 建议满足
+
+- [ ] 有可点击的交互原型（Figma Prototype）
+- [ ] 已标注关键的微交互动画
+- [ ] 有竞品分析作为评审参考
+- [ ] 移动端与桌面端设计稿齐备
+
+---
+
+## 步骤一：评审准备
+
+### 1.1 评审发起者（设计师）准备清单
+
+```
+评审前 48 小时
+├── 1. 整理设计稿链接，确保权限可访问
+├── 2. 编写设计说明文档
+│   ├── 设计目标与用户场景
+│   ├── 关键设计决策及理由
+│   ├── 与前版设计的差异对比
+│   └── 已知的取舍和限制
+├── 3. 准备评审材料
+│   ├── 用户流程图（User Flow）
+│   ├── 关键页面标注（间距 / 字号 / 颜色 Token）
+│   ├── 交互状态说明（Default / Hover / Active / Disabled / Error / Loading / Empty）
+│   └── 响应式断点设计（Mobile / Tablet / Desktop）
+├── 4. 发送评审邀请
+│   ├── 附上设计稿链接
+│   ├── 附上设计说明文档
+│   ├── 明确评审范围（全局评审 / 局部评审）
+│   └── 建议评审关注点
+└── 5. 预约评审会议（45-60 分钟）
+```
+
+### 1.2 评审参与者准备清单
+
+```
+评审前 24 小时
+├── 1. 通读设计说明文档
+├── 2. 浏览设计稿，标记初步反馈（Figma Comment）
+├── 3. 对照 PRD 检查需求覆盖度
+├── 4. 从自身角色视角准备问题
+│   ├── 前端：实现可行性、组件复用性、性能影响
+│   ├── PM：需求满足度、业务逻辑完整性
+│   ├── QA：边界状态覆盖、可测试性
+│   └── 设计：一致性、可用性、美观度
+└── 5. 记录发现的问题（按严重程度分类）
+```
+
+---
+
+## 步骤二：六大评审维度
+
+### 2.1 一致性（Consistency）
+
+评审设计稿与 Design System 的一致性。
+
+| 检查项 | 判定标准 | 严重程度 |
+|--------|---------|:-------:|
+| 颜色使用 Token | 所有颜色引用 Design Token，无硬编码 HEX 值 | HIGH |
+| 字体层级 | 标题/正文/辅助文字符合 Typography Scale 定义 | HIGH |
+| 间距系统 | 间距使用 4px / 8px 基准网格 | MEDIUM |
+| 组件复用 | 使用 Design System 中已有组件，不重复造轮子 | HIGH |
+| 图标风格 | 图标风格统一（线性/填充/粗细/圆角） | MEDIUM |
+| 圆角一致 | 相同层级的卡片/按钮圆角值一致 | LOW |
+| 阴影层级 | 阴影使用预定义的 Elevation Token | LOW |
+| 交互模式 | 相同功能的交互方式一致（如删除确认方式） | HIGH |
+
+```markdown
+# 一致性检查示例
+
+## 问题：颜色硬编码
+- 位置：首页 Banner 标题
+- 当前：#1A73E8（硬编码）
+- 应该：使用 Token `color-primary-600`
+- 严重程度：HIGH
+- 原因：品牌色调整时此处不会自动更新
+```
+
+### 2.2 可用性（Usability）
+
+评审设计是否易用、直觉、高效。
+
+| 检查项 | 判定标准 | 严重程度 |
+|--------|---------|:-------:|
+| 操作反馈 | 每个操作有明确的成功/失败/加载反馈 | HIGH |
+| 错误提示 | 错误信息具体、可操作（非"发生错误"） | HIGH |
+| 空状态 | 列表/搜索空状态有引导文案和操作入口 | MEDIUM |
+| 加载状态 | 长操作有 Loading / Skeleton 提示 | HIGH |
+| 撤销机制 | 破坏性操作有确认弹窗或撤销能力 | HIGH |
+| 表单验证 | 实时校验 + 行内错误提示，非提交后弹窗 | MEDIUM |
+| 导航可预测 | 用户能清楚知道自己在哪、能去哪、怎么回来 | HIGH |
+| 信息层级 | 页面信息主次分明，核心操作突出 | MEDIUM |
+| 手势操作 | 移动端的滑动/长按等手势有视觉暗示 | LOW |
+| 文案清晰 | 按钮和标签文案明确，避免"确定"等模糊词 | MEDIUM |
+
+```markdown
+# 可用性检查示例
+
+## 问题：删除操作无确认
+- 位置：文章管理 > 删除按钮
+- 当前：点击后直接删除
+- 建议：添加确认弹窗 "确认删除《文章标题》？此操作不可撤销。"
+- 严重程度：HIGH
+- 原因：误触风险高，数据不可恢复
+```
+
+### 2.3 无障碍（Accessibility / A11y）
+
+评审设计是否符合 WCAG 2.1 AA 标准。
+
+| 检查项 | 判定标准 | 严重程度 |
+|--------|---------|:-------:|
+| 颜色对比度 | 正文 >= 4.5:1，大文字 >= 3:1 (WCAG AA) | HIGH |
+| 不仅靠颜色传达信息 | 状态除颜色外有图标/文字辅助区分 | HIGH |
+| 焦点可见 | Tab 导航时焦点环清晰可见 | HIGH |
+| 触摸目标 | 移动端可点击区域 >= 44x44px | MEDIUM |
+| 文字可缩放 | 字号使用相对单位（rem），200% 缩放不破版 | MEDIUM |
+| 表单标签 | 每个表单字段有可见的 Label | HIGH |
+| 图片替代文字 | 功能性图片有 alt 描述 | MEDIUM |
+| 键盘可操作 | 所有功能可通过键盘完成 | HIGH |
+| 动画减弱 | 支持 prefers-reduced-motion 媒体查询 | LOW |
+| 语义结构 | 标题层级有序（h1 > h2 > h3），不跳级 | MEDIUM |
+
+```markdown
+# 无障碍检查示例
+
+## 问题：按钮颜色对比度不足
+- 位置：登录页 > 次要按钮
+- 当前：文字 #999999 + 背景 #F5F5F5，对比度 2.8:1
+- 建议：文字改为 #666666，对比度 5.7:1
+- 严重程度：HIGH
+- 标准：WCAG 2.1 AA 要求正文对比度 >= 4.5:1
+```
+
+### 2.4 响应式（Responsive Design）
+
+评审设计在不同屏幕尺寸下的表现。
+
+| 检查项 | 判定标准 | 严重程度 |
+|--------|---------|:-------:|
+| 断点定义 | 覆盖 Mobile (375px+) / Tablet (768px+) / Desktop (1280px+) | HIGH |
+| 布局切换 | 每个断点的布局策略明确（栅格列数、侧边栏折叠） | HIGH |
+| 导航适配 | 移动端有 Hamburger Menu / Bottom Nav 方案 | HIGH |
+| 图片适配 | 大图在移动端缩放或裁切方案明确 | MEDIUM |
+| 表格适配 | 宽表格在移动端的处理方案（横滑/折叠/卡片化） | MEDIUM |
+| 触摸优化 | 移动端按钮间距足够，避免误触 | MEDIUM |
+| 文字截断 | 长文本的截断策略（省略号/折行/展开） | LOW |
+| 弹窗适配 | 弹窗在移动端改为全屏 Sheet 或 Bottom Sheet | MEDIUM |
+
+```markdown
+# 响应式检查示例
+
+## 问题：数据表格缺少移动端方案
+- 位置：订单管理 > 订单列表
+- 当前：桌面端 8 列表格，移动端未设计
+- 建议方案 A：仅显示关键 3 列，点击展开详情
+- 建议方案 B：移动端切换为卡片布局
+- 严重程度：HIGH
+- 原因：50%+ 用户通过移动端访问
+```
+
+### 2.5 性能（Performance）
+
+评审设计对前端性能的影响。
+
+| 检查项 | 判定标准 | 严重程度 |
+|--------|---------|:-------:|
+| 图片格式和大小 | 使用 WebP/AVIF，Hero 图 < 200KB，图标使用 SVG | MEDIUM |
+| 字体加载 | 自定义字体 <= 2 个家族，有 fallback 字体 | MEDIUM |
+| 动画复杂度 | 动画仅使用 transform/opacity（GPU 加速属性） | MEDIUM |
+| 首屏内容 | 首屏在 1 秒内有意义的内容（不能全是骨架屏） | HIGH |
+| 列表加载 | 长列表使用虚拟滚动或分页，非全量渲染 | HIGH |
+| 图片懒加载 | 首屏外的图片使用懒加载 | MEDIUM |
+| 组件按需 | 非首屏的重组件（图表/编辑器）支持懒加载 | MEDIUM |
+| 交互动画 | 动画时长 200-400ms，不阻塞用户操作 | LOW |
+
+### 2.6 品牌（Brand Alignment）
+
+评审设计与品牌调性的一致性。
+
+| 检查项 | 判定标准 | 严重程度 |
+|--------|---------|:-------:|
+| 品牌色使用 | 主色/辅色使用品牌规范中的颜色 | HIGH |
+| Logo 使用 | Logo 尺寸/间距/背景符合品牌规范 | HIGH |
+| 语气 (Tone) | 文案语气与品牌定位一致（专业/友好/活泼） | MEDIUM |
+| 图片风格 | 图片/插画风格统一，与品牌调性匹配 | MEDIUM |
+| 差异化 | 设计有品牌辨识度，非通用模板 | MEDIUM |
+| 情感化 | 关键交互有品牌独有的微交互/动画 | LOW |
+
+---
+
+## 步骤三：评审会议流程
+
+### 3.1 会议时间线（45 分钟）
+
+```
+[0-5 min]   设计师介绍背景和设计目标
+[5-10 min]  Walk-through 核心用户流程
+[10-35 min] 逐维度评审（按优先级排序）
+  - 一致性 (5 min)
+  - 可用性 (10 min)
+  - 无障碍 (5 min)
+  - 响应式 (5 min)
+[35-40 min] 讨论关键争议点，达成共识
+[40-45 min] 总结 Action Items，指定负责人和截止时间
+```
+
+### 3.2 评审纪律
+
+1. **评审的是设计，不是设计师** -- 所有反馈针对作品，非个人
+2. **给出具体建议，而非模糊感受** -- "这个按钮对比度不够" 优于 "感觉不太对"
+3. **区分主观偏好与客观问题** -- 主观偏好不作为 blocker
+4. **当场不能达成共识的，记录后线下讨论** -- 不耗时间在单个争议上
+5. **每个 Issue 必须有明确的严重程度和建议方案**
+
+---
+
+## 步骤四：反馈格式
+
+### 4.1 标准 Issue 格式
+
+```markdown
+## [严重程度] 简短标题
+
+- **位置**：页面名 > 区域/组件
+- **问题**：描述当前设计的具体问题
+- **依据**：引用设计原则 / WCAG 标准 / Design System 规范
+- **建议**：提出具体的改进方案（附截图/标注）
+- **影响**：如果不修复，对用户/业务的具体影响
+```
+
+### 4.2 严重程度定义
+
+| 级别 | 标识 | 定义 | 处理要求 |
+|------|------|------|---------|
+| P0 | BLOCKER | 功能不可用或严重违反合规要求 | 必须修复后才能进入开发 |
+| P1 | HIGH | 影响主流程的可用性或一致性问题 | 必须在当前迭代内修复 |
+| P2 | MEDIUM | 影响体验但不阻塞功能的问题 | 下个迭代修复 |
+| P3 | LOW | 美观度、微交互等优化建议 | 排入 Backlog |
+
+### 4.3 反馈示例（完整）
+
+```markdown
+## [P1] 搜索结果页缺少空状态设计
+
+- **位置**：搜索结果页 > 列表区域
+- **问题**：搜索无结果时，页面显示空白，用户不知道发生了什么
+- **依据**：可用性原则 -- 系统状态可见性（Nielsen #1）
+- **建议**：
+  1. 显示插画 + "未找到相关结果" 文案
+  2. 提供搜索建议："试试更换关键词" / "浏览热门分类"
+  3. 提供快捷操作入口："清除筛选条件" / "返回首页"
+- **影响**：用户搜索无果后流失率预计增加 15-20%
+
+## [P0] 表单提交按钮在移动端被键盘遮挡
+
+- **位置**：注册页 > 表单底部
+- **问题**：移动端弹出虚拟键盘后，提交按钮被完全遮挡，用户需要收起键盘才能点击
+- **依据**：可用性原则 -- 移动端输入体验最佳实践
+- **建议**：
+  1. 提交按钮固定在键盘上方（Sticky Bottom）
+  2. 或者在最后一个输入框的键盘 Return 键触发提交
+- **影响**：阻塞注册主流程，预计影响 30%+ 移动端注册转化
+```
+
+---
+
+## 步骤五：评审结果与跟踪
+
+### 5.1 评审结论
+
+| 结论 | 定义 | 后续动作 |
+|------|------|---------|
+| APPROVED | 无 P0/P1 问题，可直接进入开发 | 设计 Handoff |
+| APPROVED WITH CONDITIONS | 有 P1 问题但不阻塞开发启动 | 设计师修复 P1 后异步确认 |
+| REVISION REQUIRED | 有 P0 问题或大量 P1 问题 | 设计师修改后重新评审 |
+| REJECTED | 设计方向有根本问题 | 需要重新设计，安排新的设计冲刺 |
+
+### 5.2 Issue 跟踪模板
+
+```markdown
+# Design Review: [功能名] - [日期]
+
+## 评审信息
+- 设计稿：[Figma 链接]
+- 参与者：[姓名列表]
+- 评审结论：APPROVED WITH CONDITIONS
+
+## Issue 列表
+
+| # | 严重程度 | 标题 | 负责人 | 截止日期 | 状态 |
+|---|:-------:|------|--------|---------|------|
+| 1 | P0 | 表单按钮被键盘遮挡 | @Alice | 06-20 | DONE |
+| 2 | P1 | 搜索空状态缺失 | @Alice | 06-22 | IN PROGRESS |
+| 3 | P1 | 颜色对比度不足 (3处) | @Alice | 06-22 | TODO |
+| 4 | P2 | 表格移动端适配 | @Alice | 07-01 | BACKLOG |
+| 5 | P3 | 微交互动画优化 | @Alice | TBD | BACKLOG |
+
+## 跟进会议
+- 复核日期：06-23
+- P0/P1 Issue 全部关闭后可以开始开发
+```
+
+### 5.3 设计交付 (Design Handoff) 清单
+
+评审通过后，设计师需提供以下交付物给开发团队：
+
+```
+设计交付物
+├── 1. 标注完整的设计稿（Figma Dev Mode / Zeplin）
+│   ├── 所有间距标注
+│   ├── 所有颜色 Token 标注
+│   ├── 所有字号/行高标注
+│   └── 组件与 Design System 的映射关系
+├── 2. 交互说明文档
+│   ├── 状态机图（状态之间的转换条件）
+│   ├── 动画/过渡效果说明（时长 / 缓动 / 属性）
+│   ├── 手势操作说明（移动端）
+│   └── 键盘快捷键说明（桌面端）
+├── 3. 设计资源
+│   ├── 切图（SVG 图标、PNG/WebP 图片）
+│   ├── 自定义字体文件
+│   └── Lottie 动画文件（如有）
+├── 4. 响应式说明
+│   ├── 各断点的布局变化
+│   ├── 组件的响应式行为
+│   └── 最小/最大宽度限制
+└── 5. 边界情况说明
+    ├── 超长文本处理
+    ├── 极端数据（0条 / 1条 / 1000条）
+    ├── 慢网络 / 离线状态
+    └── 权限差异（管理员 vs 普通用户）
+```
+
+---
+
+## 评审维度权重（按场景调整）
+
+| 维度 | To C 产品 | To B 产品 | 内部工具 |
+|------|:--------:|:--------:|:-------:|
+| 一致性 | 25% | 30% | 20% |
+| 可用性 | 30% | 25% | 35% |
+| 无障碍 | 15% | 10% | 5% |
+| 响应式 | 15% | 15% | 10% |
+| 性能 | 10% | 10% | 20% |
+| 品牌 | 5% | 10% | 10% |
+
+---
+
+## Agent Checklist
+
+- [ ] 设计稿已达到 High-Fidelity 程度，核心流程完整
+- [ ] Design System Token（颜色/字体/间距）已定义并在稿中使用
+- [ ] 六大维度逐项评审：一致性/可用性/无障碍/响应式/性能/品牌
+- [ ] 颜色对比度通过 WCAG AA 标准（正文 >= 4.5:1）
+- [ ] 所有组件覆盖完整状态（Default/Hover/Active/Disabled/Error/Loading/Empty）
+- [ ] 响应式设计覆盖 Mobile / Tablet / Desktop 三个断点
+- [ ] 空状态、错误状态、加载状态均有设计方案
+- [ ] 所有 Issue 按 P0-P3 分级，P0/P1 有明确负责人和截止日期
+- [ ] 评审结论明确（Approved / Revision Required / Rejected）
+- [ ] 设计交付物（标注/交互说明/资源/边界情况）准备齐全

package/design/03-checklists/design-review-checklist.md

@@ -0,0 +1,246 @@
+---
+id: design-review-checklist
+title: Design Review Checklist
+domain: design
+category: 03-checklists
+difficulty: intermediate
+tags: [agent, checklist, compliance, consistency, design, feedback, review, 概述]
+quality_score: 70
+last_updated: 2026-06-15
+---
+# Design Review Checklist
+
+## 概述
+
+设计评审是确保产品设计质量的关键环节。本检查清单覆盖视觉一致性、无障碍性、响应式适配、品牌规范、动效表现和交互反馈六大维度，适用于 UI 设计稿评审、前端实现走查和上线前最终确认。每条检查项标注优先级（P0 必须 / P1 应该 / P2 建议），团队可根据项目阶段灵活裁剪。
+
+---
+
+## 一、视觉一致性（Visual Consistency）
+
+### 颜色系统
+
+- [ ] **[P0]** 所有颜色引用 Design Token，无硬编码 HEX/RGB 值
+- [ ] **[P0]** 主色/辅色/中性色使用正确的语义色阶（primary-500, neutral-100 等）
+- [ ] **[P0]** 语义颜色正确使用：success=绿色、warning=橙色、error=红色、info=蓝色
+- [ ] **[P1]** 暗色模式下颜色对比度满足 WCAG AA（4.5:1 正文，3:1 大字）
+- [ ] **[P1]** 品牌色在不同背景下可读性测试通过
+- [ ] **[P2]** 颜色数量控制在设计系统定义范围内，无多余颜色
+
+### 排版系统
+
+- [ ] **[P0]** 字体族（font-family）与品牌规范一致
+- [ ] **[P0]** 标题层级使用正确的 Text Style（H1-H6）
+- [ ] **[P0]** 正文字号不小于 14px（移动端不小于 16px）
+- [ ] **[P1]** 行高（line-height）遵循设计系统：标题 1.2-1.3，正文 1.5-1.7
+- [ ] **[P1]** 字重梯度合理：Regular(400)、Medium(500)、Semibold(600)、Bold(700)
+- [ ] **[P1]** 段落最大宽度不超过 75 个字符（中文约 35 个汉字）
+- [ ] **[P2]** 中英文混排时字体回退链正确
+
+### 间距与网格
+
+- [ ] **[P0]** 间距使用 4px/8px 基准网格
+- [ ] **[P0]** 组件内部间距统一（padding 引用 Token）
+- [ ] **[P0]** 组件之间间距统一（margin/gap 引用 Token）
+- [ ] **[P1]** 页面整体使用网格系统（12 列或自定义）
+- [ ] **[P1]** 内容区域左右边距与设计系统一致
+- [ ] **[P2]** 视觉重心平衡，留白合理
+
+### 图标与图片
+
+- [ ] **[P0]** 图标风格统一（线性/填充/双色不混用）
+- [ ] **[P0]** 图标尺寸成系统：16px / 20px / 24px / 32px
+- [ ] **[P1]** 图片比例一致（卡片内图片统一为 16:9 或 4:3）
+- [ ] **[P1]** 占位图/缺省图/加载图设计到位
+- [ ] **[P2]** 图片压缩和格式优化（WebP 优先）
+
+---
+
+## 二、无障碍性（Accessibility）
+
+### 感知性
+
+- [ ] **[P0]** 文本颜色与背景对比度 >= 4.5:1（WCAG AA）
+- [ ] **[P0]** 非文本元素（图标、按钮）对比度 >= 3:1
+- [ ] **[P0]** 信息传递不仅依赖颜色（辅助图标或文本标识）
+- [ ] **[P1]** 图片包含有意义的 alt 文本
+- [ ] **[P1]** 表单字段有可见的 label（非仅 placeholder）
+- [ ] **[P2]** 视频/音频内容提供字幕或文本替代
+
+### 可操作性
+
+- [ ] **[P0]** 可点击元素最小触控区域 44x44px（移动端）
+- [ ] **[P0]** 键盘可达：所有交互元素支持 Tab 导航
+- [ ] **[P0]** 焦点状态可见且清晰（focus ring）
+- [ ] **[P1]** 焦点顺序与视觉顺序一致
+- [ ] **[P1]** 无键盘陷阱（Modal 除外，但 Modal 需支持 Esc 关闭）
+- [ ] **[P1]** 拖拽操作提供键盘替代方案
+- [ ] **[P2]** 动画可通过 prefers-reduced-motion 关闭
+
+### 可理解性
+
+- [ ] **[P0]** 错误信息明确指出问题和修复方法
+- [ ] **[P0]** 表单验证在提交前提供实时反馈
+- [ ] **[P1]** 页面语言正确设置（lang 属性）
+- [ ] **[P1]** 链接文本描述目标而非泛泛的"点击这里"
+- [ ] **[P2]** 复杂操作提供帮助文本或引导
+
+### 健壮性
+
+- [ ] **[P0]** 语义化 HTML：heading 层级正确，表单使用 fieldset/legend
+- [ ] **[P0]** ARIA 属性正确使用（aria-label, aria-expanded, role 等）
+- [ ] **[P1]** 屏幕阅读器测试通过（VoiceOver / NVDA）
+- [ ] **[P2]** 支持浏览器缩放至 200% 仍可用
+
+---
+
+## 三、响应式适配（Responsive Design）
+
+### 断点系统
+
+- [ ] **[P0]** 定义的断点覆盖主流设备：Mobile / Tablet / Desktop / Wide
+- [ ] **[P0]** 断点值与 CSS 框架和设计稿一致
+- [ ] **[P1]** 断点之间的过渡平滑，无布局跳变
+- [ ] **[P1]** 容器查询用于组件级响应式（如适用）
+
+### 布局适配
+
+- [ ] **[P0]** 移动端优先设计，内容不被截断或溢出
+- [ ] **[P0]** 导航在移动端转为汉堡菜单或 Bottom Tab
+- [ ] **[P0]** 表格在小屏幕有滚动或卡片化方案
+- [ ] **[P1]** 侧边栏在移动端可收起或转为全屏
+- [ ] **[P1]** 图片使用 srcset 提供不同分辨率版本
+- [ ] **[P2]** 超宽屏（>1920px）有最大内容宽度限制
+
+### 文本适配
+
+- [ ] **[P0]** 长文本正确截断（ellipsis 或 line-clamp）
+- [ ] **[P0]** 多语言场景下文本溢出处理
+- [ ] **[P1]** 字号在移动端适当缩小（fluid typography）
+- [ ] **[P2]** 表单 label 在窄屏时从左侧切换为顶部
+
+---
+
+## 四、品牌规范（Brand Compliance）
+
+### 视觉标识
+
+- [ ] **[P0]** Logo 使用正确版本（全彩/单色/反白），安全区域充足
+- [ ] **[P0]** 品牌主色使用正确，无色差
+- [ ] **[P1]** 品牌字体正确加载，回退字体合理
+- [ ] **[P1]** 图片风格与品牌调性一致（摄影/插画/3D）
+- [ ] **[P2]** 品牌声音（Voice & Tone）在文案中一致
+
+### 风格一致性
+
+- [ ] **[P0]** 按钮/输入框/卡片风格在全站统一
+- [ ] **[P0]** 圆角策略统一（全圆角/小圆角/直角不混用）
+- [ ] **[P1]** 阴影层级统一（elevation system）
+- [ ] **[P1]** 分隔线/边框使用一致
+- [ ] **[P2]** 空状态插画风格与品牌一致
+
+### 反 AI 模板感
+
+- [ ] **[P0]** 无默认紫色渐变背景
+- [ ] **[P0]** 无 emoji 图标替代专业图标
+- [ ] **[P0]** 无默认系统字体堆砌的模板感
+- [ ] **[P1]** 有自定义设计元素而非纯 UI Kit 拼搭
+- [ ] **[P1]** Hero 区域有真实内容而非泛泛口号
+- [ ] **[P2]** 微交互有品牌特色而非通用动效
+
+---
+
+## 五、动效设计（Motion Design）
+
+### 基础规范
+
+- [ ] **[P0]** 动效时长合理：微交互 100-200ms，过渡 200-400ms，复杂动画 400-600ms
+- [ ] **[P0]** 缓动函数统一定义：ease-out 进入、ease-in 退出
+- [ ] **[P1]** 页面切换有过渡效果（非瞬切）
+- [ ] **[P1]** 列表项入场有交错动画（stagger）
+- [ ] **[P2]** 滚动驱动的动画有明确触发点
+
+### 性能约束
+
+- [ ] **[P0]** 动画仅使用 transform 和 opacity（GPU 加速）
+- [ ] **[P0]** 无布局抖动（Layout Shift）动画
+- [ ] **[P1]** 动画帧率 >= 60fps
+- [ ] **[P1]** 首屏加载无阻塞动画
+- [ ] **[P2]** Lottie/Rive 动画文件大小 < 50KB
+
+### 有意义的动效
+
+- [ ] **[P0]** 动效传达层级关系（展开/收起、进入/退出）
+- [ ] **[P1]** 状态变化有过渡（颜色、尺寸、位置）
+- [ ] **[P1]** 加载状态有骨架屏或进度指示
+- [ ] **[P2]** 空状态有引导动画
+
+---
+
+## 六、交互反馈（Interaction Feedback）
+
+### 即时反馈
+
+- [ ] **[P0]** 按钮点击有视觉反馈（active state）
+- [ ] **[P0]** 表单提交有 Loading 状态和结果反馈
+- [ ] **[P0]** 操作成功/失败有 Toast 或 Snackbar 通知
+- [ ] **[P1]** 输入框聚焦有边框高亮
+- [ ] **[P1]** 链接悬停有下划线或颜色变化
+
+### 防错设计
+
+- [ ] **[P0]** 危险操作（删除、支付）有二次确认
+- [ ] **[P0]** 表单有实时校验而非仅提交后校验
+- [ ] **[P1]** 不可逆操作有撤销机制
+- [ ] **[P1]** 离开未保存页面有确认提示
+- [ ] **[P2]** 自动保存草稿
+
+### 系统状态
+
+- [ ] **[P0]** 加载中有 Loading 指示器（Spinner / Skeleton）
+- [ ] **[P0]** 空数据有 Empty State 说明和引导操作
+- [ ] **[P0]** 网络错误有友好提示和重试按钮
+- [ ] **[P1]** 长列表有分页或无限滚动指示
+- [ ] **[P1]** 后台任务有进度条或完成通知
+- [ ] **[P2]** 实时数据有更新指示器
+
+---
+
+## 评审流程
+
+### 评审时机
+
+1. **设计评审**：设计稿完成后、开发前
+2. **实现走查**：前端实现后、合并前
+3. **上线确认**：Staging 环境、正式上线前
+
+### 评审参与者
+
+| 角色 | 职责 |
+|------|------|
+| 设计师 | 主导评审，检查还原度 |
+| 前端开发 | 说明技术约束，确认可行性 |
+| PM | 确认功能完整性和业务逻辑 |
+| QA | 补充边界用例和兼容性 |
+
+### 问题分级处理
+
+- **P0 Blocker**：必须在当前迭代修复，阻止上线
+- **P1 Major**：当前迭代修复，不阻止灰度但阻止全量
+- **P2 Minor**：排入下个迭代的优化 Backlog
+
+---
+
+## Agent Checklist
+
+以下为 AI Agent 在执行设计评审时的检查要点：
+
+- [ ] 使用 Design Token 验证颜色/字体/间距一致性
+- [ ] 通过对比度工具检查无障碍合规性（axe / Lighthouse）
+- [ ] 在 Mobile / Tablet / Desktop 三个视口验证响应式
+- [ ] 确认品牌元素（Logo/主色/字体）使用正确
+- [ ] 检查动效性能（仅 transform/opacity，无 Layout Shift）
+- [ ] 验证所有交互元素有完整反馈状态
+- [ ] 确认无 AI 模板感（无紫色渐变/emoji 图标/默认字体）
+- [ ] P0 问题全部修复后方可通过评审
+- [ ] 评审结果记录并归档至项目文档