🇰🇷 한국어 버전 →

🎨 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

---

Who It’s For

• Developers building UIs who don’t have a design background
• Designers who want a fast second opinion or WCAG check
• Teams using Figma MCP or VS Code who want design validation in their workflow
• Product managers and founders who want to ship ethical, accessible products
• Anyone who’s ever wondered “does this look right?”

---

How to Install

1. Download design-auditor.skill from the releases page
2. Go to Claude.ai → Customize → Skills
3. Click Upload skill and select the file
4. Done — the skill is now active in your conversations

---

How to Use

Once installed, just talk to Claude naturally:

English:

"Check my design" → choose scope (full / quick / custom), then audit
"Is this accessible?" → accessibility-focused audit
"Review my form" → partial audit, relevant categories only
"Does this follow WCAG?" → contrast & a11y audit
"Check my Figma file: [link]" → Figma MCP audit
"Any dark patterns here?" → ethics audit
"Wireframe to spec" → annotated dev-ready spec from wireframe

Korean:

"디자인 검토해줘" → 전체 감사
"접근성 확인해줘" → 접근성 중심 감사
"내 디자인 괜찮아 보여?" → 전체 감사
"UI 검토해줘" → 전체 감사
"색상 대비 확인해줘" → 색상 및 접근성 감사
"와이어프레임 스펙 출력해줘" → 와이어프레임 스펙 모드

---

Example Output

## 🔍 Design Audit Report

**Input:** Checkout flow · 3 frames
**Type:** Figma MCP
**Confidence:** 🟢 High
**Component health:** 71% coverage · 2 detached instances · 8 unnamed layers
**Code Connect:** 8 components mapped · 3 unmapped

### Overall Score: 62/100
100 − (1 × 🚫 12) − (2 × 🔴 8) − (4 × 🟡 4) − (2 × 🟢 1) = 62/100
A legal compliance failure and contrast issues are the main drag.

### Accessibility Score: 55/100 — significant gaps ⚠️ Contains legal compliance failures
### Ethics Score: 85/100 — minor concerns

### 🚫 Blockers (−12pts each)
- **Text contrast failure** — #aaa on white = 2.3:1 → Fix: use #595959 (7:1)
  Legal basis: WCAG 2.1 SC 1.4.3

### 🔴 Critical Issues (−8pts each)
- **Missing form labels** — placeholder-only inputs lose label on type
  → Fix: add  above each input.

### 🟡 Warnings (−4pts each)
- **Off-grid spacing** — padding: 13px → Fix: use 12px or 16px
- **CTA hierarchy inversion** — "Accept all" primary, "Reject all" grey text
  → Fix: equivalent visual weight (GDPR requirement)

---

Skill Structure

design-auditor/
├── SKILL.md                        — Main skill instructions (19 categories)
└── references/
    ├── typography.md               — Font rules, sizing, hierarchy, type scale algorithm
    ├── color.md                    — WCAG luminance formula, contrast, palette guidance
    ├── spacing.md                  — 8-point grid, layout, proximity, code checks
    ├── corner-radius.md            — Nested radius rule, scale, pill shapes, code checks
    ├── elevation.md                — Shadow scale, elevation hierarchy, code shadow audit
    ├── iconography.md              — Icon families, sizing, touch targets
    ├── navigation.md               — Tabs, breadcrumbs, back buttons, mobile nav, code checks
    ├── tokens.md                   — Design tokens, semantic naming, dark mode architecture
    ├── figma-mcp.md                — Figma MCP workflow, Code Connect, page structure, safe editing
    ├── heuristics.md               — Nielsen's 10 Usability Heuristics: H1/H2/H3/H6/H7/H10 gap coverage
    ├── states.md                   — Loading, empty, error, success states + code checks
    ├── microcopy.md                — Button labels, errors, tone, per-role audit guide
    ├── animation.md                — Easing curves, duration scales, reduced motion, code checks
    ├── i18n.md                     — RTL support, locale formatting, i18n
    └── ethics.md                   — Dark patterns, ethical design, persuasion vs manipulation

---

Changelog

v1.2.13

Regulatory Compliance Baseline added to Cat 18.

New: Regulatory Compliance Baseline (Cat 18 Group F) 6 cross-jurisdiction UI-detectable compliance checks — applicable across EU, US, UK, Canada, Brazil, Australia. 🚫 Blocker when a legal requirement is clearly absent, 🟡 Warning when ambiguous. Each includes a code signal and a caveat that this is a UI signal layer, not a legal audit. Full Korean translations throughout.

• Cookie & consent banner — GDPR, PECR, CCPA: banner presence, Reject All at equal prominence to Accept All, granular consent categories
• Subscription & auto-renewal disclosure — FTC, CMA, EU Consumer Rights: renewal frequency, amount, and cancellation method visible before confirmation
• Privacy at point of collection — GDPR Art. 13, CCPA, PIPEDA: policy link or “why we need this” near sensitive input fields
• Right of withdrawal / cancellation policy — EU CRD, UK CRA, FTC: policy link visible near final checkout CTA
• Age gate for restricted content — COPPA, GDPR Art. 8, UK Age-Appropriate Design Code: verification mechanism before restricted content
• Accessibility legal baseline — ADA/Section 508 (US), EAA (EU — mandatory June 2025), PSBAR (UK), DDA (Australia), AODA (Canada): Cat 6 Blockers carry legal weight

