How to generate variants

Variants let you explore different takes on an existing design. Give the SDK a screen, a prompt, and some options-it returns an array of new Screen objects, each a unique riff on the original.

Find a screen

import { stitch } from "@google/stitch-sdk";

const projects = await stitch.projects();
const project = projects.at(0);
const screens = await project.screens();
const screen = screens.at(0);

Generate variants

const variants = await screen.variants(
  "Change the button style to outline",
  { numVariants: 3 }
);

console.log(`Generated ${variants.length} variants`);

Browse the results

Each variant is a full Screen object with its own HTML and image:

for (const variant of variants) {
  const html = await variant.getHtml();
  console.log(`Variant ${variant.id}: ${html}`);
}

Variant options

The second argument controls the generation behavior:

const variants = await screen.variants(
  "Explore different color palettes",
  {
    numVariants: 5,
    creativeRange: "REIMAGINE",
    aspects: ["COLOR_SCHEME", "LAYOUT"],
  }
);

Option	Values	Description
numVariants	1–5	Number of variants to generate. Default: 3.
creativeRange	REFINE, EXPLORE, REIMAGINE	How far from the original. REFINE = subtle tweaks, REIMAGINE = radical changes.
aspects	LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT	Which design aspects to vary.

See the Reference for the complete type definitions.