ab-variants

/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