1. 简介
在此 Codelab 中，您将通过将 AI 驱动的设计与智能体优先的开发环境相结合，构建一个可投入生产环境的网站。您将使用 Google Stitch 生成高保真界面，然后通过 Model Context Protocol (MCP) 将其连接到 Antigravity IDE。最后，您将使用自主智能体提取“设计 DNA”，并实现像素级完美的 React 应用。
实践内容
- 在 Stitch 中生成界面： 使用自然语言在 Google Stitch 中创建完整规模的网页设计。
- 通过 MCP 连接： 使用 Model Context Protocol 将 Antigravity 连接到您的 Stitch 项目。
- 自主实现： 使用 Antigravity 的“智能体标签页”提取设计令牌，并搭建 React/Tailwind 项目。
- 验证和优化： 使用集成式浏览器根据原始设计对代码进行“Vibe Check”。
学习内容
- 如何使用 Google Stitch 快速制作高保真界面设计的原型。
- 如何在 Antigravity IDE 中配置 MCP 服务器。
- 如何使用自主智能体将视觉设计元数据转换为模块化代码。
所需条件
- Chrome 网络浏览器
- 已安装 Antigravity IDE
- Google Stitch 账号
- Stitch API 密钥
- 本地安装的 Node.js (v18+)
准备工作
- 在 Google Cloud 控制台 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
- 确保您的云项目已启用结算功能。了解如何 检查项目是否已启用结算功能 。
- 前往 stitch.withgoogle.com，确保您可以登录。
- 确保您已安装 Antigravity IDE （可在 antigravity.google 上获取）。
2. 在 Google Stitch 中创建设计
智能体需要遵循视觉“事实来源”。在编写代码之前，我们必须定义美观性。
- 访问平台： 前往 stitch.withgoogle.com。
- 选择项目类型： 在主信息中心内，找到开始新设计 开关。点击 Web ，确保您的设计针对基于浏览器的布局进行了优化。
- 选择您的模型： 点击提示框内的模型下拉菜单（目前显示 3.0 Flash ）。确保选择 Gemini 3 以获得最先进的推理和布局生成功能。
- 描述您的愿景： 在标有 “Describe your design” 的文本区域中，输入您的提示：
“为一家名为 LaunchPad 的太空科技初创公司设计一个现代 SaaS 着陆页。使用午夜蓝和霓虹紫调色板。包括一个带有‘Get
Started’按钮的 Hero 部分、一个 3 列功能网格和一个玻璃拟态定价表。”5. 生成： 点击箭头图标
（模型选择器旁边）开始生成过程。6. 优化和命名： 生成界面后，在顶部标题中为您的项目命名。将其命名为
LaunchPad。您可以使用聊天边栏在转到 IDE 之前优化任何特定元素。
[!TIP] 您还可以从
"Try these prompts"
部分中进行选择，以便快速入门。
3. 配置 Antigravity MCP
如需允许 Antigravity 智能体“读取”您的设计，您必须生成安全的 API 密钥并添加 Stitch MCP 服务器。
生成 Stitch API 密钥
- 在 Google Stitch 中，点击右上角的个人资料照片 。
- 从下拉菜单中选择 Stitch settings 。
- 前往 API key 部分。
- 点击 Create key 按钮。
- 复制密钥： 立即复制生成的密钥并安全地存储。您将在下一步中需要它。
在 Antigravity 中配置 Stitch MCP
- 打开 Antigravity IDE 。
- 打开智能体管理器
您可以随时按 CMD+E (Mac) 或 CTRL+E (Windows) 在智能体管理器和编辑器之间切换，也可以通过菜单栏右上角的“Open Editor”和“Open Agent Manager”按钮进行切换。。
- 点击 + Open Workspace 。
如需在工作区内开始新的对话，请从“Start Conversation”标签页中选择所需的工作区，或点击边栏中工作区名称旁边的加号按钮。
- 点击“Open New Workspace”，将工作区命名为
LaunchPad-Project，然后选择本地目录。这可确保智能体拥有特定的根文件夹来搭建文件，而不会使其他项目杂乱无章。
配置 Stitch MCP
- 在新的工作区中，返回智能体管理器 （Mac 上按 CMD+E，Windows 上按 CTRL+E），然后选择 MCP Servers 。
通过编辑器智能体窗格顶部的“...”下拉菜单打开 MCP 商店。
Antigravity 支持 Model Context Protocol (MCP)，该标准允许编辑器安全地连接到您的本地工具、数据库和外部服务。此集成可为 AI 提供实时上下文，而不仅仅是编辑器中打开的文件。
MCP 充当 Antigravity 和 Google Stitch 之间的桥梁。MCP 允许 Antigravity 在需要时直接从您的 Stitch 项目提取设计 DNA，而不是手动导出设计令牌或将十六进制代码和布局元数据复制到编辑器中。
- 搜索 "Stitch" ，然后点击 Install 。
- 出现提示时，将您的 Stitch API 密钥 粘贴到配置字段中。
- 验证： 在智能体聊天中，输入：
List my Stitch projects.如果返回LaunchPad，则表示您已准备就绪。
- 验证： 在智能体聊天中，输入：
List my Stitch projects.如果智能体返回LaunchPad，则表示桥梁已成功配置。
4. 提取设计上下文
智能体现在需要提取设计元数据，以确保代码准确性。
- 在 Antigravity 聊天中，输入：“Use the Stitch MCP to fetch the ‘LaunchPad' project. Extract the color palette and typography, then generate a
DESIGN.mdfile in my root directory.” - 查看： 打开新创建的
DESIGN.md，查看智能体提取的十六进制代码和布局规则。
5. 实现（构建）
使用智能体将设计转换为可正常运行的 React 应用。
- 给出“Build”提示：
“我现在想构建这个完整的网站。使用 React 和 Tailwind CSS。确保组件是模块化的。完成后，运行开发服务器并在集成式浏览器中向我展示。”2. 观察智能体： 它将在终端中搭建项目，在编辑器中编写组件，并在集成式浏览器中打开预览。
6. 查看和优化
验证输出，并使用智能体修复任何视觉差异。
- 将集成式浏览器输出与原始 Stitch 设计进行比较。
- 如果任何元素（例如按钮内边距或字体粗细）不匹配，请提示智能体：“The ‘Get Started' button padding is slightly off. Refer back to the Stitch design and update the Tailwind classes.”
- 智能体将重新提取设计上下文并立即应用修复。
7. 总结与后续步骤
恭喜！您已使用 Antigravity 和 Stitch MCP 成功弥合了高保真设计与功能性代码库之间的差距。
您所做工作的总结：
- 使用 Gemini 3 在 Stitch 中设计了界面。
- 生成了安全的 API 密钥 并配置了 Antigravity MCP 。
- 使用自主智能体构建并验证了 React + Tailwind 网站。