stitch-build 面向“从设计到可运行代码”的阶段。它不是单纯导出静态图片，而是帮助编码 Agent 读取 Stitch MCP 中的设计信息，并把设计转换或集成到目标工程中。
典型场景：
这个模块通常和 stitch-design 搭配使用：
stitch-design 负责生成、编辑、管理 Stitch 设计stitch-build 负责把设计变成工程代码stitch-utilities 提供辅助能力，例如文件处理、上下文整理等stitch-build 遵循 Agent Skills 开放标准。它不是一个通过 import 调用的 npm 运行时库，而是一组给编码 Agent 使用的技能说明、插件元数据和工作流约束。
常见接入方式是安装插件：
bashcodex plugin marketplace add google-labs-code/stitch-skills --ref main \ --sparse .agents/plugins \ --sparse plugins/stitch-build
或者在 Claude Code / Cursor 项目中安装：
bash# Claude Code
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codebash# Cursor
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor安装后，编码 Agent 会读取插件中的 skill 描述，并在你提出类似下面的任务时调用对应能力：
text把 Stitch 项目里的“Checkout Flow”设计转换成当前 Vite React 项目的页面。
构建技能通常需要三类上下文。
| 输入 | 说明 | 示例 |
|---|---|---|
| Stitch 设计来源 | 通过 Stitch MCP 访问的项目、页面、屏幕或设计 ID | Project: Travel App、Screen: Home |
| 目标工程 | 当前工作区中的 React、React Native、Remotion 或 shadcn/ui 项目 | apps/web、apps/mobile |
| 生成约束 | 技术栈、组件库、样式方案、目录规范、是否覆盖文件 | Tailwind、Expo Router、shadcn/ui、CSS Modules |
示例任务描述：
text使用 Stitch 中的“Pricing Page”设计，生成到当前 Next.js 项目。 要求： - 使用 app router - 使用 Tailwind CSS - 复用已有 components/ui 下的 shadcn/ui 组件 - 不要覆盖现有的 layout.tsx
根据目标类型不同，输出通常包括：
| 目标 | 常见输出 |
|---|---|
| React / Next.js | 页面组件、布局组件、样式文件、资源引用 |
| React Native / Expo | Screen 组件、StyleSheet、导航路由、图片资源 |
| Remotion | Composition、Scene 组件、动画时间线、素材引用 |
| shadcn/ui | 组件组合、主题 token、可复用 UI 组件 |
生成结果应该落在当前工程中，而不是只返回一段孤立代码。编码 Agent 还应尽量保持项目原有风格，例如：
stitch-build 依赖 Stitch MCP server。编码 Agent 通过 MCP 访问 Stitch 中的设计数据，再根据技能说明生成工程代码。
运行前需要完成 Stitch MCP 配置：
如果 MCP 没有配置好，构建技能无法读取 Stitch 设计，只能根据你的文字描述生成近似代码。
下面示例创建一个 Vite React 项目，然后让 Agent 把 Stitch 设计生成进去。
bashnpm create vite@latest stitch-react-demo -- --template react-ts
cd stitch-react-demo
npm install
npm run dev项目启动后，默认页面会运行在 Vite 提示的本地地址，例如：
texthttp://localhost:5173
在项目目录中执行：
bashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
如果使用 Cursor：
bashnpx plugins add google-labs-code/stitch-skills --scope workspace --target cursor
在 Claude Code、Cursor 或 Codex 中输入：
text使用 Stitch MCP 读取 Stitch 项目“Marketing Site”中的“Landing Page”设计， 把它生成到当前 Vite React 项目中。 要求： - 修改 src/App.tsx - 新增必要的组件到 src/components - 使用普通 CSS 或 CSS Modules，不引入新的 UI 框架 - 保持 npm run dev 可以正常运行 - 完成后运行 npm run build 检查
bashnpm run build npm run dev
如果构建通过，可以在浏览器中检查设计还原效果。
移动端设计适合生成到 Expo 项目，便于快速预览。
bashnpx create-expo-app stitch-mobile-demo
cd stitch-mobile-demo
npm install
npx expo startbashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
text从 Stitch 项目“Fitness App”读取“Workout Detail”移动端设计， 生成一个 Expo React Native 页面。 要求： - 页面文件放到 app/workout-detail.tsx - 使用 React Native 原生组件和 StyleSheet - 不引入 Web DOM API - 保留安全区适配 - 图片素材如无法直接下载，用占位块并标注 TODO - 生成后运行 npx expo start 不应报编译错误
bashnpx expo start
用 Expo Go 或模拟器打开页面，检查：
当 Stitch 设计表达的是分镜、片头、产品演示或营销动画时，可以生成 Remotion 代码。
bashnpx create-video@latest stitch-remotion-demo
cd stitch-remotion-demo
npm install
npm run devbashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
text使用 Stitch MCP 读取 Stitch 项目“Product Launch Video”中的三个画面： - Intro - Feature Highlight - Closing CTA 把它们转换为 Remotion composition。 要求： - 新增 src/StitchLaunchVideo.tsx - 在 src/Root.tsx 注册 composition - 视频尺寸 1920x1080 - 总时长 12 秒，30fps - 每个画面之间加入平滑过渡 - 使用 Remotion 的 useCurrentFrame、interpolate、spring - npm run build 或 npm run dev 不能报错
bashnpm run dev
在 Remotion Studio 中检查动画节奏、层级和画面比例。
如果项目已经使用 shadcn/ui，构建技能更适合生成“组件组合”，而不是重复造按钮、卡片、输入框。
bashnpx create-next-app@latest stitch-shadcn-demo \
--typescript \
--tailwind \
--eslint \
--app \
--src-dir \
--import-alias "@/*"
cd stitch-shadcn-demobashnpx shadcn@latest init npx shadcn@latest add button card input badge tabs separator
bashnpx plugins add google-labs-code/stitch-skills --scope project --target claude-code
text从 Stitch 项目“SaaS Dashboard”读取“Billing Settings”页面， 集成到当前 Next.js + shadcn/ui 项目中。 要求： - 页面生成到 src/app/billing/page.tsx - 优先使用 components/ui 中已有的 shadcn/ui 组件 - 如果需要业务组件，放到 src/components/billing - 使用 Tailwind CSS - 不要修改 shadcn/ui 原始组件实现，除非必要 - 生成后运行 npm run lint 和 npm run build
bashnpm run lint npm run build npm run dev
访问：
texthttp://localhost:3000/billing
构建技能依赖编码 Agent 理解当前仓库。提示词越具体，生成结果越可控。
推荐包含：
text目标： 把 Stitch 的“Profile Settings”页面生成到当前项目。 技术栈： Next.js app router、TypeScript、Tailwind CSS、shadcn/ui。 目录： - 页面：src/app/settings/profile/page.tsx - 业务组件：src/components/settings - 不要改动 src/app/layout.tsx 约束： - 复用已有 Button、Card、Input、Switch - 不新增状态管理库 - 图片资源无法获取时使用占位组件 - 生成后执行 npm run lint 和 npm run build
不推荐只写：
text帮我把这个设计转成代码。
这种描述缺少目标工程、路由位置、组件库和验收方式，容易生成孤立组件或错误依赖。
| 场景 | 推荐位置 |
|---|---|
| Vite React 页面 | src/App.tsx、src/components/*、src/styles/* |
| Next.js 页面 | src/app/**/page.tsx、src/components/** |
| Expo 页面 | app/*.tsx 或 src/screens/*.tsx |
| Remotion 视频 | src/Root.tsx、src/*Composition.tsx、src/scenes/* |
| shadcn/ui 业务封装 | src/components/<feature>/* |
比较适合：
不太适合一次性处理：
这些场景可以拆成小任务，例如先生成静态页面，再接入数据，再补交互。
每次使用构建技能后，建议让 Agent 或开发者检查：
npm run buildnpm run lintstitch-build 主要解决“设计到代码结构”的问题，不等同于完整产品开发。
需要人工确认或补充的内容包括：
如果设计中有“保存”“提交”“购买”等按钮，生成代码通常只能提供 UI 和基础事件占位，业务行为需要开发者接入。
Stitch 设计中使用的图片、图标、字体，不一定能直接落到代码仓库中。
常见处理方式：
public 或 assets 目录建议在任务中明确：
text如果素材无法从 Stitch 获取，不要编造远程 URL。 请使用本地占位块，并在代码中添加 TODO 注释。
构建技能可能会为了快速还原视觉而引入新依赖或生成大文件。对已有工程来说，这通常不是最佳结果。
建议明确限制：
text不要新增依赖，除非先说明原因。 不要把整个页面写成一个超过 500 行的组件。 不要修改全局样式，除非确实需要。 不要覆盖已有组件。
如果页面复杂，建议分两步：
不同目标平台的运行时差异很大。
需要特别注意：
| 目标 | 不能使用 |
|---|---|
| React Native | div、span、CSS 文件、DOM API |
| Web React | React Native 的 View、Text、StyleSheet |
| Remotion | 浏览器交互式状态作为主流程、不可预测的异步渲染 |
| shadcn/ui | React Native 组件、非 Tailwind 的移动端样式写法 |
如果生成后出现跨平台 API，需要让 Agent 按目标平台修复。
比较稳妥的工作流是：
stitch-build这样可以把 Stitch 设计快速变成可运行的工程代码，同时减少对现有项目结构的破坏。