mcpField
U
ux-review

ux-review

github.com/nickcrew设计与 UI62118 次安装18 周前更新
代码仓库

关于 ux-review

这是一项供团队评估组件、流程和功能的 UX 审查技能，适用于发布前检查或 UI/UX 代码评审。它结合可用性、WCAG 2.1 AA 无障碍和交互设计检查，并按优先级整理发现。

主要功能

  1. 01Nielsen 启发式评估
  2. 02WCAG 2.1 AA 无障碍检查
  3. 03用户流程与认知负荷分析
  4. 04交互状态与反馈检查
  5. 05按优先级整理审查报告

适用场景

  1. 01发布前审查新功能
  2. 02检查键盘与屏幕阅读器可用性
  3. 03评估入门或结账流程
  4. 04在代码评审中检查 UI 更改

安装

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

$npx skills add https://github.com/nickcrew/claude-cortex --skill ux-review

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

详细介绍

UX 评审

全面的用户体验评审，统筹可用性、无障碍和交互设计视角，深入分析组件、流程或功能。

何时使用此技能

  • 发布前评审新组件或功能
  • 评估现有流程中的可用性问题
  • 涉及 UI/UX 代码的 PR 评审
  • 设计系统组件评审
  • 优化引导流程或结账流程
  • 纯视觉或美学评审请勿使用此技能——请改用 ui-design-aesthetics

工作流

第 1 步：收集背景信息

评审前回答以下问题：

  1. 用户想要完成什么？
  2. 此组件在整个流程中扮演什么角色？
  3. 目标用户是谁（用户画像、技能水平）？
  4. 成功标准是什么？
第 2 步：进行启发式扫描（Nielsen 的 10 项原则）

根据每项启发式原则评估界面：

启发式原则检查内容
系统状态的可见性用户是否始终清楚当前发生的情况？
与现实世界相符是否使用熟悉的语言和概念？
用户控制权和自由度用户能否撤销、返回或退出？
一致性和标准是否遵循平台惯例？
错误预防是否能在错误发生前避免？
识别而非回忆信息是否直接可见，而非需要记忆？
灵活性和效率是否为熟练用户提供快捷操作？
美观且简约的设计每个元素是否都不可或缺？
错误恢复错误消息是否有帮助且可操作？
帮助和文档是否能在需要时获取指导？
第 3 步：多视角分析
可用性视角
  • 用户流程：完成任务的路径是否清晰高效？
  • 信息架构：内容组织是否合乎逻辑？
  • 认知负荷：界面是否令人应接不暇？
  • 心智模型：界面是否符合用户预期？
无障碍视角（WCAG 2.1 AA）
  • 键盘导航：是否可以不使用鼠标完成所有操作？
  • 屏幕阅读器：辅助技术用户的体验是否与其他用户相当？
  • 颜色对比度：所有文本和 UI 元素是否达到 4.5:1 的比例？
  • 焦点管理：焦点顺序是否合乎逻辑、清晰可见且不会被困住？

<button aria-label="Close dialog" aria-describedby="close-hint">
  <svg aria-hidden="true"></svg>
</button>
<span id="close-hint" class="sr-only">Press Escape to close</span>
交互设计视角
  • 状态覆盖：是否处理了所有状态（加载、空、错误、成功）？
  • 反馈：用户是否知道操作已生效？
  • 过渡效果：动画是否目的明确且时长低于 300ms？
  • 渐进式呈现：复杂内容是否以恰当的方式逐步呈现？
第 4 步：确定发现的问题优先级

为每项发现的问题分类：

优先级标准行动
严重阻碍可用性或不符合 WCAG AA发布前必须修复
高显著降低体验质量在当前迭代中修复
改进项提升愉悦感和效率列入下一次迭代的待办事项
未来长期改进纳入路线图跟踪
第 5 步：生成评审报告
## UX Review: [Component/Flow Name]

### Summary
[2-3 sentence executive summary]

### Critical Issues
- [ ] Issue 1: [Description, impact, WCAG criterion if applicable]
- [ ] Issue 2: [Description, impact]

### Recommendations by Category

#### Usability
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | High/Med/Low | [Fix] |

#### Accessibility
| Finding | WCAG Criterion | Recommendation |
|---------|----------------|----------------|
| [Issue] | [2.x.x Level] | [Fix] |

#### Interaction Design
| Finding | Impact | Recommendation |
|---------|--------|----------------|
| [Issue] | High/Med/Low | [Fix] |

### Next Steps
1. Create issues for critical findings
2. Add accessibility requirements to acceptance criteria
3. Schedule follow-up review after fixes

深入评审重点领域

使用 --focus 缩小评审范围：

  • --focus=ux：用户流程映射、任务效率、错误恢复、易学性
  • --focus=a11y：WCAG 2.1 AA 审查、键盘导航、屏幕阅读器、对比度、焦点管理
  • --focus=interaction：状态覆盖、反馈时机、微交互、动画评审

最佳实践

  • 使用真实内容进行测试——Lorem ipsum 会掩盖信息架构问题
  • 检查所有状态——空、加载、错误、成功和边缘情况
  • 验证键盘操作流程——不使用鼠标，通过 Tab 遍历整个组件
  • 使用浏览器开发者工具——Lighthouse 无障碍审计能发现容易修复的问题
  • 严格确定优先级——聚焦于关键修复的清单，胜过一长串建议

评论

支持 Markdown