什么是 N2 Stitch MCP？

N2 Stitch MCP 是一款强大的代理工具，旨在稳定 AI 智能体与 Google Stitch API 之间的连接。UI 生成中的一个常见痛点是，虽然 Stitch API 生成一个屏幕可能需要长达 10 分钟，但标准 TCP 连接通常在 60 秒后就会断开，导致数据丢失和工作流失败。该技能通过提供一个持久且具有弹性的接口弥补了这一差距。

作为 Openclaw Skills 目录的重要补充，该代理实现了复杂的自动恢复和轮询机制。它确保即使网络连接中断，生成过程仍会继续，并将最终结果成功交付给智能体，这使其成为生产级 AI 设计自动化的必备工具。

下载入口:https://github.com/openclaw/skills/tree/main/skills/choihyunsus/n2-stitch-mcp

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

N2 Stitch MCP 应用场景

• 自动根据文本描述生成复杂的 UI 屏幕，无需担心超时错误。
• 构建需要向 Google Stitch 发起长时间运行的 API 调用且具有弹性的设计工作流。
• 通过专用追踪工具实时监控多个并发 UI 生成任务的进度。
• 使用自动后台令牌刷新为 AI 智能体维持稳定的身份验证会话。

1. AI 智能体通过 MCP 服务器接口向 Google Stitch 发送 UI 生成请求。
2. 该技能监控连接状态；如果发生标准 60 秒 TCP 超时，它将触发内部恢复序列。
3. 代理利用其生成追踪系统识别挂起的任务，并开始在后台自动轮询状态。
4. 像 generation_status 这样的虚拟工具允许智能体在不重启请求的情况下查询当前进度。
5. 远程任务成功完成后，该技能将检索 UI 资产并将其返回给智能体，有效地隐藏了底层的网络不稳定问题。

N2 Stitch MCP 配置指南

要将此技能集成到您的环境中并探索其他 Openclaw Skills，请按照以下步骤操作：

1. 身份验证

您可以通过 gcloud 或直接使用 API 密钥进行身份验证。

# 推荐：Google Cloud SDK
gcloud auth application-default login

# 备选：API 密钥
export STITCH_API_KEY="your-key"

2. 配置 MCP

使用以下条目更新您的 MCP 配置文件：

{
  "mcpServers": {
    "n2-stitch": {
      "command": "npx",
      "args": ["-y", "n2-stitch-mcp"]
    }
  }
}

N2 Stitch MCP 数据架构与分类体系

该技能将交互数据组织为项目和屏幕，同时维护一个内部注册表以追踪活动生成任务。

name: n2-stitch-mcp description: Resilient MCP proxy for Google Stitch — 3-layer safety (auto-retry, token refresh, TCP drop recovery). homepage: https://nton2.com user-invocable: true

??? N2 Stitch MCP — Resilient Proxy Skill

Never lose a screen generation again. The only Stitch MCP proxy with TCP drop recovery.

The Problem

Google Stitch's generate_screen_from_text takes 2–10 minutes, but the API drops TCP after ~60 seconds.

Other MCP servers:  Request → 60s → TCP drop → ? LOST!
N2 Stitch MCP:      Request → 60s → TCP drop → ??? Auto-recovery → ? Delivered!

Why This One?

Quick Setup

1. Authenticate (one-time)

# Option A: gcloud (recommended)
gcloud auth application-default login

# Option B: API Key
export STITCH_API_KEY="your-key"

2. Add to MCP Config

{
  "mcpServers": {
    "n2-stitch": {
      "command": "npx",
      "args": ["-y", "n2-stitch-mcp"]
    }
  }
}

Available Tools

Stitch API (auto-discovered)

• create_project — Create a Stitch project
• list_projects — List all projects
• get_project — Get project details
• list_screens — List screens in a project
• get_screen — Get screen HTML/CSS
• generate_screen_from_text — ? Generate UI from text (Resilient!)
• edit_screens — Edit existing screens
• generate_variants — Generate design variants

Virtual Tools (N2 Exclusive)

• generation_status — Check generation progress in real-time
• list_generations — List all tracked generations

Links

• NPM: https://www.npmjs.com/package/n2-stitch-mcp
• GitHub: https://github.com/choihyunsus/n2-stitch-mcp
• Website: https://nton2.com

Part of the N2 AI Body series — Building the Body for AI