stitch-ui

stitch-ui

Google Stitch UI design automation for OpenClaw and AI agents.

通过 Google Stitch Remote MCP API 自动生成 UI 设计，导出生产级 HTML+Tailwind 代码。

What is this? / 这是什么？

An AgentSkill that lets AI agents generate production-ready UI code from natural language prompts using Google Stitch's official Remote MCP API.

一个 AgentSkill 插件，通过 Google Stitch 官方 Remote MCP API 用自然语言生成生产级 UI 代码。

Input:

"A pricing page with 3 tier cards, monthly/yearly toggle, dark header, primary color #0056D2"

Output:

• Production-ready HTML + Tailwind CSS code
• Design system tokens (colors, fonts, components)
• Design screenshots and variants

Two Modes / 两种模式

Quick Start / 快速开始

Install / 安装

# OpenClaw users / OpenClaw 用户
openclaw skills install stitch-ui

# Manual / 手动安装
git clone https://github.com/cloudlinkhk/stitch-ui-skill.git
cp -r stitch-ui-skill ~/.openclaw/workspace/skills/stitch-ui

Mode 1: MCP API (Recommended) / MCP 模式（推荐）

Step 1 — Get API Key / 获取 API Key:

Go to Stitch Settings → API Keys → Create API Key.

前往 Stitch 设置页面 → API Keys → 创建 API Key。

Step 2 — Configure / 配置:

# Claude Code
claude mcp add stitch \
  --transport http https://stitch.googleapis.com/mcp \
  --header "X-Goog-Api-Key: YOUR_KEY" \
  -s user

// Cursor (.cursor/mcp.json)
{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": { "X-Goog-Api-Key": "YOUR_KEY" }
    }
  }
}

For VSCode, Antigravity, Gemini CLI, and OAuth setup — see references/mcp-setup.md.

Step 3 — Verify / 验证:

Ask your AI agent: "List my Stitch projects" — it should return your projects.

Use / 使用:

Once configured, your AI agent has direct access to all Stitch MCP tools. Just describe what you want:

• "Create a new project called My App"
• "Generate a pricing page with 3 tier cards"
• "Edit the screen to use dark mode"
• "Create a design system with brand colors #0056D2 and Inter font"

Mode 2: Playwright (Fallback) / Playwright 模式（备选）

Prerequisites / 前置条件:

npm install -g playwright-core

Start Chrome / 启动 Chrome：

# OpenClaw
openclaw browser start

# Or manually / 或手动
open -a "Google Chrome" --args --remote-debugging-port=18800

Then log into Google at https://stitch.withgoogle.com.

Generate / 生成：

node scripts/stitch-generate.js \
  --prompt "A dashboard for IoT device management with sidebar nav and stats cards" \
  --type web \
  --output ./my-dashboard

Output / 输出：

my-dashboard/
├── code.html       ← Open in browser / 浏览器直接打开
├── screen.png      ← Design preview / 设计预览
├── DESIGN.md       ← Design system / 设计系统文档
└── stitch.zip      ← Original archive / 原始压缩包

See references/playwright-mode.md for details.

MCP Tools (12) / MCP 工具列表

Project Management / 项目管理

Screen Management / 页面管理

AI Generation / AI 生成

Design Systems / 设计系统

Models / 可用模型

Device Types / 设备类型

MOBILE · DESKTOP · TABLET · AGNOSTIC

Variant Options / 变体选项

generate_variants supports variantOptions:

• count: Number of variants (default: 4)
• creativeRange: REFINE (subtle) | EXPLORE (moderate) | REIMAGINE (dramatic)
• aspects: Specific aspects to vary

Environment Variables / 环境变量

Prompt Tips / Prompt 技巧

Good: "A pricing page with 3 tier cards (Basic $9/mo, Pro $29/mo, Enterprise custom),
       monthly/yearly toggle, dark gradient header, CTA buttons, FAQ section below.
       Primary #0056D2, Inter font, minimal style like Stripe."

Bad:  "a pricing page"

• Be specific / 描述具体: Include layout, colors, content, number of elements
• Reference real products / 参考真实产品: "Like Notion's sidebar" or "Stripe's pricing layout"
• Specify brand / 指定品牌: Colors, fonts, dark/light theme
• Include content / 包含内容: Real text, prices, feature names — not lorem ipsum

Project Structure / 项目结构

stitch-ui/
├── SKILL.md                    ← Agent entry point / AI 代理入口
├── README.md                   ← This file / 本文件
├── LICENSE                     ← MIT
├── package.json
├── references/
│   ├── mcp-setup.md            ← MCP setup guide (API Key + OAuth) / MCP 配置指南
│   └── playwright-mode.md      ← Playwright guide / Playwright 使用指南
└── scripts/
    └── stitch-generate.js      ← Browser automation script / 浏览器自动化脚本

Requirements / 系统要求

MCP mode (recommended):

• API Key from Stitch Settings, OR Google Cloud project with gcloud CLI
• MCP-compatible client (Claude Code, Cursor, VSCode, Gemini CLI, Antigravity)

Playwright mode (fallback):

• Node.js >= 18
• Chrome browser
• playwright-core npm package
• Google account with Stitch access

License / 许可证

MIT © CLOUD(HK)LIMITED

Links / 相关链接

• Google Stitch
• Stitch MCP Docs
• OpenClaw
• AgentSkills Docs
• ClawHub Skills Marketplace