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-motion4. 导航多页面应用时当前位置是否清晰菜单行为是否可预测深层结构是否有面包屑移动端导航模式是否合适5. 可用性交互流程时功能是否可被用户发现操作后是否有反馈错误是否可以被预防和恢复认知负荷是否被合理管理优先级修复列表每个问题都会标注严重程度阻塞 / 严重 / 建议问题描述什么和为什么参考依据对应框架文件与章节修复建议具体怎么做七、参考知识库ui-audit 内置了一套完整的参考文档覆盖设计全流程基础框架文件内容00-core-framework.md三大支柱、决策流程、宏观赌注01-anchors.md7 个设计韧性基础心态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 会快得多。记录你的决策理由— 未来的你会感谢现在的你。快或不做不要卡死— 目标是有信息支撑的速度不是完美分析。
ui-audit Skill-claude code的UI/UX自动化审计，非常好用
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-motion4. 导航多页面应用时当前位置是否清晰菜单行为是否可预测深层结构是否有面包屑移动端导航模式是否合适5. 可用性交互流程时功能是否可被用户发现操作后是否有反馈错误是否可以被预防和恢复认知负荷是否被合理管理优先级修复列表每个问题都会标注严重程度阻塞 / 严重 / 建议问题描述什么和为什么参考依据对应框架文件与章节修复建议具体怎么做七、参考知识库ui-audit 内置了一套完整的参考文档覆盖设计全流程基础框架文件内容00-core-framework.md三大支柱、决策流程、宏观赌注01-anchors.md7 个设计韧性基础心态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 会快得多。记录你的决策理由— 未来的你会感谢现在的你。快或不做不要卡死— 目标是有信息支撑的速度不是完美分析。
