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

design-review-process — скилл для Claude Code: гейты ревью дизайна

Скилл задаёт четыре контрольные точки ревью дизайна: от концепта до приёмки реализации. Пригодится, когда работа уходит в разработку без единого порядка проверки.

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

Что делает design-review-process

Скилл описывает процесс ревью дизайна с четырьмя гейтами. Первый — концепт: задача сформулирована, потребности подкреплены исследованием, рассмотрено несколько вариантов. Второй — сам дизайн: соответствие бренду, единообразие паттернов взаимодействия, адаптивность, компоненты дизайн-системы. Третий — перед передачей в разработку: проработаны пустые, загрузочные, ошибочные и успешные состояния, краевые случаи, доступность, спецификации. Четвёртый — QA реализации: совпадение с макетом, работа взаимодействий, проверка на разных браузерах и устройствах.

Критерии проверки сформулированы вопросами: решает ли решение проблему пользователя, согласовано ли с дизайн-системой, доступно ли по WCAG AA, покрыты ли состояния и краевые случаи, реализуемо ли это. Порядок согласования идёт от самопроверки дизайнера по чек-листу через ревью коллеги и подпись ведущего дизайнера к приёмке разработчиком. Установка не требует ничего, кроме Node.js для npx.

В самом скилле прямо сказано: не каждому проекту нужны все гейты. Масштабируйте процесс под размер и риск задачи, иначе четыре круга согласования на мелкой правке съедят больше времени, чем сама правка. Ревью стоит ограничивать по времени, а решения и их причины — фиксировать. Для разбора одной отдельной сессии есть парный скилл design-critique.

Какие задачи решает

  • задать единый порядок проверки дизайна перед разработкой
  • сформулировать критерии приёмки макета
  • проверить, что проработаны пустые, загрузочные и ошибочные состояния
  • развести роли в согласовании: дизайнер, коллега, ведущий, разработчик
  • ограничить ревью по времени, чтобы не уйти в бесконечные итерации

Примеры запросов агенту

  • Опиши процесс ревью дизайна для нашей команды: какие гейты и кто подписывает
  • Составь чек-лист приёмки макета перед передачей в разработку
  • Проверь этот экран по критериям ревью: состояния, доступность, соответствие дизайн-системе

Как установить design-review-process

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill design-review-process -a claude-code

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

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

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

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о design-review-process

Как установить design-review-process в Claude?

Выполните npx skills add Owl-Listener/designer-skills --skill design-review-process -a claude-code. Скилл окажется в ~/.claude/skills/design-review-process/SKILL.md.

Что делает design-review-process?

Описывает процесс ревью дизайна: четыре гейта от концепта до QA реализации, критерии проверки и порядок согласования. Помогает, когда работа уходит в разработку без постоянного ревью.

Чем отличается от design-critique?

design-review-process задаёт процесс и гейты для команды, а design-critique — для разбора одной отдельной сессии.

Исходный текст

SKILL.md · MIT
---
name: design-review-process
description: Establish review gates — criteria, checkpoints, and approval flow. Use when work ships without consistent review. For running one individual session, use `design-critique`.
---
# Design Review Process
You are an expert in establishing design review processes that maintain quality without slowing teams down.
## What You Do
You create review processes with clear gates, criteria, and workflows that ensure design quality.
## Review Gates
### Gate 1: Concept Review
- Problem clearly defined
- User needs supported by research
- Multiple concepts explored
- Strategic alignment confirmed
- Stakeholder input gathered
### Gate 2: Design Review
- Visual design meets brand standards
- Interaction patterns are consistent
- Responsive behavior defined
- Content strategy applied
- Design system components used
### Gate 3: Pre-Handoff Review
- All states designed (empty, loading, error, success)
- Edge cases addressed
- Accessibility requirements met
- Handoff specs complete
- Developer walkthrough done
### Gate 4: Implementation QA
- Design matches specification
- Interactions work as designed
- Responsive behavior verified
- Accessibility tested
- Cross-browser/device checked
## Review Criteria
- Does it solve the user problem?
- Is it consistent with the design system?
- Is it accessible (WCAG AA)?
- Are all states and edge cases covered?
- Is it feasible to implement?
## Approval Workflow
- Designer self-review against checklist
- Peer design review
- Design lead sign-off
- Stakeholder approval (if required)
- Developer acceptance
## Best Practices
- Not every project needs every gate
- Scale the process to project size and risk
- Use checklists to make reviews objective
- Time-box reviews to prevent endless cycles
- Document review decisions and rationale

© Owl-Listener · MIT · Owl-Listener/designer-skills

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

Всё по теме «Дизайн» →
frontend-design-review microsoft Скилл проверяет и создаёт интерфейсы с учётом дизайна, доступности и дизайн-системы. Подходит для ревью UI, PR и адаптивной вёрстки. 237установок 21st-ui-review 21st-dev Проверяет существующий UI на доступность, адаптивность и расхождения с дизайн-системой проекта. Пригодится перед релизом страницы или после чужого пул-реквеста. CX Codex +1 1 300установок design-review nexu-io Проводит визуальный аудит интерфейса, вносит точечные правки атомарными коммитами и сохраняет скриншоты до и после изменений. Пригодится для полировки свёрстанного UI перед релизом. CX Codex +1 3 200установок better-interface jakubkrehel Проводит сквозной аудит экранов и интерфейсов по правилам доступности, вёрстки, текста, цвета и типографики. Сводит отчёты узких скиллов в единый список замечаний по приоритету. CX Codex +1 30 000установок interface-review jakubkrehel Проверяет ветки, пулл-реквесты и незакоммиченные правки на дефекты UI, вёрстки, типографики и доступности. Показывает, что именно сломалось или добавилось в интерфейсе. CX Codex +1 18 500установок om-ux-review-pr open-mercato Скилл проверяет интерфейс в браузере по изменениям ветки или пулл-реквеста и находит ошибки взаимодействия. CX Codex +1 2 600установок

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

design-sprint-plan Планирует пятидневный спринт для проверки продуктовых идей: от постановки задачи до тестирования прототипа. Помогает сжать этап исследований в одну рабочую неделю. CX Codex +1 2 000установок design-system-adoption Создаёт стратегию внедрения дизайн-системы и материалы для команд, которые ею не пользуются. Нужен, когда компоненты уже есть, но их обходят. CX Codex +1 2 000установок team-workflow Скилл помогает выстроить операционные процессы дизайн-команды: управление задачами, ритуалы синхронизации и передачу макетов в разработку. Пригодится, когда хаос в задачах мешает работе. CX Codex +1 2 000установок opportunity-framework Помогает разложить идеи по матрице impact-effort и RICE, когда задач больше, чем рук. Полезен на этапе планирования. CX Codex +1 2 000установок north-star-vision Скилл помогает сформулировать долгосрочное видение продукта на 1, 2–3 и 5+ лет. Пригодится, когда у команды нет согласия по стратегии развития. CX Codex +1 2 000установок test-scenario Пишет задачи для юзабилити-теста: реалистичный контекст, критерии успеха и заметки для ведущего. Пригодится, когда исследование уже спланировано, а сценариев ещё нет. CX Codex +1 2 000установок stakeholder-alignment Собирает артефакты согласования: карту стейкхолдеров, матрицу RACI, права решений и план коммуникации. Пригодится, когда решения буксуют из-за неясного владения. CX Codex +1 2 000установок metrics-definition Помогает сформулировать продуктовые метрики и UX-KPI для оценки дизайн-решений. Пригодится при планировании замеров до запуска разработки. CX Codex +1 2 100установок

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

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