skills.rest
jokerman89
jokerman89COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-shotgun

Generates parallel HTML design variants along a chosen axis and assembles a side-by-side comparison index.

Updated May 27, 2026
Search Tags:#layout#palette#mockup#design exploration#parallel generation#html variants#side-by-side comparison
One-click install
npx skills add https://github.com/jokerman89/lintel --skill design-shotgun-jokerman89
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-shotgun
Source: https://github.com/jokerman89/lintel/tree/main/skills/design-shotgun
Command: npx skills add https://github.com/jokerman89/lintel --skill design-shotgun-jokerman89

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When a design direction is unclear, refining a single mockup sequentially is slow and narrows exploration too early. This Skill takes one seed HTML file and produces multiple variants along a concrete constraint axis, so teams can compare directions side-by-side and pick one quickly. ## Core Features & Use Cases - Parallel variant generation: Mutates a seed HTML file into 2-8 variants along a chosen axis such as palette, layout, density, motion-language, or type-system. - Side-by-side comparison index: Assembles an index.html with labeled iframes (or screenshot fallbacks) so reviewers can compare all variants in one view. - Failure recovery: Persists completed variants when a worker crashes and supports re-running only the failed axis rule with --only. - Use Case: A team has a dashboard seed mockup but cannot agree on a color direction. Run the skill with --axis palette --count 4 to get cool-mono, warm-mono, cool-accent, and warm-accent variants in one comparison page for the design review. ## Quick Start Ask the agent to run design-shotgun on your seed HTML file with a count of 4 and the palette axis to produce a side-by-side comparison page.

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 design variants from one HTML mockup?▼

Run the skill with --seed pointing to your HTML file, --count for the number of variants (2-8), and --axis choosing what to vary, such as palette or layout. It writes each variant as a separate file and builds an index.html showing them side-by-side.

What design axes can I vary when exploring HTML mockups?▼

The built-in axes are palette, layout, density, motion-language, and type-system. Each axis maps to concrete mutation rules, for example palette includes cool-mono, warm-accent, high-contrast, and duotone variants.

Can I add extra constraints on top of a variant axis?▼

Yes, pass --brief with a path to a constraints file. The brief filters the axis rules, for example a mobile-first, no-hero brief narrows the layout axis to dense-grid, centered-narrow, and sidebar-led.

What happens if a variant generation fails partway through?▼

Completed variants persist and failed ones are reported with their assigned axis rule. Re-run with --only <axis-rule> to fill just the gaps instead of regenerating everything.

When should I not use parallel design variant generation?▼

Avoid it when the design direction is already clear, since refining the seed directly is faster. It also does not fit vague axes like make it better or work needing pixel-level finish, since it explores direction rather than polish.

Related Skills

Explore More Design & Creative Skills→
GitnappGitnapp

sketch

Create multiple interactive HTML mockups for comparing UI design directions.

Community
Intermediate
GenEducationGenEducation

design-shotgun

Generate multiple UI design variants and compare them side by side.

Official
Advanced
shahmirerrorshahmirerror

design-exploration

Analyze component constraints and compose a design brief for variation exploration.

Community
Advanced
hugotownhugotown

huashu-design

Generate HTML prototypes, slide decks, animations, and design variations with export to MP4, GIF, and PPTX.

Community
Advanced