辅助功能-检查组件

您构建了一个对话框/菜单/表单控件，并希望尽早发现a11y问题。在辅助功能审核中幸存的组件。

Claude Design Auditor (Claude Skill) — 安装 & 实时演示

为什么要用

核心特性

18个审核类别—排版、对比度、间距、层次结构、一致性、a11y、表单、动作、深色模式、响应式、状态、复制、i18n/RTL、海拔、图标、导航、令牌、伦理
多种输入格式： Figma、HTML/CSS、React/Vue、屏幕截图、线框、散文
0-100分，严重程度标签，单独的a11y +道德评分
每个修复之前/之后的代码示例
导出： Markdown、Canva、开发人员移交

实时演示

实际使用效果

claude-design-auditor-skill.replay ▶ 就绪

0/0

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： Claude Design Auditor

在交付给工程部门之前审核设计

👤 产品设计师准备开发移交 ⏱ ~30 min intermediate

何时使用： 设计是“完成”的，您希望在开发人员开始克隆它之前进行最后的扫描。

步骤

调用审核员

审核此Figma链接：<url>。范围：满。✓ 已复制

→ 参考18条规则，对问题进行分数+排名
修复关键问题

在Figma中应用前5个高严重程度修复；显示之前/之后。✓ 已复制

→ 每次修复之前/之后的预览
导出切换

导出带有令牌和a11y注释的开发交接标记。✓ 已复制

→ Markdown已准备好进入工单

结果： 设计到达DEV时，其主要问题已经解决。

注意事项

将分数视为目标 — 得分衡量的是对规则的遵守，而不是品味。使用查找列表，而不仅仅是数字

搭配使用： claude-code-design-skills

对旧版用户界面进行分类，以重新设计优先级

👤 负责重新设计的设计主管 ⏱ ~60 min advanced

何时使用： 您正在计划重新设计，需要有关从哪里开始的数据。

步骤

订阅源屏幕或网址

审核应用程序的前10个屏幕<url>。按严重程度汇总结果。✓ 已复制

→ 带有热点的跨屏幕汇总
拣货顺序

提出按规则类别分组的重新设计排序计划。✓ 已复制

→ 与调查结果相关的计划，而不是氛围

结果： 以混凝土缺陷为后盾的重新设计计划。

组合

与其他 MCP 搭配，撬动十倍杠杆

claude-design-auditor-skill + claude-code-design-skills

审核→Figma到代码→重新审核代码

审核Figma ，转换为React ，然后重新审核React以验证奇偶校验。✓ 已复制

claude-design-auditor-skill + motion-dev-animations-skill

让运动专家添加/调整动画，然后运行审核员的运动范围

为每个motion-dev添加弹簧动画；然后审核motion + reduced-motion行为。✓ 已复制

claude-design-auditor-skill + figma

通过MCP提取Figma资产，审计并回复评论

对于每个标记的帧，添加总结发现的Figma注释。✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用	成本
design-audit (SKILL)	asset (Figma URL / image / code) + optional scope	移交前、代码审核中或作为重新设计计划的一部分	0

成本与限制

运行它的成本

API 配额: 无
每次调用 Token 数: 大—屏幕截图和长代码块占主导地位
费用: 免费
提示: 积极地（仅限a11y或仅限排版）进行快速迭代；全面审核是象征性的。

安全

权限、密钥、影响范围

凭据存储： 无；如果Figma网址是私有的，请通过图像导出共享或使用具有适当范围的Figma MCP。

数据出站： 没有来自技能的网络出口；您的图像和代码保持在聊天中。

绿色评分≠好设计。审核员执行规则；产品市场契合度、品牌和情感由您判断。
伦理/黑暗模式类别是启发式的。用作讨论的提示，而不是法庭判决。

故障排查

常见错误与修复

审核员忽略了显而易见的问题

增加输入大小或提供多个视口/屏幕截图；通过覆盖，启发式效果更好。

验证： Re-run with extra screenshots

令牌警告输出过多

将范围设置为18条规则的一个子集。

验证： Ask for 'scope: typography + contrast + a11y' only

修复打破了现有的设计系统

指示审核员留在您的令牌集中；提供tokens.json。

验证： Before/after diffs reference token names

替代方案

Claude Design Auditor 对比其他方案

替代方案	何时用它替代	权衡
claude-code-design-skills	您想从Figma转到代码，而不是审核现有工作	覆盖管道的另一侧
ai-friendly-web-design-skill	您需要广泛的网页设计指导，而不是严格的审核员	较少结构化输出
apple-hig-designer-skill	您是专门为Apple平台设计的	特定于平台，而不是通用

Claude Design Auditor