使用 Conductor 插件规划和构建应用

1. 简介

在此 Codelab 中，您将学习如何使用 Conductor 插件 规划和构建软件应用。Conductor 是 Google 构建的开源插件，可实现规范驱动型开发功能，例如规划和实现跟踪。您将首先从头开始构建一个“绿地”应用。然后，您将把它视为“棕地”项目，对其进行迭代以添加身份验证和存储功能。

您将执行的操作

  • 在 Antigravity CLI 或 Claude Code 中安装 Conductor 插件
  • 使用 Conductor 的规划和实现功能从头开始构建“Picker Wheel”Web 应用
  • 使用 Firebase 添加身份验证和存储功能，为应用添加个性化设置

学习内容

  • 如何使用 Conductor 插件规划、实现和审核“绿地”应用
  • 如何使用 Conductor 插件为“棕地”应用添加功能

所需条件

2. 准备工作

创建 Google Cloud 项目

  1. 在 Google Cloud 控制台 的项目选择器页面上，选择或创建一个 Google Cloud 项目。
  2. 确保您的云项目已启用结算功能。了解如何检查项目是否已启用结算功能。

启动 Cloud Shell

Cloud Shell 是在 Google Cloud 中运行的一个命令行环境，其中预加载了必要的工具。

  1. 点击 Google Cloud 控制台顶部的激活 Cloud Shell 。
  2. 连接到 Cloud Shell 后，验证您的身份验证：
    gcloud auth list
  3. 确认您的项目已配置：
    gcloud config get project
  4. 如果您的项目未按预期设置，请进行设置：
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

启用 API

在 Google Cloud 项目中启用 Firebase Management API。

gcloud services enable firebase.googleapis.com

将 Firebase 添加到您的项目

Firebase CLI 预安装在 Cloud Shell 中。在 Cloud Shell 中，使用可让您访问 Google Cloud 项目的同一 Google 账号登录。如果您在本地工作，请按照说明安装 Firebase CLI。

firebase login

运行以下命令，将 Firebase 添加到您的 Google Cloud 项目：

firebase projects:addfirebase

如果您是首次运行 firebase CLI，请回答系统提出的任何问题。

退出 Cloud Shell

您可以关闭 Cloud Shell 窗口。在下一部分中，我们将配置您的本地环境。

3. 安装 CLI 编码代理并对其进行身份验证

在此步骤中，您将使用 Google Cloud 凭据在本地代码编辑器中安装 Antigravity CLI 或 Claude Code 并对其进行身份验证，从而准备本地开发环境 。

安装 Antigravity CLI 并对其进行身份验证

  1. 安装最新版本的 Antigravity CLI 。
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. 重启终端 ，以便将 agy 添加到您的 PATH 中。
  3. 验证安装 是否已安装 最新版本。
    agy --version
  4. 使用您的 Google Cloud 凭据进行身份验证。
    • 启动 Antigravity CLI。
      agy
    • 当系统要求您选择登录方法 时，选择使用 Google Cloud 项目。在网络浏览器中打开安全授权网址。使用已获批准的凭据登录并完成身份验证。浏览器会显示唯一的字母数字授权代码。复制此代码，返回到终端，然后将其粘贴到提示中。
  5. 退出 Antigravity CLI 。在继续之前，请在 CLI 终端中输入 /exit，以结束当前的 Antigravity CLI 会话。

安装 Claude Code 并对其进行身份验证

或者，您也可以将 Conductor 插件与 Claude Code 搭配使用。在这里，我们将使用您的 Google Cloud 凭据安装 Claude Code 并对其进行身份验证。

  1. 安装最新版本的 Claude Code。
  2. 使用您的 Google Cloud 凭据进行身份验证。
    • 启动 Claude Code。
      claude
    • 输入 /login 以选择登录方法。选择第三方平台 · Amazon Bedrock、Microsoft Foundry 或 Vertex AI 和 Google Vertex AI 选项。如需设置 Google Vertex AI，请选择应用默认凭据（Google 身份验证），然后按照提示完成设置。
  3. 重启 Claude Code 。

4. 安装 Conductor 插件

Conductor 是 Google 构建的开源插件，可实现规范驱动型开发功能，例如规划和实现跟踪。

在 Antigravity CLI 中安装

  1. 安装插件：
    • Antigravity CLI 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. 验证安装：
    • 启动 Antigravity CLI。
      agy
    • 输入 /conductor，您将看到一系列命令，例如 /conductor:conductor-setup、/conductor:conductor-new-track、conductor:conductor-implement 等。
  3. 退出 CLI 。在继续之前，请在终端中输入 /exit，以结束当前的 CLI 会话。

在 Claude Code 中安装

  1. 注册 Marketplace 代码库，并在 Claude Code 会话中直接安装 Conductor 插件。
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. 验证安装 。
    • 输入 /conductor，您将看到一系列命令，例如 /conductor-setup、conductor-new-track、conductor-implement 等。
  3. 退出 CLI 。在继续之前，请在 Claude Code 终端中输入 /exit，以结束当前的 CLI 会话。

5. 绿地开发：“Picker Wheel”

现在，您的环境已设置完毕，您将从头开始构建一个新应用。您将创建一个“Picker Wheel” - 一个轻量级 Web 应用，它会旋转以选择随机选项。

