design-shotgundi Garry Tan

Design Shotgun Skill.

Una skill per Claude Code e Codex dedicata al design UI: genera diverse varianti di design in parallelo e apre una tavola di confronto per il feedback.

Web & UI
Codice UI

Scarica OpenDesign Guida all'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)

Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 52.851 caratteri in totale

01 Cosa fa

Cosa fa la Skill design-shotgun in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

design-shotgun è uno strumento di esplorazione del design visivo che genera in parallelo più varianti di design AI, le apre affiancate in una bacheca di confronto servita via HTTP e raccoglie feedback strutturato. Ricorda i gusti dell'utente tra sessioni diverse tramite un profilo di gusto persistente (font, colori, layout, estetica) e orienta le nuove generazioni verso le preferenze dimostrate.

La skill impone l'anti-convergenza (ogni variante deve usare font, palette e layout diversi) e salva tutti gli artefatti in ~/.gstack/projects/$SLUG/designs/ per la persistenza tra sessioni. Supporta sia nuove esplorazioni sia la ripresa di sessioni precedenti, con cicli di feedback per la rigenerazione, il remix degli elementi tra le varianti e l'iterazione finché l'utente non approva una direzione.

Che cosa produce

N PNG di varianti salvati in ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
Bacheca di confronto HTML servita via HTTP su una porta casuale con interfaccia di raccolta feedback (design-board.html)
File approved.json che registra la variante preferita, le valutazioni, i commenti e la data per l'apprendimento del gusto tra sessioni
taste-profile.json aggiornato (schema v1) con pattern approvati/rifiutati ponderati per confidenza per ogni dimensione

Vedi l'esempio di prompt ↗

Come funziona

01
Rilevamento della Sessione e Recupero del Gusto
Controlla ~/.gstack/projects/$SLUG/designs/ per i file approved.json delle sessioni precedenti e legge il taste-profile.json persistente (schema v1 con decadimento della confidenza del 5% a settimana).
02
Generazione di Varianti in Parallelo con anti-convergenza
Avvia N Agent subagenti (uno per variante) in un unico messaggio per l'esecuzione concorrente.
03
Bacheca di Confronto HTTP con Ciclo di Feedback
Esegue $D compare --serve per generare la bacheca HTML e avviare il server HTTP su una porta casuale.
04
Conferma del Feedback e Aggiornamento del Gusto
Riepiloga la variante preferita, le valutazioni e i commenti; conferma tramite AskUserQuestion prima di salvare.

02 Trova la tua applicazione

Quando Usare lo Skill design-shotgun

Usa lo skill design-shotgun in Claude Code o Codex quando il lavoro è UI design di questo tipo. Ambito e limiti qui sotto sono tratti dal file dello skill stesso.

Buona applicazione

Esplorazione di design standalone da eseguire in qualsiasi momento durante lo sviluppo per qualsiasi funzionalità UI descritta dall'utente ma non ancora vista
Brainstorming visivo quando l'utente dice 'non mi piace come appare' e vuole vedere direzioni alternative per una pagina esistente
Rivedere esplorazioni di design precedenti per modificare le scelte o esplorare nuove varianti per la stessa schermata

Conosci i limiti

Finalizzazione dell'implementazione HTML/CSS pronta per la produzione (usare /design-html per questo dopo aver approvato una direzione)
Generazione di una singola variante senza confronto (lo skill genera più varianti in parallelo per un confronto side-by-side)

Cosa fornire

URL dello screenshot per il percorso di evoluzioneSe l'utente dice 'non mi piace QUESTO', chiedete l'URL.
Numero di varianti (predefinito 3, fino a 8)Richiesto nell'AskUserQuestion di raccolta contesto. Più varianti per schermate importanti.

03 Dentro la skill

Regole che lo skill design-shotgun fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Tutti i produtti in ~/.gstack/projects/$SLUG/designs/
I mockup di design, le comparison board e approved.json devono essere salvati in ~/.gstack/projects/$SLUG/designs/, mai in .context/, docs/designs/, /tmp/ o directory locali al progetto.
La Taste Memory Influenza la Generazione per Default
Legge taste-profile.json (schema v1 con decadimento della confidenza del 5% a settimana) e riassume le prime 3 voci approvate/rifiutate per dimensione (font, colori, layout, estetiche).
Generare in /tmp/ e Poi Copiare per le Restrizioni della Sandbox
Generare sempre i PNG in /tmp/variant-{letter}.png prima, poi copiarli (cp) nella posizione finale ~/.gstack/projects/$SLUG/designs/.
Massimo Due Round sulla Raccolta del Contesto
Prepopolare quanto inferito da DESIGN.md, PRODUCT.md e dal codebase. Chiedere il contesto mancante in un'unica AskUserQuestion.
Confermare il Feedback Prima di Salvare
Dopo aver ricevuto il feedback (tramite HTTP POST o fallback AskUserQuestion), produrre un riepilogo con variante preferita, valutazioni, commenti e direzione.
DESIGN.md È il Vincolo Predefinito
Se DESIGN.md esiste, seguire per default il design system del progetto.
La Comparison Board È il Selettore, Non AskUserQuestion
Non usare AskUserQuestion per chiedere quale variante l'utente preferisce. La UI della comparison board è il selettore.

