概述

Google Stitch MCP 伺服器（由 davideast 維護）是針對 Google Stitch AI 設計平台 (stitch.withgoogle.com) 領先的開源模型情境協定 (MCP) 伺服器。它將 Stitch 的 AI 生成 UI 設計與編碼代理和 IDE 連接起來。

AI 工具現在可以即時探索和使用 Stitch 設計 — 獲取畫面、螢幕截圖、HTML 程式碼，甚至建置完整網站 — 無需手動匯出或複製貼上。

主要功能

設計轉程式碼工具：get_screen_code、get_screen_image 和 build_site 用於即時前端生成。
本地預覽：在 Vite 開發伺服器上提供 Stitch 畫面，實現即時瀏覽器預覽。
Astro 網站建置器：自動將畫面映射到路由並生成可部署的 Astro 專案。
互動式瀏覽器：基於終端機的專案、畫面和元數據探索工具。
代理模式：向 MCP 用戶端暴露高階工具，具備自動令牌刷新和 gcloud 整合功能。
一鍵設定：引導式 init 精靈處理身份驗證和 MCP 配置。

運作原理

該伺服器充當您的 MCP 用戶端（Claude、Cursor、VS Code 等）與 Stitch API 之間的代理。它將多個 Stitch 呼叫組合成對代理友好的工具，並將乾淨的設計情境（HTML、圖片、元數據）直接注入 LLM 對話中。

支援的傳輸方式：stdio（適用於 IDE），具備完整的 gcloud 身份驗證支援。

設定與安裝

快速開始

npx @_davideast/stitch-mcp init

此命令執行引導式精靈以設定 gcloud 身份驗證、啟用 Stitch API 並配置您的 MCP 用戶端。

新增至 MCP 用戶端（例如 Cursor 或 Claude）

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"]
    }
  }
}

先決條件

已啟用 Stitch API 的 Google Cloud 專案
已安裝 gcloud SDK
專案已啟用計費功能
Node.js（用於執行 npx）

可用工具

build_site：將畫面映射到路由並傳回多頁面網站的完整 HTML。
get_screen_code：為任何畫面下載生產就緒的 HTML/CSS。
get_screen_image：獲取螢幕截圖的 base64 編碼用於視覺情境。
其他 CLI 指令：serve、screens、site、view 等。

使用案例

設計轉程式碼工作流程：要求 Cursor 或 Claude「將此 Stitch 設計建置成 Next.js 頁面」— 立即獲取精確程式碼。
代理驅動開發：為編碼代理提供視覺情境，使其不再虛構 UI。
快速原型設計：在匯出前於本地預覽和迭代 Stitch 設計。
多代理管線：與 Google Antigravity、Cursor 或其他 MCP 伺服器結合，實現從想法 → UI → 程式碼 → 部署的端到端流程。
文件與交接：從 AI 設計生成乾淨的 Astro 網站，供利害關係人審查。

為什麼使用 Google Stitch MCP？

Stitch 將文字指令轉換為精美的響應式 UI。這個 MCP 伺服器讓這些設計在你的人工智慧編程工作流程中成為一等公民——給予代理人「眼睛」，讓他們看到需要實作的確切設計。

它持續積極維護、輕量級，並能與所有主要的 MCP 客戶端無縫協作。

開始使用

請訪問 github.com/davideast/stitch-mcp 以獲取最新版本、完整的說明文件與範例。

透過 npx @_davideast/stitch-mcp init 開始，今天就釋放 Google Stitch 在你最愛的人工智慧編程代理人中的全部潛力。

概述