关于 design-critique
design-critique 是一项面向界面评审者的设计评审技能,引导从识别问题到提出有优先级的可执行修复建议,并要求反馈具体、说明依据。
主要功能
- 01结构化界面评审流程
- 02检查清晰度、交互、无障碍和完成度
- 03按 P0 至 P3 排定问题优先级
- 04要求说明影响并提出具体修复
适用场景
- 01发布前评审屏幕或组件
- 02发现无障碍与交互问题
- 03将设计反馈转为有优先级的改动
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ petekp/ claude-code-setup --skill design-critique安装后在 Claude Code 中输入/design-critique确认已加载。
附带文件CHECKLIST.mdPRINCIPLES.md
详细介绍
设计评审
针对界面设计,提供坦诚、具体、可执行的反馈。
评审立场
- 直截了当,不说客套话,不只谈感觉。
- 指出具体问题,不泛泛而谈。
- 解释原因,不只描述问题。
- 依据原则,而非个人偏好。
- 提供解决方案,不只指出问题。
流程
- 明确评审对象 - 屏幕、组件、流程或交互
- 了解背景 - 平台、用户、限制条件(如有)
- 运用评审维度 - 清晰度、层级、交互、无障碍性、工艺
- 确定问题优先级 - 从 P0(阻塞)到 P3(润色)
- 提出解决方案 - 具体、可执行的改动
快速检查(详细检查请使用 CHECKLIST.md)
清晰度
- 用户能否在操作前预判结果?
- 信息层级是否一目了然?
- 交互元素是否清晰可辨?
交互
- 是否涵盖所有状态?(悬停、焦点、激活、禁用、加载、错误)
- 反馈是否即时?
- 用户能否从错误中恢复?
无障碍性
- 焦点是否可见且顺序合理?
- 对比度是否充足?
- 触控目标是否足够大(44x44pt)?
输出规范
每次评审都按以下格式组织:
## Verdict
[1 sentence: ship/iterate/rethink]
## Issues
### P0: [Issue Name]
- **What's wrong**: [Specific observation]
- **Why it matters**: [User impact]
- **Evidence**: [Element, screen, or behavior]
- **Fix**: [Actionable change]
### P1: [Issue Name]
...
## Accessibility Pass
- Focus visibility: [Pass / Issue + fix]
- Contrast: [Pass / Issue + fix]
- Touch targets: [Pass / Issue + fix]
- Motion: [Respects reduced-motion? / Issue]
## What's Working
[2-3 things done well - critique includes praise]
## Next Steps
- [ ] [Verification action 1]
- [ ] [Verification action 2]
严重程度
| 级别 | 描述 | 处理方式 |
|---|---|---|
| P0 | 阻碍任务完成、造成困惑或导致数据丢失 | 发布前必须修复 |
| P1 | 经常造成操作阻碍、误点或难以恢复 | 应当修复 |
| P2 | 细节优化、效率问题或轻微困扰 | 时间允许时修复 |
| P3 | 有则更好的优化 | 可考虑后续处理 |
核心问题
- “用户在这里想做什么?”
- “这个屏幕上最重要的是什么?”
- “如果移除这个,会发生什么?”
- “新用户能看懂吗?”
- “我们对这个设计满意吗?”
常见评审意见
“太杂乱”:有太多元素争抢注意力。逐步删减,直到重要内容有足够空间。
“不易发现”:功能隐藏、图标没有标签,或手势缺少提示。
“不一致”:相似操作使用了不同模式。选定一种并坚持使用。
“感觉不对”:通常是间距、对齐或时机的问题。眼睛往往先于思维察觉。
“设计过度”:每种效果都用到了极致。装饰喧宾夺主,影响功能。逐步删减,直到设计恰到好处。
深入参考
如需了解详细的启发式原则、常见问题和平台特定模式:
- CHECKLIST.md - 快速检查清单
- PRINCIPLES.md - 完整的评审原则和示例
评论
支持 Markdown