design-shotgunpor Garry Tan

Design Shotgun Skill.

Uma skill para Claude Code e Codex voltada para design de UI: gera diversas variantes de design em paralelo e abre um quadro de comparação para feedback.

Web & UI
Código de UI

Baixar OpenDesign Ver guia de uso

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)

Metadados e títulos de seção lidos do arquivo original em 14/09/2026 · 52.851 caracteres no total

01 O que faz

O que a Skill design-shotgun faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

design-shotgun é uma ferramenta de exploração de design visual que gera múltiplas variantes de design com IA em paralelo, abre-as lado a lado em um painel de comparação servido via HTTP e coleta feedback estruturado. Ela memoriza o gosto do usuário entre sessões por meio de um perfil de gosto persistente (fontes, cores, layouts, estética) e inclina novas gerações em direção às preferências demonstradas.

A skill aplica anticonvergência (cada variante deve usar fontes, paletas e layouts diferentes) e salva todos os artefatos em ~/.gstack/projects/$SLUG/designs/ para persistência entre sessões. Ela suporta tanto novas explorações quanto a retomada de sessões anteriores, com ciclos de feedback para regeneração, remixagem de elementos entre variantes e iteração até que o usuário aprove uma direção.

O que ele produz

N PNGs de variantes salvos em ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
Painel de comparação em HTML servido via HTTP em porta aleatória com interface de coleta de feedback (design-board.html)
Arquivo approved.json registrando a variante preferida, avaliações, comentários e data para aprendizado de gosto entre sessões
taste-profile.json atualizado (schema v1) com padrões aprovados/rejeitados ponderados por confiança em cada dimensão

Veja o exemplo de prompt ↗

Como funciona

01
Detecção de Sessão e Recuperação de Gosto
Verifica ~/.gstack/projects/$SLUG/designs/ em busca de arquivos approved.json de sessões anteriores e lê o taste-profile.json persistente (schema v1 com decaimento de confiança de 5% por semana).
02
Geração Paralela de Variantes com anticonvergência
Inicia N subagentes Agent (um por variante) em uma única mensagem para execução concorrente.
03
Painel de Comparação HTTP com Ciclo de Feedback
Executa $D compare --serve para gerar o painel HTML e iniciar o servidor HTTP em porta aleatória.
04
Confirmação de Feedback e Atualização de Gosto
Resume a variante preferida, avaliações e comentários; confirma via AskUserQuestion antes de salvar.

02 Encontre o ideal para você

Quando Usar a Skill design-shotgun

Use a skill design-shotgun no Claude Code ou Codex quando o trabalho for design de UI deste tipo. Adequação e limites abaixo são extraídos do próprio arquivo da skill.

Boa Combinação

Exploração de design independente, executada em qualquer momento durante o desenvolvimento para qualquer funcionalidade de UI que o usuário descreva mas ainda não tenha visto
Brainstorming visual quando o usuário diz 'não gosto de como isso está' e quer ver direções alternativas para uma página existente
Revisitar explorações de design anteriores para ajustar escolhas ou explorar novas variantes para a mesma tela

Conheça os Limites

Finalização da implementação HTML/CSS pronta para produção (use /design-html para isso após aprovar uma direção)
Geração de uma única variante sem comparação (o skill gera múltiplas variantes em paralelo para comparação lado a lado)

O Que Fornecer

URL do screenshot para o caminho de evoluçãoSe o usuário disser 'não gosto DISSO', peça a URL.
Contagem de variantes (padrão 3, até 8)Solicitado no AskUserQuestion de coleta de contexto. Mais variantes para telas importantes.

03 Dentro da skill

Regras que o skill design-shotgun dá ao Claude Code e ao Codex

7 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Todos os artefatos para ~/.gstack/projects/$SLUG/designs/
Mockups de design, painéis de comparação e approved.json devem ser salvos em ~/.gstack/projects/$SLUG/designs/, nunca em .context/, docs/designs/, /tmp/ ou diretórios locais do projeto.
A Memória de Gosto Influencia a Geração por Padrão
Lê taste-profile.json (schema v1 com decaimento de confiança de 5% por semana) e resume as 3 principais entradas aprovadas/rejeitadas por dimensão (fontes, cores, layouts, estéticas).
Gera em /tmp/ e Depois Copia Devido a Restrições de Sandbox
Sempre gere PNGs primeiro em /tmp/variant-{letter}.png e depois copie (cp) para o local final ~/.gstack/projects/$SLUG/designs/.
No Máximo Duas Rodadas na Coleta de Contexto
Pré-preencha o que você inferiu de DESIGN.md, PRODUCT.md e da base de código. Pergunte pelo contexto faltante em um único AskUserQuestion.
Confirme o Feedback Antes de Salvar
Após receber o feedback (via HTTP POST ou fallback do AskUserQuestion), gere um resumo com a variante preferida, avaliações, comentários e direção.
DESIGN.md É a Restrição Padrão
Se DESIGN.md existir, siga o design system do projeto por padrão.
O Painel de Comparação É Quem Escolhe, Não o AskUserQuestion
Não use o AskUserQuestion para perguntar qual variante o usuário prefere. A UI do painel de comparação é a responsável pela escolha.

