设计计划审查 (plan-design-review)

设计计划审查（plan-design-review）

概述

plan-design-review 让 AI 以 设计负责人 的视角审查设计计划。它的核心是：从 UX、视觉、用户流程角度评估你的方案。

作为一个程序员，你可能遇到过：

“这个 UI 实现好难”——但没在设计阶段提出来
“用户真的会这样用吗？“——不确定
“这个设计和系统其他部分不搭”——后期改动成本大

plan-design-review 就是解决这些的。

为什么需要设计视角

1. 避免实现阶段发现设计问题

设计阶段改 1 小时 = 实现阶段改 1 天

2. 提前识别 UX 问题

好的 UX 设计要考虑：
- 用户心理模型
- 认知负荷
- 使用场景

3. 保证设计一致性

设计系统审查会关注：
- 和现有设计语言一致吗？
- 组件可复用吗？
- 品牌调性统一吗？

审查维度

1. UX 评估

问题：
- 用户能理解这个界面吗？
- 操作路径合理吗？
- 错误处理友好吗？

评估：
- ✅ 优秀
- ⚠️ 一般
- ❌ 差

2. 视觉设计

问题：
- 符合品牌调性吗？
- 视觉层级清晰吗？
- 颜色/字体/间距一致吗？

评估：
- ✅ 符合规范
- ⚠️ 需调整
- ❌ 不符合

3. 用户流程

问题：
- 用户完成任务的路径最短吗？
- 有没有多余的步骤？
- 边界情况处理了吗？

评估：
- ✅ 流畅
- ⚠️ 复杂
- ❌ 混乱

4. 可访问性

问题：
- 色盲用户能使用吗？
- 键盘能操作吗？
- 屏幕阅读器兼容吗？

评估：
- ✅ 符合 WCAG
- ⚠️ 部分符合
- ❌ 不符合

5. 响应式

问题：
- 移动端体验怎么样？
- 平板端体验怎么样？
- 不同屏幕尺寸都适配吗？

评估：
- ✅ 全平台适配
- ⚠️ 部分适配
- ❌ 不适配

实践案例

案例 1：电商checkout流程

背景：设计一个新的结账流程

plan-design-review 会问：

1. UX
   - 需要几步完成？→ 5 步
   - 能减少到 3 步吗？→ 可以
   - 访客checkout支持吗？→ 没考虑

2. 视觉
   - 符合现有设计语言？✅
   - 移动端友好？✅
   - 品牌色应用？✅

3. 流程
   - 支付方式展示？→ 需要优化
   - 错误提示位置？→ 不友好

建议：
- 减少到 3 步
- 添加访客checkout
- 优化错误提示

案例 2：仪表盘设计

背景：设计一个数据仪表盘

plan-design-review 会问：

1. 信息优先级
   - 最重要的数据是什么？→ 销售额
   - 用户第一眼应该看到什么？

2. 交互
   - 需要哪些筛选？→ 日期、产品、地区
   - 图表可以交互吗？

3. 性能
   - 数据加载多久能接受？→ 2 秒
   - 需要分页还是无限滚动？

4. 可访问性
   - 图表有色盲友好模式？
   - 数据能用屏幕阅读器读取？

案例 3：移动端导航

背景：设计移动端导航

plan-design-review 会问：

1. 导航位置
   - 顶部还是底部？→ 底部更适合移动

2. 触控
   - 触摸目标 > 44px？✅
   - 有手势操作吗？→ 需要考虑

3. 层级
   - 几层导航？→ 最多 2 层
   - 怎么返回？→ 面包屑/返回按钮

4. 性能
   - 导航加载多久？→ < 500ms
   - 需要预加载吗？

常用问题清单

UX

用户能理解这个界面吗？
操作路径最短吗？
错误处理友好吗？
新用户能快速上手吗？

视觉

符合品牌调性吗？
视觉层级清晰吗？
设计语言一致吗？

流程

任务路径最短吗？
边界情况处理了吗？
加载状态友好吗？

可访问性

符合 WCAG 标准吗？
键盘能操作吗？
色盲友好吗？

响应式

移动端适配？
平板适配？
桌面适配？

速查卡片

审查维度

UX 评估
视觉设计
用户流程
可访问性
响应式

核心问题

用户能理解吗？
路径最短吗？
视觉一致吗？
可访问吗？

输出

UX 评估报告
问题清单
优化建议

与其他技能

design-review - 现有设计审查
design-consultation - 设计咨询
plan-eng-review - 工程计划审查
plan-ceo-review - 产品计划审查

查看源文件: GitHub原始文件