design-shotgunpar Garry Tan

Design Shotgun Skill.

Un skill Claude Code et Codex pour le design d'interface : génère plusieurs variantes de design en parallèle et ouvre un tableau de comparaison pour recueillir des retours.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

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)

Préambule et titres de section lus depuis le fichier source le 2026-09-14 · 52 851 caractères au total

01 Ce qu'il fait

Ce que fait le skill design-shotgun dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

design-shotgun est un outil d'exploration de design visuel qui génère plusieurs variantes de design par IA en parallèle, les ouvre côte à côte dans un tableau de comparaison servi via HTTP, et recueille des retours structurés. Il mémorise les préférences esthétiques de l'utilisateur entre les sessions via un profil de goût persistant (polices, couleurs, mises en page, esthétiques) et oriente les nouvelles générations vers les préférences démontrées.

Le skill impose l'anti-convergence (chaque variante doit utiliser des polices, palettes et mises en page différentes) et enregistre tous les artefacts dans ~/.gstack/projects/$SLUG/designs/ pour une persistance entre sessions. Il prend en charge à la fois les nouvelles explorations et la reprise de sessions antérieures, avec des boucles de retour pour la régénération, le remixage d'éléments entre variantes, et l'itération jusqu'à ce que l'utilisateur approuve une direction.

Ce qu'il produit

N PNG de variantes enregistrés dans ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
Tableau de comparaison HTML servi via HTTP sur un port aléatoire avec interface de collecte de retours (design-board.html)
Fichier approved.json enregistrant la variante préférée, les évaluations, les commentaires et la date pour l'apprentissage des goûts entre sessions
taste-profile.json mis à jour (schéma v1) avec des motifs approuvés/rejetés pondérés par confiance pour chaque dimension

Voir l'exemple de prompt ↗

Fonctionnement

01
Détection de session et récupération des goûts
Vérifie ~/.gstack/projects/$SLUG/designs/ à la recherche de fichiers approved.json issus de sessions antérieures et lit le taste-profile.json persistant (schéma v1 avec décroissance de confiance de 5 % par semaine).
02
Génération parallèle de variantes avec anti-convergence
Lance N sous-agents Agent (un par variante) dans un seul message pour une exécution concurrente.
03
Tableau de comparaison HTTP avec boucle de retour
Exécute $D compare --serve pour générer le tableau HTML et démarrer un serveur HTTP sur un port aléatoire.
04
Confirmation des retours et mise à jour des goûts
Résume la variante préférée, les évaluations et les commentaires ; confirme via AskUserQuestion avant l'enregistrement.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-shotgun

Utilisez le skill design-shotgun dans Claude Code ou Codex quand le travail est du design d'interface de ce type. Périmètre et limites ci-dessous sont tirés du propre fichier du skill.

Bon choix

Exploration de design autonome, exécutée à tout moment pendant le développement pour toute fonctionnalité UI que l'utilisateur décrit mais n'a pas encore vue
Brainstorming visuel lorsque l'utilisateur dit « je n'aime pas l'apparence de ceci » et souhaite voir des directions alternatives pour une page existante
Revisiter des explorations de design antérieures pour ajuster des choix ou explorer de nouvelles variantes pour le même écran

Connaître les limites

Finaliser une implémentation HTML/CSS prête pour la production (utilisez /design-html pour cela après avoir approuvé une direction)
Génération d'une seule variante sans comparaison (le skill génère plusieurs variantes en parallèle pour une comparaison côte à côte)

Quoi fournir

