🎨 Design Auditor — Claude Skill

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

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

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

Что умеет

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

Оценку из 100 с разбивкой по категориям
Отдельный балл доступности (покрытие WCAG по категориям 2, 6, 7, 16)
Отдельный балл этики (тёмные паттерны и манипулятивный дизайн по категории 18)
Уровень 🚫 Blocker для нарушений законодательства/соответствия (WCAG AA, GDPR, PECR) — отдельно от критических проблем
Проблемы, ранжированные по серьёзности (🚫 Blocker / 🔴 Critical / 🟡 Warning / 🟢 Tip)
Объяснения простым языком — почему важно каждое правило
Матрицу приоритетов проблем — каждая проблема отображена по осям «усилия vs. влияние»
Диффы кода до/после при исправлении проблем в HTML/CSS/React/Vue
Прямые правки в вашем Figma-файле через Figma MCP
Figma Code Connect — обнаруживает пробелы в маппинге дизайна на код (get_code_connect_suggestions)
Wireframe to Spec — преобразует вайрфреймы в аннотированные спецификации для разработчиков
Визуальный отчёт аудита, экспортируемый в Canva для презентации стейкхолдерам
Отчёт для передачи разработчикам — таблица CSS-спецификаций, чеклист a11y, критические правки
Экспорт отчёта в Markdown — готов для Notion, GitHub, Linear или Jira

18 категорий аудита

#	Категория	Что проверяется
1	Типографика	Иерархия, количество шрифтов, размер, межстрочный интервал, контраст
2	Цвет и контраст	Коэффициенты WCAG, семантическое использование цвета, согласованность палитры
3	Отступы и макет	Сетка 8pt, близость, выравнивание, пустое пространство
4	Визуальная иерархия	Чёткость основного действия, паттерны чтения, маппинг размера/контраста
5	Согласованность	Переиспользование компонентов, семейства иконок, радиус скругления, состояния взаимодействия
6	Доступность (A11y / WCAG)	Зоны касания, состояния фокуса, alt-текст, метки форм, порядок чтения
7	Формы и поля ввода	Метки, размеры, тайминг валидации, расположение ошибок, состояния отправки
8	Движение и анимация	Назначение, длительность, easing, поддержка reduced-motion
9	Тёмная тема	Не просто инверсия: elevation поверхностей, насыщенность, читаемость иконок
10	Адаптивность	Брейкпоинты, переполнение, зоны касания, масштабирование текста
11	Состояния загрузки, пустого экрана и ошибок	Скелетоны, анатомия пустого состояния, уровни ошибок, подтверждение успеха
12	Контент и микрокопи	Подписи кнопок, сообщения об ошибках, согласованность тона, терминология
13	Интернационализация и RTL	Расширение текста, зеркалирование RTL, форматирование с учётом локали, поддержка шрифтов
14	Elevation и тени	Шкала теней, иерархия elevation, глубина в тёмной теме
15	Иконография	Семейства иконок, оптический размер, зоны касания, согласованность значений
16	Паттерны навигации	Вкладки, хлебные крошки, кнопки «назад», мобильная навигация, активные состояния
17	Дизайн-токены и переменные	Семантические имена, захардкоженные значения, подмена токенов в тёмной теме
18	Этичный дизайн и тёмные паттерны	Confirmshaming, ложная срочность, предвыбранное согласие, инверсия иерархии CTA, privacy zuckering, скрытые расходы и 15+ манипулятивных паттернов в 5 группах

Для кого

Разработчики, создающие UI без дизайнерского бэкграунда
Дизайнеры, которым нужно быстрое второе мнение или проверка WCAG
Команды, использующие Figma MCP или VS Code и желающие встроить проверку дизайна в рабочий процесс
Продакт-менеджеры и основатели, стремящиеся выпускать этичные и доступные продукты
Все, кто когда-либо задавался вопросом «это выглядит нормально?»

Установка

Скачайте design-auditor.skill со страницы релизов
Перейдите на Claude.ai → Customize → Skills
Нажмите Upload skill и выберите файл
Готово — скилл активен в ваших диалогах

Использование

После установки просто общайтесь с Claude естественным образом:

Английский:

"Check my design" → выбор области (full / quick / custom), затем аудит
"Is this accessible?" → аудит с фокусом на доступность
"Review my form" → частичный аудит, только релевантные категории
"Does this follow WCAG?" → аудит контраста и a11y
"Check my Figma file: [link]" → аудит через Figma MCP
"Any dark patterns here?" → аудит этики
"Wireframe to spec" → аннотированная спецификация из вайрфрейма

Корейский:

"디자인 검토해줘" → 전체 감사
"접근성 확인해줘" → 접근성 중심 감사
"내 디자인 괜찮아 보여?" → 전체 감사
"UI 검토해줘" → 전체 감사
"색상 대비 확인해줘" → 색상 및 접근성 감사
"와이어프레임 스펙 출력해줘" → 와이어프레임 스펙 모드

Пример вывода

## 🔍 Design Audit Report

**Input:** Checkout flow · 3 frames
**Type:** Figma MCP
**Confidence:** 🟢 High
**Component health:** 71% coverage · 2 detached instances · 8 unnamed layers
**Code Connect:** 8 components mapped · 3 unmapped

### Overall Score: 62/100
100 − (1 × 🚫 12) − (2 × 🔴 8) − (4 × 🟡 4) − (2 × 🟢 1) = 62/100
A legal compliance failure and contrast issues are the main drag.

### Accessibility Score: 55/100 — significant gaps ⚠️ Contains legal compliance failures
### Ethics Score: 85/100 — minor concerns

### 🚫 Blockers (−12pts each)
- **Text contrast failure** — #aaa on white = 2.3:1 → Fix: use #595959 (7:1)
  Legal basis: WCAG 2.1 SC 1.4.3

### 🔴 Critical Issues (−8pts each)
- **Missing form labels** — placeholder-only inputs lose label on type
  → Fix: add <label> above each input.

### 🟡 Warnings (−4pts each)
- **Off-grid spacing** — padding: 13px → Fix: use 12px or 16px
- **CTA hierarchy inversion** — "Accept all" primary, "Reject all" grey text
  → Fix: equivalent visual weight (GDPR requirement)

Аудитор дизайна

Установка

README

🎨 Design Auditor — Claude Skill

Что умеет

18 категорий аудита

Для кого

Установка

Использование

Пример вывода

Похожие скиллы

Design DNA

hue

styleseed

Awesome Claude Design