/ Directory / Playground / Claude Design Auditor
← All servers ↗ GitHub
● Community Ashutos1997 ⚡ Instant

Claude Design Auditor

by Ashutos1997 · Ashutos1997/claude-design-auditor-skill

Systematic design review — typography, contrast, spacing, a11y, motion, dark mode, tokens, dark patterns — scored 0-100 with before/after code.

claude-design-auditor-skill audits designs across formats (Figma, HTML/CSS, React/Vue, screenshots, wireframes, prose descriptions) against 18 professional rules. Output is a 0-100 score with severity-ranked issues, separate accessibility + ethics scores, before/after code fixes, and exportable reports (Markdown, Canva, dev handoff). Use it to pressure-test a design before dev handoff, to enforce a quality bar in PRs, or to triage a redesign priority list.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

claude-design-auditor-skill.replay ▶ ready
0/0

Install

Author repository · Claude Skills documentation

Use Cases

Real-world ways to use Claude Design Auditor

Audit a design before shipping to engineering

👤 Product designers preparing dev handoff ⏱ ~30 min intermediate

When to use: Design is 'done' and you want a final sweep before devs start cloning it.

Flow
  1. Invoke the auditor
    Audit this Figma link: <url>. Scope: full.✓ Copied
    → Score + ranked issues with references to the 18 rules
  2. Fix the criticals
    Apply the top 5 high-severity fixes in Figma; show before/after.✓ Copied
    → Before/after previews for each fix
  3. Export the handoff
    Export a dev-handoff markdown with tokens and a11y notes.✓ Copied
    → Markdown ready to drop into the ticket

Outcome: Design arrives at dev with its major issues already closed.

Pitfalls
  • Treating the score as the goal — Score measures adherence to rules, not taste. Use the finding list, not just the number
Combine with: claude-code-design-skills

Accessibility-check a component

👤 Frontend engineers shipping a new component ⏱ ~20 min beginner

When to use: You built a dialog/menu/form control and want to catch a11y issues early.

Flow
  1. Paste the component source
    Audit this React Dialog component, scope: accessibility + motion.✓ Copied
    → Findings cite WCAG criteria with exact lines to change
  2. Apply fixes
    Patch the component with the proposed fixes; keep the API unchanged.✓ Copied
    → Diff respects existing API

Outcome: A component that survives an accessibility review.

Pitfalls
  • Auditor overreach on taste (e.g., style nitpicks in a11y mode) — Constrain scope explicitly to a11y + motion
Combine with: motion-dev-animations-skill

Triage a legacy UI for redesign priorities

👤 Design leads owning a redesign ⏱ ~60 min advanced

When to use: You're planning a redesign and need data on where to start.

Flow
  1. Feed screens or URLs
    Audit the top 10 screens of app.<url>. Aggregate findings by severity.✓ Copied
    → Cross-screen rollup with hot spots
  2. Pick sequencing
    Propose a redesign sequencing plan grouped by rule category.✓ Copied
    → Plan linked to findings, not vibes

Outcome: A redesign plan backed by concrete defects.

Combinations

Pair with other MCPs for X10 leverage

claude-design-auditor-skill + claude-code-design-skills

Audit → Figma-to-code → re-audit the code

Audit the Figma, convert to React, then re-audit the React to verify parity.✓ Copied
claude-design-auditor-skill + motion-dev-animations-skill

Let motion experts add/tune animations, then run the auditor's motion scope

Add spring animations per motion-dev; then audit motion + reduced-motion behavior.✓ Copied
claude-design-auditor-skill + figma

Pull Figma assets via MCP, audit, and write comments back

For each flagged frame, add a Figma comment summarizing the finding.✓ Copied

Tools

What this MCP exposes

ToolInputsWhen to callCost
design-audit (SKILL) asset (Figma URL / image / code) + optional scope Before handoff, in code review, or as part of a redesign plan 0

Cost & Limits

What this costs to run

API quota
None
Tokens per call
Large — screenshots and long code blocks dominate
Monetary
Free
Tip
Scope aggressively (a11y only, or typography only) for quick iterations; full audits are token-heavy.

Security

Permissions, secrets, blast radius

Credential storage: None; if Figma URLs are private, share via image export or use the Figma MCP with proper scope.
Data egress: No network egress from the skill; your images and code stay in-chat.

Troubleshooting

Common errors and fixes

Auditor misses obvious issues

Increase the input size or provide multiple viewports/screenshots; heuristics are better with coverage.

Verify: Re-run with extra screenshots
Tokens warning about too much output

Set scope to a subset of the 18 rules.

Verify: Ask for 'scope: typography + contrast + a11y' only
Fixes break the existing design system

Instruct the auditor to stay within your token set; supply tokens.json.

Verify: Before/after diffs reference token names

Alternatives

Claude Design Auditor vs others

AlternativeWhen to use it insteadTradeoff
claude-code-design-skillsYou want to go from Figma to code, not audit existing workCovers the other side of the pipeline
ai-friendly-web-design-skillYou want broad web-design guidance, not a strict auditorLess structured output
apple-hig-designer-skillYou're specifically designing for Apple platformsPlatform-specific rather than universal

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →