design-review · plugin87 — скилл для Claude Code: аудит UI по 6 критериям
Скилл оценивает интерфейс по шести взвешенным критериям, прогоняет эвристики Нильсена и выдаёт таблицу находок по приоритету.
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-codeЧто делает design-review
Скилл проводит разбор экрана или целого флоу и ставит оценку. Шесть критериев с весами: визуальная иерархия, консистентность, доступность и удобство — по 20%, адаптивность и производительность — по 10%. Итоговый балл считается как взвешенная сумма.
Внутри — файл с рубрикой и шкалой оценок, чек-лист WCAG для проверки доступности и скрипт contrast.py для спорных пар цветов. Отдельно идёт проверка по списку «Banned Defaults» из taste/design-taste.md и десять эвристик Нильсена: нарушения помечаются номерами. На выходе две таблицы — оценки по критериям и находки с уровнем серьёзности от Critical до Enhancement, к каждой прилагается рекомендация со ссылкой на токены.
Важный момент: npx skills add ставит только папку скилла. Перед первым запуском проверьте, что рядом лежит кит с токенами, иначе скилл честно скажет, что не нашёл файлы, и остановится. Доустановить остальное можно через npx ux-ui-agent-skills init.
Какие задачи решает
- оценить готовый экран по шести критериям и получить итоговый балл
- найти нарушения десяти эвристик Нильсена с номерами
- проверить контраст спорной пары цветов перед сдачей макета
- разложить замечания по серьёзности: от Critical до Enhancement
- поймать типовые дизайнерские штампы из списка Banned Defaults
Примеры запросов агенту
- прогони design-review по этому экрану и покажи таблицу находок
- сделай аудит доступности чекаута и посчитай взвешенную оценку
- проверь контраст кнопки и фона скриптом из скилла
Как установить design-review
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code2Вручную: положить файлы
~/.claude/skills/design-review/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-review/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a codex2Вручную: положить файлы
.agents/skills/design-review/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a cursor2Вручную: положить файлы
.cursor/skills/design-review/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills design-review2Вручную: положить файлы
.github/skills/design-review/SKILL.md1Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a gemini-cli2Командой платформы
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/design-reviewВручную: положить файлы
.devin/skills/design-review/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-review
Как установить design-review в Claude?
Выполните npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code. Скилл окажется в ~/.claude/skills/design-review/SKILL.md.
Что делает design-review?
Считает взвешенную оценку интерфейса по шести критериям, проверяет доступность по WCAG, прогоняет десять эвристик Нильсена и собирает находки в таблицу с приоритетами.
Почему скилл пишет KIT_MISSING?
npx skills add ставит только папку скилла, без токенов, рубрики и скриптов. Доустановите кит через npx ux-ui-agent-skills init или плагином.
Исходный текст
SKILL.md · MIT
---
name: design-review
description: Review or audit a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table. Use when the user wants a design critique, quality score, heuristic evaluation, or audit of an existing screen, page, or product before/after build.
---
# Skill: Design Review
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Run a structured, scored review.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../workflows/design-review.md` (rubric, scoring guide, Nielsen heuristics, process).
2. Gather context: the screen(s)/flow, target users, platform, constraints.
3. Score the 6 dimensions (Visual Hierarchy 20%, Consistency 20%, Accessibility 20%, Usability 20%, Responsiveness 10%, Performance 10%); compute the weighted overall.
4. Run the accessibility lens with `${CLAUDE_SKILL_DIR}/../../../accessibility/wcag-checklist.md`; use `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py` for any color-pair doubts.
5. Check against the anti-slop tells in `${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md` (Banned Defaults checklist).
6. Apply Nielsen's 10 heuristics; flag violations by number.
## Output
- The 6-dimension scored table + overall score.
- A prioritized findings table: # · Severity (Critical → Major → Minor → Enhancement) · Finding · Recommendation.
- Concrete, token-referenced fixes.
© plugin87 · MIT · plugin87/ux-ui-agent-skills
Похожие скиллы
Всё по теме «Дизайн» →Сначала — design-review от других авторов.