概述

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 身份验证支持。

设置与安装

快速开始

npx @_davideast/stitch-mcp init

这将运行一个引导式向导，用于设置 gcloud 身份验证、启用 Stitch API 并配置您的 MCP 客户端。

添加到 MCP 客户端（例如 Cursor 或 Claude）

{
  "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 获取最新版本、完整文档和示例。

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

Google Stitch MCP 服务器

概述