バリアントの生成方法

バリアントを使うと、既存のデザインに対するさまざまな切り口を試せます。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`);

結果を見る

各バリアントは、それぞれ独自の HTML と画像を持つ完全な Screen オブジェクトです：

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

バリアントのオプション

2 番目の引数が生成の挙動を制御します：

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	変更するデザインの側面。

完全な型定義については、リファレンスを参照してください。