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 项目。
- 验证和优化：使用集成式浏览器根据原始设计对代码进行“氛围检查”。
学习内容
- 如何使用 Google Stitch 快速开发高保真界面设计原型。
- 如何在 Antigravity IDE 中配置 MCP 服务器。
- 如何使用自主代理将视觉设计元数据转换为模块化代码。
所需条件
- Chrome 网络浏览器
- 已安装 Antigravity IDE
- Google Stitch 账号
- Stitch API 密钥
- 本地已安装 Node.js (v18+)
准备工作
- 在 Google Cloud Console 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
- 确保您的 Cloud 项目已启用结算功能。了解如何检查项目是否已启用结算功能。
对于 Google Cloud 赠金：为帮助您将 Antigravity 与 Google Cloud 项目搭配使用，请使用此链接兑换免费 Google Cloud 赠金。您可以按照此处的说明激活赠金并创建新项目。
- 前往 stitch.withgoogle.com 并确保您可以登录。
- 确保您已安装 Antigravity IDE（可在 antigravity.google 中获取）。
2. 在 Google Stitch 中创建设计
代理需要遵循可视化的“事实来源”。在编写代码之前，我们必须先确定美学风格。
- 访问平台：前往 stitch.withgoogle.com。
- 选择项目类型：在主信息中心内，找到开始新设计切换开关。点击 Web，确保您的设计针对基于浏览器的布局进行了优化。
- 选择模型：点击提示框内的模型下拉菜单（当前显示 3.0 Flash）。请确保选择 Gemini 3，以便获得最先进的推理和布局生成功能。
- 描述您的愿景：在标记为“描述您的设计”的文本区域中，输入提示：
“为一家名为 LaunchPad 的太空科技初创公司设计一个现代化的 SaaS 着陆页。使用午夜蓝和霓虹紫调色板。包含一个带有“开始使用”按钮的主打内容部分、一个三列功能网格和一个玻璃拟态定价表。”5. 生成：点击箭头图标（位于模型选择器旁边）开始生成流程。6. 优化和命名：生成界面后，在顶部标题中为项目命名。将其命名为 LaunchPad。您可以使用聊天侧边栏来优化任何特定元素，然后再转到 IDE。
[!提示] 您还可以从
“试试这些提示”
部分，以便快速开始使用。
3. 配置 Antigravity MCP
如需允许 Antigravity Agent“读取”您的设计，您必须生成安全的 API 密钥并添加 Stitch MCP 服务器。
生成 Stitch API 密钥
- 在 Google Stitch 中，点击右上角的个人资料照片。
- 从下拉菜单中选择 Stitch 设置。
- 前往 API 密钥部分。
- 点击创建密钥按钮。
- 复制密钥：立即复制生成的密钥并妥善存储。您在下一步中会用到它。
在 Antigravity 中配置 Stitch MCP
- 打开 Antigravity IDE。
- 打开代理管理器
您可以随时按 CMD+E (Mac) 或 CTRL+E (Windows) 键，或者通过菜单栏右上角的“打开编辑器”和“打开代理管理器”按钮，在代理管理器和编辑器之间切换。。
- 点击 + 打开工作区。
如需在工作区内发起新对话，请从“开始对话”标签页中选择所需的工作区，或点击边栏中工作区名称旁边的加号按钮。
- 点击“打开新工作区”，将工作区命名为
LaunchPad-Project，然后选择一个本地目录。这样可确保代理拥有特定的根文件夹来搭建文件，而不会使其他项目杂乱无章。
配置 Stitch MCP
- 在新工作区中，返回到代理管理器（在 Mac 上按 CMD+E，在 Windows 上按 CTRL+E），然后选择 MCP 服务器。
通过编辑器代理窗格顶部的“...”下拉菜单打开 MCP 商店。
Antigravity 支持 Model Context Protocol (MCP)，该标准允许编辑器安全地连接到您的本地工具、数据库和外部服务。此集成可为 AI 提供实时上下文，而不仅仅是编辑器中打开的文件。
MCP 充当 Antigravity 与 Google Stitch 之间的桥梁。借助 MCP，Antigravity 可以根据需要直接从 Stitch 项目中提取设计 DNA，而无需手动导出设计令牌或将十六进制代码和布局元数据复制到编辑器中。
- 搜索 Stitch，然后点击安装。
- 系统提示时，将 Stitch API 密钥粘贴到配置字段中。
- 验证：在代理聊天中，输入：
List my Stitch projects.。如果返回LaunchPad，则表示您已准备就绪。
- 验证：在代理聊天中，输入：
List my Stitch projects.。如果代理返回LaunchPad，则表示网桥已成功配置。
4. 提取设计上下文
现在，代理需要提取设计元数据，以确保代码准确无误。
- 在 Antigravity 对话中，输入：“Use the Stitch MCP to fetch the ‘LaunchPad' project. 提取调色板和排版，然后在我的根目录中生成
DESIGN.md文件。” - 检查：打开新创建的
DESIGN.md，查看智能体提取的十六进制代码和布局规则。
5. 实现（构建）
使用代理将设计转化为可正常运行的 React 应用。
- 提供“构建”提示：
“我现在想构建这个完整的网站。使用 React 和 Tailwind CSS。确保组件是模块化的。完成后，运行开发服务器并在集成浏览器中向我展示。”2. 观察智能体：它将在终端中搭建项目框架，在编辑器中编写组件，并在集成浏览器中打开预览。
6. 查看并优化
验证输出，并使用代理来修正任何视觉差异。
- 将集成式浏览器输出与原始 Stitch 设计进行比较。
- 如果任何元素（例如按钮内边距或字体粗细）不匹配，请提示代理：“‘开始使用’按钮内边距略有偏差。请参考 Stitch 设计并更新 Tailwind 类。”
- 代理将重新提取设计上下文并立即应用修复。
7. 总结与后续步骤
恭喜！您已使用 Antigravity 和 Stitch MCP 成功弥合了高保真设计与功能性代码库之间的差距。
您所做工作的总结：
- 使用 Gemini 3 在 Stitch 中设计了界面。
- 生成了安全的 API 密钥并配置了 Antigravity MCP。
- 使用自主代理构建并验证了 React + Tailwind 网站。