ui-audit Skill 介绍文档
一、是什么
ui-audit是一个为 AI 助手（如 Claude）设计的结构化 UI/UX 审计技能。它让 AI 能够像资深 UX 设计师一样，系统性地审视界面设计，发现可用性问题，并给出基于成熟 UX 原则的可执行建议。
核心主张：快速决策不等于鲁莽决策。设计得快不是问题，没有章法地瞎搞才是。
二、能做什么
| 能力 | 说明 |
|---|---|
| 视觉层次审计 | 检查标题层级、CTA 突出性、信息分组、阅读流是否清晰 |
| 视觉风格审计 | 检查间距一致性、配色规范、阴影/深度、排版系统 |
| 无障碍审计 | 检查键盘导航、焦点状态、对比度、屏幕阅读器支持、触控目标尺寸 |
| 导航审计 | 检查寻路线索、面包屑、菜单结构、信息架构 |
| 认知负荷审计 | 检查信息分块、渐进披露、表单复杂度、加载状态 |
| 社会认同审计 | 检查信任信号、评价展示、认证徽章（适用于落地页） |
| 新手引导审计 | 检查首次使用体验、教程、空状态（适用于新用户流程） |
三、核心框架：极速决策三支柱
ui-audit 的方法论建立在三个支柱之上：
1. 脚手架（Scaffolding）
用于自动化重复决策的预制规则。包括设计心理学参考、无障碍标准（WCAG）、默认字体与字号、图标库选择、设计系统等。
2. 决策（Decisioning）
当脚手架无法直接套用时，按以下三步做新决策：
- 内部知识优先— 现有组件/模式能否解决？设计系统怎么规定？技术约束是什么？
- 用户熟悉度次之— 竞品怎么做的？平台惯例是什么？（Jakob 定律：用户 99% 的时间花在你的网站之外）
- 研究数据兜底— 有没有可用性测试数据？分析工具怎么说？学术文献支持吗？
规则：研究胜过主观判断，但研究缺失不等于决策瘫痪。
3. 工艺（Crafting）
用检查清单确保执行一致。包括新界面检查清单、保真度检查清单、视觉风格检查清单、创新检查清单。
四、宏观赌注：设计决策的锚点
每一个微观设计决策，都应该服务于公司的宏观战略赌注：
| 赌注类型 | 含义 | 设计 implication |
|---|---|---|
| 速度(Velocity) | 更快把功能推向市场 | 复用现有模式、借鉴跨领域隐喻 |
| 效率(Efficiency) | 更好地管理资源浪费 | 建设设计系统、减少在制品 |
| 准确性(Accuracy) | 更频繁地做对选择 | 加强研究、完善埋点与监测 |
| 创新(Innovation) | 发现未被开发的市场潜力 | 探索新颖模式、跨领域启发 |
关键规则：微观赌注只有在有意支持宏观赌注时才成立。
五、如何使用
安装
# Agent Skills (Vercel)npx skillsadduxtools/ui-audit# ClawdHubclawdhubinstallui-audit# npmnpminstallui-audit调用方式
安装后，直接向 AI 发出审计指令即可：
# 审计 Figma 设计稿 Audit this design: [figma-url] # 审计网页的可访问性问题 Review this landing page for accessibility issues # 询问某个页面的视觉层次建议 What visual hierarchy patterns should I use for a pricing page? # 审计当前项目中的某个页面 请帮我审计一下首页的视觉层次和无障碍访问完整审计示例
请对以下设计进行完整 UI 审计： - 页面：商品详情页 - 截图：[附上截图或 URL] - 产品类型：电商 Web 应用 - 目标用户：25-40 岁消费者 - 当前阶段：MVP 验证期 请按以下维度输出审计报告： 1. 视觉层次 2. 视觉风格 3. 无障碍访问 4. 导航与寻路 5. 可用性 6. 优先级修复建议六、审计报告输出格式
ui-audit 生成的审计报告包含以下结构：
必含维度（6-10 项检查/维度）
1. 视觉层次 (Visual Hierarchy)
- 标题与正文是否有明显区分
- 主操作按钮是否在 3 秒内可被识别
- 相关项是否被正确分组（邻近性法则）
- 阅读流是否自然
- 字号阶梯是否遵循最小 2:1 比例
2. 视觉风格 (Visual Style)
- 间距是否遵循一致的比例系统
- 配色是否服务于层次引导（而非装饰）
- 阴影/深度是否统一且有目的性
- 动效是否有原则可循
3. 无障碍 (Accessibility)
- 键盘能否完成全部操作
- 焦点状态是否始终可见
- 文字对比度是否达到 4.5:1
- 触控目标是否 ≥ 44x44px
- 是否支持
prefers-reduced-motion
4. 导航（多页面应用时）
- 当前位置是否清晰
- 菜单行为是否可预测
- 深层结构是否有面包屑
- 移动端导航模式是否合适
5. 可用性（交互流程时）
- 功能是否可被用户发现
- 操作后是否有反馈
- 错误是否可以被预防和恢复
- 认知负荷是否被合理管理
优先级修复列表
每个问题都会标注：
- 严重程度：阻塞 / 严重 / 建议
- 问题描述：什么和为什么
- 参考依据：对应框架文件与章节
- 修复建议：具体怎么做
七、参考知识库
ui-audit 内置了一套完整的参考文档，覆盖设计全流程：
基础框架
| 文件 | 内容 |
|---|---|
00-core-framework.md | 三大支柱、决策流程、宏观赌注 |
01-anchors.md | 7 个设计韧性基础心态 |
02-information-scaffold.md | 心理学、经济学、无障碍、默认值 |
执行检查清单
| 文件 | 内容 |
|---|---|
10-checklist-new-interfaces.md | 从零设计新界面的 6 步流程 |
11-checklist-fidelity.md | 组件状态、交互、可扩展性、反馈 |
12-checklist-visual-style.md | 间距、颜色、深度、排版、动效 |
13-checklist-innovation.md | 原创性光谱的 5 个层级 |
模式库（可复用解决方案）
| 文件 | 内容 |
|---|---|
20-patterns-chunking.md | 卡片、标签页、手风琴、分页 |
21-patterns-progressive-disclosure.md | 工具提示、浮层、抽屉、弹窗 |
22-patterns-cognitive-load.md | 步骤条、向导、极简导航、简化表单 |
23-patterns-visual-hierarchy.md | 排版、颜色、留白、尺寸、邻近性 |
24-patterns-social-proof.md | 评价、UGC、徽章、社交集成 |
25-patterns-feedback.md | 进度条、通知、验证、上下文帮助 |
26-patterns-error-handling.md | 表单验证、撤销/重做、对话框、自动保存 |
27-patterns-accessibility.md | 键盘导航、ARIA、替代文本、对比度、缩放 |
28-patterns-personalization.md | 仪表盘、自适应内容、偏好设置、本地化 |
29-patterns-onboarding.md | 导览、上下文提示、教程、检查清单 |
30-patterns-information.md | 面包屑、站点地图、标签、分面搜索 |
31-patterns-navigation.md | 优先级导航、画布外导航、粘性导航、底部导航 |
八、什么时候用
| 场景 | 怎么用 |
|---|---|
| 设计评审前 | 让 AI 预审一版，带着问题清单去开会 |
| 开发自查 | 前端开发完成后，快速过一遍 UX checklist |
| 竞品分析 | 截图竞品页面，让 AI 分析其设计优劣 |
| 设计卡壳 | 不知道某个页面怎么排布信息时，询问模式建议 |
| 无障碍合规 | 上线前做一轮 a11y 审计，避免法律风险 |
| 新界面从零开始 | 按 6 步流程走一遍，避免漏掉关键环节 |
九、关键原则速记
- 熟悉度减少认知负担— 新颖需要理由。
- 没有 universally 正确的 UI— 只有上下文里合适的方案。
- 先做对的事，再把事做对— 步骤 1-5 做好了，步骤 6 会快得多。
- 记录你的决策理由— 未来的你会感谢现在的你。
- 快或不做，不要卡死— 目标是有信息支撑的速度，不是完美分析。
