如何產生變體

變體讓你能探索既有設計的不同詮釋方式。把螢幕、提示詞與一些選項交給 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	要變動的設計層面。

完整的型別定義請參閱參考文件。