design-shotgun

Generate multiple distinct UI design variants for a described feature or page.

Updated Feb 24, 2026
One-click install
npx skills add https://github.com/Jia-Hong-Peng/jolike.com --skill design-shotgun-jia-hong-peng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-shotgun
Source: https://github.com/Jia-Hong-Peng/jolike.com/tree/main/.claude/skills/gstack/design-shotgun
Command: npx skills add https://github.com/Jia-Hong-Peng/jolike.com --skill design-shotgun-jia-hong-peng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the slow, manual process of UI design exploration by generating multiple distinct design variants for any feature or page you describe in seconds, saving you hours of time creating individual mockups by hand.

Core Features & Use Cases

  • Multiple Variant Generation: Creates 3 or more distinct UI design directions covering different layouts, color schemes, and interaction patterns for your described feature.
  • Side-by-Side Comparison Board: Automatically opens all generated variants in a single browser view so you can easily evaluate and compare them against each other.
  • Iterative Feedback Loop: Lets you capture structured feedback on each variant to quickly refine and iterate toward a design direction you love. Use case: For example, if you are building a new user settings page and are unsure whether to use a tabbed layout, a single-page scroll layout, or an accordion layout, use this Skill to generate all three options in seconds and pick the best direction without wasting time on low-fidelity sketches.

Quick Start

Use the design-shotgun skill to generate 3 design variants for a new user profile page and open them side-by-side in my browser for comparison.

Frequently Asked Questions about design-shotgun

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate multiple UI design variants for a new feature quickly?

Generating multiple UI design variants requires describing your feature or page to produce 3 or more distinct layout, color scheme, and interaction directions in seconds, eliminating slow manual mockup creation.

Can I compare design mockups side-by-side in a browser automatically?

Comparing design mockups side-by-side is possible by automatically opening all generated visual brainstorm variants in a single browser view, allowing you to easily evaluate different layout options against each other.

What is the best way to explore different layouts for a page redesign?

Exploring different layouts for a page redesign is best handled by generating multiple distinct UI design directions at once, such as tabbed, single-page scroll, or accordion layouts, to evaluate options without low-fidelity sketches.

How do I collect structured feedback on visual brainstorm variants?

Collecting structured feedback on visual brainstorm variants involves using an iterative feedback loop to capture evaluations on each generated mockup, allowing you to quickly refine and iterate toward a preferred design direction.

Do I need browser automation tools to generate and compare mockups?

Browser automation tools are optional for generating and comparing mockups, but utilizing them allows the design generation binary to automatically open side-by-side comparison boards and collect structured user feedback on each variant.