# Google Stitch MCP 服务器

Google Stitch AI设计平台的官方开源MCP服务器。允许AI智能体（Claude、Cursor、Gemini等）通过自然语言直接从Stitch项目中获取UI设计、生成代码、预览屏幕，并构建完整的网站。

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

Language: zh

Category: MCP Servers

Updated: 2026-03-21

## 概述

**Google Stitch MCP Server**（由 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"]
    }
  }
}
```

### 前提条件

- Google Cloud 项目，已启用 Stitch API
- 已安装 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 服务器让这些设计成为 AI 编程工作流程中的核心部分——赋予代理准确的“视觉”来理解所需实现的设计。

它保持积极维护、轻量级，并与所有主流 MCP 客户端无缝协作。

## 快速入门

请访问 [github.com/davideast/stitch-mcp](https://github.com/davideast/stitch-mcp) 获取最新版本、完整文档和示例。

从 `npx @_davideast/stitch-mcp init` 开始，即刻解锁 Google Stitch 在你钟爱的 AI 编程代理中的全部潜力。

## Tags

- google-stitch
- mcp
- mcp-服务器
- ui-设计
- 设计转代码
- ai-ui
- 前端
- astro
- vite
- claude
- cursor
- gemini

## Sources

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