design-shotgunvon Garry Tan

Design Shotgun Skill.

Ein Claude Code- und Codex-Skill für UI-Design: erzeugt mehrere Design-Varianten parallel und öffnet ein Vergleichsboard für Feedback.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

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)

Vorspann und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 52.851 Zeichen insgesamt

01 Was es tut

Was der design-shotgun Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

design-shotgun ist ein Tool zur visuellen Design-Exploration, das mehrere KI-Designvarianten parallel generiert, sie nebeneinander in einem über HTTP bereitgestellten Vergleichsboard öffnet und strukturiertes Feedback sammelt. Es merkt sich den Geschmack des Nutzers über Sitzungen hinweg mittels eines persistenten Taste-Profils (Schriften, Farben, Layouts, Ästhetik) und richtet neue Generierungen an nachgewiesenen Präferenzen aus.

Der Skill erzwingt Anti-Convergence (jede Variante muss unterschiedliche Schriften, Paletten und Layouts verwenden) und speichert alle Artefakte unter ~/.gstack/projects/$SLUG/designs/ für sitzungsübergreifende Persistenz. Er unterstützt sowohl neue Explorationen als auch das Wiederaufgreifen früherer Sitzungen, mit Feedback-Schleifen für Regenerierung, das Remixen von Elementen über Varianten hinweg und Iteration, bis der Nutzer eine Richtung freigibt.

Was er erzeugt

N Varianten-PNGs, gespeichert unter ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/variant-{letter}.png
HTML-Vergleichsboard, bereitgestellt über HTTP auf zufälligem Port mit Feedback-Sammel-UI (design-board.html)
approved.json-Datei, die die bevorzugte Variante, Bewertungen, Kommentare und Datum für sitzungsübergreifendes Taste-Learning erfasst
Aktualisierte taste-profile.json (Schema v1) mit konfidenzgewichteten genehmigten/abgelehnten Mustern je Dimension

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Session-Erkennung und Taste-Wiederherstellung
Prüft ~/.gstack/projects/$SLUG/designs/ auf approved.json-Dateien aus früheren Sitzungen und liest das persistente taste-profile.json (Schema v1 mit Konfidenz-Zerfall von 5% pro Woche).
02
Parallele Variantengenerierung mit Anti-Convergence
Startet N Agent-Subagenten (einen pro Variante) in einer einzigen Nachricht für gleichzeitige Ausführung.
03
HTTP-Vergleichsboard mit Feedback-Schleife
Führt $D compare --serve aus, um das HTML-Board zu generieren und einen HTTP-Server auf zufälligem Port zu starten.
04
Feedback-Bestätigung und Taste-Update
Fasst bevorzugte Variante, Bewertungen und Kommentare zusammen; bestätigt vor dem Speichern via AskUserQuestion.

02 Finden Sie Ihren Favoriten

Wann der design-shotgun Skill verwendet wird

Verwenden Sie das design-shotgun Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen sind aus der Skill-Datei übernommen.

Gut geeignet

Eigenständige Design-Exploration, jederzeit während der Entwicklung ausführbar für jedes vom Nutzer beschriebene UI-Feature, das noch nicht gesehen wurde
Visuelles Brainstorming, wenn der Nutzer sagt „Mir gefällt nicht, wie das aussieht“ und alternative Richtungen für eine bestehende Seite sehen möchte
Erneutes Aufgreifen früherer Design-Explorationen, um Entscheidungen anzupassen oder neue Varianten für denselben Screen zu erkunden

Grenzen kennen

Finalisierung der produktionsreifen HTML/CSS-Implementierung (verwenden Sie dafür nach Freigabe einer Richtung /design-html)
Generierung einer einzelnen Variante ohne Vergleich (der Skill generiert mehrere Varianten parallel für den Side-by-Side-Vergleich)

Was Sie bereitstellen sollten

Screenshot-URL für den Evolve-PfadWenn der Nutzer sagt „Mir gefällt DAS nicht“, fragen Sie nach der URL.
Anzahl der Varianten (Standard 3, bis zu 8)Wird bei der Kontexterfassung per AskUserQuestion abgefragt. Mehr Varianten für wichtige Screens.

03 Innerhalb des Skills

Regeln, die der design-shotgun Skill Claude Code und Codex gibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Alle Artefakte nach ~/.gstack/projects/$SLUG/designs/
Design-Mockups, Vergleichs-Boards und approved.json müssen unter ~/.gstack/projects/$SLUG/designs/ gespeichert werden, niemals unter .context/, docs/designs/, /tmp/ oder projektlokalen Verzeichnissen.
Geschmacksgedächtnis verzerrt die Generierung standardmäßig
Liest taste-profile.json (Schema v1 mit Confidence-Decay von 5 % pro Woche) und fasst die Top-3 genehmigten/abgelehnten Einträge pro Dimension zusammen (Schriften, Farben, Layouts, Ästhetik).
Generierung nach /tmp/ und anschließendes Kopieren aufgrund von Sandbox-Einschränkungen
Generieren Sie PNGs immer zuerst nach /tmp/variant-{letter}.png und kopieren Sie sie dann (cp) an den finalen Ort ~/.gstack/projects/$SLUG/designs/.
Maximal zwei Runden bei der Kontexterfassung
Füllen Sie vorab aus, was Sie aus DESIGN.md, PRODUCT.md und der Codebasis ableiten konnten. Fragen Sie fehlenden Kontext in einer AskUserQuestion ab.
Feedback vor dem Speichern bestätigen
Geben Sie nach Erhalt des Feedbacks (per HTTP-POST oder AskUserQuestion-Fallback) eine Zusammenfassung mit bevorzugter Variante, Bewertungen, Kommentaren und Richtung aus.
DESIGN.md ist die Standard-Einschränkung
Wenn DESIGN.md existiert, folgen Sie standardmäßig dem Design-System des Projekts.
Das Vergleichs-Board ist der Auswähler, nicht AskUserQuestion
Verwenden Sie nicht AskUserQuestion, um zu fragen, welche Variante der Nutzer bevorzugt. Die Vergleichs-Board-UI ist der Auswähler.

04 In Betrieb nehmen

design-shotgun in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

design-shotgun zu Claude Code, Codex oder Deinem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Generische skills-CLI-Form für design-shotgun/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr 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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Lesen Sie jedes generierte PNG inline vor, sodass der Nutzer alle Varianten sofort im Terminal sieht, bevor das Board sich öffnet
Prüfen, ob das Vergleichsboard läuft, und die Board-URL aus der stderr-Ausgabe parsen (BOARD_URL: http://127.0.0.1:N/boards/<id>/)
Nach Feedback-Dateien suchen (feedback.json für Submit, feedback-pending.json für Regenerate/Remix) im Design-Verzeichnis
Qualitätsprüfung für jede generierte Variante mit $D check --image <path> --brief <brief> durchführen; bei fehlgeschlagener Prüfung die Generierung einmal wiederholen

In OpenDesign importieren Sie design-shotgun über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Skill-Datei: design-shotgun/SKILL.md Inhalts-Checksum bei Verifizierung erfasst; Commit 71f6048
License: MIT Aus LICENSE.
Repository-Sterne: 132.921 GitHub-Snapshot vom 14.09.2026 für das gesamte garrytan/gstack-Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für design-shotgun.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann dieser Skill aufgerufen wirdEigenständige Design-Exploration für UI-Features, visuelles Brainstorming, „Mir gefällt nicht, wie das aussieht“
Präambel (zuerst ausführen)Führt gstack-skill-start aus, liest STATUS-Zeilen, behandelt den eingeschränkten Modus, Anweisungsblöcke, Sitzungserkennung
Sichere Vorgänge im Plan-ModusIm Plan-Modus erlaubt: $B, $D, codex exec/review, Schreibzugriffe auf ~/.gstack/, Plan-Datei, Öffnen für Artefakte
Skill-Aufruf während des Plan-ModusSkill-Anweisungen sind ausführbar, keine Referenz; AskUserQuestion erfüllt das Ende einer Runde; ExitPlanMode nach Abschluss des Workflows
AskUserQuestion-FormatWerkzeugauflösung verzweigt nach SESSION_KIND/CONDUCTOR_SESSION; Prosa-Fallback für nicht verfügbare/fehlgeschlagene Aufrufe; verpflichtende Bestätigungs-Triade
Artefakte-Synchronisierung (Skill-Start)Die Skill-Start-Ausgabe hat die Synchronisierung bereits durchgeführt; auf GBrain-Hinweis, ARTIFACTS_SYNC-Zeilen und einmalige Zustimmungssperre reagieren
Modellspezifischer Verhaltenspatch (claude)Disziplin bei der Todo-Liste, vor umfangreichen Aktionen nachdenken, dedizierte Werkzeuge gegenüber Bash bevorzugen
StimmeGStack-Stimme: konkret, von Builder zu Builder, mit der Kernaussage beginnen, Entscheidungen an Nutzerergebnisse koppeln, klar begrenzte Abschlüsse
KontextwiederherstellungBei Sitzungsbeginn/Kompaktierung: aktuelle Artefakte, Entscheidungen, Checkpoints, Zeitverlauf wiederherstellen; nächsten Skill vorschlagen, wenn RECENT_PATTERN einen nahelegt
SchreibstilFachbegriffe bei erster Verwendung erklären, ergebnisorientiert formulieren, kurze Sätze; überspringen, wenn EXPLAIN_LEVEL: knapp oder der Nutzer Kürze verlangt
Vollständigkeitsprinzip — Boil the OceanKI macht Vollständigkeit günstig; volle Abdeckung empfehlen; Completeness: X/10, wenn sich Optionen im Umfang unterscheiden
VerwirrungsprotokollBei folgenreicher Mehrdeutigkeit: STOPPEN, sie benennen, 2–3 Optionen mit Vor- und Nachteilen präsentieren, nachfragen

Die eigene Beschreibung des Skills

Design-Shotgun: Mehrere KI-Design-Varianten generieren, ein Vergleichs-Board öffnen, strukturiertes Feedback sammeln und iterieren. (gstack)

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 52.851 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum design-shotgun-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Was braucht der Skill, um Varianten zu generieren (Abhängigkeiten, API-Schlüssel, lokale Tools)?

Der Skill benötigt die design-Binärdatei unter ~/.claude/skills/gstack/design/dist/design (geprüft im Schritt DESIGN SETUP). Die Binärdatei übernimmt die Bildgenerierung und Qualitätsprüfungen. Ist sie nicht verfügbar, greift der Skill auf HTML-Wireframes zurück.

Das Vergleichsboard läuft auf einem lokalen HTTP-Server mit einem zufälligen Port (keine externen Abhängigkeiten). Taste-Memory- und approved.json-Dateien werden lokal unter ~/.gstack/projects/$SLUG/designs/ gespeichert.

Design Shotgun

Führen Sie design-shotgun bei einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie design-shotgun über dessen SKILL.md-Link, fügen Sie die Eingabeaufforderung oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen