06 · Browser Subagent 與 UI 驗證

你是 Antigravity 瀏覽器子代理顧問。

【角色】
Antigravity 瀏覽器子代理顧問，按最小夠用、安全優先的原則給可落地方案，每條結論都落到能照做的具體步驟或示例，不停留在「建議」「考慮一下」這類空泛表述。

【輸入】
- 我要驗證的 UI / 前端功能：___
- golden path 和邊緣情況：___
- 專案技術堆疊：___
- 可接受的自動化程度：___
- 經驗水平：___

【工作流程】
1. 說明瀏覽器子代理能做什麼
2. 設計要驗證的路徑和邊緣情況
3. 讓它產出截圖等證據
4. 教我核對證據
5. 給收尾

【輸出規範】
▌一、子代理能力
▌二、驗證路徑設計
▌三、證據產出
▌四、核對 + 收尾

【硬約束】
- UI 改動以真實瀏覽器驗證為準
- 截圖證據自己核對
- 驗證不透過不算完成
- 不要替我臆測情況或編造不存在的功能，資訊不全先問清
- 不確定的設定或介面一律以官方文件為準，禁止照搬過時寫法

Browser Subagent 讓 Antigravity 不只會改 UI，還能開啟頁面、點選、輸入、觀察結果，並留下截圖或錄屏。官方 Browser 文件說明，Antigravity 能開啟、讀取並控制 Chrome，用於測試開發網站、讀取網際網路資料來源和自動化瀏覽器任務；當主 agent 需要瀏覽器互動時，會呼叫專門的 browser subagent。

這正是它做前端任務最有價值的部分，也是最需要安全邊界的部分。瀏覽器能看見真實頁面，也能誤觸真實後臺。

1. 瀏覽器驗證的價值

傳統 AI 改 UI 常見問題：

• 程式碼能編譯，但頁面空白。
• desktop 好看，mobile 重疊。
• 按鈕存在，但點選沒反應。
• 成功路徑可以，失敗路徑沒提示。
• 文案溢位或遮擋。

Browser Subagent 的價值是把這些問題提前暴露出來。

官方 Browser Subagent 文件說明，它使用專門操作 Antigravity 管理瀏覽器頁面的模型，和 main agent 選擇的模型不同。它可以點選、滾動、輸入、讀取 console logs，並透過 DOM capture、screenshots、markdown parsing 或 videos 讀取頁面狀態。

這說明前端任務不能只要求“跑 build”。你要讓 agent 證明頁面真的被開啟、操作、觀察過。

2. Browser Subagent 的邊界

瀏覽器能力有三個關鍵邊界：

如果 Antigravity 找不到 Chrome，需要在設定裡指定 Chrome binary path。也可以在 Settings 的 Browser 區域關閉 browser tools，或修改 browser profile 的存放位置。

3. UI 任務 prompt 模板

修改登入頁錯誤提示樣式。
要求：
1. 修改前先說明影響範圍。
2. 修改後啟動本地服務。
3. 用瀏覽器驗證空密碼、錯誤密碼、成功登入三個路徑。
4. 提供 desktop 和 mobile 截圖。
5. 提供 walkthrough，列出未覆蓋風險。
6. 執行 terminal 命令前請求確認。

這個 prompt 明確了路徑、viewport、證據和許可權。

更適合真實專案的版本可以加上邊界：

只允許訪問 http://localhost:3000。
不要訪問生產站、後臺、支付頁或任何需要登入的頁面。
驗證寬度：390、768、1440。
每個寬度都檢查：導航、主按鈕、長文案、彈出視窗關閉按鈕、底部區域。
最後說明 console 是否有 error，並給 walkthrough。

4. 驗證流程圖

flowchart TD
    Change["UI 改動"] --> Server["啟動本地服務"]
    Server --> Browser["開啟 allowlisted URL"]
    Browser --> Path["執行使用者路徑"]
    Path --> Observe["觀察 DOM / console / screenshot"]
    Observe --> Pass{"符合預期?"}
    Pass -->|是| Record["截圖 / 錄屏 / walkthrough"]
    Pass -->|否| Fix["回到程式碼修復"]
    Fix --> Server

5. URL allowlist

瀏覽器能力越強，URL 越要收窄。

可以把 URL 策略寫進 prompt：

Browser 限制：
1. 只能開啟 http://localhost:3000 和 http://localhost:3000/docs。
2. 不要搜尋網頁，不要訪問第三方 URL。
3. 如果頁面跳到外部登入、支付或授權頁，立刻停止並報告。
4. 只讀 console，不在頁面執行自定義 JavaScript。

這類邊界比“你注意安全”更有效。

6. Console 與 network

官方 Browser Subagent 文件明確提到它可以讀取 console logs。前端任務要主動要求它檢查：

• console error
• 頁面載入失敗
• 點選後是否有異常
• 表單提交是否觸發預期反饋
• loading 是否能結束

不要只看截圖。截圖不能證明 console 沒報錯。

如果頁面有 API 請求，還要讓它觀察這些狀態：

7. 截圖和錄屏怎麼要求

最小要求：

請提供：
1. desktop 截圖
2. mobile 截圖
3. 關鍵互動路徑的 browser recording 或 walkthrough
4. console 是否有錯誤

對於商業頁面，還要加：

• 文案不溢位。
• 按鈕可點選。
• loading 和錯誤狀態存在。
• 空狀態、長文本、移動端都可讀。
• 不遮擋導航、底部按鈕、彈出視窗關閉按鈕。

官方 Screenshots 文件說明，截圖會作為 image artifacts 儲存並支援評論；官方 Browser Recordings 文件說明，browser subagent 每次操作瀏覽器時可能生成動作錄屏，並儲存為 recording artifact。實操上：

不要只收一張桌面截圖。移動端、長文本、錯誤狀態往往才是問題集中處。

8. 不要讓瀏覽器替你做什麼

9. 一套前端驗收清單

每次 Antigravity 改 UI，至少要求它交付：

1. 改動檔案列表和 diff 摘要。
2. 本地啟動或構建命令結果。
3. 390px mobile 截圖。
4. 768px tablet 截圖。
5. 1440px desktop 截圖。
6. 關鍵點選路徑的 recording 或 walkthrough。
7. console error 檢查結果。
8. 未覆蓋的瀏覽器、登入態或介面風險。

如果是商業頁面，再加兩條：

檢查所有可點選按鈕是否有 hover / disabled / loading 狀態。
檢查長標題、長按鈕文案和窄屏導航是否溢位。

本章自檢

完成本章後，用這 3 個問題檢查自己是否真正理解：

1. Browser Subagent 為什麼不等同於你的日常 Chrome 登入態？
2. Screenshot、recording、console 分別適合發現哪類問題？
3. 為什麼 UI 任務要顯式寫 URL allowlist？

透過標準：你能為真實前端任務寫出帶 URL、viewport、證據、許可權邊界的 browser 驗收 prompt。

官方來源

• Google Antigravity Browser - 官方說明 Chrome 控制、separate browser profile、browser tools 設定和 Chrome binary path。
• Google Antigravity Browser Subagent - 官方說明 browser subagent 的模型、工具、overlay 和後臺 tab 行為。
• Google Antigravity Screenshots - 官方說明截圖作為 image artifact 儲存並支援評論。
• Google Antigravity Browser Recordings - 官方說明瀏覽器動作錄屏和 recording artifact。
• Google Antigravity Walkthrough - 官方說明瀏覽器任務的 walkthrough 可能包含截圖和錄屏。

接下來去哪