Antigravity 中的规范驱动开发入门

1. 本实验的目标

在本动手实验中，您将学习如何使用 Antigravity 通过 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 Editor 执行任务。打开 Cloud Shell 并使用 Cloud Shell 设置项目。
  • 点击此链接可直接前往 Cloud Shell Editor
  • 如果终端尚未打开，请从菜单中依次点击 Terminal>New Terminal，以打开终端。您可以在此终端中运行本教程中的所有命令。
  • 您可以在 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 Editor 中按照以下步骤操作

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

如果成功，您应该能够看到如下结果：如果您看到“Successfully linked project”，则表示您的结算账号已正确设置。通过执行上述步骤，您可以检查账号是否已关联，如果未关联，系统会为您关联。如果您尚未选择项目，系统会提示您选择项目，或者您可以按照项目设置中的步骤提前选择项目。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. 多个智能体：您可以生成多个智能体，以便同时处理不同的任务。例如，智能体 A 可以重构您的身份验证逻辑，而智能体 B 可以为新的 API 编写单元测试，智能体 C 可以在后台研究库。
  4. 智能体跨编辑器、终端和浏览器： Google Antigravity 智能体可在多个界面上运行。
  5. 编辑器：Google Antigravity 智能体会在编辑器中编写代码并向您展示编写的代码。
  6. 终端：根据任务的不同，Google Antigravity 智能体可能需要访问您的终端才能执行某些命令。智能体可以在需要时为您执行命令。
  7. 浏览器：智能体还可以与您的浏览器协同工作。如果您需要测试 Web 应用，这一点尤其有用，智能体可以在 Web 浏览器中运行您的应用、对其进行测试和调试。

7. AI 规范驱动开发简介

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

核心理念

在此模型中，人类工程师从“代码编写者”转变为“系统架构师”。人类的主要责任是高保真地描述问题和解决方案。此详细输出充当 单一可信来源 (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 中。我们将使用 Nanobanana 创建必要的图片。

设置 Web 浏览器

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

  1. 👉点击右上角的“设置”按钮（齿轮图标），然后选择“打开 Antigravity 用户设置”
  2. 👉点击左侧窗格中的“智能体”，然后在“工件”部分中，选择“审核政策”->“始终继续”ac522e46ce7d5d4d.png
  3. 👉点击左侧窗格中的“浏览器”，并确保“启用浏览器工具”已启用。b49bb10330435c2d.png

使用 Google Antigravity 创建应用

  1. 👉点击 Google Antigravity 图标，打开 Google Antigravity
  2. 👉在个人文件夹中创建一个名为“Gallery”的文件夹，例如桌面设备。
  3. 👉在 Antigravity 中按“打开文件夹”，然后选择“Gallery”文件夹。这将在“Gallery”文件夹中打开一个新的工作区。
  4. 👉如果“智能体”窗格尚未打开，请点击“切换智能体窗格”按钮将其打开。请参阅图 4，按钮编号 2 。
  5. 👉您可以在“智能体”窗格中输入说明，开始编码。务必尽可能清楚地说明。在“智能体”窗格中输入以下内容
     **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 智能体将向您展示实现计划

  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，获取文件的路径，然后将该路径粘贴到 Web 浏览器的网址栏中。

da11208a3259d0b.png

图 10：如需测试应用，只需在 Web 浏览器中复制 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 Servers”选项，点击它。MCP 服务器就像智能体的扩展程序，可让智能体访问外部数据和工具。
  2. 👉在搜索框中输入“Cloud Run”，然后点击“Cloud Run”be1a5aa6de8601f1.png图 13：Cloud Run MCP 服务器
  3. 👉按 MCP 服务器标题旁边的后退箭头键，返回到“智能体”窗格。现在，我们可以开始与 Google Cloud Run 互动了。在“智能体”窗格中输入以下内容。这应会自动使用 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。这是一项重大成就，涵盖了现代云原生应用的核心生命周期，为您部署自己的复杂系统奠定了坚实的基础。

回顾

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

实用资源