claude-skill-stitch-design

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

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

---

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 提示词

---

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

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

| 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 |

| 规则 | 说明 | |------|------| | 先宽后细 | 先用高层次概念探索方向，再逐屏深入细节 |