---
title: "09 · 真实项目 Walkthrough"
description: "用 Antigravity 完成一个真实前端小任务：规划、权限、改动、浏览器验证、Artifacts、diff review 和回退。"
verifiedAt: "2026-05-07"
---

这一篇把前面讲的内容合成一条真实项目流程。任务不追求复杂，而追求完整：有目标、有边界、有权限、有 plan、有 diff、有 browser 验证、有 artifact、有回退。

> [!NOTE]
> **示例任务**：在一个已有 Web 项目中修复“保存按钮点击后没有成功反馈”的问题，并用浏览器验证。

> [!TIP]
> **阅读目标**：读完本章，你应该能照着这套流程在真实前端项目里使用 Antigravity，而不是让 agent 一口气乱改。

## 1. 任务定义

给 Antigravity 的任务不要写成“修一下”。应该写成可验收需求：

```text
修复设置页保存按钮点击后没有成功反馈的问题。
边界：
1. 先只读分析并给 implementation plan。
2. 修改范围限制在设置页组件和必要测试。
3. 不改全局主题、路由、部署配置。
4. 修完后启动本地服务，用浏览器验证保存成功和失败两条路径。
5. 交付 diff、desktop/mobile screenshot、walkthrough。
```

更严格的版本可以加上安全边界：

```text
安全边界：
1. 不访问生产后台、支付页、广告后台或任何需要真实登录的页面。
2. Browser 只允许访问 localhost。
3. Terminal 命令先请求确认。
4. 不读取 workspace 外文件。
5. 不提交 git，不推送，不部署。
```

这几句会显著降低误触远端系统和扩大修改范围的概率。

## 2. 选择模式和设置

这类任务虽然小，但涉及 UI、终端和浏览器，建议用 Planning，而不是 Fast。推荐起点：

| 设置 | 推荐 |
| --- | --- |
| Conversation mode | Planning |
| Artifact Review | Request Review |
| Terminal Auto Execution | Request Review |
| Browser Allowlist | 只 `localhost` |
| Non-Workspace File Access | 关闭 |
| Strict Mode | 真实项目建议开启 |

如果只是改一个按钮文案，可以用 Fast；只要涉及用户路径、错误状态、browser 验证，就用 Planning。

## 3. 计划审阅

你要让它先输出 plan。审 plan 时看：

| 检查 | 要求 |
| --- | --- |
| 文件范围 | 不碰无关目录 |
| 技术方案 | 不引入不必要依赖 |
| 验收路径 | 包含成功与失败路径 |
| 回退方式 | 能说明怎么撤销 |

如果 plan 里没有浏览器验证，让它补。

计划评论示例：

```text
这个 plan 可以继续，但请调整两点：
1. 不要改全局 toast 系统，只在 settings page 接现有 feedback helper。
2. 验证必须包含保存成功、保存失败、390px mobile 三项。
请更新 implementation plan 后再等待我 Proceed。
```

官方 Implementation Plan 支持在 artifact 上评论。用评论约束它，比在聊天里模糊说“范围小一点”更稳定。

## 4. 权限批准

按阶段批准：

```mermaid
flowchart LR
    Read["只读项目"] --> Write["写设置页文件"]
    Write --> Test["运行测试"]
    Test --> Dev["启动本地服务"]
    Dev --> Browser["访问 localhost"]
    Browser --> Artifact["截图 / walkthrough"]
```

不要一开始批准所有 command。尤其避免：

- `rm`
- `git push`
- `npm install` 或 `pnpm add`，除非 plan 已说明必要性
- 部署命令
- 访问非任务相关 URL

如果 agent 请求命令，按这个格式判断：

| 请求 | 判断 |
| --- | --- |
| `rg "save" app/settings` | 只读，通常可放行 |
| `pnpm test settings` | 验证命令，可放行 |
| `pnpm add toast-lib` | 新依赖，要求先解释必要性 |
| `git push` | 本任务禁止 |
| `curl https://unknown-site` | 不相关 URL，拒绝 |
| 访问 `.env` | 凭据风险，拒绝 |

## 5. 改动验收

代码改完后，不先看它说什么，先看 diff：

1. 文件数量是否合理。
2. 是否改了测试。
3. 是否改全局配置。
4. 是否格式化无关文件。
5. 是否引入新依赖。

如果 diff 过大，要求缩小。

Diff 通过后再看测试。不要反过来。测试通过但 diff 越界，仍然不能接受。

## 6. 浏览器验证

要求它打开页面验证：

```text
请启动本地服务，打开设置页。
验证：
1. 保存成功时出现成功反馈。
2. 保存失败时出现错误反馈。
3. mobile 宽度下按钮和提示不重叠。
4. console 没有 error。
请交付 screenshot 和 walkthrough。
```

商业级验收不要只看 happy path。至少要看失败路径和 mobile。

更完整的 browser 验收矩阵：

| 场景 | 视口 | 证据 |
| --- | --- | --- |
| 初始页面 | 1440px | screenshot |
| 保存成功 | 1440px | screenshot / walkthrough |
| 保存失败 | 1440px | screenshot / walkthrough |
| 保存按钮和提示 | 390px | screenshot |
| 控制台 | 任意 | console error 结果 |

