从模糊需求到可运行应用，只需 3 小时——这不是科幻，而是正在发生的 AI 编程革命。

引言：当设计遇见代码

在 AI 编程工具百花齐放的今天，开发者们面临着一个尴尬的现实：工具越多，上下文越碎。

想象一下这个场景：你在 Cursor 里写代码，需要设计一个登录页面。于是你打开 Figma 画原型，截图发回给 AI，再解释一遍需求……等你回到代码编辑器时，之前的上下文已经丢了大半。

这就是 Google Stitch 想要解决的问题。

作为 Google Labs 推出的实验性 AI 设计工具，Stitch 不仅能根据文本描述生成高保真 UI，更重要的是——它通过 MCP（Model Context Protocol）协议，让设计成为代码的一部分。

什么是 Stitch？

Stitch 是 Google 基于 Gemini 2.5 Pro 打造的 AI 界面设计工具。它的核心能力很简单：

你说，它画。

输入一句"做一个深色模式的 SaaS 仪表盘，顶部放 KPI 卡片，下面放趋势图表"，Stitch 就能生成完整的 HTML/CSS 界面，包含响应式布局、配色方案和交互细节。

但这只是表面。真正让 Stitch 与众不同的是它的开放生态——通过 MCP 协议，Stitch 可以与 Claude Code、Cursor、Trae、Gemini CLI 等 AI 编程工具深度集成。

MCP：AI 工具之间的"通用语言"

MCP（Model Context Protocol）是 Anthropic 提出的一种开放标准，旨在让 AI 模型能够安全地访问外部工具和数据源。

简单来说，MCP 就像是 AI 工具的 USB-C 接口：

传统方式	MCP 方式
每个工具各自为战	工具之间可以"对话"
上下文在切换中丢失	上下文全程保持连贯
需要手动复制粘贴	AI 自动调用工具完成任务

Stitch MCP 服务器将 Stitch 的 API 封装成标准化的工具集，让任何支持 MCP 的 AI 编程工具都能直接调用 Stitch 的能力。

实战：3 小时从 0 到 1 开发小程序

让我们看看一位开发者是如何利用 Stitch + MCP + Skills 实现效率飞跃的。

准备工作

首先，安装 Stitch MCP：

# 自动安装（推荐）
npx @_davideast/stitch-mcp init

# 或者在 Claude Code 中添加
claude mcp add -e GOOGLE_CLOUD_PROJECT=你的项目ID -s user stitch -- npx -y @_davideast/stitch-mcp proxy

安装 Stitch Skills（提示词优化工具）：

# 安装提示词增强技能
npx skills add google-labs-code/stitch-skills --skill enhance-prompt --global

# 安装 React 组件生成技能
npx skills add google-labs-code/stitch-skills --skill react:components --global

四步工作流

第一步：优化提示词

传统的做法是把模糊的需求直接丢给 AI。但有了 enhance-prompt 技能，你可以把"做一个配料表翻译官小程序"转化为结构化的设计规范：

优化前：
"做一个配料表翻译官小程序，全中文界面"

优化后：
- 配色：使用清新的绿色系（#4CAF50 为主色）
- 字体：中文使用思源黑体，标题 24px，正文 16px
- 布局：顶部搜索栏，中间结果展示区，底部操作按钮
- 交互：扫描按钮带脉冲动画，结果卡片支持展开详情

第二步：生成 UI 设计

在 Trae（或 Cursor、Claude Code）中，直接让 AI 调用 Stitch MCP：

"请使用 Stitch 生成一个配料表翻译小程序的首页，
要求：
1. 顶部有相机扫描入口
2. 中间展示最近翻译记录
3. 底部导航栏包含首页、历史、我的
4. 整体采用绿色健康主题"

AI 会自动调用 generate_screen_from_text 工具，约 3 分钟后，你就能在 Stitch 控制台看到生成的设计。

第三步：获取设计代码

"请获取刚才生成的屏幕代码，保存到本地"

AI 调用 get_screen_code 工具，将 HTML/CSS 代码下载到你的项目目录。

第四步：转换为生产代码

这是最关键的一步。使用 react:components 技能，让 AI 将 Stitch 生成的 HTML 原型转换为 React 组件：

"请使用 stitch:react:components 技能，
将 /prototype/ingredient-translator.html 转换为 Vite + React 组件，
保持原有的设计风格和配色方案"

经过几轮细节调整，一个完整的小程序页面就诞生了。

Stitch Skills：提示词工程的标准化

Stitch Skills 是一套遵循 Agent Skills 开放标准的技能库，目前包含 7 个核心技能：

技能名称	功能描述
enhance-prompt	将模糊需求转化为结构化 Stitch 提示词
stitch-design	统一处理设计生成和编辑
stitch-loop	单提示生成多页面网站
design-md	从 Stitch 项目生成 DESIGN.md 设计文档
react:components	将 Stitch 屏幕转换为 React 组件
remotion	从 Stitch 项目生成演示视频
shadcn-ui	集成 shadcn/ui 组件库

这些技能的本质是提示词模板 + 质量检查脚本。它们让 AI 代理能够：

1. 少样本学习：通过 examples/ 目录中的参考案例快速理解任务
2. 自动化验证：通过 scripts/ 目录中的脚本检查输出质量
3. 知识复用：通过 resources/ 目录中的检查清单保持输出一致性

技术架构解析

MCP 服务器提供的工具集

Stitch MCP 服务器暴露了以下核心工具：

// 生成新屏幕
generate_screen_from_text(prompt: string): Screen

// 获取屏幕代码
get_screen_code(screenId: string): { html: string, css: string }

// 获取屏幕截图
get_screen_image(screenId: string): base64Image

// 提取设计上下文（颜色、字体、布局）
extract_design_context(screenId: string): DesignTokens

// 构建多页面站点
build_site(routes: Route[]): Site

// 列出项目和屏幕
list_projects(): Project[]
list_screens(projectId: string): Screen[]

配置示例

Claude Desktop 配置：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@_davideast/stitch-mcp", "proxy"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-project-id"
      }
    }
  }
}

Cursor / VS Code 配置：

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

为什么这很重要？

1. 上下文连贯性

传统工作流中，设计、开发、调试是三个割裂的阶段。Stitch + MCP 让 AI 全程保持上下文，从需求到代码一气呵成。

2. 角色转变

开发者从"写代码的人"变成"设计工作流的人"。你的核心能力不再是记住 CSS 属性，而是引导 AI 完成复杂任务。

3. 工具协同

这体现了"AI Native"工具的本质特征：不是让人去适应工具，而是让工具主动理解人的意图。

局限性与注意事项

1. Google Cloud 依赖：需要启用结算的 GCP 项目
2. OAuth 认证：不支持 API Key，必须使用 gcloud 认证
3. 预览阶段：目前免费，但生产环境建议固定版本
4. 移动端优先：移动端 UI 生成质量通常优于桌面端

结语：未来已来

Stitch + MCP + Skills 的组合，标志着 AI 编程进入了一个新阶段：工具之间的壁垒正在被打破。

我们不再需要：

• ❌ 在 Figma 和代码编辑器之间来回切换
• ❌ 重复解释同样的需求
• ❌ 手动将设计稿转换为代码

取而代之的是：

• ✅ 用自然语言描述需求
• ✅ AI 自动完成设计和编码
• ✅ 全程上下文保持连贯

这不仅仅是效率的提升，更是工作范式的转变。当 AI 能够无缝协作时，人类的创造力将被释放到更高层次的架构设计和产品创新上。

---

参考资源

• Stitch 官网：https://stitch.withgoogle.com
• Stitch MCP 设置指南：https://stitch.withgoogle.com/docs/mcp/setup
• Stitch Skills GitHub：https://github.com/google-labs-code/stitch-skills
• Stitch MCP CLI：https://github.com/davideast/stitch-mcp

---

本文基于 Google Stitch 官方文档和社区实践整理，部分功能可能随版本更新而变化。