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

Design Review Skill.

Скилл для Claude Code и Codex для ревью дизайна: QA готовой страницы глазами дизайнера — несовпадения, отступы, иерархия, небрежность; затем исправляет их.

  • Дизайн-ревью и доступность
  • Отчёт ревью
Скачать OpenDesignИнструкция по использованию
garrytan/gstack · design-review/SKILL.mdSKILL.md
--- name: design-review description: Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. (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)
Преамбула и заголовки разделов, прочитанные из исходного файла 2026-09-14 · 126 647 символов полностью

01 Что делает

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

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

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

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

QA живого сайта глазами дизайнера. Skill открывает страницы в браузере пользователя, делает скриншоты на 375, 768 и 1440, оценивает десять категорий — от визуальной иерархии до состояний взаимодействия, — затем правит исходники, устраняя найденное, по одному коммиту на исправление, и повторно проверяет результат скриншотами «до» и «после».

Глубина проверки по умолчанию — 5–8 страниц; если URL не указан и работа идёт в feature-ветке, анализ становится diff-aware. Читатель получает две итоговые оценки, взвешенный Design Score и отдельный AI Slop Score, а за экспертными решениями стоят 30 именованных правил-детекторов, таких как [kicker-above-heading] и [gradient-text].

Что он выдаёт

  • Структурированный отчёт аудита в формате markdown в директории запуска.
  • Файл design-baseline.json, записанный для сравнения при регрессионных проверках в последующих запусках.
  • Пары скриншотов «до» и «после» для каждого применённого исправления.
  • Необязательный файл DESIGN.md, составленный на основе извлечённых наблюдений, если пользователь принимает предложение из Фазы 2.
Смотрите пример запроса ↗

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

  1. 01
    Сначала анализ, потом реакция

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

  2. 02
    Извлечение отрендеренной системы

    Фаза 2 исследует шрифты, цвета, шкалу заголовков и размеры тач-таргетов прямо на странице, а затем предлагает сохранить находки в виде DESIGN.md.

  3. 03
    Аудит страница за страницей

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

  4. 04
    Прочувствовать флоу

    Фаза 4 проходит 2-3 пользовательских флоу, сравнивая снапшот после каждого действия и отслеживая показатель доброжелательности при возникновении трудностей и их устранении.

  5. 05
    Исправлять по одной находке за раз

    Фаза 8 вносит минимальное изменение, коммитит его отдельно и повторно тестирует, прежде чем переходить к следующей находке.

  6. 06
    Две итоговые оценки

    Design score — это взвешенное среднее по десяти категориям, тогда как оценка AI slop выставляется отдельно.

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

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

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

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

  • Аудит перед запуском или после редизайна, когда нужен систематический проход по всему сайту, а не выборочная проверка.
  • Работа в feature-ветке, меняющей UI, где аудиту подлежат только затронутые маршруты.
  • Когда вы упоминаете визуальные несоответствия или хотите доработать живой сайт, skill должен предлагать себя сам.
  • Оценка того, выглядит ли выпущенная страница как сгенерированная ИИ, что большинство разработчиков не могут оценить самостоятельно.
  • Быстрая проверка на здравый смысл, когда нет времени на полный обход: главная страница плюс две ключевые страницы и сокращённый чек-лист.

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

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

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

  • Целевой URLДействующий адрес, включая localhost. Без него skill определяет его автоматически, либо, в ветке main, спрашивает вас.
  • Переопределение областиСузьте обход до одной страницы или раздела, если полный обход не нужен.
  • Флаг глубиныПо умолчанию — стандартный режим; --quick сокращает до трёх страниц, а --deep расширяет до полного предзапускного обхода.
  • Ваш DESIGN.md, если он существуетДокументы дизайна в корне репозитория читаются первыми, чтобы каждое решение оценивалось относительно заявленной системы, а отклонения оценивались строже.
  • Уже авторизованная сессия браузераАудит работает в рамках сессии, которая уже есть у пользователя, поэтому для страниц с авторизацией не требуется процесс входа.

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

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

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

  1. Оценивайте рендер, а не репозиторий

    Аудит никогда не читает файлы реализации: выводы должны основываться на отрендеренной странице. Единственное исключение — запись DESIGN.md на основе извлечённых наблюдений.

  2. Один коммит на одно исправление

    Каждое исправление коммитится отдельно с сообщением в формате style(design): FINDING-NNN плюс краткое описание.

  3. Чистое дерево перед началом работы

    Грязное рабочее дерево останавливает запуск: агент должен спросить, закоммитить, отложить в stash или прервать процесс, прежде чем появится хоть один коммит с исправлением.

  4. Спрашивайте перед действиями на реальном аккаунте

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

  5. Учётные данные не попадают к агенту

    Уже авторизованная сессия используется как есть. Пароли, одноразовые коды, платёжные данные, cookies, токены и localStorage полностью под запретом.

  6. Каждый вывод подтверждается скриншотами

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

  7. Откатывайте изменения в момент, когда становится хуже

    Любая регрессия вызывает немедленный git revert HEAD, а находка помечается как отложенная, а не исправленная в обход.

  8. Остановка после 30 исправлений

    Цикл эскалирует каждые пять исправлений и полностью останавливается, когда риск дизайн-фикса превышает 20% или число исправлений достигает 30.

