Claude Skill Stitch Design

stitch-design

A Claude Code custom skill for automating high-fidelity UI prototyping with Google Stitch via MCP.

Claude Code 自定义技能，通过 MCP 自动化调用 Google Stitch 生成高保真 UI 原型。

---

What This Skill Does / 功能概述

When loaded by Claude Code, it turns Claude into a Stitch prompt engineering expert that can:

加载后，Claude 将成为 Stitch 提示词工程专家，具备以下能力：

• Generate high-fidelity UI screens from natural language descriptions

从自然语言描述生成高保真 UI 界面

• Iteratively refine designs using battle-tested prompt patterns

使用经过验证的 prompt 模式迭代优化设计

• Maintain visual consistency across multi-page apps

跨多页面保持视觉一致性

• Control images, fonts, borders, and themes with precision

精确控制图像、字体、边框和主题

• Auto-enhance vague ideas into structured Stitch prompts

将模糊想法自动增强为结构化 Stitch 提示词

---

Knowledge Included / 知识来源

This skill distills knowledge from:

本技能整合了以下来源的知识：

• Official Stitch team guidance (Vincent Nallatamby, Rishabh Chauhan)

Stitch 官方团队指导

• Community battle-tested patterns from the Google AI Developers Forum

Google AI 开发者论坛的社区实战经验

• Production workflow for automated generate-evaluate-iterate loops

自动化"生成-评估-迭代"生产级工作流

Prompt Engineering Rules / 提示词工程规则

| Rule | Detail | |------|--------| | Broad first, detail later | Start with a high-level concept, then drill into per-screen details | | Global style first | Define colors / fonts / vibe BEFORE specific elements | | Single change per prompt | Each prompt modifies ONE dimension only | | Visual precision | Use Hex codes, material adjectives | | Plain text preferred | Official recommendation: natural language, NOT XML/JSON | | Adjectives set the vibe | Words like vibrant, minimalist influence everything | | Reference by name | Always specify page name + component name + position |

| 规则 | 说明 | |------|------| | 先宽后细 | 先用高层次概念探索方向，再逐屏深入细节 | | 全局样式先行 | 在具体元素之前先定义颜色、字体、氛围 | | 每次只改一个维度 | 每个 prompt 只修改一个方面 | | 视觉精确 | 使用 Hex 色值、材质形容词 | | 纯文本优先 | 官方建议使用自然语言，不要用 XML/JSON | | 形容词定基调 | vibrant、minimalist 等词直接影响全局风格 | | 按名称引用 | 始终指明页面名 + 组件名 + 位置 |

Topics Covered / 涵盖主题

• Structured prompt template with examples / 结构化提示词模板与示例
• 5-step workflow: Analyze -> Generate -> Evaluate -> Iterate -> Deliver / 五步工作流
• Multi-page consistency & consistency patching / 多页面一致性与修补
• Design variant exploration / 设计变体探索
• Image control techniques (batch, targeted, theme-coordinated) / 图像控制技巧
• Font & border fine-grained control / 字体与边框精细控制
• Multi-language UI patching / 多语言 UI 翻译修补
• Prompt Enhancer pattern (AI-assisted prompt generation) / Prompt 增强器模式
• Community tips & known failure modes with workarounds / 社区技巧与已知问题

---

Installation / 安装

Option 1: Clone / 方式一：克隆

mkdir -p ~/.claude/skills
git clone https://github.com/blockbloomer/claude-skill-stitch-design.git ~/.claude/skills/stitch-design

Option 2: Manual Copy / 方式二：手动复制

Download SKILL.md and the examples/ directory, then place them in:

下载 SKILL.md 和 examples/ 目录，放到以下路径：

~/.claude/skills/stitch-design/
  SKILL.md
  examples/
    prompt-examples.md

---

Prerequisites / 前置条件

This skill requires a Stitch MCP Server connection. Below are the setup steps.

本技能需要 Stitch MCP Server 连接，以下是配置步骤。

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

1. Visit stitch.withgoogle.com and sign in with your Google account

访问 stitch.withgoogle.com 并用 Google 账号登录

1. Click your avatar -> Stitch Settings -> API Keys

点击头像 -> Stitch Settings -> API Keys

1. Create a new key and copy it

创建新 Key 并复制

Step 2: Configure Claude Code MCP / 配置 Claude Code MCP

Add stitch-mcp (maintained by Google DevRel) to your MCP configuration:

将 stitch-mcp（Google DevRel 官方维护）添加到 MCP 配置：

Option A: Via CLI / 命令行方式：

claude mcp add stitch -e STITCH_API_KEY=your_api_key_here -- npx @_davideast/stitch-mcp proxy

Option B: Via config file / 配置文件方式：

Edit ~/.claude/settings.json (or project-level .mcp.json):

编辑 ~/.claude/settings.json（或项目级 .mcp.json）：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_API_KEY": ""
      }
    }
  }
}

> Note / 注意: Never commit your API key to version control. Use environment variables or a .env file. > 不要把 API Key 提交到版本控制。请使用环境变量或 .env 文件。

Step 3: Verify / 验证

Restart Claude Code and confirm these MCP tools are available:

重启 Claude Code，确认以下 MCP 工具可用：

• generate_screen_from_text
• get_screen
• edit_screens
• generate_variants
• list_screens

---

File Structure / 文件结构

stitch-design/
  SKILL.md                    # Core skill instructions / 核心技能指令 (380 lines)
  examples/
    prompt-examples.md        # 6 real-world prompt templates / 6 个实战提示词模板
  README.md                   # This file / 本文件
  LICENSE                     # MIT License

---

Usage / 使用方法

Once installed, Claude Code will automatically detect the skill. Invoke it by asking Claude to generate UI designs:

安装后 Claude Code 会自动检测该技能。直接让 Claude 生成 UI 设计即可：

> Generate a login page for a fitness app using Stitch
> Create a dark mode dashboard with glassmorphism cards
> Design 3 variants of a recipe detail page

Claude will follow the skill's workflow: analyze requirements, build a structured prompt, generate via Stitch MCP, evaluate, and iterate up to 3 rounds.

Claude 会按技能工作流执行：分析需求 -> 构造结构化 prompt -> 调用 Stitch MCP 生成 -> 评估 -> 最多迭代 3 轮。

---

Contributing / 贡献

Issues and PRs welcome. Key areas for contribution:

欢迎提交 Issue 和 PR，重点贡献方向：

• Additional prompt examples for specific domains / 特定领域的 prompt 示例
• New community-discovered techniques / 社区新发现的技巧
• Failure mode documentation and workarounds / 失败模式与解决方案

---

License / 许可证

MIT

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: blockbloomer
• Source: blockbloomer/claude-skill-stitch-design
• License: MIT

Install and usage instructions live in the source repository linked above.