Google Stitch + MCP：AI 时代的“设计即代码“新范式

从模糊需求到可运行应用只需 3 小时——这不是科幻而是正在发生的 AI 编程革命。引言当设计遇见代码在 AI 编程工具百花齐放的今天开发者们面临着一个尴尬的现实工具越多上下文越碎。想象一下这个场景你在 Cursor 里写代码需要设计一个登录页面。于是你打开 Figma 画原型截图发回给 AI再解释一遍需求……等你回到代码编辑器时之前的上下文已经丢了大半。这就是 Google Stitch 想要解决的问题。作为 Google Labs 推出的实验性 AI 设计工具Stitch 不仅能根据文本描述生成高保真 UI更重要的是——它通过 MCPModel Context Protocol协议让设计成为代码的一部分。什么是 StitchStitch 是 Google 基于 Gemini 2.5 Pro 打造的 AI 界面设计工具。它的核心能力很简单你说它画。输入一句做一个深色模式的 SaaS 仪表盘顶部放 KPI 卡片下面放趋势图表Stitch 就能生成完整的 HTML/CSS 界面包含响应式布局、配色方案和交互细节。但这只是表面。真正让 Stitch 与众不同的是它的开放生态——通过 MCP 协议Stitch 可以与 Claude Code、Cursor、Trae、Gemini CLI 等 AI 编程工具深度集成。MCPAI 工具之间的通用语言MCPModel 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.comStitch MCP 设置指南https://stitch.withgoogle.com/docs/mcp/setupStitch Skills GitHubhttps://github.com/google-labs-code/stitch-skillsStitch MCP CLIhttps://github.com/davideast/stitch-mcp本文基于 Google Stitch 官方文档和社区实践整理部分功能可能随版本更新而变化。