构建你的第一个设计

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 Key，来自你的 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 参考，了解所有可用的方法