← 返回目录

Stitch MCP

社区

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

GitHub 源仓库 ↗

★ 957 Stars 分类 · 开发工具非常热门源版本 d8d055b02d76

46FMRS · D

可靠性

6/20

安全与权限

8/20

维护活跃度

8/20

文档质量

13/20

安装易用性

11/20

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

查看 FMRS 评分方法 →

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

工具能力

build_site

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

get_screen_code

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

get_screen_image

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

安装接入

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

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

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

claude_desktop_config.json

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

生成并校验客户端配置

选型与风险

适合谁

需要将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。

常见排障

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

使用场景

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

从设计生成Astro静态站点。

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

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

支持客户端

VS Code完整支持

Cursor完整支持

Claude Code完整支持

Gemini CLI完整支持

Codex完整支持

OpenCode完整支持