К основному содержанию
скилл CX Codex

design-review · plugin87 — скилл для Claude Code: аудит UI по 6 критериям

Скилл оценивает интерфейс по шести взвешенным критериям, прогоняет эвристики Нильсена и выдаёт таблицу находок по приоритету.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add plugin87/ux-ui-agent-skills --skill design-review -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/design-review/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/design-review/

По шагам, с командами для каждой платформы: Как установить скилл в 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 от других авторов.

design-review nexu-io Проводит визуальный аудит интерфейса, вносит точечные правки атомарными коммитами и сохраняет скриншоты до и после изменений. Пригодится для полировки свёрстанного UI перед релизом. CX Codex +1 3 200установок design-review julianoczkowski Проводит структурированную критику интерфейса по брифу и коду: иерархия, консистентность, адаптивность, доступность. Пригодится перед релизом. CX Codex +1 5 800установок design-review Donchitos Проверяет дизайн-документ перед передачей разработчикам: полноту, непротиворечивость, реализуемость и соответствие стандартам проекта. CX Codex +1 522установок design-review jezweb Проверяет визуальное качество веб-страницы или приложения и готовит отчёт со скриншотами. Нужен, когда интерфейс выглядит неровно, но причина неясна. CX Codex +1 1 400установок ui-design PyModel Свод правил фронтенд-дизайна из 42 пунктов в 8 категориях. Помогает настроить доступность по WCAG, вёрстку и показатели Core Web Vitals. CX Codex +1 513установок ui-design-review mastepanoski Разбирает интерфейс по десяти дизайн-измерениям: типографика, цвет, отступы, иерархия, консистентность. Пригодится перед дизайн-QA или передачей макета в вёрстку. CX Codex +1 1 100установок plan-design-review garrytan Скилл для дизайн-ревью планов и черновиков перед началом разработки. Находит пробелы в UX и интерфейсных решениях и сразу вносит правки в план. CX Codex +1 476установок design-like-im-5 Kiren Srinivasan Скилл для проектирования и ревью интерфейсов: держит пользовательское ядро простым, проверяет состояния, ввод и размеры экранов. CX Codex +1 304установок ui-ux-governance GanyuanRan Скилл задаёт агенту рамки при работе с интерфейсами: как выбирать решения по потокам, состояниям и доступности. CX Codex +1 ★ 1 384звёзд репо ux-design Mindrally Скилл задаёт агенту правила UX-проектирования: от исследования пользователей до доступности и адаптивной вёрстки. Пригодится, когда проектируешь или проверяешь интерфейс. CX Codex +1 1 100установок

Из того же набора16

image-to-code Переносит макеты и скриншоты интерфейсов в код дизайн-системы на дизайн-токенах DTCG с проверкой контрастности и доступности. CX Codex +1 719установок a11y-audit Проверяет интерфейс на соответствие стандартам WCAG 2.2 и ARIA. Пригодится при аудите контрастности, навигации с клавиатуры и доступности для скринридеров. CX Codex +1 550установок design-tokens Скилл создаёт и проверяет дизайн-токены в формате DTCG. Пригодится для палитр, типографики, темизации и других системных значений интерфейса. CX Codex +1 538установок redesign Скилл проверяет существующий интерфейс и поэтапно обновляет его, сохраняя работающие функции. Подходит, когда нужно освежить дизайн сайта или приложения. CX Codex +1 535установок apply-aesthetic Скилл выбирает визуальное направление — архетип или одну из 138 дизайн-систем — и переводит его в токены проекта. CX Codex +1 529установок design-code Скилл помогает агенту собирать код компонентов и экранов под выбранный фреймворк. Он пригодится, когда нужен готовый UI с токенами и проверками доступности. CX Codex +1 525установок design-component Создаёт спецификацию UI-компонента с анатомией, 8 состояниями, токенами и доступностью. Пригодится при проектировании контролов в дизайн-системе до написания кода. CX Codex +1 522установок ux-writing Пишет и проверяет тексты интерфейса: кнопки, ошибки, пустые состояния и уведомления. Пригодится, когда нужен единый тон без обвинений и тупиковых сообщений. CX Codex +1 517установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой