Google Stitch MCP 服务器

概述

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 编程代理中的全部潜力。