如何編輯螢幕

已經有螢幕了嗎？使用 screen.edit() 就能用自然語言疊代調整。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);

console.log(`Editing screen ${screen.id} in project ${project.id}`);

進行編輯

將自然語言指示傳給 screen.edit()：

const edited = await screen.edit("Change the color scheme to dark mode");

這會傳回一個新的 Screen 物件。原始的 screen 不會改變。

產生作業最多可能需要一分鐘。發生逾時請不要重試——伺服器仍在運作。

比較結果

const originalHtml = await screen.getHtml();
const editedHtml = await edited.getHtml();

console.log(`Original: ${originalHtml}`);
console.log(`Edited:   ${editedHtml}`);

指定裝置類型或模型

如果你需要特定裝置目標或模型，可將它們作為選用參數傳入：

const edited = await screen.edit(
  "Add a bottom navigation bar",
  "MOBILE",          // deviceType
  "GEMINI_3_PRO"     // modelId
);

所有可用的 deviceType 與 modelId 值請參閱參考文件。