快速上手 | Stitch 中文文档

Stitch MCP 把在 Stitch 编辑器内生成设计的能力，直接带入你的 IDE、CLI 或任何你选用的 AI 工具。你可以把设计直接转换到代码库中，并生成新的屏幕。这让你能够以可编程、可自动化的方式操控 Stitch。

开始之前

在开始任何操作之前，你需要先完成 Stitch MCP 的身份验证。本指南假设你已经通过了 Stitch MCP 的身份验证。请先阅读我们的配置与身份验证指南，完成初始配置。

你可以使用任何你喜欢的编码智能体。Stitch MCP 服务器可以集成到支持远程 HTTP MCP 服务器的编码智能体中。

一个从 Stitch 到 React 的组件系统。写一条提示词，就能从你的 Stitch 设计得到一套结构良好的 React 组件。

写一条提示词，要求查看你的 Stitch 项目以及每个项目中的各个屏幕。

PROMPT

ActionShow me my Stitch projects.

FormatList out each screen under each project and its screen id.

你会看到类似下面这样的回复，具体内容会因工具和所选模型而有所不同。

1. Raffinato Coffee Store App
Created: Jan 14, 2026 • Desktop • Light Mode • Private

Screens (3):

- Home Menu
- Full Menu
- Checkout

每个 Stitch 项目都可以包含一系列屏幕。你的设计所对应的代码和图像，就存放在这些屏幕中。

MCP 工具的神奇之处，在于把上下文数据检索与 AI 模型的智能融为一体。你可以让智能体理解你的 Stitch 项目，也可以指示它基于你本地机器上的上下文生成新的设计和代码。或者，你也可以只是问它一个好玩的问题。

PROMPT

For funTell me what my Stitch Projects say about me as a developer.

这个提示相当好玩。如果你运行了它并想分享结果，欢迎在 Twitter / X 上和我们分享。好，言归正传。

当智能体知道你想处理哪个项目或屏幕之后，你就可以获取代码或生成的图像了。

PROMPT

Project + ScreenDownload the HTML code for the Full Menu screen in the Raffinato project.

Tool GuidanceUse a utility such as curl -L

ActionCreate a file named ./tmp/${screen-name}.html with the HTML code.

这个 HTML 文件是一份完整的 <html> 文档，其中包含专为该设计定制的 Tailwind CSS 配置。

LLM 非常擅长把 HTML 转换成各种不同的 UI 体系。这个 HTML 文件可以作为基础。借助提示词，你不仅能将 HTML 转换为 React、Vue 或 Handlebars，还能转换到 Web 平台之外的 UI 框架，例如 Flutter 和 Jetpack Compose。

和上面一样，你可以让智能体获取你的 Stitch 屏幕的图像。

PROMPT

Project + ScreenDownload the image for the Full Menu screen in the Raffinato project.

Tool GuidanceUse a utility such as curl -L

ActionCreate a file named ./tmp/${screen-name}.png containing the image.

现在你已经在本地拥有这份图像了。不过，到这一步还没什么实质进展。接下来我们加快进度，把一个完整的屏幕转换成 React 组件。

许多编码智能体都支持 Agent Skill 开放标准。技能会把一个基于指令的提示词和一组资源打包在一起，这些资源例如来自 MCP 服务器的特定工具调用。这种技能范式非常适合从 Stitch MCP 生成 React 组件系统。

add-skill 库让你可以直接通过 GitHub URL，把智能体技能安装到最常用的编码智能体中。

npx add-skill google-labs-code/stitch-skills --skill react:components --global

这个技能会告诉智能体：该使用哪些 Stitch 工具、要执行哪些步骤，以及拆分 React 组件的最佳实践。如果你想确切了解它的作用，请查看我们的 Stitch Agent Skills GitHub 仓库。

安装完成后，你可以写一条提示词来触发这个技能，让它来完成工作。

PROMPT

Skill TriggerConvert the Landing Page screen in the Podcast Project.

智能体会开始工作，最后交给你一个在 Vite 本地服务器上运行的 React 应用。