04 Coloque em prática

Instalar design-shotgun no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar design-shotgun ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formato genérico da CLI skills para design-shotgun/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Leia cada PNG gerado inline para que o usuário veja todas as variantes de uma vez no terminal antes de o painel abrir
Verifique se o quadro de comparação está sendo servido e extraia a URL do quadro a partir da saída do stderr (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Verifique se há arquivos de feedback (feedback.json para Submit, feedback-pending.json para Regenerate/Remix) no diretório do design
Execute a verificação de qualidade em cada variante gerada usando $D check --image <path> --brief <brief>; tente gerar novamente uma vez se a verificação falhar

No OpenDesign importe o design-shotgun a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Arquivo da skill: design-shotgun/SKILL.md Checksum do conteúdo registrado na verificação; commit 71f6048
License: MIT De LICENSE.
Estrelas do repositório: 132.921 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório garrytan/gstack, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para design-shotgun.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Quando invocar este skillExploração de design autônoma para recursos de UI, brainstorm visual, 'não gosto de como isso ficou'
Preâmbulo (execute primeiro)Executa gstack-skill-start, lê linhas STATUS, trata modo degradado, blocos de instrução, detecção de sessão
Operações seguras no modo de planejamentoPermitido no modo de planejamento: $B, $D, codex exec/review, gravações em ~/.gstack/, arquivo de plano, open para artefatos
Invocação de skill durante o modo de planejamentoAs instruções do skill são executáveis, não apenas referência; AskUserQuestion satisfaz o fim do turno; ExitPlanMode após a conclusão do workflow
Formato do AskUserQuestionA resolução de ferramentas se ramifica com base em SESSION_KIND/CONDUCTOR_SESSION; fallback em prosa para chamadas indisponíveis/falhas; tríade de confirmação obrigatória
Sincronização de artefatos (início do skill)A saída de início do skill já executou a sincronização; aja de acordo com a dica do GBrain, linhas ARTIFACTS_SYNC, portão de consentimento único
Patch comportamental específico do modelo (claude)Disciplina de lista de tarefas, pense antes de ações pesadas, prefira ferramentas dedicadas em vez de Bash
VozVoz da GStack: concreta, de construtor para construtor, começa com o ponto principal, conecta escolhas a resultados do usuário, encerramentos limitados
Recuperação de contextoNo início da sessão/compactação: recupere artefatos recentes, decisões, checkpoints, linha do tempo; sugira o próximo skill se RECENT_PATTERN indicar um
Estilo de escritaExplique jargões na primeira ocorrência, foco em resultados, frases curtas; pule se EXPLAIN_LEVEL: terse ou se o usuário pedir concisão
Princípio da Completude — Boil the OceanA IA torna a completude barata; recomende cobertura total; Completude: X/10 quando as opções diferem em cobertura
Protocolo de confusãoEm caso de ambiguidade de alto risco, PARE, nomeie o problema, apresente 2-3 opções com trade-offs, pergunte

A Descrição da Própria Skill

"Design shotgun: gere múltiplas variantes de design com IA, abra um painel de comparação, colete feedback estruturado e itere. (gstack)"

Descrição do cabeçalho do SKILL.md. O arquivo completo tem cerca de 52.851 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas sobre o skill design-shotgun

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O que o skill precisa para gerar variantes (dependências, chaves de API, ferramentas locais)?

O skill requer o binário design em ~/.claude/skills/gstack/design/dist/design (verificado na etapa DESIGN SETUP). O binário lida com a geração de imagens e as verificações de qualidade. Se não estiver disponível, o skill recorre a wireframes em HTML.

O quadro de comparação executa um servidor HTTP local em uma porta aleatória (sem dependências externas). Os arquivos de memória de gosto e approved.json são armazenados localmente em ~/.gstack/projects/$SLUG/designs/.

Design Shotgun

Execute design-shotgun em uma tarefa real de design de UI.

Baixe OpenDesign, importe design-shotgun a partir do link do SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills