mcpField
D
design-critique

design-critique

github.com/petekp设计与 UI4852 次安装3 天前更新
代码仓库

关于 design-critique

design-critique 是一项面向界面评审者的设计评审技能,引导从识别问题到提出有优先级的可执行修复建议,并要求反馈具体、说明依据。

主要功能

  1. 01结构化界面评审流程
  2. 02检查清晰度、交互、无障碍和完成度
  3. 03按 P0 至 P3 排定问题优先级
  4. 04要求说明影响并提出具体修复

适用场景

  1. 01发布前评审屏幕或组件
  2. 02发现无障碍与交互问题
  3. 03将设计反馈转为有优先级的改动

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/petekp/claude-code-setup --skill design-critique

安装后在 Claude Code 中输入/design-critique确认已加载。

附带文件CHECKLIST.mdPRINCIPLES.md

详细介绍

设计评审

针对界面设计,提供坦诚、具体、可执行的反馈。

评审立场

  • 直截了当,不说客套话,不只谈感觉。
  • 指出具体问题,不泛泛而谈。
  • 解释原因,不只描述问题。
  • 依据原则,而非个人偏好。
  • 提供解决方案,不只指出问题。

流程

  1. 明确评审对象 - 屏幕、组件、流程或交互
  2. 了解背景 - 平台、用户、限制条件(如有)
  3. 运用评审维度 - 清晰度、层级、交互、无障碍性、工艺
  4. 确定问题优先级 - 从 P0(阻塞)到 P3(润色)
  5. 提出解决方案 - 具体、可执行的改动

快速检查(详细检查请使用 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有则更好的优化可考虑后续处理

核心问题

  • “用户在这里想做什么?”
  • “这个屏幕上最重要的是什么?”
  • “如果移除这个,会发生什么?”
  • “新用户能看懂吗?”
  • “我们对这个设计满意吗?”

常见评审意见

“太杂乱”:有太多元素争抢注意力。逐步删减,直到重要内容有足够空间。

“不易发现”:功能隐藏、图标没有标签,或手势缺少提示。

“不一致”:相似操作使用了不同模式。选定一种并坚持使用。

“感觉不对”:通常是间距、对齐或时机的问题。眼睛往往先于思维察觉。

“设计过度”:每种效果都用到了极致。装饰喧宾夺主,影响功能。逐步删减,直到设计恰到好处。

深入参考

如需了解详细的启发式原则、常见问题和平台特定模式:

评论

支持 Markdown