Stitch Pro MCP

stitch-pro-mcp

The intelligent MCP server for Google Stitch.

Design systems. Accessibility. Responsive. React/Vue/Svelte. Auto-orchestration.

18 tools. One prompt.

Quick Start · Tools · Examples · Architecture

______________________________________________________________________

问题

谷歌拼接 从文本提示中生成漂亮的UI。但它输出 原始HTML --没有设计系统，没有可访问性，没有响应断点，没有框架组件。

每个现有的Stitch MCP都是一个薄包装。生成屏幕，获取HTML，完成。

stitch pro mcp填补了从生成到生产的空白。

快速开始

1.获取Stitch API密钥

访问 stitch.withgoogle.com 并创建API密钥。

2.安装

# Run directly (no install)
npx stitch-pro-mcp

# Or install globally
npm install -g stitch-pro-mcp

3.配置编辑器

Claude Code

推荐（CLI）：

# Install globally first
npm install -g stitch-pro-mcp

# Add to Claude Code with API key
claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node $(npm root -g)/stitch-pro-mcp/dist/bin/cli.js

Windows用户： 使用已安装CLI的完整路径：

claude mcp add -e STITCH_API_KEY=your-api-key --transport stdio stitch-pro -- node "C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js"

注： Claude Code中的MCP服务器配置在 ~/.claude.json （局部范围），不在 ~/.claude/settings.json.使用 claude mcp add 配置——它会自动处理正确的文件。

Cursor

添加 .cursor/mcp.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

VS Code (Copilot)

添加 .vscode/mcp.json:

{
  "servers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Windsurf

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Gemini CLI

添加 ~/.gemini/settings.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Codex (OpenAI)

添加 ~/.codex/config.json:

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

Antigravity

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

OpenCode

{
  "mcpServers": {
    "stitch-pro": {
      "command": "npx",
      "args": ["-y", "stitch-pro-mcp"],
      "env": { "STITCH_API_KEY": "your-api-key" }
    }
  }
}

提示： 集 STITCH_API_KEY 作为系统环境变量，省略 env 完全封锁。

故障排除

Windows: "Connection closed" or server not connecting

在Windows上， npx 不能直接作为MCP命令工作。使用以下方法之一：

选项A：全局安装+使用 node 完整路径（推荐）

npm install -g stitch-pro-mcp
# Then configure with absolute path to the CLI:
# node C:/Users/YOUR_USER/AppData/Roaming/npm/node_modules/stitch-pro-mcp/dist/bin/cli.js

选项B：包裹 npx 随着 cmd /c

{
  "command": "cmd",
  "args": ["/c", "npx", "-y", "stitch-pro-mcp"]
}

Claude Code: MCP server not showing tools

1. MCP服务器配置在 ~/.claude.json, 不 ~/.claude/settings.json 或 ~/.claude/.mcp.json
2. 使用 claude mcp add 要配置的CLI命令--它会写入正确的文件
3. 添加后， 重新启动克劳德代码 让工具出现
4. 通过以下方式进行验证： claude mcp list --应该显示 stitch-pro: ✓ Connected

Server starts but tools don't respond

检查双启动：如果你看到 "Starting stitch-pro" 记录两次，您使用的是v0.1.0，它有一个错误，服务器启动了两次。更新到v0.1.2+：

npm install -g stitch-pro-mcp@latest

______________________________________________________________________

工具

智能（自动编排）

生成

设计系统

质量

框架转换

项目管理

列表

______________________________________________________________________

示例

一个提示，完整输出

sp_auto("Dark SaaS pricing page in React with shadcn")

  Auto-detects: react, shadcn, dark theme, SaaS
  Auto-chains:
    1. Create dark design system
    2. Enrich prompt with brand tokens
    3. Generate page via Stitch API
    4. WCAG 2.1 AA audit + auto-fix
    5. Responsive breakpoint injection
    6. Convert to Next.js .tsx with shadcn

  → Returns: files[], dependencies{}, a11y report, timings

行动前分析

sp_analyze(html)

  → sp_a11y (HIGH): missing lang, no 
  → sp_responsive (HIGH): fixed widths
  → sp_extract (MEDIUM): buttons + cards → shadcn
  → Suggested chain: [sp_a11y, sp_responsive, sp_extract, sp_to_react]

智能转换

sp_smart_convert(html, "vue", "radix")

  Auto-runs: a11y → responsive → extract → Vue 3 emit
  → Returns: .vue SFCs, WCAG compliant, responsive

手动工具

sp_to_react(html, { componentLibrary: "shadcn" })
sp_a11y(html, { autoFix: true })
sp_design_create({ name: "Acme", primaryColor: "#6366F1" })

______________________________________________________________________

建筑

User prompt
    │
    ▼
┌──────────────────────────────────────────┐
│            stitch-pro-mcp                │
│                                          │
│  ┌─ sp_auto (intent parser) ───────────┐ │
│  │  Detects: framework, library, theme │ │
│  │  device type, dark mode, industry   │ │
│  └─────────────────────────────────────┘ │
│                                          │
│  Pre-Generate                            │
│  └─ Design System Enrichment             │
│                                          │
│  Stitch API Call                         │
│  └─ project.generate() → raw HTML       │
│                                          │
│  Post-Generate                           │
│  ├─ Design System Enforcement (CSS vars) │
│  ├─ Accessibility Audit + Auto-Fix       │
│  └─ Responsive Breakpoint Injection      │
│                                          │
│  Convert (if framework !== html)         │
│  ├─ HTML → ComponentTree (AST-based)     │
│  ├─ Component Library Mapping            │
│  └─ Framework Emitter (React/Vue/Svelte) │
│                                          │
│  Output: production-ready components     │
└──────────────────────────────────────────┘

流水线是线性的，处理器是无状态的，Stitch API调用被注入-完全可测试，而不会影响API。

______________________________________________________________________

支持的平台

______________________________________________________________________

发展

git clone https://github.com/LuciferDono/stitch-pro-mcp.git
cd stitch-pro-mcp
npm install
npm run typecheck    # Type checking
npm run build        # Build to dist/
npm run dev          # Run in dev mode
npm test             # Run tests

技术栈

统计

• 18 MCP工具
• 7 流水线处理器
• 3 框架发射器（React、Vue、Svelte）
• 81 通过测试
• 104 KB 包装尺寸（压缩）
• 8 支持的平台

路线图

• \[x\] ~~ npm发布 npx stitch-pro-mcp~~
• \[x\] ~~带有GitHub操作的CI/CD~~
• \[x\] ~~ GitHub Pages文档网站~~
• \[ \] sp_batch --一次调用中的完整应用程序前端（布局+导航+页面+路线）
• \[\]代码管道截图（截图→ 史迪奇→ 框架输出）
• \[\]通过缝合粘贴桥导入Figma
• \[\]LLM动力设计系统生成（Claude API）
• \[\]用于远程部署的可流式HTTP传输

贡献

PR欢迎。首先打开一个问题以进行重大更改。

许可证

麻省理工学院