URL de capture d'écran pour le chemin d'évolutionSi l'utilisateur dit « je n'aime pas CECI », demandez l'URL.
Nombre de variantes (3 par défaut, jusqu'à 8)Demandé dans l'AskUserQuestion de collecte de contexte. Plus de variantes pour les écrans importants.

03 Dans le skill

Règles que le skill design-shotgun donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Tous les artifacts vers ~/.gstack/projects/$SLUG/designs/
Les maquettes de design, les tableaux de comparaison et approved.json doivent être enregistrés dans ~/.gstack/projects/$SLUG/designs/, jamais dans .context/, docs/designs/, /tmp/ ou des répertoires locaux au projet.
La mémoire de goût biaise la génération par défaut
Lit taste-profile.json (schéma v1 avec décroissance de confiance de 5 % par semaine) et résume les 3 meilleures entrées approuvées/rejetées par dimension (polices, couleurs, mises en page, esthétiques).
Génère vers /tmp/ puis copie en raison des restrictions du sandbox
Toujours générer les PNG vers /tmp/variant-{letter}.png d'abord, puis les copier (cp) vers l'emplacement final ~/.gstack/projects/$SLUG/designs/.
Deux tours maximum pour la collecte de contexte
Pré-remplissez ce que vous avez déduit de DESIGN.md, PRODUCT.md et de la base de code. Demandez le contexte manquant dans une seule AskUserQuestion.
Confirmer le retour avant l'enregistrement
Après avoir reçu le retour (via une requête HTTP POST ou le repli AskUserQuestion), affichez un résumé avec la variante préférée, les notes, les commentaires et la direction.
DESIGN.md est la contrainte par défaut
Si DESIGN.md existe, suivez par défaut le design system du projet.
Le tableau de comparaison est le sélecteur, pas AskUserQuestion
N'utilisez pas AskUserQuestion pour demander quelle variante l'utilisateur préfère. L'interface du tableau de comparaison est le sélecteur.

04 Mettez-le en pratique

Installer design-shotgun dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter design-shotgun à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour design-shotgun/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Lisez chaque PNG généré en ligne pour que l'utilisateur voie toutes les variantes en même temps dans le terminal avant l'ouverture du tableau
Vérifier que le comparison board est bien lancé et extraire l'URL du board depuis la sortie stderr (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Vérifier la présence de fichiers de feedback (feedback.json pour Submit, feedback-pending.json pour Regenerate/Remix) dans le répertoire de design
Exécuter un contrôle qualité sur chaque variante générée à l'aide de $D check --image <path> --brief <brief> ; relancer la génération une fois si le contrôle échoue

Dans OpenDesign importez design-shotgun depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branche main
Fichier du skill: design-shotgun/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 71f6048
License: MIT Tiré de LICENSE.
Étoiles du dépôt: 132 921 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt garrytan/gstack, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour design-shotgun.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand invoquer ce skillExploration de design autonome pour des fonctionnalités UI, brainstorm visuel, « je n'aime pas l'apparence de ceci »
Préambule (à exécuter en premier)Exécute gstack-skill-start, lit les lignes STATUS, gère le mode dégradé, les blocs d'instructions, la détection de session
Opérations sûres en mode planAutorisé en mode plan : $B, $D, codex exec/review, écritures dans ~/.gstack/, fichier de plan, open pour les artefacts
Invocation du skill pendant le mode planLes instructions du skill sont exécutables, pas de simples références ; AskUserQuestion satisfait la fin de tour ; ExitPlanMode une fois le workflow terminé
Format AskUserQuestionLa résolution des outils dépend de SESSION_KIND/CONDUCTOR_SESSION ; repli en prose si les appels sont indisponibles ou échouent ; triade de confirmation obligatoire
Synchronisation des artefacts (démarrage du skill)La sortie du démarrage du skill a déjà lancé la synchronisation ; agir selon l'indice GBrain, les lignes ARTIFACTS_SYNC, le portail de consentement unique
Correctif comportemental spécifique au modèle (claude)Discipline de liste de tâches, réfléchir avant les actions lourdes, préférer les outils dédiés à Bash
TonTon GStack : concret, de builder à builder, va droit au but, relie les choix aux résultats utilisateur, conclusions cadrées
Récupération de contexteAu début de la session ou après compaction : récupérer les artefacts récents, les décisions, les points de contrôle, la chronologie ; suggérer le prochain skill si RECENT_PATTERN en implique un
Style d'écritureExpliquer le jargon à la première utilisation, cadrer par les résultats, phrases courtes ; à omettre si EXPLAIN_LEVEL: terse ou si l'utilisateur demande de la concision
Principe d'exhaustivité — Boil the OceanL'IA rend l'exhaustivité peu coûteuse ; recommandez une couverture complète ; Completeness : X/10 quand les options diffèrent en couverture
Protocole en cas de confusionEn cas d'ambiguïté à fort enjeu, ARRÊTER, la nommer, présenter 2 à 3 options avec leurs compromis, puis demander

Description du skill lui-même

Design shotgun : générez plusieurs variantes de design IA, ouvrez un tableau de comparaison, collectez des retours structurés et itérez. (gstack)

Description front-matter de SKILL.md. Le fichier complet fait environ 52 851 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill design-shotgun

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

De quoi le skill a-t-il besoin pour générer des variantes (dépendances, clés API, outils locaux) ?

Le skill nécessite le binaire design dans ~/.claude/skills/gstack/design/dist/design (vérifié à l'étape DESIGN SETUP). Le binaire gère la génération d'images et les contrôles qualité. S'il est indisponible, le skill se replie sur des maquettes HTML.

Le comparison board exécute un serveur HTTP local sur un port aléatoire (aucune dépendance externe). Les fichiers de mémoire de goût et approved.json sont stockés localement dans ~/.gstack/projects/$SLUG/designs/.

Design Shotgun

Exécutez design-shotgun sur une tâche de design UI réelle.

Téléchargez OpenDesign, importez design-shotgun depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills