What is the design-shotgun skill?
The gstack design-shotgun skill is visual design exploration for an AI coding agent. It generates several design variants, opens a comparison board in your browser, collects your feedback and iterates until you approve one direction, then saves that choice for later sessions.
design-shotgun is the exploration step in gstack's design set. Instead of committing to one mockup, it generates a spread of variants and shows them side by side, so choosing becomes a visual comparison.
SKILL.md calls it standalone design exploration you can run anytime. The gstack README says it generates 4-6 mockup variants using GPT Image, and that taste memory starts biasing results after a few rounds.
The loop it runs
- Gather context on who the design is for, the job to be done, what already exists, the user flow and edge cases.
- Write lettered text concepts for each direction and confirm them before any image is generated.
- Generate the variants in parallel and show every image inline.
- Open the comparison board in your browser and collect ratings and notes.
- Confirm what it understood, save approved.json, then offer to iterate, finalize or save to plan.
What it remembers
- A persistent taste profile per project records approved and rejected fonts, colors, layouts and aesthetics.
- Confidence in each taste signal decays by 5% for every week without use.
- Earlier approved.json files are read back, up to the last 10 sessions.
- A DESIGN.md in the project is the default constraint unless you say otherwise.
Who the design-shotgun skill is for
Best for
- Builders who describe a UI feature but have not yet seen what it could look like.
- Anyone who says I don't like how this looks and wants alternatives fast.
- Teams that want a recorded, approved direction before building.
- Projects that already keep a DESIGN.md, which gstack design consultation can write, and want variants that respect it.
- Plan reviews such as gstack plan design review, which can call design-shotgun and pass along the context they already gathered.
Not for
- Writing production code. The README hands approved mockups to /design-html, covered by gstack design-html, for that step.
- Reviewing a finished interface. SKILL.md calls this visual brainstorming, not a review process.
Use it with UiChemy
The board gives you pictures, not WordPress pages. Once you pick a direction and rebuild it in Figma, UiChemy Figma to WordPress turns that design into editable pages. Click Get Started on uichemy.com.
How to install gstack Design Shotgun Skill: Compare Design Variants
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack && cd ~/.claude/skills/gstack && ./setupCheck requirements
The README lists Git, Bun v1.4.2 or newer (setup refuses Bun older than 1.3.3), Claude Code, and Node.js on Windows only.
Install gstack
Run the clone and setup command above. design-shotgun is one of the skills in the collection, so it arrives with the rest.
Add other agents
Bare ./setup installs for Claude Code only. Run ./setup --host auto, or --host codex, and check results with ./setup --status.
Provide image access
The design binary uses OpenAI's gpt-image-2 for image generation. On Codex, /design-shotgun uses the built-in $imagegen skill instead and needs no OPENAI_API_KEY.
Start exploring
Type /design-shotgun and describe the screen you want. Copilot and Antigravity CLI use the prefixed name /gstack-design-shotgun.
Check that it loaded
Describe a new settings page and run /design-shotgun. It should ask for context, propose lettered concepts, generate variants, open a comparison board and ask you to confirm your feedback.
Key features
- Variants in parallelVariant generation runs in parallel, and SKILL.md puts a full set at about 60 seconds. The default is 3 variants, up to 8 for important screens.
- Concepts before imagesIt writes lettered text concepts first and asks you to confirm, edit, add or drop directions before any image credits are spent.
- Anti-convergence ruleEach concept must be a distinct direction. If you could swap the headline between two variants without noticing, the weaker one is reworked.
- Context in five dimensionsStandalone runs gather who the design is for, the job to be done, what exists, the user flow and edge cases, in two rounds at most.
- Comparison boardVariants open side by side in your browser, served over HTTP, where you rate them and leave per-variant and overall comments.
- Feedback read back to youIt summarises the preferred variant, ratings, your notes and the direction, then asks you to confirm before saving.
- Taste memoryA per-project taste profile tracks approved and rejected fonts, colors, layouts and aesthetics, and flags requests that contradict a strong preference.
- Evolve from a screenshotIf you say you dislike a page, it screenshots that page and generates improvement variants from the image instead of from text alone.
- Graceful fallbackIf the design binary is unavailable, it skips mockups and falls back to the HTML wireframe approach. If every parallel run fails, it generates one at a time.
- Saved approval and next stepsThe approved choice is written to approved.json, then you can iterate, finalize with /design-html, save to plan, or stop.
Frequently asked questions
What is the gstack design-shotgun skill?
It is the design exploration skill in the gstack collection. It generates several AI design variants for a screen, opens a comparison board in your browser, collects your ratings and notes, and iterates, so you choose a visual direction before anyone writes production code or commits to a single mockup.
How do I install design-shotgun?
Install gstack. Run the README clone command, which places the repo in ~/.claude/skills/gstack, then run ./setup in that folder. design-shotgun ships inside the collection, so the same install gives you /design-shotgun alongside the other gstack skills, with no separate install step.
When should I use design-shotgun?
Use it when you describe a UI feature but have not seen what it could look like. SKILL.md lists the trigger phrases explore designs, show me options, design variants, visual brainstorm and I don't like how this looks. It also suggests itself proactively when you describe a UI feature but have not yet seen what it could look like.
Does design-shotgun remember earlier approvals?
Yes. It keeps a persistent taste profile for each project with approved and rejected fonts, colors, layouts and aesthetics, and confidence decays 5% per week. It also reads earlier approved.json files, up to the last 10 sessions, to bias new variants.
What happens after I pick a variant?
It confirms your ratings and notes back to you, writes approved.json, and offers next steps: iterate on the approved variant, finalize it with /design-html, save it to the current plan, or stop. The README says /design-html turns an approved mockup into HTML and CSS.
Which agents does gstack support?
The README table lists Claude Code at the full tier. Codex CLI, OpenCode, Cursor, Factory Droid, Kiro, GitHub Copilot CLI and Antigravity CLI are experimental, while OpenClaw, Hermes, Slate and GBrain are instruction-only, meaning setup installs nothing and prints what to copy. Pick a host with the --host flag.
How many variants does design-shotgun generate?
The default is 3 variants, and SKILL.md allows up to 8 for important screens. The README describes 4 to 6 mockup variants per round. Concepts are confirmed first, and you can change some, add more variants or drop some before any image is generated, which keeps credit spend in your hands.
What license does gstack use?
The repository is MIT licensed. The README describes gstack as twenty-three specialists and eight power tools, all slash commands, all Markdown, all free, MIT license. design-shotgun is one of those skills, so it ships under the same MIT terms as the rest of the collection.