mcpskills.net
← 返回技能
Design

Google Stitch

Google Labs 的 AI 设计工具，从文本提示生成 UI 设计。输出 HTML、CSS、design tokens 和 DESIGN.md 文件，实现无缝的设计到代码工作流。

作者：Google来源 →

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. 发布: 代理生成与设计匹配的生产代码

链接