83.3K+Скачать
Перейти к руководству
plan-design-reviewавтор Garry Tan

Plan Design Review Skill.

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

  • Дизайн-ревью и доступность
  • Отчёт ревью
Скачать OpenDesignИнструкция по использованию
garrytan/gstack · plan-design-review/SKILL.mdSKILL.md
--- name: plan-design-review description: Designer's eye plan review — interactive, like CEO and Eng review. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Преамбула и заголовки разделов прочитаны из исходного файла 14 сентября 2026 года · 72 139 символов в полном виде

01 Что делает

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

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

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

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

Проверяет план дизайна на полноту и риски для пользовательского опыта перед реализацией. Выполняет семь проходов по дизайну (информационная архитектура, состояния взаимодействия, путь пользователя, пустые состояния, визуальная иерархия, риск AI-шаблонности, доступность), оценивая каждый по шкале 0–10, объясняет, что нужно для оценки 10, и затем исправляет план для её достижения. По умолчанию генерирует визуальные макеты с помощью gstack designer, если в план входит UI.

Включает опциональный шаг «внешние голоса»: Codex оценивает план по жёстким правилам дизайна OpenAI плюс контрольным проверкам; сабагент Claude выполняет независимую проверку полноты. Работает в режиме плана. Для визуального аудита живого сайта используйте /design-review. Результат — улучшенный план со структурированным отчётом о проверке, а не документ о плане.

Что он выдаёт

  • Улучшенный файл плана с устранёнными пробелами в дизайне, оценёнными измерениями и добавленным структурированным разделом GSTACK REVIEW REPORT
  • HTML-файл сравнительной доски и approved.json с зафиксированным выбранным пользователем вариантом, оценками, комментариями и отзывом
  • Контрольная карточка (litmus scorecard), объединяющая выводы Codex и сабагента Claude, если запускались внешние голоса
Смотрите пример запроса ↗

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

  1. 01
    Scope Gate подтверждает цель проверки

    Прежде чем что-либо делать, спрашивает у пользователя подтверждение, что нужно проверить (diff ветки, документ плана или конкретную страницу), если только режим плана не выбирает активный план автоматически или пользователь явно не указал цель.

  2. 02
    По умолчанию генерирует визуальные макеты

    Если gstack designer доступен и план включает UI, немедленно генерирует макеты без запроса разрешения.

  3. 03
    Опциональные внешние голоса дизайна запускаются параллельно

    Если пользователь соглашается, одновременно запускает Codex (жёсткие правила дизайна + контрольные проверки) и сабагент Claude (независимая проверка полноты).

  4. 04
    Семь проходов по дизайну оценивают по шкале 0–10 и устраняют пробелы

    Для каждого измерения (информационная архитектура, состояния взаимодействия, путь пользователя, пустые состояния, визуальная иерархия, риск AI-шаблонности, доступность) оценивает план, объясняет, как выглядит оценка 10/10, редактирует план для устранения пробелов, переоценивает и повторяет, пока не будет достигнута 10 или пользователь не скажет продолжать дальше.

  5. 05
    Записывает структурированный отчёт о проверке в файл плана

    Добавляет раздел GSTACK REVIEW REPORT с таблицей запусков/статусов/находок, строкой VERDICT и статусом нерешённых вопросов как последней непустой строкой файла.

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

Когда использовать скилл plan-design-review

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

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

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

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

  • Чисто бэкенд-изменения, изменения только API или инфраструктуры без UI-охвата
  • Визуальные аудиты живого сайта (вместо этого используйте /design-review)

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

  • Дизайн-план или диф ветки с UI-областью охватаФайл плана, документ, который вставляет пользователь, конкретная страница/путь или диф текущей ветки.
  • Обратная связь по макетам через сравнительную доскуgstack-дизайнер отдаёт сравнительную доску по HTTP, где пользователь оценивает варианты, оставляет комментарии, нажимает Regenerate/Remix или отправляет финальный выбор.

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

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

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

  1. Все дизайн-артефакты сохраняются в ~/.gstack/projects/$SLUG/designs/

    Макеты, сравнительные доски и approved.json должны сохраняться в директорию designs проекта gstack пользователя, никогда в .context/, docs/designs/, /tmp/ или любую директорию внутри проекта.

  2. Иерархия приоритетов: Step 0 > Макеты > Состояния взаимодействия > AI-слоп > IA > Путь пользователя

    Никогда не пропускайте оценку области охвата на Step 0 или генерацию макетов, если дизайнер доступен. Макеты перед прохождением ревью — обязательны без исключений.

  3. Дизайн-ревью калибруются по DESIGN.md, если он присутствует

    Если DESIGN.md существует, все дизайн-решения должны соответствовать заявленной дизайн-системе.

  4. Outside Voices предзагружают проблемы в проходы (Passes)

    Жёсткие отклонения от Codex поднимаются как первые пункты в Pass 1 с тегом [HARD REJECTION]. Пункты Litmus DISAGREE показывают обе точки зрения в соответствующем проходе.

  5. Принцип полноты: AI делает полноту дешёвой

    Рекомендуйте полное покрытие (тесты, граничные случаи, пути ошибок) — «вскипятите океан» по одному озеру за раз.

