design-review-process — скилл для Claude Code: гейты ревью дизайна
Скилл задаёт четыре контрольные точки ревью дизайна: от концепта до приёмки реализации. Пригодится, когда работа уходит в разработку без единого порядка проверки.
npx skills add Owl-Listener/designer-skills --skill design-review-process -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/design-review-process/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-review-process/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a codex2Вручную: положить файлы
.agents/skills/design-review-process/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a cursor2Вручную: положить файлы
.cursor/skills/design-review-process/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-review-process2Вручную: положить файлы
.github/skills/design-review-process/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-ops/skills/design-review-processВручную: положить файлы
.devin/skills/design-review-process/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-review-process -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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