Antigravity 中的规范驱动开发入门

1. 本实验的目标

在本实操实验中，您将学习如何使用 Google Antigravity 创建应用，并将其部署到 Google Cloud 中。本实验还将向您介绍规范驱动开发的概念。

学习内容

  • 了解 Google Antigravity 的基础知识。
  • 了解规范驱动开发的基础知识
  • 了解如何在 Cloud Run 中轻松部署应用。

ba43a75a2c4134f1.png

图 1：Antigravity 是 Google 开发的以智能体为主的开发工具。

2. 环境设置

  1. 安装 Antigravity：
                       👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).

👉在您的环境中安装 Antigravity。

👉前往 Antigravity 的安装文件夹，然后双击以打开安装程序。

👉按照安装程序说明在您的环境中安装 Antigravity。

  1. 安装 Python

👉前往 https://www.python.org/downloads/，为您的系统安装 Python。

  1. 安装 gcloud

👉gcloud 是一款命令行工具，可用于在 Google Cloud 上执行各种操作。按照此处的说明在您的环境中安装 gcloud。

👉安装完成后，打开系统终端并在其中输入 gcloud，测试安装情况。8265f18dcf1af94c.png

图 2：安装 gcloud 后，您可以在终端中输入 gcloud 来测试安装

3. 项目设置

  • 如果您还没有可用的项目，则需要在 GCP 控制台中创建一个新项目。在项目选择器（Google Cloud 控制台的左上角）中选择项目 6fce70b12b5fc94.png

图 2：点击 Google Cloud 徽标旁边的方框即可选择项目。确保您的项目处于选中状态。

  • 在本实验中，我们将使用 Cloud Shell 编辑器来执行任务。打开 Cloud Shell 并使用 Cloud Shell 设置项目。
  • 点击此链接可直接前往 Cloud Shell 编辑器
  • 如果终端尚未打开，请从菜单中依次点击终端 > 新建终端，以打开终端。您可以在此终端中运行本教程中的所有命令。
  • 您可以在 Cloud Shell 终端中使用以下命令检查项目是否已通过身份验证。
gcloud auth list
  • 在 Cloud Shell 中运行以下命令，以确认您的项目
gcloud config list project
  • 复制项目 ID，然后使用以下命令进行设置
gcloud config set project <YOUR_PROJECT_ID>
  • 如果您不记得自己的项目 ID，可以使用以下命令列出所有项目 ID：
gcloud projects list

4. 启用 API

我们需要启用一些 API 服务才能运行本实验。在 Cloud Shell 中运行以下命令。

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

API 简介

  • 借助 Vertex AI API (aiplatform.googleapis.com)，您可以访问 Vertex AI 平台，从而让您的应用能够与 Gemini 模型交互，以进行文本生成、聊天会话和函数调用。
  • Cloud Resource Manager API (cloudresourcemanager.googleapis.com) 可让您以编程方式管理 Google Cloud 项目的元数据，例如项目 ID 和名称，其他工具和 SDK 通常需要这些元数据来验证项目身份和权限。

5. 确认您的积分是否已应用

在“项目设置”阶段，您申请了免费赠金，以便在 Google Cloud 中使用服务。当您使用赠金时，系统会创建一个名为“Google Cloud Platform 试用结算账号”的新免费结算账号。如需确保已应用抵用金，请在 Cloud Shell 编辑器中按以下步骤操作

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

如果成功，您应该会看到如下结果：如果您看到“已成功关联项目”，则表示您的结算账号已正确设置。执行上述步骤后，您可以检查自己的账号是否已关联，如果未关联，系统会为您关联。如果您尚未选择项目，系统会提示您选择项目，您也可以按照项目设置中的步骤提前选择项目。e0268411fd0691a2.png

图 3：结算账号关联确认

6. Google Antigravity 简介

Google Antigravity 是 Google DeepMind 开发的一款 AI 优先的软件开发工具。Google Antigravity 充分利用长期积累的软件开发专业知识和先进的 AI 技术，为开发者提供顺畅无缝的 AI 驱动型开发体验。

以下是 Google Antigravity 的一些主要功能。

下图展示了 Google Antigravity 的基本要素。

  1. 👉打开浏览器，开始探索浏览器的各个部分。

97fa1980f95fdafa.png

图 4：Google Antigravity 的基本要素，详情见表 1

表 1：Google Antigravity 中基本组件的详细信息

Component Index

Component Name

Function

1

Agent Manager

Provide access to your agent manager where you can manage all your agents

2

Toggle Agent Pane

Toggles and untoggles your agent pane

3

New Session

Starts a new Agent Conversation while keeping old ones separately.

4

Past Conversations

Retrieve previous conversations

5

Agent Pane

The agent pane where you can have conversation with the AI agent

6

Explorer

File explorer

  1. 内置 Gemini 3 和 Nanobanana 模型：借助 Google Antigravity，您可以使用 Google 最新的旗舰模型，例如 Gemini 3 和 Nanobanana。除了这些模型之外，您还可以使用 Claude 等第三方模型。

10476e79399c0f8b.png

图 5：您可以在 Google Antigravity 2 中选择使用多种模型。智能体驱动的编码：Antigravity 提供智能体驱动的原生编码体验，让开发者能够保持高效工作，而不会受到干扰。

  1. 规划和完全用户控制：代理会根据您的输入将任务转换为计划，并在执行之前征求您的批准。这样可确保用户可以在任务执行前的任何时间更改代理的方向。
  2. 用户反馈：在代理执行期间，如果用户需要向代理提供其他指令，可以向代理提供反馈。
  3. 多智能体：您可以生成多个智能体，让它们同时处理不同的任务。例如，Agent A 可以重构您的 Auth 逻辑，而 Agent B 可以为新的 API 编写单元测试，Agent C 则可以在后台研究某个库。
  4. 可在编辑器、终端和浏览器中使用的智能体：Google Antigravity 智能体可在多个界面中运行。
  5. 编辑器：Google Antigravity 智能体在编辑器中编写代码并向您展示编写的代码。
  6. 终端：根据任务需要，Google Antigravity 代理可能需要访问您的终端才能执行某些命令。智能体可以在需要时为您执行命令。
  7. 浏览器：智能体还可以与浏览器搭配使用。如果您需要测试 Web 应用，此功能会特别有用，因为代理可以在 Web 浏览器中运行您的应用，对其进行测试和调试。

7. AI 规范驱动型开发简介

规范驱动型开发是一种新兴的软件工程范式，它将结构化规范和 AI 智能体置于开发生命周期的核心位置。与基本 AI 编码中常见的“提示和修补”（反复试验）方法不同，SDD 优先考虑细致的需求收集、系统/架构设计和测试规划。它借鉴了瀑布模型设计阶段的严谨性，但通过自动化将其集成到现代化的敏捷迭代循环中。虽然此流程要求您提前进行细致的规划和记录，但实际上这是一个迭代流程，因为 AI 代理可实现快速实施和测试。这样一来，您就可以更快地获得反馈，从而改进文档。

核心理念

在这种模式下，人类工程师将从“代码编写者”转变为“系统架构师”。人类的主要责任是提供高保真度的问题和解决方案描述。此详细输出可作为 Single Source of Truth (SSOT)，供 AI 代理用于生成、验证和优化代码库。

SDD 生命周期

此流程包含以下组件。第 1-3 步非常注重以人为本，而第 4-5 步则侧重于 AI 代理。这是一个迭代过程，在每个周期结束后，反馈可用于改进规范。

  1. 需求收集：明确识别业务逻辑、用户需求和系统限制。
  2. 架构设计：定义系统结构、数据模型和集成点。
  3. 系统和测试规范：创建机器可读（或高度结构化）的文档，用于定义系统执行的操作以及验证方式。
  4. 自动生成代码：AI 智能体使用规范来生成可用于生产用途的代码。
  5. 测试和验证：自动化套件会根据测试规范验证生成的代码。

关键运营原则

  1. 设计-实现循环

第 1 步到第 5 步不是线性路径，而是持续的反馈循环。由于代码生成（第 4 步）和测试（第 5 步）在很大程度上是自动化的，因此工程团队可以将大部分带宽转移到前三个阶段。当发现 bug 或功能发生变化时，工程师会更新规范，而不是代码，并再次触发该循环。

  1. 模块化粒度

为保持系统完整性，SDD 必须应用于细粒度模块，而不是单体块。

  • 隔离：如果某个特定模块验证失败，只需重新指定并重新生成该模块。
  • 可伸缩性：小巧且定义明确的模块可防止 AI 出现“幻觉”，并确保 AI 智能体的上下文窗口保持专注和准确。
  1. 质量控制

在此范式中，系统规范是蓝图，而测试规范是评判标准。测试规范可确保生成的代码始终符合预定的质量要求。整个流程可以无缝集成到现有的 CICD 流水线中，确保整个系统运行状况也符合质量要求。

在本实验中，我们将使用 Google Antigravity 探索规范驱动开发的基础知识

8. 使用 Google Antigravity 开发 Web 应用

在本实验中，我们将创建一个简单的图库应用。图片生成模型 Nanobanana 内建于 Google Antigravity 中。我们将使用 Nano Banana 创建所需的图片。

设置网络浏览器

Web 浏览器将用于自动测试应用。在以下步骤中，我们将设置浏览器，以便 Antigravity 可以自动测试应用。

  1. 👉点击右上角的“设置”按钮（齿轮图标），然后选择“打开 Antigravity 用户设置”
  2. 👉点击左侧窗格中的“Agent”，然后在“制品”部分中，选择“始终继续”以查看政策 ac522e46ce7d5d4d.png
  3. 👉点击左侧窗格中的“浏览器”，确保“启用浏览器工具”处于“已启用”状态。b49bb10330435c2d.png

