快速上手 | 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 Open Standard。技能會將以指令為基礎的提示詞，與一組資源（例如來自 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 應用程式。