Back to MCP Servers
Google Stitch MCP 服务器 logo
mcp-server483

Google Stitch MCP 服务器

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

概述

Google Stitch MCP Server(由 davideast 维护)是 Google Stitch AI 设计平台(stitch.withgoogle.com)领先的开源模型上下文协议(MCP)服务器。它将 Stitch 的 AI 生成的 UI 设计与编程助手和 IDE 连接起来。

AI 工具现在可以实时发现并使用 Stitch 设计——获取屏幕界面、截图、HTML 代码,甚至构建完整网站——无需手动导出或复制粘贴。

主要功能

  • 设计到代码工具:提供 get_screen_codeget_screen_imagebuild_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 命令:servescreenssiteview 等。

用例

  • 设计到代码工作流程:要求 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 编程代理中的全部潜力。

Tags

google-stitchmcpmcp-服务器ui-设计设计转代码ai-ui前端astroviteclaudecursorgemini

Related Entries

Keep exploring similar tools and resources in this category.

Browse MCP Servers
viewmax mcp logo

viewmax mcp

MCP Servers

ViewMax MCP is a hosted Streamable HTTP MCP server for generating AI video, images, music, speech, and sound effects, with tools for model discovery, task polling, and credit checks. Official setup is documented for Claude Web/Desktop, Claude Code, Cursor, Codex, and SDK clients.

Cursor MCP logo

Cursor MCP

MCP Servers

Cursor MCP is Cursor's Model Context Protocol client support for connecting the Cursor editor and Cursor CLI agent to external MCP servers. Official docs cover stdio, SSE, Streamable HTTP, mcp.json configuration, OAuth, Marketplace plugins, and CLI management commands.

Higgsfield MCP logo

Higgsfield MCP

MCP Servers

Higgsfield MCP is Higgsfield AI's hosted MCP connector for generating images, videos, reusable characters, and creative assets from Claude or MCP-compatible agents. It uses a Higgsfield account and platform credits, with no API key documented for the official MCP connector.

Agent Reach logo

Agent Reach

MCP Servers

Agent Reach is an open-source CLI and Agent Skill that installs, routes, and health-checks upstream tools for web, social, GitHub, video transcript, RSS, and search access. It is not documented as a standalone MCP server; some channels use MCP-backed upstream tools such as mcporter/Exa, xiaohongshu-mcp, and linkedin-scraper-mcp.

Design Bridge MCP logo

Design Bridge MCP

MCP Servers

Design Bridge MCP connects Framer projects to Claude, Cursor, and other MCP-compatible assistants for AI-driven canvas and project automation.

RevenueCat MCP Server logo

RevenueCat MCP Server

MCP Servers

RevenueCat MCP Server lets AI assistants manage RevenueCat subscription infrastructure through natural language, including projects, apps, products, entitlements, offerings, paywalls, and analytics.