design-critique

/design-critique

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

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

用法

/design-critique $ARGUMENTS

评审此设计：@$1

如果提供了 Figma 链接，则从 Figma 获取设计稿。如果引用了某个文件，则读取该文件。否则，请用户描述或分享其设计。

我需要您提供的内容

• 设计稿：Figma 链接、截图或详细描述
• 背景：这是什么？面向谁？处于哪个阶段（探索、优化、定稿）？
• 侧重点（可选）：例如"重点关注移动端"或"重点关注引导流程"

评审框架

1. 第一印象（2 秒）

• 什么最先吸引视线？这是否正确？
• 产生的情绪反应是什么？
• 用途是否一目了然？

2. 可用性

• 用户能否完成其目标？
• 导航是否直观？
• 可交互元素是否明显？
• 是否存在不必要的步骤？

3. 视觉层级

• 是否有清晰的阅读顺序？
• 是否突出了正确的元素？
• 留白是否运用得当？
• 排版是否形成了正确的层级？

4. 一致性

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

5. 无障碍

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

如何提供反馈

• 具体明确："CTA 与导航栏争夺注意力"，而不是"布局令人困惑"
• 说明原因：将反馈与设计原则或用户需求联系起来
• 提出替代方案：不要只指出问题，还要提出解决方案
• 肯定优点：好的反馈也包含正面的观察
• 匹配阶段：早期探索与最终打磨应获得不同的反馈

输出

## Design Critique: [Design Name]

### Overall Impression
[1-2 sentence first reaction — what works, what's the biggest opportunity]

### Usability
| Finding | Severity | Recommendation |
|---------|----------|----------------|
| [Issue] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [Fix] |

### Visual Hierarchy
- **What draws the eye first**: [Element] — [Is this correct?]
- **Reading flow**: [How does the eye move through the layout?]
- **Emphasis**: [Are the right things emphasized?]

### Consistency
| Element | Issue | Recommendation |
|---------|-------|----------------|
| [Typography/spacing/color] | [Inconsistency] | [Fix] |

### Accessibility
- **Color contrast**: [Pass/fail for key text]
- **Touch targets**: [Adequate size?]
- **Text readability**: [Font size, line height]

### What Works Well
- [Positive observation 1]
- [Positive observation 2]

### Priority Recommendations
1. **[Most impactful change]** — [Why and how]
2. **[Second priority]** — [Why and how]
3. **[Third priority]** — [Why and how]

如果有可用的连接器

如果已连接 ~~设计工具：

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

如果已连接 ~~用户反馈：

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

小贴士

1. 分享背景——例如"这是一个 B2B SaaS 的结账流程"，有助于我给出更相关的反馈。
2. 说明所处阶段——早期探索与最终打磨应获得不同的反馈。
3. 请求聚焦——例如"只看导航栏"，可以让您在某一领域获得更深入的分析。