设置产品情景

  1. 创建并切换到新的项目目录 。我们现在在 picker-wheel 目录中处理项目。创建此目录并切换到该目录。
    mkdir picker-wheel
cd picker-wheel
  2. 启动 Antigravity CLI 。使用 Antigravity CLI 或 Claude Code 从项目目录启动新的 CLI 会话。
    # Antigravity CLI
agy

# Claude Code
claude
    • 当系统询问“您是否信任此文件夹中的文件？”时，选择信任文件夹 (picker-wheel)
  3. 初始化 Conductor 。运行设置命令，为项目搭建框架并设置 Conductor 环境。
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. 按照互动式提示操作 。您看到的互动式提示与这些示例并不完全一致。请专注于更简单的设计，以便熟悉 Conductor 工作流程。
    • 产品目标：一个 Web 应用，用于显示可配置的旋转轮盘，以便从列表中选择随机项。
      • 目标受众群体 → 一般公众
      • 互动 → 点按/点击以旋转
      • 自定义 → 基本
      • 平台 → 桌面设备优先
    • 产品指南：自动生成。
    • 技术栈：
      • 语言 → TypeScript/JavaScript - 非常适合全栈 Web
      • 前端 → Vue.js - 直观的 Web 界面
      • 后端 → Express.js - 快速 Node 后端
      • 数据库 → 无 - 无需数据库
    • 工作流程：标准。
    • 产品要求：
      • 用户故事 → 可自定义的选项、清晰的获胜者显示
      • 主要功能 → 可编辑的选项列表、随机颜色
      • 限制 → 仅限客户端、高性能
      • 非功能性 → 高测试覆盖率、TypeScript 和 Vue.js、自适应设计
    Conductor 将在 conductor/ 目录中生成上下文文件。

创建新轨道

Conductor 中的“轨道”表示一项功能或一个工作单元。

  1. 使用 /conductor-new-rack 启动新轨道 。Conductor 可能会根据产品情景提出初始轨道。或者，您可以自行提出轨道，也可以让 Conductor 建议轨道。
  2. 查看生成的计划 。Conductor 将在 conductor/tracks/{track-id}/ 中生成 index.md、spec.md 和 plan.md。请花点时间阅读这些文件。如果一切正常，Conductor 将提示您保存并提交初始设置文件。

实现轨道

  1. 开始实现 。
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Conductor 现在将按照计划为项目编写代码。
  2. 验证应用 。在实现阶段，Conductor 会提示您手动测试应用。例如，它会要求您打开本地 Web 服务器，在浏览器中预览应用，并验证更改。实现完成后，您应该会看到一个可正常运行的 Picker Wheel。Picker Wheel 应用
  3. 查看实现 。作为最后一步，您可以让 Conductor 查看实现。它应该查看源代码、同步项目文档并归档轨道。
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. 棕地迭代：添加个性化设置

现在，您将转向“棕地”开发。您将改进上一部分中的 Picker Wheel Web 应用，以便登录用户可以保存和恢复其 Picker Wheel 配置。

创建个性化设置轨道

  1. 在以下“棕地”示例中，我们将使用 Firebase 进行身份验证和存储。安装 Firebase 技能，以便 Conductor 可以使用它。
  2. 启动 CLI 代理 。启动新的 CLI 会话。
    # Antigravity CLI
/new

# Claude Code
/new
  3. 启动新轨道 。启动新轨道。
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. 按照互动式提示操作 。您看到的互动式提示与这些示例并不完全一致。请专注于更简单的设计，以便熟悉 Conductor 工作流程。
    • 轨道目标:
      • 授权提供方 → Firebase Auth
      • 已保存的配置 → 轮盘选项
      • 数据存储 → Firestore
      • Firestore 登录界面 → 模态叠加层
    Conductor 将在 conductor/tracks/{track-id} 中为新轨道生成上下文文件。
  5. 查看生成的计划 。请花点时间阅读 conductor/tracks/{track-id}/ 中的 index.md、spec.md 和 plan.md。
  6. 实现 。如果一切正常，您可以开始实现。
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. 验证 。重新加载应用。您应该会看到更新后的应用。 带登录功能的选择轮

以下是黄金代码，供您参考实现。您必须在 .firebaserc 中提供 Firebase 项目，并在 firebase.ts 中提供 Firebase 配置，才能正确启动应用。

7. 清理

为避免系统向您的 Google Cloud 账号持续收取费用，请删除在此 Codelab 中创建的资源。

删除 Firebase 项目和 Google Cloud 项目

最简单的清理方法是完全删除项目。

  1. 在 Google Cloud 控制台 中，选择您创建的项目。
  2. 点击删除 。

或者，如果您想保留项目但删除资源，请执行以下操作：

  1. 删除 Firestore 数据库：前往 Firebase 控制台 > Firestore 并删除数据库。
  2. 删除身份验证：前往 Firebase 控制台 > 身份验证登录方法，停用 Google。

8. 恭喜

恭喜！您已成功在您选择的编码代理（Antigravity CLI 或 Claude Code）中使用 Conductor 插件从头开始构建 Web 应用，然后使用身份验证和数据库集成等复杂功能对其进行迭代。

后续步骤