如果页面有多步交互，例如打开弹窗、修改设置、保存、刷新确认持久化，就要求 browser recording。官方 Browser Recordings 文档说明，录屏会作为 artifact 保存，适合回看实际操作路径。

## 7. Walkthrough 应该长什么样

合格 walkthrough 包含：

- 问题复现方式。
- 修复点。
- 改动文件。
- 验证命令。
- 浏览器验证路径。
- 截图或录屏。
- 未覆盖风险。

不合格 walkthrough：

```text
已修复保存按钮问题。
```

更好的 walkthrough 应该接近：

```text
已修复 settings page 保存后无反馈的问题。
改动：
- SettingsForm 复用现有 toast helper。
- 为保存失败路径补错误提示。
- 补保存成功和失败测试。

验证：
- pnpm test settings 通过。
- localhost 设置页保存成功路径通过。
- 390px mobile 下按钮和提示不重叠。
- console 未发现 error。

未覆盖：
- 未连接生产账号。
- 未验证旧浏览器。
```

## 8. 接受或回退

如果通过：

1. 保留 diff。
2. 记录验证命令。
3. 自己再跑一次关键路径。
4. 再进入 commit 或发布流程。

如果不通过：

1. 在具体 artifact 上评论。
2. 限定只改失败点。
3. 要求重新验证。
4. 必要时 undo 到上一轮。

回退时不要只删除 conversation。删除 conversation 不等于撤销文件改动。先看 Git diff 或版本控制状态，再决定 undo、revert 或手动修改。

## 9. 完整流程模板

可以把这一篇压成一条 reusable prompt：

```text
请使用 Planning 模式完成这个前端小任务。

任务：
修复设置页保存按钮点击后没有成功反馈的问题。

边界：
- 先只读分析并输出 implementation plan，不要直接修改。
- 只允许修改设置页组件和必要测试。
- 不改全局主题、路由、部署配置、凭据文件。
- 不提交 git，不推送，不部署。
- Browser 只允许访问 localhost。

验收：
- 保存成功有反馈。
- 保存失败有反馈。
- 390px mobile 下按钮和提示不重叠。
- console 没有 error。
- 输出 diff 摘要、测试结果、desktop/mobile screenshot、walkthrough、未覆盖风险。
```

如果 Antigravity 生成的 plan 没有覆盖这些验收项，不要点 Proceed。

## 10. 什么时候不适合让它继续

遇到这些情况，停下来人工判断：

| 情况 | 处理 |
| --- | --- |
| Plan 要改 10 个以上文件 | 要求缩小或拆阶段 |
| 请求新依赖 | 要求说明必要性和替代方案 |
| 请求读取 `.env` 或 home 目录 | 拒绝，改用 mock 或最小上下文 |
| Browser 跳到外部登录页 | 停止，人工处理 |
| Diff 格式化大量无关文件 | 要求恢复无关改动 |
| Walkthrough 没有验证证据 | 要求补测，不接受 |

商业级使用 Antigravity 的重点不是“完全自动”，而是让每一步都有明确边界和证据。

## 本章自检

完成本章后，用这 3 个问题检查自己是否真正理解：

1. 为什么真实项目 UI 任务优先用 Planning 而不是 Fast？
2. 为什么要先审 diff，再看 walkthrough？
3. 删除 conversation 为什么不能当成代码回退？

通过标准：你能复制本章 prompt，替换成自己的页面任务，并知道在哪些节点必须暂停审查。

## 官方来源

- [Google Antigravity Agent](https://antigravity.google/docs/agent) - 官方说明 Agent 是多步推理系统，并通过 tasks 和 artifacts 沟通。
- [Google Antigravity Agent Modes / Settings](https://antigravity.google/docs/agent-modes-settings) - 官方说明 Planning、Fast、Artifact Review 和 terminal 自动执行策略。
- [Google Antigravity Implementation Plan](https://antigravity.google/docs/implementation-plan) - 官方说明 plan review、Proceed 和评论机制。
- [Google Antigravity Browser](https://antigravity.google/docs/browser) - 官方说明 Antigravity 可以控制 Chrome 并使用 separate browser profile。
- [Google Antigravity Browser Recordings](https://antigravity.google/docs/browser-recordings) - 官方说明浏览器动作录屏 artifact。
- [Google Antigravity Walkthrough](https://antigravity.google/docs/walkthrough) - 官方说明任务完成后的 walkthrough summary 和浏览器证据。

## 接下来去哪

<Cards>
  <Card title="工具对比" description="看 Antigravity 适合放在你现有 Gemini CLI、Codex、Claude Code 工作流的哪个位置。" href="/docs/antigravity/understanding/10-antigravity-vs-gemini-cli-codex-claude-code" />
  <Card title="用例与排障" description="查更多适合任务、不适合任务和排障顺序。" href="/docs/antigravity/official/07-use-cases-reference" />
</Cards>
