Design Auditor — Design skill for Claude Code
Audits designs against 17 professional rules: typography, WCAG, spacing, iconography, navigation, tokens + more.
How to install Design Auditor
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Ashutos1997/claude-design-auditor-skill and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Design Auditor does
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.
Alternatives in Design
- Brainstorming — Transform rough ideas into fully-formed designs through structured questioning and alternative exploration 27.9k ★
- Pair — Fuse two extracted designs into a single hybrid identity 3.6k ★
- Design Critique — UX heuristic review of Figma screens — evaluates against Nielsen's 10 heuristics, visual design quality, spaci 309 ★
README
🎨 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 |
...
Related Skills
Frontendtailwind
Autonomous Tailwind + shadcn/ui visual refinement on a feature branch — audits current Tailwind/shadcn usage,
Design Engineer Auditor Package
A Claude Code skill for motion design audits, trained on Emil Kowalski, Jakub Krehel, and Jhey Tompkins.
Tollgate
Claude Code and Codex subscription limits in the Windows tray: usage bars, a run-out forecast and alerts befor
Work With Design Systems
Inspect, build, or extend Figma design systems from Claude Code. Read-only audits with WCAG checks and compone
Distributed Systems Design
Guides distributed system design using a structured 4-step framework. CHECKER mode audits existing designs. AP
Figma Skill
Claude Code skill for Figma designs — cache-first, multimodal, design-system audits
Related Agents
UI Visual.Agent
Use when designing or reviewing the visual UI for the target repo: layout metrics, spacing, typography, semant
Jobs
Jobs (Джобс) — UI/UX design specialist — design systems, color palettes, typography, spacing tokens, and compo
Ds Tokens
Use ONLY to extract design tokens (colors, spacing, radius, typography) from the Figma file's LOCAL variable c
