建構你的第一個設計

Stitch SDK（@google/stitch-sdk）讓你直接以 TypeScript 產生、編輯與管理 UI 設計。不需要 MCP 設定檔，也不需要設定 CLI——只要 npm install 就能開始。

讀完本教學後，你會有一支可運作的指令碼，能建立專案、產生螢幕，並取回 HTML 與圖像 URL。

google-labs-code / stitch-sdk Star Stitch 設計產生 API 的 TypeScript SDK TypeScript @google/stitch-sdk

事前準備

Node.js 20 或更新版本（或 Bun）
一組 Stitch API 金鑰，可從 Stitch 設定頁面取得

安裝 SDK

npm

npm install @google/stitch-sdk

Bun

bun add @google/stitch-sdk

設定 API 金鑰

將金鑰匯出為環境變數，SDK 會自動讀取。

export STITCH_API_KEY="your-api-key"

撰寫指令碼

建立一個名為 my-first-design.ts 的檔案：

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

// 1. Create a project
const project = await stitch.createProject("My First App");
console.log(`Project created: ${project.id}`);

// 2. Generate a screen
const screen = await project.generate("A simple login page with email and password fields");
console.log(`Screen generated: ${screen.id}`);

// 3. Get your outputs
const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

console.log(`HTML:  ${htmlUrl}`);
console.log(`Image: ${imageUrl}`);

執行

tsx

npx tsx my-first-design.ts

Bun

bun my-first-design.ts

你會看到類似以下的輸出：

Project created: 4044680601076201931
Screen generated: 98b50e2ddc9943efb387052637738f61
HTML:  https://...
Image: https://...

在瀏覽器中開啟 HTML URL，你會看到一個已內建 Tailwind CSS、樣式完整的登入頁面。

剛剛發生了什麼事？

你使用了三個 SDK 核心概念：

stitch——預設的單例物件。它會使用你的 API 金鑰連線至 Stitch MCP 伺服器。
project.generate(prompt)——將提示詞傳送給 Stitch，並傳回 Screen 物件。
screen.getHtml() / screen.getImage()——取回所產生設計的下載 URL。

SDK 提供流暢的物件導向 API：stitch → Project → Screen。每個物件都知道如何前往下一個物件。

後續步驟

現在你已經有可運作的設計，不妨試試：

編輯螢幕，用後續提示詞精煉設計
產生變體，探索其他版面配置與配色組合
管理設計系統，建立視覺主題並套用到多個螢幕
上傳檔案，從磁碟匯入模擬圖、截圖與 HTML 原型
將 SDK 與 Vercel AI SDK 搭配使用，讓 LLM 協調你的設計工作流程
建構由代理程式驅動的工作流程，使用 callTool 與 listTools 取得完整的程式化控制
查閱完整的 SDK 參考文件，了解所有可用的方法