Design Auditor

🎨 Design Auditor — Claude Skill

A Claude skill that audits designs against **17 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**, 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, or upload a screenshot — Design Auditor checks your work against 17 categories of design rules and gives you:

• A score out of 100 with per-category breakdown
• Issues ranked by severity (🔴 Critical / 🟡 Warning / 🟢 Tip)
• Plain-language explanations of why each rule matters
• A top 3 priority fix list
• Before/after code diffs when fixing issues
• An offer to fix issues directly in your code or Figma file
• Export report as Markdown — ready for Notion, GitHub, Linear, or Jira

---

The 17 Audit Categories

#	Category	What It Checks
1	Typography	Hierarchy, font count, size, line height, contrast
2	Color & Contrast	WCAG ratios, semantic color use, palette consistency
3	Spacing & Layout	8-point grid, proximity, alignment, whitespace
4	Visual Hierarchy	Primary action clarity, reading patterns, size/contrast mapping
5	Consistency	Component reuse, icon families, corner radius, interaction states
6	Accessibility (A11y / WCAG)	Touch targets, focus states, alt text, form labels, reading order
7	Forms & Inputs	Labels, sizing, validation timing, error placement, submit states
8	Motion & Animation	Purpose, duration, easing, reduced-motion support
9	Dark Mode	Not just inverted, surface elevation, saturation, icon legibility

...