← 返回目录

Stitch MCP

社区

将Google Stitch中AI生成的UI设计无缝导入你的开发工作流。

查看安装方法 ↓ 横向对比 GitHub 源仓库 ↗

分类: 开发工具第 295 / 438
Stars: ★ 979 非常热门
传输方式: stdio（本地进程）
运行环境: Node.js
凭据: 需要 API Key / 凭据
许可证: Apache-2.0
最近提交: 4 个月前
工具数: 3

46FMRS · D

该MCP服务器提供CLI工具集，用于从Google Stitch获取AI生成的UI设计，并在本地预览或构建站点，同时支持通过MCP代理为编码智能体提供设计上下文。它独立于Google，具有实验性，需要用户自行评估风险。

最强项 · 文档质量 13/20 最弱项 · 可靠性 6/20

可靠性

6/20

安全与权限

8/20

维护活跃度

8/20

文档质量

13/20

安装易用性

11/20

查看各项评分依据

可靠性 6/20: 该服务器仅通过README描述，未提供可验证的测试或CI配置。命令如serve、site和proxy的存在性虽然看似合理，但缺乏明确的错误处理细节和边界情况支持。因此，我们扣分以反映关键路径可能未充分经过测试或文档化。
安全与权限 8/20: 身份验证通过OAuth或API密钥处理，并提供明确的注销命令。然而，关于令牌的存储方式、权限范围以及外部网络交互的详细信息不足。没有发现明确的危险默认操作，但未披露数据流和最小权限原则的细节，导致无法获得满分。
维护活跃度 8/20: 仓库活跃，有951星和10个未关闭问题，且未归档。Apache-2.0许可证。然而，未提供提交频率、问题响应时间或依赖更新方面的证据，因此进行轻微扣分。
文档质量 13/20: README提供了详细的命令、环境变量、故障排除指南和快速入门示例。然而，缺乏工具参数的完整文档（例如，build_site的模式虽然给出，但其他工具的参数未列出）。局限性已明确声明，但缺少成本信息。文档良好，但存在一些空白，例如详细的API限制和错误代码。
安装易用性 11/20: 提供了npx和全局安装的清晰安装步骤。对于流行的客户端（VS Code、Cursor等）给出了配置示例。然而，通过gcloud进行身份验证的复杂性，以及OAuth流程可能无法在无头环境中工作的事实，可能使安装复杂化。环境设置可能需要手动配置，可能比较脆弱，因此扣分。

静态评测 · 未实际运行收录于 2026-08-07

查看 FMRS 评分方法 →

选型与风险

能访问什么访问网络

适合谁

需要将AI生成的UI设计集成到开发流程的设计师和开发者。
希望使用编码智能体基于设计快速生成代码的团队。
使用支持MCP的IDE（如VS Code、Cursor等）的开发者。

不适合谁

不使用Google Stitch或不需要与其集成的人。
寻找官方Google支持的方案（该工具是独立的实验性项目）。
需要图形界面浏览设计的用户（主要基于CLI）。

所需权限

访问Google Cloud项目并启用Stitch API。
在本地运行Vite开发服务器和构建Astro项目。
访问终端和文件系统以生成项目文件。

风险与副作用

实验性项目，可能不被维护，或与未来Stitch API不兼容。
需要有效的Google Cloud凭据，配置不当可能导致权限错误。
在无头环境（如SSH、Docker）中，浏览器认证可能无法自动进行，需手动复制OAuth URL。

安装接入

准备工作

运行环境：Node.js

STITCH_API_KEY 可选密钥 Stitch 平台的 API 密钥，可跳过 OAuth 直接认证；通过 init 向导或 Google Cloud 项目获取。

STITCH_ACCESS_TOKEN 可选密钥预先持有的 Stitch 访问令牌，设置后无需再走认证流程。

其他可选配置项（4 个）

STITCH_USE_SYSTEM_GCLOUD 可选设为 1 时使用系统已安装的 gcloud 配置而非内置隔离配置，适合已有 gcloud 登录的用户。

STITCH_PROJECT_ID 可选覆盖默认使用的 Google Cloud 项目 ID。

GOOGLE_CLOUD_PROJECT 可选指定项目 ID 的另一种环境变量写法。

STITCH_HOST 可选自定义 Stitch API 端点地址。

直接使用npx运行，无需安装：npx @_davideast/stitch-mcp <command>。或在MCP客户端配置中添加代理：在mcpServers中添加以下配置：

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

然后运行npx @_davideast/stitch-mcp init进行身份验证和项目设置。

.cursor/mcp.json

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

以 Cursor 为例。其他客户端的配置文件位置或字段可能不同（如 VS Code 使用 servers 字段），可用下方配置生成器转换。

.vscode/mcp.json

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

写入项目的 .vscode/mcp.json（VS Code 使用 servers 字段）。

Terminal

claude mcp add stitch -- npx @_davideast/stitch-mcp proxy

在终端运行；先把 <…> 占位符换成你自己的值。

生成并校验客户端配置

验证是否装好

在 MCP 客户端中添加 stitch 服务器后，工具列表中应出现 build_site、get_screen_code、get_screen_image 三个工具；也可运行 npx @_davideast/stitch-mcp doctor 验证配置健康状态。

常见排障

权限拒绝错误：确保你有Owner或Editor角色，启用计费并启用Stitch API，运行`doctor --verbose`诊断。
认证URL未出现：检查终端中是否有以`https://accounts.google.com`开头的URL，或检查代理调试日志。
API连接失败：运行`doctor --verbose`，确保项目已启用计费和Stitch API，必要时重新运行`logout --force`和`init`。

试试这样问

连接成功后，可以直接对 AI 助手这样说：

把项目 123456 里的主屏幕和关于页屏幕映射到 / 和 /about 路由，帮我生成一个站点
获取屏幕 abc 的 HTML 代码内容
获取屏幕 abc 的截图图片
列出这个 Stitch 项目里所有可用的屏幕，然后下载首页的代码

工具能力 3

build_site 写入

通过将屏幕映射到路由来从项目构建站点，返回每个页面的设计HTML。

get_screen_code 只读

获取指定屏幕并下载其HTML代码内容。

get_screen_image 只读

获取指定屏幕并下载其截图图像（base64编码）。

使用场景

本地预览Stitch项目中的所有屏幕。

从设计生成Astro静态站点。

为编码智能体提供设计上下文以辅助开发。

在终端中浏览和管理设计数据。

支持客户端

VS Code

Cursor

Claude Code

Gemini CLI

Codex

OpenCode

依据项目文档列出，未经本站实测。

详细介绍

stitch-mcp是一个CLI工具，用于将AI生成的UI设计从Google Stitch平台移动到本地开发环境。它允许你本地预览设计、构建Astro站点，并提供MCP代理服务器，使编码智能体可以访问Stitch工具，从而将设计融入开发流程。