한국어 버전

😀 디자인 감사 - Claude Skill

**19의 전문 디자인 범주에 대한 설계를 감사하는 Claude 기술 ** - 개발자, 비 디자이너 및 규칙 자체를 알고 필요없는 전문 디자인 검증을 원하는 사람.

Figma 파일 (Figma MCP를 통해), code (HTML/CSS/React/Vue), screenshots, wireframes 및 서면 설명. 지원 ** 영어 및 한국어**.

Claude, Manus 및 SKILL.md 기반 기술을 지원하는 다른 에이전트와 호환됩니다.

---

그것은 무엇을

Figma 링크에서 드롭, CSS를 붙여, 스크린 샷 업로드, 또는 와이어 프레임 공유 - 디자인 감사관은 19 범주의 디자인 규칙에 대한 작업을 확인하고 당신을 제공합니다 :

• 100**의 코어 아웃은 per-category 고장 (열당 미니 바 차트 포함)
• 별도 **액세스 점수 ** (CAG 적용 Cat 2, 6, 7, 15, 16)
• 별도 Ethics Score (Dark 패턴 및 조작 디자인 Cat 18)
• 별도 ** 사용성 점수 ** (Cat 19 - H1/H2/H3/H6/H7/H10, H4/H5/H8/H9를 위한 Nielsen 상호 참조)
• A ** 원자 블록러 계층 ** 법적 / 책임 위반에 대한 (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