design-shotgunавтор Garry Tan

Design Shotgun Skill.

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

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

garrytan/gstack · design-shotgun/SKILL.mdSKILL.md

--- name: design-shotgun description: Design shotgun: generate multiple AI design variants, open a comparison board, collect structured feedback, and iterate. (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 · 52 851 символ полностью

01 Что делает

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

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

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

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

design-shotgun — это инструмент визуального дизайн-исследования, который параллельно генерирует несколько AI-вариантов дизайна, открывает их бок о бок на доске сравнения через HTTP и собирает структурированную обратную связь. Он запоминает вкус пользователя между сессиями с помощью постоянного профиля вкуса (шрифты, цвета, макеты, эстетика) и смещает новые генерации в сторону подтверждённых предпочтений.

Skill обеспечивает антиконвергенцию (каждый вариант должен использовать разные шрифты, палитры и макеты) и сохраняет все артефакты в ~/.gstack/projects/$SLUG/designs/ для сохранения между сессиями. Он поддерживает как новые исследования, так и возврат к предыдущим сессиям, с циклами обратной связи для регенерации, смешивания элементов между вариантами и итераций до тех пор, пока пользователь не одобрит направление.

Что он выдаёт

N PNG-вариантов, сохранённых в ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
HTML-доска сравнения, обслуживаемая по HTTP на случайном порту, с UI для сбора обратной связи (design-board.html)
Файл approved.json, фиксирующий предпочтённый вариант, оценки, комментарии и дату для обучения вкусу между сессиями
Обновлённый taste-profile.json (схема v1) с взвешенными по уверенности одобренными/отклонёнными паттернами по каждому измерению

Смотрите пример запроса ↗

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

01
Определение сессии и восстановление профиля вкуса
Проверяет ~/.gstack/projects/$SLUG/designs/ на наличие файлов approved.json из предыдущих сессий и читает постоянный taste-profile.json (схема v1 с угасанием уверенности 5% в неделю).
02
Параллельная генерация вариантов с антиконвергенцией
Запускает N подагентов Agent (по одному на вариант) в одном сообщении для параллельного выполнения.
03
HTTP-доска сравнения с циклом обратной связи
Выполняет $D compare --serve для генерации HTML-доски и запуска HTTP-сервера на случайном порту.
04
Подтверждение обратной связи и обновление профиля вкуса
Суммирует предпочтённый вариант, оценки и комментарии; подтверждает через AskUserQuestion перед сохранением.

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

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

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

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

Отдельный запуск дизайн-исследования в любой момент разработки для любой UI-функции, которую описал пользователь, но ещё не видел
Визуальный брейнсторм, когда пользователь говорит «мне не нравится, как это выглядит» и хочет увидеть альтернативные направления для существующей страницы
Возврат к предыдущим дизайн-исследованиям для корректировки выбора или изучения новых вариантов того же экрана

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

Финализация готовой к продакшену реализации HTML/CSS (для этого используйте /design-html после утверждения направления)
Генерация одного варианта без сравнения (skill генерирует несколько вариантов параллельно для сравнения бок о бок)

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

URL скриншота для пути эволюцииЕсли пользователь говорит «мне не нравится ЭТО», запросите URL.
Количество вариантов (по умолчанию 3, до 8)Запрашивается в контексте AskUserQuestion. Больше вариантов для важных экранов.

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

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

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

Все артефакты — в ~/.gstack/projects/$SLUG/designs/
Макеты дизайна, сравнительные доски и approved.json должны сохраняться в ~/.gstack/projects/$SLUG/designs/, а не в .context/, docs/designs/, /tmp/ или локальные директории проекта.
Память вкуса по умолчанию влияет на генерацию
Считывает taste-profile.json (схема v1 с затуханием уверенности 5% в неделю) и суммирует топ-3 одобренных/отклонённых записи по каждому измерению (шрифты, цвета, макеты, эстетика).
Генерация в /tmp/, затем копирование из-за ограничений песочницы
Всегда сначала генерируйте PNG в /tmp/variant-{letter}.png, затем копируйте (cp) в конечное расположение ~/.gstack/projects/$SLUG/designs/.
Максимум два раунда сбора контекста
Предварительно заполните то, что вы вывели из DESIGN.md, PRODUCT.md и кодовой базы. Запрашивайте недостающий контекст в одном AskUserQuestion.
Подтверждайте отзыв перед сохранением
После получения отзыва (через HTTP POST или через резервный AskUserQuestion) выведите сводку с предпочитаемым вариантом, оценками, комментариями и направлением.
DESIGN.md — ограничение по умолчанию
Если DESIGN.md существует, по умолчанию следуйте дизайн-системе проекта.
Сравнительная доска — это инструмент выбора, а не AskUserQuestion
Не используйте AskUserQuestion, чтобы спросить, какой вариант предпочитает пользователь. Выбор осуществляется через UI сравнительной доски.

04 Применение

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

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

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

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

Terminal

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

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

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

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

Starter prompt

Explore design directions for the [dashboard homepage] where [enterprise SaaS users] land after login. I want to see 4 variants — one minimal/data-dense for power users, one with more guidance for first-timers, one that emphasizes recent activity, and one optimized for mobile-first. The existing dashboard in src/app/dashboard/ feels cluttered and users complain they can't find the export button. Edge cases: zero data state, 50+ recent items, and users who only use mobile.

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

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

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

Считывайте каждый сгенерированный PNG прямо в потоке, чтобы пользователь увидел все варианты сразу в терминале до открытия доски
Проверить, что сравнительная доска запущена, и извлечь URL доски из вывода stderr (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Проверить наличие файлов обратной связи (feedback.json для Submit, feedback-pending.json для Regenerate/Remix) в каталоге дизайна
Запустить проверку качества для каждого сгенерированного варианта с помощью $D check --image <path> --brief <brief>; при неудаче повторить генерацию один раз

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

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

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

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

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

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

Внутри SKILL.md

Когда вызывать этот skillСамостоятельное исследование дизайна для UI-функций, визуальный брейнсторм, «мне не нравится, как это выглядит»
Преамбула (запускается первой)Запускает gstack-skill-start, считывает строки STATUS, обрабатывает деградированный режим, блоки инструкций, определение сессии
Безопасные операции в режиме планаРазрешено в режиме плана: $B, $D, codex exec/review, запись в ~/.gstack/, файл плана, open для артефактов
Вызов skill во время режима планаИнструкции skill исполняемые, а не справочные; AskUserQuestion удовлетворяет требованию конца хода; ExitPlanMode после завершения workflow
Формат AskUserQuestionРазрешение инструмента ветвится по SESSION_KIND/CONDUCTOR_SESSION; текстовый резерв при недоступных/неудачных вызовах; обязательная тройка подтверждения
Синхронизация артефактов (старт skill)Вывод старта skill уже запустил синхронизацию; действовать по подсказке GBrain, строкам ARTIFACTS_SYNC, разовому шлюзу согласия
Патч поведения для конкретной модели (claude)Дисциплина списка задач, обдумывание перед тяжёлыми действиями, предпочтение выделенных инструментов над Bash
ТонГолос GStack: конкретный, на равных между строителями, начинать с сути, привязывать решения к результатам пользователя, ограниченные завершения
Восстановление контекстаПри старте сессии/сжатии: восстановить недавние артефакты, решения, чекпоинты, таймлайн; предложить следующий skill, если это подсказывает RECENT_PATTERN
Стиль изложенияПояснять жаргон при первом использовании, формулировать через результат, короткие предложения; пропустить, если EXPLAIN_LEVEL: terse или пользователь просит кратко
Принцип полноты — «вскипятить океан»AI делает полноту дешёвой; рекомендуйте полное покрытие; Completeness: X/10, когда варианты различаются по покрытию
Протокол при неясностиПри высокорисковой неопределённости — СТОП, назвать проблему, предложить 2-3 варианта с компромиссами, спросить

Собственное описание skill

Design shotgun: генерировать множество вариантов дизайна с помощью AI, открыть доску сравнения, собрать структурированную обратную связь и итерировать. (gstack)

Описание front-matter из SKILL.md. Полный файл содержит около 52 851 символа. Прочитать полный файл на GitHub.

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

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

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

Что нужно skill для генерации вариантов (зависимости, API-ключи, локальные инструменты)?

Skill требует бинарник design по пути ~/.claude/skills/gstack/design/dist/design (проверяется на шаге DESIGN SETUP). Бинарник отвечает за генерацию изображений и проверки качества. Если он недоступен, skill переключается на HTML-каркасы.

Сравнительная доска запускает локальный HTTP-сервер на случайном порту (без внешних зависимостей). Файлы памяти вкуса и approved.json хранятся локально в ~/.gstack/projects/$SLUG/designs/.

Design Shotgun

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

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

Загрузить OpenDesign Все навыки

Терминал

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

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

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

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

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

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

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

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

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

Все артефакты — в ~/.gstack/projects/$SLUG/designs/

Память вкуса по умолчанию влияет на генерацию

Генерация в /tmp/, затем копирование из-за ограничений песочницы

Максимум два раунда сбора контекста

Подтверждайте отзыв перед сохранением

DESIGN.md — ограничение по умолчанию

Сравнительная доска — это инструмент выбора, а не AskUserQuestion