/design-critique

> 如果你看到不熟悉的占位符或需要检查哪些工具已连接，请参阅 CONNECTORS.md。

从多个维度获取结构化设计反馈。

用法

/design-critique $ARGUMENTS

审查设计：@$1

如果提供了 Figma URL，从 Figma 拉取设计。如果引用了文件，读取它。否则，请用户描述或分享他们的设计。

我需要你提供的信息

• 设计：Figma URL、截图或详细描述
• 上下文：这是什么？面向谁？处于什么阶段（探索、优化、最终）？
• 关注点（可选）："关注移动端"或"关注引导流程"

评审框架

1. 第一印象（2 秒）

• 首先吸引眼球的是什么？这是否正确？
• 情感反应是什么？
• 目的是否立即清晰？

2. 可用性

• 用户能否完成他们的目标？
• 导航是否直观？
• 交互元素是否明显？
• 是否有不必要的步骤？

3. 视觉层级

• 是否有清晰的阅读顺序？
• 正确的元素是否得到了强调？
• 空白区域是否使用得当？
• 排版是否创建了正确的层级？

4. 一致性

• 是否遵循设计系统？
• 间距、颜色和排版是否一致？
• 相似元素的行为是否相似？

5. 无障碍性

• 颜色对比度比例
• 触摸目标尺寸
• 文本可读性
• 图片的替代文本

如何提供反馈

• 要具体："CTA 与导航产生了竞争"而不是"布局令人困惑"
• 解释原因：将反馈与设计原则或用户需求联系起来
• 建议替代方案：不仅要识别问题，还要提出解决方案
• 认可有效的内容：好的反馈包括正面观察
• 与阶段匹配：早期探索与最终打磨获得的反馈不同

输出

## 设计评审：[设计名称]

### 总体印象
[1-2 句第一反应——哪些效果好，最大的机会是什么]

### 可用性
| 发现 | 严重程度 | 建议 |
|---------|----------|----------------|
| [问题] | 严重 / 中等 / 次要 | [修复] |

### 视觉层级
- **首先吸引眼球的是**：[元素] —— [这正确吗？]
- **阅读流程**：[视线如何在布局中移动？]
- **强调**：[正确的元素是否得到了强调？]

### 一致性
| 元素 | 问题 | 建议 |
|---------|-------|----------------|
| [排版/间距/颜色] | [不一致] | [修复] |

### 无障碍性
- **颜色对比度**：[关键文本通过/未通过]
- **触摸目标**：[尺寸是否充足？]
- **文本可读性**：[字体大小、行高]

### 效果好的方面
- [正面观察 1]
- [正面观察 2]

### 优先级建议
1. **[最有影响力的更改]** —— [原因和方式]
2. **[第二优先级]** —— [原因和方式]
3. **[第三优先级]** —— [原因和方式]

如果连接器可用

如果连接了 ~~design tool：

• 直接从 Figma 拉取设计，检查组件、设计令牌和图层
• 与现有设计系统进行一致性比较

如果连接了 ~~user feedback：

• 将设计决策与近期用户反馈和支持工单进行交叉引用

提示

1. 分享上下文——"这是一个 B2B SaaS 的结账流程"有助于我提供相关反馈。
2. 说明你的阶段——早期探索与最终打磨获得的反馈不同。
3. 让我聚焦——"只看导航"可以让你在某个领域获得更深入的反馈。