stitch-mcp-generate-variants

Generate alternative design variants of existing Stitch UI screens.

38|5|Updated Feb 18, 2026
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-generate-variants
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: stitch-mcp-generate-variants
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-mcp-generate-variants
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-mcp-generate-variants

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious manual work of creating alternative versions of existing Stitch UI screens, saving design and development teams hours of repetitive iteration and ensuring consistent, high-quality design outputs.

Core Features & Use Cases

  • Efficient Native Variant Generation: Uses Stitch's dedicated variant API for faster, more consistent results than text-prompt generation (1 API call vs 3).
  • Granular Variation Control: Customize exactly which design aspects to modify (layout, color scheme, images, typography, content) and how much to deviate from the original design.
  • Use Case: After generating an initial Stitch screen, use this Skill to quickly produce 3 alternative color scheme and layout variations for stakeholder review, cutting iteration time from hours to minutes.

Quick Start

Use the stitch-mcp-generate-variants skill to generate 3 alternative versions of your existing Stitch dashboard screen with different color schemes and layout structures.

Frequently Asked Questions about stitch-mcp-generate-variants

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

FAQPage Schema
How do I generate alternative UI design variants for an existing Stitch screen?

To generate design variants, you need a valid Stitch project ID and a source screen ID. These identifiers allow the variant API to locate your existing UI and apply configurable variation parameters to produce alternative layouts.

Can I customize which design aspects are modified when generating Stitch screen variants?

Yes, you can customize exactly which design aspects to modify, including layout, color scheme, images, typography, and content. You can also configure the creative range to control how much new variants deviate from the original design.

How many alternative screen designs can I generate in a single request?

You can generate up to 5 alternative screen designs in a single request. The variant count is capped at 5 to ensure consistent, high-quality design outputs while eliminating manual iteration work for your team.

Does generating Stitch UI variants through the API save time compared to manual text-prompt iteration?

Generating Stitch UI variants through the dedicated API saves time by using 1 API call instead of 3 required for text-prompt generation. This native variant generation produces faster, more consistent results for A/B testing and design exploration.

What do I need before I can start creating alternative layouts for A/B testing in Stitch?

Before creating alternative layouts for A/B testing, you need an existing Stitch-generated screen and its corresponding source screen ID. You must also define your targeted design aspects and variation parameters to execute the API call successfully.