mcpField
D
design-auditor

design-auditor

github.com/podoDesign & UI29181 installsUpdated 4d ago
Repository

About design-auditor

design-auditor is a skill for reviewing interfaces across 19 design categories and producing a severity-ranked issue list with a 0–100 score. It audits code and screenshots, and can inspect Figma links when a Figma MCP server is connected.

Key features

  1. 01Reviews 19 design categories
  2. 02Scores design quality from 0 to 100
  3. 03Ranks issues by severity
  4. 04Audits code and screenshots
  5. 05Supports Figma links with Figma MCP

Use cases

  1. 01Review a React interface for design issues
  2. 02Check screenshots for accessibility and layout concerns
  3. 03Audit a Figma design when Figma MCP is available

MCP support

It can inspect Figma links when connected to a Figma MCP server; otherwise, audits use code or screenshots.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill design-auditor

After installing, type/design-auditorin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

design-auditor

Catalogue stub — full skill: Ashutos1997/claude-design-auditor-skill

Decision tree

  1. Is the full skill already installed?

    • Global: f=~/.agents/skills/design-auditor/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • Project: f=.agents/skills/design-auditor/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → the skill is installed as design-auditor, invoke it and proceed
    • pointer → go to step 2

  2. Detect scope, then install:

    [ -e ~/.agents/skills/design-auditor ] && echo "global" || echo "project"

    Global:

    npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -g -y

    Project:

    npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -y

    Claude Code: send a command as a chat message starting with ! to run it without leaving the conversation.

Heads-up

  • Requires: Figma MCP server (optional, only to audit Figma links; without it the skill asks for a screenshot or code)
  • License: no LICENSE file in the repo

Invoke after install

  • Skill name: design-auditor
  • Trigger phrases: "design audit", "design score", "19 categories", "design-auditor", "design quality check"

What it does

Comprehensive design audit skill that evaluates designs across 19 professional categories: typography, color/contrast, spacing, visual hierarchy, consistency, WCAG accessibility, forms, motion/animation, dark mode, responsive design, loading states, empty states, error states, microcopy, i18n/RTL support, elevation/shadows, iconography, navigation, design tokens, ethical design and dark patterns, and Nielsen heuristics. Produces a 0-100 score with issues ranked by severity so the most impactful problems surface first. Audits code (HTML, CSS, React, Vue, Tailwind) and screenshots, and Figma links when the Figma MCP server is connected. Replies in English or Korean to match the request. The upstream SKILL.md is large (about 160 KB), so expect a heavy context load when it triggers.

When NOT to use

  • Accessibility-only audits — use fixing-accessibility for a focused WCAG pass
  • WCAG-specific compliance documentation — use wcag-audit-patterns

Comments

Markdown supported