04 Mettila al lavoro

Installa design-shotgun in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi design-shotgun a Claude Code, Codex o al Tuo Agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica CLI skills per design-shotgun/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla skill un primo compito di progettazione UI

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Leggere ogni PNG generato in linea in modo che l'utente veda tutte le varianti contemporaneamente nel terminale prima che la board si apra
Verificare che la comparison board sia in esecuzione e analizzare l'URL della board dall'output stderr (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Controllare la presenza di file di feedback (feedback.json per Submit, feedback-pending.json per Regenerate/Remix) nella directory di design
Eseguire un controllo di qualità su ogni variante generata usando $D check --image <path> --brief <brief>; ritentare la generazione una volta se il controllo fallisce

In OpenDesign importare design-shotgun dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
File della skill: design-shotgun/SKILL.md Checksum del contenuto registrato alla verifica; commit 71f6048
License: MIT Da LICENSE.
Stelle del repository: 132.921 Snapshot GitHub del 2026-09-14 per l'intero repository garrytan/gstack, che contiene 7 skill in questo catalogo. Non è un punteggio o conteggio di utilizzo per design-shotgun.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando invocare questo skillEsplorazione di design autonoma per funzionalità UI, brainstorming visivo, "non mi piace come appare questo"
Preambolo (eseguire prima)Esegue gstack-skill-start, legge le righe STATUS, gestisce la modalità degradata, i blocchi di istruzioni, il rilevamento della sessione
Operazioni sicure in Plan ModeConsentite in plan mode: $B, $D, codex exec/review, scritture in ~/.gstack/, plan file, apertura per gli artifact
Invocazione dello skill durante il Plan ModeLe istruzioni dello skill sono eseguibili, non di riferimento; AskUserQuestion soddisfa la fine del turno; ExitPlanMode dopo il completamento del workflow
Formato AskUserQuestionLa risoluzione dello strumento si dirama su SESSION_KIND/CONDUCTOR_SESSION; fallback testuale per chiamate non disponibili/fallite; triade di conferma obbligatoria
Sincronizzazione degli artifact (avvio skill)L'output di avvio dello skill ha già eseguito la sincronizzazione; agire in base al suggerimento GBrain, alle righe ARTIFACTS_SYNC, al gate di consenso unico
Patch comportamentale specifica per il modello (claude)Disciplina della to-do list, pensare prima delle azioni importanti, preferire strumenti dedicati a Bash
TonoTono GStack: concreto, da builder a builder, con il punto in evidenza, scelte legate ai risultati per l'utente, chiusure delimitate
Recupero del contestoAll'avvio della sessione/compattazione: recuperare artifact recenti, decisioni, checkpoint, timeline; suggerire il prossimo skill se RECENT_PATTERN ne implica uno
Stile di scritturaSpiegare il gergo al primo utilizzo, impostazione orientata ai risultati, frasi brevi; saltare se EXPLAIN_LEVEL: terse o se l'utente richiede sinteticità
Principio di completezza — Boil the OceanL'IA rende economica la completezza; consiglia una copertura completa; Completeness: X/10 quando le opzioni differiscono in copertura
Protocollo di confusioneIn caso di ambiguità ad alto rischio, FERMARSI, nominarla, presentare 2-3 opzioni con compromessi, chiedere

Descrizione della skill

"Design shotgun: genera più varianti di design AI, apre una tavola di confronto, raccoglie feedback strutturato e itera. (gstack)"

Descrizione del front-matter da SKILL.md. Il file completo è di circa 52.851 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill design-shotgun

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Di cosa ha bisogno lo skill per generare le varianti (dipendenze, chiavi API, strumenti locali)?

Lo skill richiede il binario design in ~/.claude/skills/gstack/design/dist/design (verificato nel passaggio DESIGN SETUP). Il binario gestisce la generazione delle immagini e i controlli di qualità. Se non disponibile, lo skill ricorre a wireframe HTML.

La comparison board esegue un server HTTP locale su una porta casuale (nessuna dipendenza esterna). I file di taste memory e approved.json sono archiviati localmente in ~/.gstack/projects/$SLUG/designs/.

Design Shotgun

Esegui design-shotgun su un task di UI design reale.

Scarica OpenDesign, importa design-shotgun dal suo link SKILL.md, incolla il prompt qui sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa la Skill design-shotgun in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando Usare lo Skill design-shotgun

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che lo skill design-shotgun fornisce a Claude Code e Codex

Tutti i produtti in ~/.gstack/projects/$SLUG/designs/

La Taste Memory Influenza la Generazione per Default

Generare in /tmp/ e Poi Copiare per le Restrizioni della Sandbox

Massimo Due Round sulla Raccolta del Contesto

Confermare il Feedback Prima di Salvare

DESIGN.md È il Vincolo Predefinito

La Comparison Board È il Selettore, Non AskUserQuestion