# Google Stitch MCP 伺服器

Google Stitch AI 設計平台的官方開源 MCP 伺服器。讓 AI 代理（Claude、Cursor、Gemini 等）能夠透過自然語言從 Stitch 項目中提取 UI 設計、生成程式碼、預覽螢幕畫面，並直接建立完整的網站。

Canonical URL: https://a2a-mcp.org/entry/google-stitch-mcp-zh-TW

Language: zh-TW

Category: MCP Servers

Updated: 2026-03-21

## 概述

**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 身份驗證支援。

## 設定與安裝

### 快速開始

```bash
npx @_davideast/stitch-mcp init
```

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

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

```json
{
  "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](https://github.com/davideast/stitch-mcp) 以獲取最新版本、完整的說明文件與範例。

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

## Tags

- google-stitch
- mcp
- mcp-server
- ui-設計
- 設計到程式碼
- ai-ui
- 前端
- astro
- vite
- claude
- cursor
- gemini

## Sources

- [Project website](https://github.com/davideast/stitch-mcp)