Перейти к руководству
design-critiqueавтор Anthropic

Design Critique Skill.

Skill для Claude Code и Codex для ревью дизайна: структурированная обратная связь по юзабилити, иерархии и консистентности.

  • Дизайн-ревью и доступность
  • Отчёт ревью
anthropics/knowledge-work-plugins · design/skills/design-critique/SKILL.mdSKILL.md
--- name: design-critique description: Get structured design feedback on usability, hierarchy, and consistency. Trigger with "review this design", "critique this mockup", "what do you think of this screen?", or when sharing a Figma link or screenshot for feedback at any stage from exploration to final polish. --- ## Usage ## What I Need From You ## Critique Framework ## How to Give Feedback ## Output ## Design Critique: [Design Name]
Вводная информация и заголовки разделов считаны из исходного файла 2026-09-14 · полностью 3 898 символов

01 Что делает

Что делает skill design-critique в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

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

Результат — критика в формате markdown с общим впечатлением, таблицей проблем удобства использования с уровнями серьёзности (Critical, Moderate, Minor), таблицей консистентности, заметками по доступности, списком «Что работает хорошо» и тремя приоритетными рекомендациями. При наличии инструмента дизайна или коннектора обратной связи от пользователей проверяются компоненты и tokens или сопоставляются данные с тикетами поддержки.

Что он выдаёт

  • Таблица удобства использования со списком находок, уровнем серьёзности и рекомендуемым исправлением для каждой.
  • Таблица соответствия типографики, отступов и цветов дизайн-системе с указанием отклонений.
  • Заключительный список приоритетных рекомендаций, ранжированных по степени влияния.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Разместите дизайн перед собой

    URL Figma извлекается из Figma, и указанный файл считывается; если ни того, ни другого нет, агент просит пользователя описать дизайн или поделиться им.

  2. 02
    Начните с впечатления за две секунды

    Прежде чем переходить к анализу, фиксируется то, что первым привлекает взгляд, правильно ли это, какая возникает эмоциональная реакция и понятна ли цель сразу.

  3. 03
    Пройдите пять измерений по порядку

    Юзабилити, визуальная иерархия, консистентность и доступность — для каждого свой набор вопросов: от порядка чтения и отступов до коэффициентов контраста и размеров области нажатия.

  4. 04
    Формулируйте замечания по заявленным правилам стиля

    Замечания должны быть конкретными, обоснованными, сопровождаться предложенной альтернативой и уравновешены указанием на то, что уже работает хорошо.

  5. 05
    Заполните шаблон вывода в Markdown

    Фиксированная структура: общее впечатление, таблица юзабилити с уровнями серьёзности, заметки по иерархии, таблица консистентности, доступность, что работает хорошо, и ранжированные приоритетные рекомендации.

02 Определите своё применение

Когда использовать skill design-critique

Используйте навык design-critique в Claude Code или Codex, когда задача — обзор дизайна такого рода. Область применения и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Вставка ссылки Figma или скриншота для получения обратной связи до завершения дизайна — от этапа исследования до финальной доводки.
  • Именованный контекстный флоу, например флоу оформления заказа для B2B SaaS, где аудитория и цель уточняют обратную связь.
  • Ограниченный по объёму обзор — например, просьба рассмотреть только навигацию, чтобы получить больше глубины по одной области.
  • Неформальные фразы-триггеры во время работы, например просьба оценить макет или сказать, что агент думает об экране.

Знайте границы

  • Агент не может получить актуальный файл Figma, если в среде не настроен коннектор дизайн-инструмента.
  • Сопоставление решений с реальными жалобами пользователей требует подключённого источника отзывов пользователей.

Что предоставить

  • Сам дизайнURL Figma, скриншот или подробное текстовое описание — это минимум, который требуется.
  • КонтекстЧто это такое, для кого предназначено и на каком этапе находится — выбирается из вариантов: исследование, доработка или финал.
  • Опциональный фокусВы можете сузить обзор, например до мобильной версии или флоу онбординга, чтобы получить глубину, а не широту охвата.
  • Аргумент слэш-командыКоманда принимает один аргумент — в любой форме, в которой представлен ваш дизайн-материал.

03 Внутри скилла

Правила, которые skill design-critique задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

  1. Никогда не оставляйте замечание без конкретики

    Отзыв должен называть конкретный элемент конфликта — например, указывать, что CTA конкурирует с навигацией, а не говорить, что макет «выглядит запутанно».

  2. Всегда предлагайте решение

    Выявление проблемы — это не результат работы; критика должна предлагать альтернативы для каждой найденной проблемы.

  3. Отмечайте, что работает хорошо

    Положительные наблюдения — обязательная часть хорошего отзыва, а не необязательная вежливость, и в шаблоне вывода для этого есть раздел «What Works Well».

  4. Соответствие глубины стадии

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

  5. Оценивайте каждую находку по юзабилити по степени серьёзности

    Таблица юзабилити использует три фиксированных уровня: Critical, Moderate, Minor, каждый с соответствующей рекомендацией.

  6. Рассматривайте доступность как отдельный проход

    Фреймворк включает отдельное измерение для доступности, а не объединяет контраст и размеры целей с общими заметками по юзабилити.

  7. Спрашивайте, если дизайн отсутствует

    Если URL или файл не предоставлены, агент должен запросить описание или скриншот, а не придумывать критику.

04 Применение

Установите design-critique в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте design-critique в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

Общая форма CLI skills для design/skills/design-critique/SKILL.md; репозиторий может документировать собственный путь.

Дайте скиллу первую задачу по проверке дизайна

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Review this design: [Figma URL]. It's the onboarding flow for [product], aimed at [audience], and we're at final polish rather than exploration. Focus on the mobile screens.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Доступность должна отражать проход или провал по контрасту именно для ключевого текста.

В OpenDesign импортируйте design-critique по его ссылке SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Anthropic
Файл skill
design/skills/design-critique/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 8f877b6
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
24 012 Снимок GitHub сделан 2026-09-14 для всего репозитория anthropics/knowledge-work-plugins, который содержит 7 навыков в этом каталоге. Это не рейтинг и не счётчик использования для design-critique.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

  1. ИспользованиеКак slash-команда принимает свой аргумент и определяет источник дизайна.
  2. Что мне нужно от васДизайн, контекст и опциональная область фокуса.
  3. Фреймворк критикиПять последовательных измерений: первое впечатление, юзабилити, иерархия, согласованность, доступность.
  4. Как давать отзывПять стилевых правил для формулировки находок — от конкретности до соответствия стадии.
  5. ВыводШаблон markdown, которому должна следовать критика, включая таблицы.
  6. Если доступны коннекторыДополнительная подготовительная работа при подключении инструмента дизайна или источника отзывов пользователей.
  7. СоветыДелитесь контекстом, указывайте стадию и просите более узкий фокус.
Собственное описание skill
«Получите структурированную обратную связь по дизайну на юзабилити, иерархию и согласованность. Активируйте запросом „оцените этот дизайн", „раскритикуйте этот макет", „что вы думаете об этом экране?" или при передаче ссылки Figma или скриншота для обратной связи на любом этапе — от исследования до финальной полировки.»

Описание из front-matter файла SKILL.md. Полный файл примерно 3898 символов. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill design-critique

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Нужен ли коннектор Figma, чтобы это работало?

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

Design Critique

Запустите design-critique на реальной задаче ревью дизайна.

Скачайте OpenDesign, импортируйте design-critique из его ссылки SKILL.md, вставьте запрос выше и прочтите план перед результатом.

Терминал
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-critique

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows