Google Stitch

Google Stitch 是 Google Labs 的 AI 原生设计画布，由 Gemini 驱动。它从文本描述生成高保真 UI 设计，并附带为 AI 编程代理设计的结构化输出。

核心功能

• 文字转 UI: 描述你想要的内容，Stitch 生成完整屏幕或在单次提示中生成最多 5 个连接的屏幕
• 多屏幕生成: 创建具有一致设计系统的连接屏幕
• 无限画布: 并排处理多个屏幕
• 语音输入: 用语言描述设计
• 交互原型: 直接在工具中测试流程
• 设计系统导入: 导入现有品牌指南

两种模型模式

• Standard 模式: 更快的生成，适合快速迭代
• Experimental 模式: 较慢但质量明显更高

免费额度

• 每月 350 次 Standard 生成
• 每月 200 次 Experimental 生成

结构化输出

Stitch 在视觉设计之外生成机器可读的输出：

• 带嵌入式 CSS 的 HTML
• 结构化数据格式的 design tokens
• 捕获整个设计系统的 DESIGN.md 文件（颜色、排版、间距、组件模式）

MCP 集成

Stitch MCP 服务器（@_davideast/stitch-mcp）将 AI 编程代理直接连接到 Stitch：

• 列出项目和可用屏幕
• 获取单个屏幕的设计 HTML
• 下载屏幕截图（base64 图像）
• 从多个屏幕组装完整站点（build_site）

与 Claude Code 配合使用

# 安装 MCP 服务器
npm install -g @_davideast/stitch-mcp

Claude Code 可以直接拉取设计数据并将其转换为代码，无需手动导出。

DESIGN.md 导出

Stitch 导出 DESIGN.md 文件，为编程代理提供设计系统的持久化、结构化理解。此文件可直接放入 Claude Code、Cursor 或任何读取上下文文件的 AI 编程代理。

工作流程

1. 设计: 在 Stitch 中描述你的 UI（文字或语音）
2. 迭代: 在无限画布上用多个屏幕进行优化
3. 导出: 获取 DESIGN.md + HTML/CSS 输出
4. 编码: 通过 MCP 或手动复制将输出提供给 AI 编程代理
5. 发布: 代理生成与设计匹配的生产代码

链接

• Stitch
• DESIGN.md 规范
• MCP 服务器