Дизайн-аудитор — Клод Скилл

Умение Клода, которое проверяет проекты по 19 профессиональным категориям дизайна - разработано для разработчиков, не дизайнеров и всех, кто хочет экспертную проверку дизайна без необходимости знать правила самостоятельно.

Работает с файлами Figma (через Figma MCP), code (HTML/CSS/React/Vue), screenshots, wireframes и письменными описаниями. Поддерживает английский и корейский языки.

Совместим с Claude, Manus и другими агентами, которые поддерживают навыки SKILL.md.

Что это делает

Бросьте ссылку Figma, вставьте CSS, загрузите скриншот или поделитесь каркасом — Design Auditor проверяет вашу работу на соответствие 19 категориям правил проектирования и дает вам:

** балл из 100** с разбивкой по категориям (с мини-бар-графиком на строку)

• Отдельный показатель доступности** (покрытие WCAG по Cat 2, 6, 7, 15, 16) Отдельный балл по этике (темные узоры и манипулятивный дизайн в Cat 18)
• Отдельный Показатель юзабилити (Cat 19 — H1/H2/H3/H6/H7/H10, с перекрестной ссылкой Nielsen на H4/H5/H8/H9)
• Уровень блокировки** для нарушений законодательства/соответствия (WCAG AA, GDPR, PECR) - отдельно от критических вопросов

🇰🇷 한국어 버전 →

🎨 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