design-auditor — скилл для Claude Code: аудит дизайна и доступности
Проверяет вёрстку и макеты по 19 правилам: контраст, фокус, aria, тёмные паттерны. Полезен, когда нужно понять, почему интерфейс неудобен или недоступен.
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-codeЧто делает design-auditor
Скилл разбирает код на HTML/CSS, React, Vue и Tailwind, а также файлы Figma. Он сам определяет фреймворк и дизайн-систему — MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap — и прогоняет проверки по 19 категориям: aria, фокус, контраст, токены, адаптивность, анимация, формы, навигация, отступы, состояния, микрокопия, тени, иконки и SVG. Отдельно помечает риск для людей с дальтонизмом.
Есть разбор тёмных паттернов и этичности интерфейса, проверка по эвристикам Нильсена. На выходе — диффы «до/после», отчёты для передачи разработчику и перевод вайрфрейма в спецификацию. Скилл отвечает на языке запроса, поддерживает английский и корейский.
Перед аудитом скилл выясняет, насколько человек знаком с дизайном, и подстраивает тон: новичку объясняет каждый термин, опытному даёт сжатую техническую сводку. Если даёте ссылку на живой сайт, учтите: состояния hover, focus, error и loading скилл не увидит, потому что они не отрисованы в HTML. Страницы за логином он разбирает только с вашими учётными данными.
Какие задачи решает
- найти провалы по контрасту текста и фона
- проверить форму на доступность и понятные подписи полей
- выявить тёмные паттерны в интерфейсе
- сверить вёрстку с токенами дизайн-системы
- получить отчёт для передачи в разработку
Примеры запросов агенту
- Проверь мою вёрстку на доступность:
src/components/CheckoutForm.tsx - Сделай аудит контраста и фокуса на этой странице
- Разбери этот макет Figma по эвристикам Нильсена
Как установить design-auditor
1Через Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-code2Вручную: положить файлы
~/.claude/skills/design-auditor/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-auditor/
1Через Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a codex2Вручную: положить файлы
.agents/skills/design-auditor/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a cursor2Вручную: положить файлы
.cursor/skills/design-auditor/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Ashutos1997/claude-design-auditor-skill design-auditor2Вручную: положить файлы
.github/skills/design-auditor/SKILL.md1Через Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a gemini-cli2Командой платформы
gemini skills install https://github.com/Ashutos1997/claude-design-auditor-skillВручную: положить файлы
.devin/skills/design-auditor/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-auditor
Как установить design-auditor в Claude Code?
Выполните npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -a claude-code. Скилл встанет в ~/.claude/skills/design-auditor/SKILL.md.
Что делает design-auditor?
Проверяет дизайн и код по 19 правилам: контраст, фокус, aria, отступы, адаптивность, формы и другие. Дополнительно ищет тёмные паттерны и разбирает интерфейс по эвристикам Нильсена.
Можно ли аудировать живой сайт по ссылке?
Да, скилл забирает отрисованный HTML и CSS. Но состояния hover, focus, error и loading он не увидит, а страницы за логином разберёт только с вашими учётными данными.
