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

design-critique · owl-listener — скилл для Claude Code: как провести разбор дизайна

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

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

Что делает design-critique

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

Сама встреча идёт по шагам: презентация, уточняющие вопросы без оценок, раунды обратной связи по категориям, обсуждение спорных мест, фиксация решений. Формулировки заданы: «I notice…» для наблюдения, «I wonder…» для вопроса, «What if…» для альтернативы, «I think… because…» для мнения с обоснованием. После — итоги, задачи с владельцами и сроками, при необходимости повторный просмотр.

Внутри описаны четыре формата: desk crit один на один, командный, кросс-командный со свежим взглядом и ревью со стейкхолдерами. Отдельно перечислены типичные сбои — проектирование комитетом, вкусовщина вместо нужд пользователя, разбор слишком рано или слишком поздно. Для одиночного экспертного ревью скилл советует heuristic-evaluation.

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

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

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

  • Помоги провести командный разбор нового экрана оформления заказа: собери контекст, задай правила и проведи по шагам.
  • У нас кросс-командный разбор макета профиля. Подготовь рамку сессии и вопросы для уточнения.
  • Разбери итоги вчерашнего крита: выпиши решения и задачи с владельцами и сроками.

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

1Через Skills CLI (Vercel)

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

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

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

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

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

Вопросы о design-critique

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

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

Что делает design-critique?

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

Чем это отличается от одиночного ревью?

Скилл рассчитан на сессию с людьми в комнате. Для экспертной оценки в одиночку он советует heuristic-evaluation.

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

SKILL.md · MIT
---
name: design-critique
description: Facilitate a structured team critique — framing, feedback rules, and actionable outcomes. Use when running a session with people in the room. For a solo expert review, use `heuristic-evaluation` (prototyping-testing).
---
# Design Critique
You are an expert in facilitating productive design critiques that improve work and grow teams.
## What You Do
You structure and facilitate design critiques that produce clear, actionable feedback.
## Critique Framework
### Before the Critique
- Designer shares context: goals, constraints, target audience, stage of work
- Define what feedback is needed (layout? flow? copy? everything?)
- Set the rules: constructive, specific, actionable
### During the Critique
1. **Present** (5 min) — Designer walks through the work and goals
2. **Clarify** (5 min) — Questions to understand, not judge
3. **Feedback rounds** — Structured by category or priority
4. **Discuss** — Open conversation on key tensions
5. **Capture** — Document decisions and action items
### Feedback Format
- 'I notice...' (observation, not judgment)
- 'I wonder...' (question or exploration)
- 'What if...' (suggestion or alternative)
- 'I think... because...' (opinion with rationale)
### After the Critique
- Designer summarizes takeaways
- Action items with owners and deadlines
- Follow-up review if needed
## Critique Types
- **Desk crit**: Informal, 1-on-1, quick feedback
- **Team crit**: Scheduled, structured, full team
- **Cross-team crit**: Fresh eyes from outside the project
- **Stakeholder review**: Decision-focused, approval-oriented
## Common Pitfalls
- Designing by committee (too many opinions, no direction)
- Focusing on personal preference instead of user needs
- Critiquing too early (exploring) or too late (polishing)
- No clear next steps
## Best Practices
- Separate exploration critiques from refinement critiques
- Critique the work, not the person
- Always tie feedback to goals and user needs
- Rotate the facilitator role
- Make critique a regular ritual, not an event

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

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

Всё по теме «Дизайн» →

Сначала — design-critique от других авторов.

design-critique официальный anthropics Скилл проводит структурированный разбор интерфейса по критериям доступности, визуальной иерархии и удобства. Принимает скриншоты, описания экранов или ссылки на макет. CX Codex +1 5 300установок ux-design Mindrally Скилл задаёт агенту правила UX-проектирования: от исследования пользователей до доступности и адаптивной вёрстки. Пригодится, когда проектируешь или проверяешь интерфейс. CX Codex +1 1 100установок ui-design frappe Скилл задаёт агенту дизайнерские правила: сетка, типографика, цвет, отступы. Пригодится, когда нет своего дизайн-системного скилла. CX Codex +1 832установок design-like-im-5 Kiren Srinivasan Скилл для проектирования и ревью интерфейсов: держит пользовательское ядро простым, проверяет состояния, ввод и размеры экранов. CX Codex +1 304установок design-flow julianoczkowski Ведёт от уточняющих вопросов до готовых компонентов: шесть фаз подряд, каждая с подтверждением перед следующей. CX Codex +1 5 300установок design-everyday-things wondelai Скилл разбирает интерфейс по принципам из «Дизайна привычных вещей»: аффордансы, сигнификаторы, ограничения, обратная связь. Пригодится, когда пользователи путаются, а вы не понимаете почему. CX Codex +1 5 600установок claude-design BadTechBandit Скилл для сборки HTML-артефактов — лендингов, прототипов, деков — в Claude Code, Codex и Cursor. Читает контекст проекта и собирает самодостаточный файл с вёрсткой и стилями. CX Codex +1 645установок

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

design-token Помогает описать токены цвета, отступов, типографики и теней: категории, уровни и правила именования. Пригодится, когда закладываете слой токенов с нуля. CX Codex +1 2 200установок error-handling-ux Скилл для проектирования ошибок в продукте: как их предотвратить, показать и дать пользователю выход. Пригодится, когда сбои встречаются в нескольких сценариях сразу. CX Codex +1 2 200установок design-qa-checklist Генерирует систематический чек-лист для проверки вёрстки на соответствие дизайну. Пригодится дизайнерам и разработчикам на этапе приёмки интерфейса. CX Codex +1 2 200установок loading-states Проектирует состояния ожидания: скелетоны, индикаторы, постепенную загрузку и оптимистичные обновления. Нужен, когда контент или действие не завершаются сразу. CX Codex +1 2 200установок state-machine Скилл помогает спроектировать поведение интерфейса через конечные автоматы: состояния, переходы, события и гарды. Пригодится, когда в компоненте слишком много флагов. CX Codex +1 2 200установок design-token-audit Проверяет, где в проекте обходят дизайн-токены: находит захардкоженные значения, дубли и пробелы в наборе токенов. CX Codex +1 2 200установок animation-principles Скилл для настройки одной конкретной анимации в интерфейсе: подбирает easing, длительность и порядок движения элементов. CX Codex +1 2 200установок wireframe-spec Составляет текстовые спецификации вайрфреймов с приоритетами контента и заметками о поведении элементов. Пригодится при проектировании структуры интерфейса до начала работы с визуалом. CX Codex +1 2 300установок

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

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