Design Auditor

Scored UI/UX audit against 19 rules with real WCAG contrast math and code diffs

Tested · Works

Test report

Verdict
Tested · Works
Score
8.8/10
Tested
Jul 17, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · 48517ad

Fed it a signup card with three failing color pairs and it computed the exact WCAG ratios (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), all of which matched an independent Python luminance check to two decimals. Where a plain no-skill review just said the text 'looks light,' the skill returned a scored 0-100 report that also caught the 13px off-grid padding, sub-12px body text, missing image alt, unlabeled inputs, and outline:none focus removal, each with a copy-paste fix diff.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 8/10
  • Docs & honesty 4/5

What Design Auditor does

Audits designs and front-end code (HTML/CSS/React/Vue/Tailwind) or Figma files against 19 categories, producing a 0-100 score, WCAG contrast ratios, severity-tiered issues, and before/after fix diffs. Triggers on requests to review a UI, check accessibility, verify color contrast, or run a design/heuristic audit. English and Korean.

How to install Design Auditor

git clone https://github.com/Ashutos1997/claude-design-auditor-skill
mkdir -p ~/.claude/skills
cd claude-design-auditor-skill && cp -r . ~/.claude/skills/design-auditor

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Design Auditor

  • /design-auditor Scored UI/UX audit against 19 rules with real WCAG contrast math and code diffs

It also activates on plain-language prompts like these:

  • Can you audit this signup form for WCAG contrast and accessibility issues
  • Score our landing page against design heuristics and flag what's broken
  • Check our Figma file for accessibility problems before we ship it

Frequently asked questions

Is the Design Auditor skill free?
Yes. The skill itself is free from Ashutos1997/claude-design-auditor-skill. SkillProof publishes the install command and an independent test verdict at no cost.
Does Design Auditor work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 17, 2026. Verdict: Tested · Works. Fed it a signup card with three failing color pairs and it computed the exact WCAG ratios (#999/#fff = 2.85, #aaa/#fff = 2.32, white/#7c9fe0 = 2.66), all of which matched an independent Python luminance check to two decimals. Where a plain no-skill review just said the text 'looks light,' the skill returned a scored 0-100 report that also caught the 13px off-grid padding, sub-12px body text, missing image alt, unlabeled inputs, and outline:none focus removal, each with a copy-paste fix diff.
What is the Design Auditor SkillProof Score?
8.8/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 8/10, docs & honesty 4/5.
How do I install Design Auditor?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Design Auditor with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.