An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Claude Design Auditor Skill
A Claude skill that audits designs against 19 professional design rules.
Install
$
git clone https://github.com/Ashutos1997/claude-design-auditor-skillInstall command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →🎨 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
Similar plugs
The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create prototypes, websites, apps, dashboards, presentations, images, and videos with your team…
Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages
Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more.
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
Clone any website with one command using AI coding agents