这个 Skill 能做什么，适合哪些场景？
Design Auditor 是一个基于 SKILL.md 的 Claude 技能，可将 Figma 文件、HTML/CSS/React/Vue/Tailwind 代码、截图、线框图或线上 URL 对照 19 类设计规则进行审计。它会自动检测框架与设计系统（MUI、Chakra、shadcn/ui、Ant Design、Radix、Bootstrap），输出百分制总分、无障碍分（WCAG）、伦理分（暗黑模式）与可用性分（Nielsen 启发式），并按严重程度分级标注问题。全程支持英文与韩文，可自动跟随用户语言。它还能通过 Figma MCP 直接在 Figma 文件中应用修复，或将线框图转换为开发可用的规格说明。
读取 Figma 文件（通过 MCP 获取图层结构、变量定义与截图）、源代码、截图或线上 URL；自动检测框架与组件库；运行 19 类检查（排版、色彩对比、8pt 网格、视觉层级、一致性、可访问性、表单、动效、暗黑模式、响应式、加载/空/错误状态、微文案、国际化、阴影、图标、导航、设计令牌、暗黑模式/伦理、Nielsen 启发式）；以 WCAG 公式计算对比度并标注色盲风险；输出带评分公式的问题报告（Blocker −12 / Critical −8 / Warning −4 / Tip −1）、修改前后的代码 diff、开发者交接报告，并可通过 Figma MCP 的 perform_editing_operations 直接修复图层。
- 自学前端的开发者想在提交 UI 前检查间距、对比度和层级是否符合规范
- 设计师拿到同事的 Figma 文件，想要一次快速的 WCAG AA 对比度与可访问性复查
- 团队要排查结账或表单流程中是否存在 GDPR 相关的暗黑模式（如预勾选同意、取消政策缺失）
- 产品经理想把灰度线框图转换为含尺寸、间距与状态要求的设计规格说明
- 韩语使用者希望整份审计报告以自然韩文 UX 术语呈现
- 维护组件库的工程师想核对 Figma 组件与代码组件之间的 Code Connect 映射缺口
如何安装这个 Skill？
- 该技能会主动抓取用户提供的外部 URL，被审计页面内容可能包含指令注入，使用时注意不要审计不可信来源。
- 核心依赖 Figma MCP 与 Claude.ai，中国大陆网络环境下可能不可达或受限，且仓库未披露此限制。
- 仅支持英文与韩语，中文用户无法获得本地化输出。
- SKILL.md 自身无许可证元数据，发布者身份未经验证，维护承诺仅在 README 层面。
- 无任何测试或第三方执行证据，所有能力声明均为作者自述，未经独立验证。
- 网络访问
- MCP Server
Figma MCP access (optional, for Figma file audits)
从仓库的 Releases 页面下载 design-auditor.skill 文件；打开 claude.ai，进入 Customize → Skills，点击 Upload skill 并选择该文件即可。来源未说明其他平台（如 Claude Code 或 Codex）的独立安装步骤，理论上将仓库文件放入对应的 skills 目录亦可，但请以仓库文档为准。
git clone --depth 1 https://github.com/Ashutos1997/claude-design-auditor-skill.git ~/.claude/skills/claude-design-auditor-skill根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- Check my design
- Is this accessible?
- Check my Figma file: [链接]
- Any dark patterns here?
安装后用自然语言触发，例如："Check my design"（完整审计）、"Is this accessible?"（可访问性审计）、"Check my Figma file: [链接]"、"Any dark patterns here?"（伦理审计）、"Wireframe to spec"。韩语可用："디자인 검토해줘"、"접근성 확인해줘"、"색상 대비 확인해줘"。技能会先推断审计范围、设计阶段和 WCAG 等级（默认 AA），推断不出来时才询问。
这个 Skill 有哪些优点和局限？
- 覆盖面广：19 类规则包含暗黑模式/伦理检查与 Nielsen 启发式，多数同类审计工具不涉及
- 区分输入置信度：截图输入会降低扣分权重并声明局限，避免伪精确
- 检测 MUI、Chakra、shadcn/ui 等设计系统，并给出系统特定的修复路径而非泛泛建议
- 全程英韩双语，且韩文报告使用地道的 UX 术语
- 可经 Figma MCP 直接修复图层，并带失败恢复与逐项验证截图
- Figma 直接修复依赖 Figma MCP 访问权限，没有 MCP 时只能给出手动修改指引
- 截图与线上 URL 审计为中等置信度，无法评估 hover/focus/加载等未渲染状态
- 伦理与合规基线（GDPR/PECR 等）明确声明为 UI 信号层，不构成法律审计
- 仓库 License 字段标注为 unknown，README 正文虽写 MIT，采用前应与作者确认
- 来源中没有测试套件或独立评测数据，效果主要依赖作者自述的 changelog
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| Design Auditor 设计审计技能 本页 | 53 · 谨慎使用 | ★ 86 | 5 个月前 | — |
| Figma 设计实现助手 ✓ OpenAI · 官方 | 53 · 谨慎使用 | ★ 28k | 4 个月前 | — |
| Impeccable | 58 · 推荐 | ★ 81k | 12 天前 | Apache-2.0 |
| OpenChamber 主题系统技能 | 57 · 谨慎使用 | ★ 12k | 11 天前 | MIT |
| Figma 设计系统规则生成器 ✓ OpenAI · 官方 | 50 · 谨慎使用 | ★ 28k | 4 个月前 | — |
与纯视觉的截图打分工具不同，本技能在有 Figma MCP 或代码输入时引用精确数值（如 "padding: 13px → 应为 12px 或 16px"），并叠加暗黑模式/合规检查；README 中未提及其他具名竞品，故不做具体对比。
FollowSkills 如何评估这个 Skill？
技能本身为纯指令式审查，无代码执行权限，具备最小权限倾向；对凭据处理（不回显凭据）、登录墙处理、报告头部披露局限性均有明确规定，数据流透明度较好。扣分点：会主动 web_fetch 任意外部 URL（live/GitHub/CodeSandbox 等），对被审计内容的指令注入风险无任何防护说明；Figma 编辑类操作（create_design_system_rules）虽有确认要求，但整体回滚、隔离机制未披露。
指令内部高度自洽：输入类型判定树、置信度分级、失败路径（私有仓库 404、Figma MCP 不可用、变量缺失降级）均有明确的诊断性提示而非把调试成本转嫁用户，Happy path 逻辑可信。扣分点：无任何已提交测试套件或 CI 证据覆盖关键路径，静态评估下按锚点上限只能给 10 分。
受众、场景、输入类型、非适用边界（描述性输入不审计、登录页限制、H4/H5/H8/H9 排除理由）和触发词均非常清晰，语义触发精度高。扣分点：仅支持英语和韩语，不覆盖中文用户；核心功能依赖 Figma MCP、Claude.ai 等对中国大陆网络不可达或受限的海外服务，且对此无任何披露。
文档分层良好（SKILL.md + references 渐进披露），版本号、双语 README、详尽 changelog、已知限制声明齐全，MIT 许可在 README_KR 中声明。扣分点：被评估的 SKILL.md 自身无许可证元数据（License metadata 为 unknown），发布者身份未验证，维护责任与更新路径未在技能文件内说明。
输出格式（评分报告、diff、交付报告）定义具体、模板完整，对纯指令式设计审查这一任务而言边际价值明确。扣分点：静态评估无法验证实际输出可直接使用；示例输出为作者自拟，且部分宣称功能（Canva 导出、Figma 编辑）依赖外部服务可用性，超出纯文本指令可保证的范围。
有可审计的第一手材料（完整指令、详尽 changelog、结构化引用文件清单），事实与推断区分尚可。扣分点：全部证据为作者自述，无第三方执行证据、无测试结果、无独立复现路径，静态评估下按锚点上限只能给 5 分以下。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →