/ab-variants

description: "Generate A/B test design variants from an existing Figma screen — alternate layouts, CTA placements, color treatments, and copy variations."
argument-hint: "[frame name or node ID] [what to vary: layout, cta, color, copy, or 'all'] [--stitch for Stitch engine]"
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]

/ab-variants

You are generating **A/B test design variants** from an existing Figma screen. This creates alternative versions of key design elements to enable data-driven design decisions.

Input: **$ARGUMENTS**

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/figma-creation.md` for Figma API patterns, `${CLAUDE_PLUGIN_ROOT}/skills/design/references/ux-researcher.md` for testing methodology, and `${CLAUDE_PLUGIN_ROOT}/skills/design/references/content-designer.md` for copy variation.

Process

1. Connect & Identify Source

figma_get_status → verify Desktop Bridge connection

Find the source frame and analyze its structure:

figma_execute: `
  const frame = await figma.getNodeByIdAsync('SOURCE_ID');
  const texts = frame.findAllWithCriteria({ types: ['TEXT'] });
  const instances = frame.findAllWithCriteria({ types: ['INSTANCE'] });

  return {
    name: frame.name,
    width: Math.round(frame.width),
    height: Math.round(frame.height),
    headings: texts.filter(t => t.fontSize >= 20).map(t => ({
      id: t.id, text: t.characters?.substring(0, 60), size: t.fontSize
    })),
    ctas: texts.filter(t => {
      const parent = t.parent;
      return parent?.name?.toLowerCase().includes('button') ||
             parent?.name?.toLowerCase().includes('cta');
    }).map(t => ({
      id: t.id, text: t.characters, parentId: t.parent?.id, parentName: t.parent?.name
    })),
    components: instances.map(i => ({
      id: i.id, name: i.name, mainComponent: i.mainComponent?.name
    })),
    sections: frame.children.map(c => ({
      id: c.id, name: c.name, type: c.type, height: Math.round(c.height)
    }))
  };
`

Screenshot for reference:

figma_capture_screenshot(sourceId) → original version

2. Determine What to Vary

Based on user input or auto-detection, select variation dimensions:

| Dimension | What Changes | High-Impact Areas | |-----------|-------------|-------------------| | **Layout** | Section order, grid arrangement, visual hierarchy | Hero area, feature section, pricing table | | **CTA** | Button text, color, size, position, quantity | Primary action, sign-up, pricing selection | | **Color** | Primary accent, background, contrast treatment | Hero background, CTA button, section accents | | **Copy** | Headlines, subheadings, value propositions, CTAs | Hero headline, feature descriptions, button labels | | **Social Proof** | Testimonial placement, trust badges, stats | Near CTA, hero area, pricing section |

3. Create Variant Section

figma_execute: `
  const source = await figma.getNodeByIdAsync('SOURCE_ID');
  const section = figma.createSection();
  section.name = 'A/B Test Variants';
  section.x = source.x;
  section.y = source.y + source.height + 120;
  section.resizeWithoutConstraints(source.width * 3 + 240, source.height + 100);
  return { sectionId: section.id };
`

4. Generate Variants

Mode A: Stitch Engine (preferred — when Stitch MCP is available)

Stitch's `generate_variants` produces real rendered variants with configurable creative range.

1. Identify the Stitch screen for the source. If the source came from a Stitch project (known `projectId` + `screenId`), use it directly. Otherwise, upload the Figma screenshot as a Stitch screen:

   mcp__stitch__list_projects → find active project (or create one)
   mcp__stitch__upload_screens_from_images(
     projectId: [id],
     images: [{ fileContentBase64: [base64 of source screenshot], mimeType: "image/png" }]
   )

Note the returned `screenId`.

2. Map the user's variation intent to Stitch options:

| User asks to vary | `aspects` | `creativeRange` | |---|---|---| | layout / structure | `["LAYOUT"]` | `EXPLORE` | | color / palette | `["COLOR_SCHEME"]` | `EXPLORE` | | copy / text / headlines | `["TEXT_CONTENT"]` | `REFINE` | | fonts / typography | `["TEXT_FONT"]` | `REFINE` | | "all" / radical | `["LAYOUT","COLOR_SCHEME","IMAGES"]` | `REIMAGINE` | | subtle refinements | any | `REFINE` |

3. Generate variants (async — do not retry on connection errors):

   mcp__stitch__generate_variants(
     projectId: [id],
     selectedScreenIds: [sourceScreenId],
     prompt: [variation intent from user input],
     variantOptions: {
       variantCount: 3,
       creativeRange: [mapped value],
       aspects: [mapped array]
     },
     deviceType: MOBILE
   )

Each returned screen is a variant. Poll `mcp__stitch__get_screen` for each until `status === "COMPLETE"`.

4. Download `screenshot` and `htmlCode` for each variant via their `downloadUrl`.

5. Screenshot each variant using Playwright if available:

   curl -L "[screenshot.downloadUrl]" -o variant-[A|B|C].png

Skip the Figma clone steps below — go directly to Step 5 (Label Variants) using the Stitch screenshots.

Mode B: Figma Clone (fallback — when Stitch MCP is unavailable)

Variant A (Control)

Clone the original as-is:

figma_execute: `
  const source = await figma.getNodeByIdAsync('SOURCE_ID');
  const section = await figma.getNodeByIdAsync('SECTION_ID');
  const control = source.clone();
  control.name = 'A — Control';
  section.appendChild(control);
  control.x = 40;
  control.y = 40;
  return { id: control.id };
`

Variant B — Layout Change

Common layout variations:

• **Hero**: Image left ↔ Image right
• **Grid**: 3-col → 2-col with sidebar
• **Section order**: Move testimonials above features
• **CTA position**: Above fold ↔ Below features

figma_execute: `
  const source = await figma.getNodeByIdAsync('SOURCE_ID');
  const