缝合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.com2.安装凭据
这给了 stitch-mcp 允许代表您与谷歌对话。
gcloud auth application-default login3.添加到您的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，请使用以下两步流程：
- 提取：“从主屏幕获取设计上下文…”
- 生成：“使用该上下文，生成聊天屏幕…”
这可以确保您的新屏幕与现有的设计系统完美匹配。
📄 许可证
Apache 2.0 -开源，免费使用。
星迹
______________________________________________________________________
*建于❤️ 作者：Aakash Kargathara*