---

v1.2.12

Behavioural patterns from nudges.fyi, bug fixes, and visual report improvements.

New: 5 behavioural pattern additions

• Overchoice Paradox → Cat 4 — 4+ equal-weight sibling actions with no primary → 🟡; 6+ → 🔴. Exempt: lists, nav menus, data tables
• Peak-End Rule → Cat 11 — audits success/completion screens for memorability: named action, next step, positive visual signal, auto-redirect timing
• Goal Gradient Theory → Cat 11 — detects multi-step flows with no progress bar, static fill bars, missing step totals, and aria-valuenow gaps
• Decoy Pricing → Cat 18 Group A — 3-column pricing with one tier strictly dominated on every axis
• Manipulative Anchoring → Cat 18 Group D — text-decoration: line-through / .was-price / .rrp patterns near current price elements

Bug fixes

• Cat 18 pattern count updated: 20 → 22 (both READMEs)
• Cat 6 SVG ``: added xlink:href legacy check alongside href
• Cat 19 H1 “Multi-step progress” cross-references new Cat 11 Goal Gradient checks to avoid double-flagging
• Scores panel: Ethics Score formula caveat added — 🔴 −15 · 🟡 −7 · 🟢 0, distinct from standard formula
• heuristics.md separator in skill structure: - → —
• README Cat 11 row updated to mention Peak-End Rule and Goal Gradient

Visual report improvements

• Radar chart: binary purple/red → three-colour scale — purple (8–10) · amber (6–7) · red (≤ 5)
• Radar chart: fallback to Score by Category table when Visualizer unavailable (EN + KR)
• Issue Priority Matrix: Korean axis labels added — 수정 난이도 (x) · 개선 효과 (y)
• Score by Category table: score band footnote — ≥ 8 ✅ · 5–7 🟡 · ≤ 4 🔴 (EN + KR)
• Re-audit delta: before/after bar pair rendered via Visualizer with colour-coded delta badge
• Teach Me mode: 3-card Visualizer layout after lessons, each card clickable via sendPrompt()

---

v1.2.11

Code parity, design system detection, accessibility improvements, and bug fixes.

• Code superpowers — added 📋 Code input: blocks to Cat 4 (Visual Hierarchy), Cat 5 (Consistency), Cat 11 (States), Cat 12 (Microcopy), Cat 14 (Elevation), Cat 15 (Iconography) — completing all 19 categories
• Design System detection — auto-detects MUI, Chakra UI, shadcn/ui, Ant Design, Radix, Bootstrap; system-specific issue types and fix paths
• Color blindness context — every failing color pair annotated with affected blindness type (Deuteranopia, Protanopia, Tritanopia)
• SVG accessibility — decorative aria-hidden, meaningful role="img" + ``, icon-button label checks across Cat 6 and Cat 15
• Figma Auto Layout scan — detects frames using manual positioning where Auto Layout should be used; shown in report header
• Accessibility Score — expanded from Cat 2/6/7/16 to Cat 2/6/7/15/16 (Cat 15 SVG checks are WCAG legal violations)
• Nielsen cross-reference — H4/H5/H8/H9 mapped in scores panel to Cat 5/7/4/11–12
• “Teach Me” mode — explains design principles behind top 3 issues (beginner + expert depth, full Korean)
• Scoring formula — Blockers now explicit: 100 − (blockers × 12) − (criticals × 8) − (warnings × 4) − (tips × 1)
• Dev Handoff Report — added missing 🟢 Tips section; Korean translation included
• Output — mini bar column in Score by Category table; Design System + Auto Layout rows in report header; Cat 9 color-scheme meta tag check
• Bug fixes — category count “17” → “19” throughout; Cat 18/19 numbering corrected; i19n.md → i18n.md; Korean README category count corrected

---

v1.2.10

Dev Handoff Report, Wireframe to Spec — restructured. Korean coverage for both.

Dev Handoff Report restructured:

• ━━━ dividers between all sections for consistent visual separation
• Blockers separated into their own section (🚫 BLOCKERS — fix before any other work) above Critical Fixes — previously grouped together
• All four scores in the metadata table: Overall, A11y, Ethics, Usability (with conditional notes for Ethics and Usability)
• Code Connect mapping table included in template
• Consistent ━━━-wrapped footer

Wireframe to Spec restructured:

• All 8 sections now have ━━━ dividers with emoji headers (📐 📏 🔤 🧩 ✍️ 🖱️ ♿ ❓)
• Context notes moved into section headers directly after each ━━━ block, instead of scattered inline

Korean support added for both:

• Dev Handoff Report — Korean note block: title, all 6 field labels, all 7 section headers, all 12 table column headers, footer
• Wireframe to Spec — bilingual footer lines + Korean note block: title, field labels, all 8 section headers with context notes, table column headers

README:

• v1.0.0–v1.2.4 changelog entries collapsed into a `

Contributing

Found a design rule that should be in here? Open an issue or PR.

Areas that could use expansion:

• UX flow analysis & information architecture
• Data visualization & charts
• Native mobile (iOS/Android) specific patterns
• Print / PDF layout rules

---

License

MIT — use it, fork it, build on it.

---

Built with Claude · Skill format by Anthropic