Google Stitch + MCP：AI 时代的“设计即代码“新范式
从模糊需求到可运行应用，只需 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 代理能够：
- 少样本学习：通过 examples/ 目录中的参考案例快速理解任务
- 自动化验证：通过 scripts/ 目录中的脚本检查输出质量
- 知识复用：通过 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"工具的本质特征：不是让人去适应工具，而是让工具主动理解人的意图。
局限性与注意事项
- Google Cloud 依赖：需要启用结算的 GCP 项目
- OAuth 认证：不支持 API Key，必须使用 gcloud 认证
- 预览阶段：目前免费，但生产环境建议固定版本
- 移动端优先：移动端 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 官方文档和社区实践整理，部分功能可能随版本更新而变化。