Kof Stitch MCP

@保持第一针/kof针mcp

部分 KOF代理工作流程 -用于构建现代应用程序的完整代理工作流程。如果你对这个工具如何融入大局感兴趣，请查看完整的工作流程。

______________________________________________________________________

☕ 支持这个项目

如果这个项目对你有帮助，你可以在这里支持开发：

👉 https://buymeacoffee.com/keeponfirst

______________________________________________________________________

MCP（模型上下文协议）服务器 谷歌拼接 -AI驱动的UI/UX设计工具。

适用于 克劳德代码, 光标，以及任何兼容MCP的客户端。

为什么是这个包？

Google Stitch提供了一个官方MCP端点 stitch.googleapis.com/mcp，但它要求：

• 来自Google Cloud ADC的动态OAuth令牌
• 正确的身份验证标头

大多数MCP客户端（Claude Code、Cursor）不支持谷歌的 google_credentials 本机身份验证类型。此软件包将官方API包装为 stdio MCP服务器 自动处理身份验证。

Your MCP Client → kof-stitch-mcp → Google Stitch API
     (stdio)         (handles auth)      (HTTP)

特性

官方缝合工具（通过Google API）

• list_projects -列出您的所有Stitch项目
• get_project -获取项目详细信息
• create_project -创建新项目
• list_screens -列出项目中的屏幕
• get_screen -获取屏幕详细信息
• generate_screen_from_text -从文本提示生成UI设计

附加工具（通过此软件包）

• fetch_screen_code -直接下载屏幕HTML代码
• fetch_screen_image -将屏幕截图下载为PNG格式
• export_project -使用清单批量导出所有屏幕（HTML+PNG）
• fetch_design_md -下载项目的DESIGN.md设计系统规范（支持 Stitch Vibe设计)
• init_stitch_project - 新 初始化 .stitch/ 目录 针线活 兼容性

先决条件

1. Node.js 18+

1. 谷歌云CLI 使用应用程序默认凭据：

   # Install gcloud: https://cloud.google.com/sdk/docs/install

   # Login
   gcloud auth application-default login

   # Set project
   gcloud config set project YOUR_PROJECT_ID

1. 启用缝合MCP API:

   gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

安装

选项1:npx（推荐）

无需安装。直接在MCP客户端中配置。

选项2：全局安装

npm install -g @keeponfirst/kof-stitch-mcp

选项3：本地安装

npm install @keeponfirst/kof-stitch-mcp

配置

克劳德代码

创建 .mcp.json 在项目根目录中：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@keeponfirst/kof-stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

或者通过CLI添加：

claude mcp add stitch --command "npx" --args "-y" "@keeponfirst/kof-stitch-mcp" \
  --env GOOGLE_CLOUD_PROJECT=your-project-id

光标

添加到光标MCP设置：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@keeponfirst/kof-stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

其他MCP客户端

任何支持stdio MCP服务器的客户端都可以使用：

GOOGLE_CLOUD_PROJECT=your-project-id npx @keeponfirst/kof-stitch-mcp

使用示例

配置后，您可以在MCP客户端中使用自然语言：

"List my Stitch projects"
→ Uses list_projects tool

"Generate a mobile login screen with email and social login"
→ Uses generate_screen_from_text tool

"Download the HTML code for screen abc123 in project xyz789"
→ Uses fetch_screen_code tool

"Download the DESIGN.md from my Stitch project xyz789"
→ Uses fetch_design_md tool
→ Saves DESIGN.md to your working directory
→ AI coding agents can now follow your design system when generating UI

DESIGN.md工作流程（Vibe设计）

谷歌Stitch的新 设计.md 该功能（2026年3月18日推出）允许您在可移植的Markdown文件中定义您的设计系统——颜色、排版、间距和组件模式——AI代理可以读取和遵循。

1. Design in Stitch → export DESIGN.md from project settings
2. fetch_design_md → saves DESIGN.md to your repo
3. Claude Code reads DESIGN.md → generates consistent UI components

缝纫技能集成

针线活 是谷歌官方的Agent Skills库，它在Stitch的基础上添加了高级工作流——多页面循环、React组件转换、Remotion视频演练等。

kof-stitch mcp是使缝合技能发挥作用的身份验证层 在Claude Code和Cursor中，Google OAuth本身不受支持。

为什么要一起使用它们？

设置（一次性）

步骤1--配置kof-stitch mcp （身份验证桥）

添加到您的 .mcp.json:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@keeponfirst/kof-stitch-mcp"],
      "env": { "GOOGLE_CLOUD_PROJECT": "your-project-id" }
    }
  }
}

第二步——安装缝纫技巧

# Install the skills you need
npx skills add google-labs-code/stitch-skills --skill stitch-design
npx skills add google-labs-code/stitch-skills --skill stitch-loop
npx skills add google-labs-code/stitch-skills --skill design-md
npx skills add google-labs-code/stitch-skills --skill react-components

步骤3——初始化项目

在Claude Code中，运行：

Initialize my Stitch project 
 with init_stitch_project

这将创建：

.stitch/
├── metadata.json   ← screens map + project config (stitch-skills format)
├── DESIGN.md       ← design system template pre-filled from your Stitch theme
├── SITE.md         ← site vision and page checklist
└── designs/        ← output directory for HTML + PNG exports

步骤4——填写模板

编辑 .stitch/DESIGN.md 完成你的调色板、排版和组件规则。编辑 .stitch/SITE.md 描述你的网站目标和页面。

或者让 design-md 技能分析您现有的屏幕并自动填写DESIGN.md。

步骤5--运行高级工作流

Run stitch-loop to generate all pages in my site

Convert my Stitch screens to React components

环境变量

故障排除

“找不到gcloud CLI”

安装谷歌云SDK：https://cloud.google.com/sdk/docs/install

“找不到默认凭据”

gcloud auth application-default login

“项目中未使用Stitch API”

启用MCP API：

gcloud beta services mcp enable stitch.googleapis.com --project=YOUR_PROJECT_ID

“权限被拒绝”

确保您的帐户具有所需的角色：

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="user:your-email@gmail.com" \
  --role="roles/serviceusage.serviceUsageConsumer"

运作原理

1. 启动时，服务器验证gcloud身份验证
2. 对于每次MCP工具调用：

- 通过获取新的OAuth令牌 gcloud auth application-default print-access-token - 呼叫 https://stitch.googleapis.com/mcp 带有适当的标题 - 将结果返回给MCP客户端

相关

• 谷歌拼接 -官方Stitch网络应用程序
• 缝合MCP文档 -正式文件
• MCP协议 -模型上下文协议规范
• KeepOnFirst代理工作流 -使用此软件包的工作流启动器

许可证

MIT© 坚持第一