04 Применение

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

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

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

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

Terminal
npx skills add https://github.com/garrytan/gstack --skill plan-design-review

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

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

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

Starter prompt
Review the design plan in [plan-file-path] before we start building. The plan describes a new onboarding flow with three screens, email capture, and a welcome modal. I want to make sure we're not missing interaction states, empty states, or accessibility requirements. Generate mockups if you can.

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

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

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

  • Убедитесь, что последний заголовок файла плана — ## GSTACK REVIEW REPORT, перед выходом из режима планирования
  • Убедитесь, что отчёт ревью содержит таблицу runs/status/findings, строку VERDICT и статус нерешённых решений как последнюю непустую строку файла
  • Проверьте, что gstack-review-log был вызван и gstack-review-read был выполнен хотя бы раз, если файл плана присутствует в контексте

В OpenDesign plan-design-review входит в комплект: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

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

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

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

Author
Garry Tan
Repository
github.com/garrytan/gstack Ветка main
Файл skill
plan-design-review/SKILL.md Контрольная сумма содержимого записана при верификации; коммит 71f6048
License
MIT Из LICENSE.
Звёзды репозитория
132 921 Снимок GitHub сделан 2026-09-14 для всего репозитория garrytan/gstack, который содержит 7 навыков в этом каталоге. Не является оценкой или счётчиком использования для plan-design-review.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Когда вызывать этот skillИспользуйте для ревью дизайн-планов; проактивно предлагайте, когда UI/UX-план требует ревью перед реализацией
  2. Преамбула (запускается первой)Запускает gstack-skill-start, обрабатывает деградированный режим, читает блоки инструкций, устанавливает SESSION_KIND и метки телеметрии
  3. Философия дизайнаОбеспечивает ощущение осмысленности дизайна, а не сгенерированности; находите каждый пробел, объясняйте, почему он важен, устраняйте очевидные
  4. gstack-дизайнер — ваш основной инструментГенератор AI-макетов, создающий реальные визуалы из дизайн-брифов; используйте по умолчанию, когда есть UI
  5. Принципы дизайнаДевять принципов: пустые состояния — это функции, иерархия важна, конкретика важнее ощущений, граничные случаи — это UX, AI-слоп — враг, адаптивность осмысленна, доступность обязательна, вычитание по умолчанию, доверие зарабатывается на уровне пикселей
  6. Когнитивные паттерны — как видят великие дизайнерыДвенадцать перцептивных инстинктов: видеть системы, а не экраны, эмпатия как симуляция, иерархия как служение, преклонение перед ограничениями, рефлекс вопроса, паранойя граничных случаев, тест «заметил бы я это», принципиальный вкус, вычитание по умолчанию, дизайн с учётом временного горизонта, дизайн для доверия, сценарные путешествия
  7. Принципы UX: как пользователи ведут себя на самом делеТри закона (не заставляйте меня думать, важна не логика кликов, а их количество, сначала опускай, потом опускай ещё), поведение пользователей (сканируют, а не читают, довольствуются минимумом, разбираются по ходу), билборд-дизайн, навигация как ориентирование, резерв доброжелательности, мобильные устройства — ставки выше
  8. Иерархия приоритетов при ограниченном контекстеШаг 0 > макеты > состояния взаимодействия > AI Slop > IA > путь пользователя; никогда не пропускайте Шаг 0 или макеты
  9. ПРЕДВАРИТЕЛЬНЫЙ АУДИТ СИСТЕМЫ (перед Шагом 0)Собирает контекст из git log, diff stat, плана, CLAUDE.md, DESIGN.md, TODOS.md, определяет область UI и существующие паттерны
  10. НАСТРОЙКА ДИЗАЙНА (выполните эту проверку ПЕРЕД любой командой макета)Проверяет, доступен ли бинарник gstack designer; выводит DESIGN_READY или DESIGN_NOT_AVAILABLE
  11. Контекст Brain (предполётная проверка)Загружает структурированный контекст проекта (продукт, бренд, цели, недавние решения) из gstack-brain-cache перед тем, как задавать уточняющие вопросы
  12. Шаг 0: оценка объёма дизайнаНачальная оценка дизайна от 0 до 10, проверка статуса DESIGN.md, использование существующего дизайна, вопрос об областях фокуса (СТОП до ответа пользователя)
Собственное описание skill
«Проверка плана глазами дизайнера — интерактивная, как проверка CEO и инженера. (gstack)»

Описание из метаданных SKILL.md. Полный файл составляет около 72 139 символов. Читайте полный файл на GitHub.

Plan Design Review

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

Навык plan-design-review входит в состав OpenDesign. Скачайте приложение, выберите навык в Plugins → Skills, вставьте промпт выше и прочтите план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/garrytan/gstack --skill plan-design-review