如何生成变体

变体让你探索同一份设计的多种不同演绎。把一个屏幕、一条提示词和一些选项交给 SDK，它会返回一组新的 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);

生成变体

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

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

浏览结果

每个变体都是一个完整的 Screen 对象，拥有自己的 HTML 和图像：

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

变体选项

第二个参数控制生成行为：

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

选项	取值	说明
numVariants	1–5	要生成的变体数量。默认值：3。
creativeRange	REFINE, EXPLORE, REIMAGINE	与原始设计的偏离程度。REFINE = 细微调整，REIMAGINE = 彻底改变。
aspects	LAYOUT, COLOR_SCHEME, IMAGES, TEXT_FONT, TEXT_CONTENT	要变化的设计维度。

完整的类型定义请查看参考文档。