AI导哈

UI设计生成工具

Stitch MCP是一款基于AI的UI/UX设计生成工具，支持与多种MCP兼容编辑器无缝协作，提供零配置、跨平台和免费使用的Google Stitch API服务。

  • by Kargatharaakash
  • JavaScript
  • 本地部署
  • 121 星标
  • 更新于
在 GitHub 查看 Kargatharaakash/stitch-mcp

使用说明

缝合MCP

Google Stitch的通用MCP服务器

使用AI即时构建令人惊叹的UI/UX设计。与Cursor、Claude、Antigravity和任何兼容MCP的编辑器无缝协作。

由...创建 Aakash Kargathara.

🚀 运作原理

✨ 为什么这很酷

  • 零配置：只需登录一次，它就可以在任何地方工作。
  • 通用：适用于Windows、Mac和Linux。
  • 自由：Google Stitch API免费使用。

�️ 快速设置（2分钟）

1.先决条件：谷歌云

你需要一个启用了Stitch API的谷歌云项目。

# Login to your Google Cloud
gcloud auth login

# Set your project (replace with your actual project ID)
gcloud config set project YOUR_PROJECT_ID
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

# Enable the magic
gcloud beta services mcp enable stitch.googleapis.com

2.安装凭据

这给了 stitch-mcp 允许代表您与谷歌对话。

gcloud auth application-default login

3.添加到您的AI编辑器

将此内容复制并粘贴到MCP配置文件中：

适用于克劳德桌面: ~/Library/Application Support/Claude/claude_desktop_config.json

对于光标: 设置>MCP>添加新服务器

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
         "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

🛠️ 可用工具

工具名称 它的作用
extract_design_context 🧠 扫描屏幕以提取“设计DNA”（字体、颜色、布局）。用它来保持风格的一致性。
fetch_screen_code 💾 下载屏幕的原始HTML/Frontend代码。
fetch_screen_image 🖼️ 下载屏幕的高分辨率截图。
generate_screen_from_text ✨ 根据您的提示（和上下文）生成一个新屏幕。
create_project 📁 创建新的工作区/项目文件夹。
list_projects 📋 列出所有可用的Stitch项目。
list_screens 📱 列出特定项目中的所有屏幕。
get_project 🔍 检索特定项目的详细信息。
get_screen ℹ️ 获取特定屏幕的元数据。

💡 专业提示：“设计师流程”

要生成一致的UI，请使用以下两步流程：

  1. 提取：“从主屏幕获取设计上下文…”
  2. 生成：“使用该上下文，生成聊天屏幕…”

这可以确保您的新屏幕与现有的设计系统完美匹配。

📄 许可证

Apache 2.0 -开源，免费使用。

星迹

建于❤️ 作者：Aakash Kargathara

相关 MCP