skills.rest
The13thNode
The13thNodeCOMMUNITY
Explore all skills by this author →
GitHub

design-shotgun

Generate 3–5 React UI variants with design-system tokens and an HTML comparison board.

3|Updated Mar 26, 2026
Search Tags:#design#ui#react#variants#comparison-board#taste-memory
One-click install
npx skills add https://github.com/The13thNode/VibeCorp_PromptCEO --skill design-shotgun-the13thnode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-shotgun
Source: https://github.com/The13thNode/VibeCorp_PromptCEO/tree/main/skills/public/design-shotgun
Command: npx skills add https://github.com/The13thNode/VibeCorp_PromptCEO --skill design-shotgun-the13thnode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generating a single design and hoping the product director (PD) likes it wastes time and often misses better directions; this Skill standardizes producing multiple distinct UI options so stakeholders can choose with confidence and the team can iterate efficiently.

Core Features & Use Cases

  • Variant generation: Produce 3–5 distinct design approaches that differ in major dimensions (dense dashboard, card-based, minimal progressive disclosure, bold hero, split-panel).
  • Implementation-ready outputs: Each variant is delivered as a responsive React component using design-system tokens and includes loading, empty, and error states.
  • Comparison board & workflow: Create a standalone HTML comparison board showing variants side-by-side with rationales, log PD choices to a taste memory, and guide renaming/deletion of losing variants for implementation.
  • Use Case: Use when introducing a new page or ambiguous component, during plan-review feedback cycles, or when PD explicitly requests options.

Quick Start

Run the design-shotgun for the checkout page to produce 3–5 React variants and a standalone HTML comparison board for PD review.

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 variants for a React component to let stakeholders compare design directions?▼

You generate multiple UI variants by producing 3–5 distinct responsive React component files using design-system tokens, including loading, empty, and error states, plus a standalone HTML comparison board for side-by-side stakeholder review.

What is the best way to present multiple UI design options to a product director for selection?▼

Presenting multiple UI design options is best done by creating a standalone HTML comparison board with inline styles that displays variants side-by-side with their rationales, enabling confident product director selection.

When should I create multiple design variants instead of a single UI mockup?▼

Create multiple design variants instead of a single UI mockup when introducing a new page, building ambiguous components, addressing plan-review feedback about low visual hierarchy, or when a product director explicitly requests options.

Can I track product director design preferences to bias future UI variant generation?▼

You can track product director design preferences by appending their selected choices to a taste-log, functioning as a taste memory that biases and informs future UI variant generation.

Do I need external dependencies to generate responsive React variants with loading and error states?▼

No external dependencies are required to generate responsive React variants with loading and error states; the process outputs standalone component files using design-system tokens and a standalone HTML comparison board with inline styles.

Related Skills

Explore More Design & Creative Skills→
HKUDSHKUDS
30.4k

candlestick

Score 15 candlestick patterns in pandas DataFrames into composite long/short signals.

Official
Intermediate
Owl-ListenerOwl-Listener
234

design-retrospective

Summarize design learnings from completed projects into retrospective documents.

Community
Advanced
algusaemalgusaem

react-ui-patterns

Codify loading, error, and empty state patterns for React components.

Community
Basic
shekerkammashekerkamma

design-shotgun

Generate multiple UI design variants from a creative brief.

Community
Advanced