Доступность — проверка компонента

Вы создали элемент управления диалогом/меню/формой и хотите выявить любые проблемы как можно раньше. Компонент, который выдерживает проверку доступности.

Claude Design Auditor (Claude Skill) — Установка & Живое демо

Зачем использовать

Ключевые функции

18 категорий аудита — типографика, контрастность, интервал, иерархия, согласованность, a11y, формы, движение, темный режим, отзывчивость, состояния, копирование, i18n/RTL, возвышение, иконография, навигация, токены, этика
Несколько форматов ввода: Figma, HTML/CSS, React/Vue, скриншоты, каркасы, проза.
Оценка 0–100, метки серьезности, отдельные оценки a11y + этические оценки
Примеры кода до и после каждого исправления
Экспорт: Markdown, Canva, передача разработчикам.

Живое демо

Как выглядит на практике

claude-design-auditor-skill.replay ▶ готово

0/0

Установка

Репозиторий автора · Официальная документация Claude Skills

Сценарии использования

Реальные сценарии: Claude Design Auditor

Аудит проекта перед отправкой на проектирование

👤 Дизайнеры продуктов готовят передачу разработчиков ⏱ ~30 min intermediate

Когда использовать: Дизайн «готов», и вам нужна окончательная проверка, прежде чем разработчики начнут его клонировать.

Поток

Вызов аудитора

Проверьте эту ссылку Figma: <url>. Объем: полный.✓ Скопировано

→ Оценка + ранжированные задачи со ссылками на 18 правил.
Исправьте критические замечания

Примените 5 наиболее серьезных исправлений в Figma; покажи до/после.✓ Скопировано

→ Предварительный просмотр до/после каждого исправления
Экспорт передачи передачи

Экспортируйте уценку передачи разработчикам с токенами и заметками a11y.✓ Скопировано

→ Маркдаун готов добавиться в билет

Итог: Дизайн поступает к разработчику с уже решенными основными проблемами.

Подводные камни

Относитесь к счету как к голу — Оценка измеряет соблюдение правил, а не вкус. Используйте список поиска, а не только номер

Сочетать с: claude-code-design-skills

Проверка устаревшего пользовательского интерфейса на предмет приоритетов редизайна

👤 Лидеры дизайна, владеющие редизайном ⏱ ~60 min advanced

Когда использовать: Вы планируете редизайн и вам нужны данные о том, с чего начать.

Поток

Экраны ленты или URL-адреса

Проведите аудит 10 лучших экранов приложения app.<url>. Обобщить результаты по степени тяжести.✓ Скопировано

→ Межэкранное объединение с горячими точками
Выберите секвенирование

Предложите план последовательности редизайна, сгруппированный по категориям правил.✓ Скопировано

→ План связан с выводами, а не с эмоциями

Итог: План редизайна, подкрепленный конкретными дефектами.

Комбинации

Сочетайте с другими MCP — эффект x10

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

Аудит → Figma-to-code → повторный аудит кода

Проведите аудит Figma, преобразуйте его в React, а затем повторно проверьте React, чтобы проверить четность.✓ Скопировано

claude-design-auditor-skill + motion-dev-animations-skill

Позвольте экспертам по движению добавлять/настраивать анимацию, а затем запускайте проверку движения аудитора.

Добавить пружинную анимацию для каждого motion-dev; затем одитируйте движение + поведение с ограниченным движением.✓ Скопировано

claude-design-auditor-skill + figma

Извлекайте ресурсы Figma через MCP, проверяйте и пишите комментарии.

Для каждого помеченного кадра добавьте комментарий Figma, обобщающий результаты.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать	Стоимость
design-audit (SKILL)	asset (Figma URL / image / code) + optional scope	Перед передачей, при проверке кода или в рамках плана редизайна.	0

Стоимость и лимиты

Во что обходится

Квота API: Никто
Токенов на вызов: Большой — преобладают скриншоты и длинные блоки кода.
Деньги: Бесплатно
Совет: Агрессивно масштабируйте область (только или только типографику) для быстрых итераций; полный аудит требует большого количества токенов.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Никто; если URL-адреса Figma являются частными, поделитесь ими через экспорт изображений или используйте Figma MCP с надлежащей областью действия.

Исходящий трафик: Нет выхода сети из навыка; ваши изображения и код остаются в чате.

Зеленый балл ≠ хороший дизайн. Аудитор обеспечивает соблюдение правил; Соответствие продукта рынку, бренд и эмоции – судить вам.
Категория этики/темной модели является эвристической. Используйте это как подсказку к обсуждению, а не как приговор в зале суда.

Устранение неполадок

Частые ошибки и исправления

Аудитор упускает очевидные проблемы

Увеличьте размер ввода или предоставьте несколько окон просмотра/скриншотов; эвристика лучше с покрытием.

Проверить: Re-run with extra screenshots

Токены предупреждают о слишком большом объеме вывода

Установите область действия для подмножества из 18 правил.

Проверить: Ask for 'scope: typography + contrast + a11y' only

Исправления нарушают существующую систему дизайна.

Попросите аудитора оставаться в пределах вашего набора токенов; предоставить tokens.json.

Проверить: Before/after diffs reference token names

Альтернативы

Claude Design Auditor в сравнении

Альтернатива	Когда использовать	Компромисс
claude-code-design-skills	Вы хотите перейти от Figma к кодированию, а не проверять существующую работу	Охватывает другую сторону трубопровода
ai-friendly-web-design-skill	Вам нужно широкое руководство по веб-дизайну, а не строгий аудитор.	Менее структурированный вывод
apple-hig-designer-skill	Вы разрабатываете специально для платформ Apple.	Платформозависимый, а не универсальный

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills