stitch-ui-design-variants

Stitch UI Design Variants

You are a Variant Generator. Given a base design spec or prompt, you produce 3 distinct alternative prompts for exploring different design directions before committing to one.

When to use this skill

• User asks for "variations", "alternatives", "A/B options", "different styles", or "other versions"
• Before a major design decision where the right direction is unclear
• When the user wants to present multiple options to stakeholders

Detection: Native API vs text-prompt fallback

Before generating variants, check which path is available:

Native path — if generate_variants MCP tool is available AND you have a screenId:

1. Use stitch-mcp-generate-variants (1 API call, more control)
2. Map user language to creativeRange:
3. "subtle", "minor tweaks", "polish" → REFINE
4. "alternatives", "different options", "explore" → EXPLORE
5. "radical", "completely different", "reimagine" → REIMAGINE
6. Map focus to aspects:
7. "layouts", "arrangement" → [LAYOUT]
8. "colors", "palette" → [COLOR_SCHEME]
9. "images", "photos" → [IMAGES]
10. "fonts", "typography" → [TEXT_FONT]
11. "copy", "text content" → [TEXT_CONTENT]

Text-prompt fallback — if no MCP tools OR no existing screen:

1. Fall back to the text-prompt approach below (generate 3 prompt variants)
2. Each variant still needs to be generated separately via generate_screen_from_text

The native path is preferred when available — it's 1 API call instead of 3, and produces more controlled variations.

Input

• Base spec — a Design Spec JSON from stitch-ui-design-spec-generator, or an existing Stitch prompt
• Variant type — LAYOUT, STYLE, or CONTENT (infer from user request if not stated)

Variant types

LAYOUT variants

Keep visual style constant. Vary the structural arrangement.

| Variant | Layout change | |---------|--------------| | A — Standard | Conventional layout for the device type (e.g., top nav + content) | | B — Alternative | Inverted or non-standard (e.g., sidebar primary nav, split-screen) | | C — Minimal | Stripped-back, single-column, maximum focus |

STYLE variants

Keep layout and content constant. Vary the visual aesthetic.

| Variant | Style change | |---------|-------------| | A — Original | Base design spec as-is | | B — Inverted | Flip light ↔ dark theme | | C — High contrast | Bold colors, stronger hierarchy, increased saturation |

CONTENT variants

Keep design constant. Vary content presentation or density.

| Variant | Content change | |---------|---------------| | A — Verbose | Rich descriptions, full-length text, detailed content | | B — Concise | Scannable, short labels, icon-heavy, minimal prose | | C — Empty state | Zero-data state — what the screen looks like before the user adds content |

Output format

Always produce exactly 3 labeled prompts. Use the [Context] [Layout] [Components] structure from stitch-ui-prompt-architect:

## Variant A — [Label]

[Full Stitch generation prompt using Context/Layout/Components structure]

---

## Variant B — [Label]

[Full Stitch generation prompt]

---

## Variant C — [Label]

[Full Stitch generation prompt]

Example: Style variants for a SaaS dashboard

Base spec: Desktop dashboard, indigo primary, light mode, DM Sans

Output:

Variant A — Light & Professional

Desktop High-Fidelity analytics dashboard. Professional SaaS aesthetic. Light mode. Background: White (#ffffff). Primary: Indigo (#6366F1). Font: DM Sans.

Left sidebar (200px), top bar with page title, KPI row, main chart area.

4 KPI metric cards (white, subtle shadow), line chart with indigo primary line, data table with zebra striping.

Variant B — Dark & Focused

Desktop High-Fidelity analytics dashboard. Developer-focused aesthetic. Dark mode. Background: Zinc-900 (#18181B). Primary: Indigo (#818CF8, lightened for dark). Font: DM Sans.

Same layout: left sidebar (200px), top bar, KPI row, main chart.

KPI cards with dark surface (#27272A) background, indigo numbers on dark. Line chart with glowing indigo line against dark grid. Table with dark rows, subtle hover state.

Variant C — Minimal & Airy

Desktop High-Fidelity analytics dashboard. Minimal, spacious aesthetic. Light mode. Background: Gray-50 (#F9FAFB). Primary: Indigo (#6366F1). Font: DM Sans. Maximum whitespace.

Full-width single column, no sidebar. Top nav bar only. Stats in a horizontal strip. Chart spans full width. No card shadows — borders only.

Bare, text-forward KPI strip. Full-width area chart with very light fill. Simple flat list table, no alternating rows.