使用 Google Antigravity 创建应用

  1. 👉点击 Google Antigravity 图标，打开 Google Antigravity
  2. 👉在个人文件夹中创建一个名为“图库”的文件夹，例如：桌面设备。
  3. 👉在 Antigravity 中按“打开文件夹”，然后选择“图库”文件夹。系统随即会在“图库”文件夹中打开一个新的工作区。
  4. 👉如果代理窗格尚未打开，请点击“切换代理窗格”按钮将其打开。请参阅图 4 中的按钮 2。
  5. 👉您可以在代理窗格中输入指令，开始编写代码。务必尽可能清晰地说明指令。在 Agent 窗格中输入以下内容
     **English Version:**

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

日语版本：

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します
  1. 👉点击“运行”按钮。运行后，代理应向您显示如下所示的执行计划。

c9da191c4cbcc952.png

图 5：Antigravity agent 将向您展示实施计划

  1. 👉系统会提示您进行确认，请在出现提示时进行确认，如下所示。Antigravity 将自动使用 Nanobanana 和所选 LLM 模型来执行任务。

a92a8d5848528448.png 图 6：Antigravity 想要运行命令，请按运行以允许运行。

82b9cec15b05938b.png 图 7：出现提示时，按“全部接受”。

  1. 👉生成代码后，Antigravity 会打开浏览器并开始测试。测试完成后，系统会向您提供测试结果。7ab8b13a5c3f62a9.png 图 8：Antigravity 将显示测试结果
  2. 👉如果系统提示，请按“全部接受”以保存在代理窗格中生成的所有代码。
  3. 👉在 Antigravity 的“探索器”窗格中，您应该会看到新生成的代码。91770e05b17c1ea1.png 图 9：最终代码
  4. 👉如需测试应用，请右键点击 index.html，获取文件路径，然后将该路径粘贴到网络浏览器网址栏中。

da11208a3259d0b.png

图 10：如需测试应用，只需在网络浏览器中复制 index.html 文件的路径即可

9. 设置部署环境

  1. 👉获取您的 Google Cloud 项目 ID：前往 https://console.cloud.google.com
  2. 👉点击左上角，将项目 ID 复制到某个位置，我们将在后续步骤中使用此 ID。828046e5e6906764.png 图 11：复制项目 ID 并将其保存到某处，以供日后参考
  3. 👉在 Antigravity 中，依次点击菜单中的 Terminal->New Terminal，打开终端。
  4. 👉我们需要设置环境变量，Windows 和 Mac/Linux 的环境变量有所不同。将“YOUR CLOUD PROJECT”替换为第 2 步中记下的值。面向 Windows PowerShell 用户的注意事项：以管理员模式打开 PowerShell
#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"
  1. 👉登录控制台，系统提示时在浏览器中登录您的 Google Cloud 账号。
gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

630c164efb606a4.png 图 12：执行身份验证

  1. 👉安装 Cloud Run MCP 服务器。在 Antigravity 窗口的右上角，点击“...”。您应该会看到“MCP 服务器”选项，点击该选项。MCP 服务器就像智能体的扩展程序，可让智能体访问外部数据和工具。
  2. 👉在搜索框中输入“Cloud Run”，然后点击“Cloud Run”be1a5aa6de8601f1.png 图 13：Cloud Run MCP 服务器
  3. 👉按 MCP 服务器标题旁边的返回箭头键，返回到 Agent 窗格。现在，我们可以开始与 Google Cloud Run 进行交互了。在 Agent 窗格中输入以下内容。这应会自动使用 Cloud Run MCP 服务器，并向您显示在 Cloud Run 中运行的服务列表。
Find me the list of services running in Cloud Run.
  1. 👉使用以下命令部署应用。您只需使用自然语言即可进行部署。Antigravity 将自动使用 MCP 服务器进行部署。
Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80
  1. 👉智能体应向您显示应用部署的位置。例如：https://photogallery-85469421903.us-central1.run.app。借助 Cloud MCP 服务器，您可以非常轻松地将 Web 应用部署到 Cloud Run。

10. 清理

现在，我们来清理刚刚创建的内容。

  1. 👉删除我们刚刚创建的 Cloud Run 应用。访问 Cloud Run，前往 Cloud Run。您应该能够看到在上一步中创建的应用。勾选应用旁边的复选框，然后点击“删除”按钮。

db630152398108cb.png 图 38：删除 Cloud Run 应用

11. 总结

恭喜！您已成功按照规范驱动开发实践使用 Google Antigravity 创建了一个应用。您还学习了如何将该应用部署到 Cloud Run。这是一项重大成就，涵盖了现代云原生应用的核心生命周期，为您部署自己的复杂系统奠定了坚实的基础。

回顾

在本实验中，您学习了如何执行以下操作：

实用资源