🇰🇷 한국어 버전 →

🎨 设计审核员 — 克劳德·斯基尔

一项Claude技能，可以审核设计与19个专业设计类别——面向开发者、非设计师以及任何想要专家设计验证但无需了解规则的人。

可处理Figma文件（通过Figma MCP）、代码（HTML/CSS/React/Vue）、截图、线框及书面描述。支持英语和韩语。

兼容Claude、Manus及其他支持SKILL.md技能的代理。

---

它的作用

只需输入Figma链接，粘贴CSS，上传截图，或分享线框图——Design Auditor会将你的作品与19类设计规则进行核对，并提供：

• 满分100分的**分数，并按类别细分（每行附小条形图）
• 单独的无障碍评分（WCAG覆盖第2、6、7、15、16类）
• 一个独立的伦理评分（涵盖第18类的黑暗模式和操控性设计）
• 一个独立的可用性评分（类别19 — H1/H2/H3/H6/H7/H10，含尼尔森交叉参考H4/H5/H8/H9）
• 🚫 ** 阻断层级**，用于法律/合规违规（WCAG AA、GDPR、PECR）——与关键问题分开

🇰🇷 한국어 버전 →

🎨 Design Auditor — Claude Skill

A Claude skill that audits designs against 19 professional design categories — built for developers, non-designers, and anyone who wants expert design validation without needing to know the rules themselves.

Works with Figma files (via Figma MCP), code (HTML/CSS/React/Vue), screenshots, wireframes, and written descriptions. Supports English and Korean.

Compatible with Claude, Manus, and other agents that support SKILL.md-based skills.

---

What It Does

Drop in a Figma link, paste your CSS, upload a screenshot, or share a wireframe — Design Auditor checks your work against 19 categories of design rules and gives you:

• A score out of 100 with per-category breakdown (with mini bar chart per row)
• A separate Accessibility Score (WCAG coverage across Cat 2, 6, 7, 15, 16)
• A separate Ethics Score (dark patterns and manipulative design across Cat 18)
• A separate Usability Score (Cat 19 — H1/H2/H3/H6/H7/H10, with Nielsen cross-reference for H4/H5/H8/H9)
• A 🚫 Blocker tier for legal/compliance violations (WCAG AA, GDPR, PECR) — separate from Critical issues
• Issues ranked by severity (🚫 Blocker / 🔴 Critical / 🟡 Warning / 🟢 Tip)
• Color blindness context — every failing color pair annotated with the affected blindness type
• SVG accessibility checks — decorative vs. meaningful SVG patterns, aria-hidden, role=“img”
• Design System detection — MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap (system-specific fixes)
• Figma Auto Layout scan — detects frames using manual positioning where Auto Layout should be used
• Plain-language explanations of why each rule matters
• “Teach Me” mode — explains the design principles behind your top 3 issues, not just the fixes
• An Issue Priority Matrix — every issue plotted by effort vs. impact
• Before/after code diffs when fixing issues in HTML/CSS/React/Vue
• Direct fixes in your Figma file via Figma MCP
• Figma Code Connect — detects design-to-code mapping gaps (get_code_connect_suggestions)
• Wireframe to Spec — converts wireframes into annotated dev-ready specs
• Visual audit report exportable to Canva for stakeholder sharing
• Developer handoff report — CSS spec table, a11y checklist, critical fixes
• Export report as Markdown — ready for Notion, GitHub, Linear, or Jira

---

The 19 Audit Categories