Design Critique — Design Plugin
所属插件：Design · 来源：Anthropic knowledge-work-plugins · 兼容：Cowork + Claude Code
概述
Design Critique 是 Design 插件的核心技能。它将设计评审从"主观感受"升级为结构化多维度反馈——覆盖可用性、视觉层级、一致性、可访问性。与传统的设计评审会议不同，这个技能提供一致的分析框架，确保每次评审覆盖相同的维度，同时根据设计阶段（探索期 vs 打磨期）调整反馈的深度和重点。
基本信息
| 属性 | 值 |
|---|---|
| 技能名称 | design-critique |
| 插件 | Design |
| 触发方式 | Slash 命令 + 上下文触发 |
| Slash 命令 | /design-critique |
| 参数提示 | <Figma URL, screenshot, or description> |
| 用户可调用 | 是 |
| 官方源码 | GitHub |
触发短语
- "帮我 review 这个设计"
- "看看这个页面有什么问题"
- "这个设计稿怎么样？"
架构设计
┌─────────────────────────────────────────────────────────────────┐
│ DESIGN CRITIQUE │
├─────────────────────────────────────────────────────────────────┤
│ STANDALONE（零配置可用） │
│ ✓ 上传截图或描述设计 │
│ ✓ 五维评审框架：印象/可用性/层级/一致性/可访问性 │
│ ✓ 分阶段反馈（探索期/打磨期不同深度） │
│ ✓ 可操作建议 + 优先级排序 │
├─────────────────────────────────────────────────────────────────┤
│ SUPERCHARGED（连接工具后增强） │
│ + Figma：直接拉取设计稿、检查组件和 token │
│ + 设计系统：对比一致性 │
│ + 用户反馈：关联用户研究和工单数据 │
└─────────────────────────────────────────────────────────────────┘核心能力
1. 五维评审框架
第一印象（2 秒测试）：
- 视线首先落在哪里？是否正确？
- 情感反应是什么？
- 页面目的是否立即清晰？
可用性：
| 检查项 | 问题 |
|---|---|
| 任务完成 | 用户能否达成目标？ |
| 导航直觉 | 导航是否一目了然？ |
| 交互可见性 | 可交互元素是否明显？ |
| 步骤精简 | 是否存在不必要的步骤？ |
视觉层级：
- 是否有清晰的阅读顺序？
- 正确的元素是否被强调？
- 空白是否有效利用？
- 字体是否创建了正确的层级？
一致性：
| 检查项 | 问题 |
|---|---|
| 设计系统 | 是否遵循设计系统？ |
| 间距/色彩/字体 | 是否一致？ |
| 行为一致性 | 相似元素是否行为相似？ |
可访问性：
- 色彩对比度
- 触摸目标大小
- 文本可读性
- 图片替代文本
2. 分阶段反馈
| 设计阶段 | 反馈重点 | 反馈方式 |
|---|---|---|
| 探索期 | 概念验证、用户流程、信息架构 | 开放性问题，探索多种方案 |
| 细化期 | 布局、层级、交互细节 | 具体建议，提供替代方案 |
| 打磨期 | 像素级精度、一致性、可访问性 | 精确到像素的建议 |
输出格式
markdown
## Design Critique: [设计名称]
### 总体印象
[1-2 句第一反应]
### 可用性
| 发现 | 严重程度 | 建议 |
|---|---|---|
| [问题] | 🔴 Critical / 🟡 Moderate / 🟢 Minor | [修复方案] |
### 视觉层级
- **视线落点**: [元素] — [是否正确？]
- **阅读流**: [视线如何移动？]
- **强调**: [正确的元素被强调了吗？]
### 一致性
| 元素 | 问题 | 建议 |
|---|---|---|
| [字体/间距/色彩] | [不一致处] | [修复方案] |
### 可访问性
- **色彩对比度**: [通过/失败]
- **触摸目标**: [大小是否合适]
- **文本可读性**: [字体大小、行高]
### 亮点
- [正面观察]
### 优先建议
1. **[最重要的改动]** — [原因和方式]
2. **[第二优先级]** — [原因和方式]使用场景与案例
场景 1：上线前最终审查
输入：
/design-critique https://figma.com/file/xxx
这是结账流程，准备上线了，帮我做最终检查。输出：聚焦打磨期的审查，重点检查像素级精度、一致性和可访问性问题。
关键价值：在上线前捕获视觉和可用性问题，避免发布后才发现。
场景 2：早期概念反馈
输入：
帮我看看这个首页的布局方案，还在探索阶段。输出：聚焦信息架构和用户流程的反馈，提供多种布局方向的建议，而非像素级细节。
关键价值：在投入大量精力细化之前，先确认方向是否正确。
与其他工具对比
| 维度 | Design Critique（本技能） | Figma 评论 | 设计评审会议 | 用户测试 |
|---|---|---|---|---|
| 反馈速度 | 秒级 | 手动 | 需安排 | 需招募 |
| 覆盖维度 | 5 维固定框架 | 取决于 reviewer | 取决于 agenda | 任务导向 |
| 一致性 | 每次相同 | 取决于 reviewer | 取决于主持人 | 结构化 |
| 可操作性 | 带优先级和建议 | 评论形式 | 会议记录 | 报告形式 |
| 成本 | 零 | 零 | 团队时间 | $$$ |
连接工具后的增强能力
| 连接的 MCP | 分类 | 增强效果 |
|---|---|---|
| Figma | 设计工具 | 直接拉取设计稿、检查组件、token 和图层 |
| Notion/Confluence | 知识库 | 对比设计系统规范 |
| 用户反馈工具 | 研究 | 关联用户研究和工单数据 |
连接方式：在 Design 插件的 .mcp.json 中配置对应的 MCP 服务器。
最佳实践
- 提供上下文 — "这是 B2B SaaS 的结账流程" 帮助 AI 给出更相关的反馈
- 指定阶段 — 探索期和打磨期的反馈需求完全不同，明确阶段能获得更合适的建议
- 要求聚焦 — "只看导航" 或 "重点看移动端" 可以在一个维度上获得更深入的分析
- 正面反馈同样重要 — 指出"什么做得好"和指出"什么问题"同样有价值