Design Auditor Skill
A Claude skill that audits Figma files, code, and screenshots against 19 professional design rules and returns actionable, scored reports.
Pure instruction-based audit with no code execution, leaning least-privilege; explicit credential non-echo policy, login-wall handling, and limitation disclosure in report headers give good data-flow transparency. Deducted for: proactively web_fetching arbitrary external URLs with no prompt-injection defense for audited content; Figma editing actions (create_design_system_rules) require confirmation but rollback/isolation mechanisms are undisclosed.
Internally highly self-consistent: input decision trees, confidence tiers, and failure paths (private repo 404, Figma MCP unavailable, missing variables fallback) all give diagnosable messages rather than shifting debugging cost to users. Deducted for: no committed tests or CI covering key paths; static-review cap of 10 applies.
Audience, scenarios, input types, non-fit boundaries (description-only rejection, login limits, H4/H5/H8/H9 exclusions) and triggers are all very clear with strong semantic trigger precision. Deducted for: English/Korean only, no Chinese support; core function depends on Figma MCP and Claude.ai, which are unreachable or restricted from mainland China, with no disclosure.
Well-layered docs (SKILL.md + progressive references), versioning, bilingual READMEs, detailed changelog, known-limitation disclosure; MIT license stated in README_KR. Deducted for: SKILL.md itself has unknown license metadata, publisher unverified, and maintenance responsibility/update path not stated within the skill files.
Output formats (scored report, diffs, handoff report) are concretely defined with complete templates; marginal value of a structured design audit is clear. Deducted for: static review cannot verify outputs are directly usable; example outputs are author-written, and some claimed features (Canva export, Figma editing) depend on external service availability beyond what text instructions guarantee.
Auditable primary material exists (full instructions, detailed changelog, structured reference file inventory); fact/inference separation is reasonable. Deducted for: all evidence is author-claimed, with no third-party execution evidence, no test results, no independent reproduction path; static cap below 5.
- The skill proactively fetches user-supplied URLs; audited pages may contain prompt injection — avoid auditing untrusted sources.
- Core function depends on Figma MCP and Claude.ai, which may be unreachable or restricted from mainland China; this limitation is undisclosed.
- Supports English and Korean only; Chinese users get no localized output.
- SKILL.md itself lacks license metadata; publisher is unverified and maintenance commitments exist only at README level.
- No tests or third-party execution evidence; all capability claims are author-stated and independently unverified.
What does this skill do, and when should you use it?
Design Auditor is a SKILL.md-based Claude skill that reviews Figma files (via Figma MCP), HTML/CSS/React/Vue/Tailwind code, screenshots, wireframes, and live URLs against 19 categories of design rules. It auto-detects frameworks and design systems (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap), then produces an overall score out of 100 plus separate Accessibility, Ethics, and Usability scores. Issues are graded 🚫 Blocker / 🔴 Critical / 🟡 Warning / 🟢 Tip with a transparent deduction formula. It works fully in English or Korean, detecting the user's language automatically, and can apply fixes directly inside Figma files through MCP.
Reads Figma files (layer structure, variable definitions, screenshots via MCP), source code, images, or live URLs; detects framework and component library; runs checks across 19 categories including typography, WCAG color contrast, 8pt grid spacing, visual hierarchy, forms, motion, dark mode, i18n, design tokens, dark patterns/ethics, and Nielsen's 10 heuristics; computes contrast ratios programmatically from design tokens and annotates color-blindness risk per failing pair; outputs a scored report (Blocker −12 / Critical −8 / Warning −4 / Tip −1), before/after code diffs, developer handoff reports, and wireframe-to-spec documents; and can edit Figma layers directly via perform_editing_operations with per-fix screenshot verification and failure recovery.
- A self-taught frontend developer wants spacing, contrast, and hierarchy checked before shipping UI
- A designer reviewing a teammate's Figma file wants a fast WCAG AA contrast and accessibility pass
- A team wants to find GDPR-relevant dark patterns (pre-checked consent, missing cancellation policy) in a checkout flow
- A product manager wants a greyscale wireframe turned into a dev-ready spec with dimensions, spacing, and required states
- A Korean-speaking user wants the entire audit report in natural Korean UX terminology
- A component library maintainer wants to spot Figma-to-code Code Connect mapping gaps
What are this skill's strengths and limitations?
- Unusually broad: 19 categories including dark-pattern/ethics checks and Nielsen heuristics, which most design linters skip
- Honest confidence model — screenshot input gets reduced deductions and explicit limitation notes instead of false precision
- Detects MUI, Chakra, shadcn/ui, etc. and gives system-specific fix paths rather than generic CSS advice
- Full English/Korean parity with idiomatic Korean UX terminology
- Direct Figma fixes via MCP with per-fix screenshot verification and partial-failure recovery
- Direct Figma editing requires Figma MCP access; without it you only get manual fix instructions
- Screenshot and live-URL audits are medium confidence and can't assess hover/focus/loading states
- The ethics/regulatory baseline (GDPR, PECR, etc.) is explicitly a UI-signal layer, not legal advice
- GitHub License field is listed as unknown even though the README says MIT — confirm with the author before adopting
- No test suite or independent evaluation in the source; quality claims rest on the author's changelog
How do you install this skill?
Download design-auditor.skill from the repo's Releases page; open claude.ai, go to Customize → Skills, click Upload skill, and select the file. The source documents no separate steps for Claude Code or other agents (the README notes compatibility with any SKILL.md-based agent); placing the repo folder in the client's skills directory should work, but check the repo docs.
How do you use this skill?
After install, trigger it with natural prompts: "Check my design" (full audit), "Is this accessible?", "Does this follow WCAG?", "Check my Figma file: [link]", "Any dark patterns here?", "Wireframe to spec". Korean examples: "디자인 검토해줘", "접근성 확인해줘", "색상 대비 확인해줘". The skill infers audit scope, design stage, and WCAG level (default AA) from context and only asks when inference fails.
How does this skill compare with similar options?
Unlike screenshot-only scoring tools, it cites exact values (e.g. "padding: 13px → should be 12px or 16px") when Figma MCP or code is available and layers on dark-pattern/compliance checks. The README names no specific competitors, so no concrete comparison is made.