04 Применение

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

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

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

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

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

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

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

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

Starter prompt
Audit the design of [https://myapp.com/dashboard] at standard depth. Focus on the settings page. I'm signed in as [[email protected]] in Aside. Flag the AI slop patterns and anything that breaks the spacing scale, then fix what you can.

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

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

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

  • Повторно протестируйте затронутую страницу после каждого исправления и убедитесь, что список ошибок консоли пуст или не хуже базового.
  • Если целевой макет был сгенерирован, сравните исправленный скриншот с ним и зафиксируйте результат — пройдено или нет.
  • Каждое исправление классифицируется: подтверждено, когда повторное тестирование подтверждает его без новых ошибок.
  • Фаза 9 повторно аудирует затронутые страницы и явно предупреждает, если итоговые оценки оказались ниже базовых.
  • В отчёте указывается число детектора как разница от начала до конца, либо сообщается, что детектор не был установлен или выключен.

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

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

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

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

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

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

Внутри SKILL.md

  1. НастройкаРазбирает URL, охват, глубину и аутентификацию; проверяет DESIGN.md, чистое дерево, браузер, тесты.
  2. РежимыПолный, быстрый, глубокий, diff-aware и регрессионный охваты определяют, какие страницы посещаются.
  3. Фаза 1: Первое впечатлениеПолностраничный скриншот десктопа, затем структурированная первая реакция и тест по областям страницы.
  4. Фаза 2: Извлечение дизайн-системыПроверяет шрифты, цвета, шкалу заголовков и размеры тач-таргетов, затем предлагает сохранить DESIGN.md.
  5. Фаза 3: Постраничный визуальный аудитСнимки, аннотированные и адаптивные скриншоты, trunk-тест, затем чек-лист из 10 категорий.
  6. Фаза 4: Обзор потоков взаимодействияПроходит 2-3 потока, сравнивает разницу на каждом шаге и оценивает индекс доброжелательности от 70.
  7. Фаза 5: Согласованность между страницамиСравнивает навигацию, футер, компоненты, тон и ритм отступов на страницах.
  8. Фаза 6: Составление отчётаОценивает каждую категорию по шкале A-F и пишет отчёт плюс design-baseline.json.
  9. Фаза 7: ТриажСортирует находки по влиянию и откладывает то, что не исправить правками исходников.
  10. Фаза 8: Цикл исправленийНаходит исходник, вносит минимальное исправление, коммитит, повторно тестирует, классифицирует, саморегулируется.
  11. Фаза 9: Финальный дизайн-аудитПовторно аудирует затронутые страницы, пересчитывает оценки и число детекторов, предупреждает о регрессиях.
  12. Фаза 10: ОтчётПишет полный отчёт, сводку индекса проекта, строку PR и разницу детектора.
Собственное описание skill
«QA дизайнерским глазом: находит визуальные несоответствия, проблемы с отступами, иерархией, паттерны AI-контента и медленные взаимодействия — затем исправляет их. (gstack)»

Описание из front-matter в SKILL.md. Полный файл составляет около 126 647 символов. Читать полный файл на GitHub.

Design Review

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

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

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