design-shotgun

Generate multiple AI design variants and interactive comparison boards for user interfaces.

11|2|Updated Mar 31, 2026
One-click install
npx skills add https://github.com/ajsai47/holyclaude --skill design-shotgun-ajsai47
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-shotgun
Source: https://github.com/ajsai47/holyclaude/tree/main/skills/team/design-shotgun
Command: npx skills add https://github.com/ajsai47/holyclaude --skill design-shotgun-ajsai47

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design exploration is often slow and disconnected from user feedback. Designers and product teams struggle to visualize multiple directions for a UI feature, compare them side-by-side, and iterate based on structured input. This Skill automates the generation of AI design variants and creates an interactive feedback loop, turning subjective design debates into concrete, visual decisions.

Core Features & Use Cases

  • Multi-Variant Generation: Creates distinct AI-generated design directions for any screen or component, from landing pages to dashboard widgets.
  • Comparison Board: Automatically opens a side-by-side HTML board in your browser so you can evaluate variants visually.
  • Structured Feedback Loop: Collects user feedback through the browser and iterates on approved directions, building a taste memory for future projects.
  • Use Case: You are building a new checkout flow and want to explore three visual directions: minimal, bold, and playful. Use this Skill to generate mockups, open them in a comparison board, and iterate until your team picks a winner.

Quick Start

Use the design-shotgun skill to generate multiple visual design variants for your new settings page and collect feedback via a side-by-side comparison board.

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 mockups and compare them side-by-side?

You can generate multiple UI mockups and compare them side-by-side by creating distinct AI design variants and serving them on an interactive HTML comparison board. This automates visual brainstorming and opens the mockups directly in your browser for evaluation.

What is the best way to collect structured feedback during design exploration?

Collecting structured feedback during design exploration is best achieved using an interactive comparison board that captures user input directly through the browser. This loop turns subjective design debates into concrete visual decisions and builds a taste memory for future projects.

Do I need a headless browser to generate AI design variants?

Yes, you need a headless browser to generate AI design variants and interactive comparison boards. The browser is required to produce mockups, serve the comparison boards, and capture structured user feedback during your product development cycle.

Can I use this approach to iterate on different visual directions for a checkout flow?

Yes, you can use this approach to iterate on different visual directions for a checkout flow. It generates multiple mockups, such as minimal, bold, and playful variants, and allows your team to iterate until picking a winning design direction.

Does automated design generation work for both landing pages and dashboard widgets?

Automated design generation works for both landing pages and dashboard widgets by creating distinct AI-generated design directions for any screen or component. It automates mockup generation and serves them on a side-by-side comparison board for visual evaluation.