🔧 阿川の電商水電行
前言
Google 在 2025-11-18（美國時間）發表的 AI 編輯器「Antigravity」，我實際上使用它開發了一個「AI 聊天應用」。
本文簡要總結了使用擴充功能 Antigravity 瀏覽器擴充套件 的體驗。
使用 Chrome 擴充功能進行 UI 修正的示範影片
Antigravity 是什麼
Antigravity 是 Google 在 2025-11-18（美國時間）發表的 AI 代理優先開發平台。
主要特點
- 代理優先開發體驗: 當開發者給出高層次的「指示」時，AI 代理能自動計劃、編寫代碼、執行並驗證動作，整個過程自動化執行，可以跨越編輯器、終端和瀏覽器執行任務。
- 管理者視圖與編輯器視圖: 可以在「管理者視圖」和作為正常開發畫面的「編輯器視圖」之間切換，管理多個工作空間和多個代理。
- 工作可視化: 作為成果，自動生成「任務列表」、「實現計劃」、「截圖/錄影（Artifacts）」以可視化代理的工作。逐一記錄工作歷史和畫面的截圖，並漂亮地整理工作結果。
詳細請參考「Antigravity」。
實踐
1. 安裝/啟動
Antigravity 可以從 官方網站 下載。經過各種設置後啟動。因為是 VSCode 的分支，所以介面結構讓人熟悉。
可以從下面選擇模型。當然，也可以使用 Gemini 3。
在 Conversation Mode 中，可以切換以下兩種模式。
- Planning: 適合複雜任務或調查、合作工作。在執行之前進行計劃。
- Fast: 適合簡單任務。直接執行任務，快速完成。
2. 從「開啟代理管理器」啟動「代理管理器」
Antigravity 具有可以管理多個代理和多個工作空間的「代理管理器」。
您可以從這裡開始新項目，或查看其他工作空間的任務狀況的列表。
3. 輸入指示
我向代理輸入了以下一行文字。
「請製作一個可以與 AI 倉鼠對話的聊天應用。」
然後代理執行了以下操作。
- 項目初始化
- 生成 Next.js + Tailwind CSS 的結構
- 創建畫面佈局
- 構建聊天 UI 組件
- 生成簡易聊天邏輯的 API Route
- 啟動本地開發伺服器
而且，在左側可以實時查看「代理正在執行的內容」，
右側的 任務面板 顯示代理自動創建的 任務分解，以檢查清單的方式顯示。
這樣可以一目了然知道正在執行哪一個步驟。
4. 實作完成後在 Chrome 中啟動應用
這時我安裝了 Chrome 擴充功能 Antigravity 瀏覽器擴充套件。
有關視覺反饋和使用案例，請參見官方網站的以下內容。
為什麼前端開發者選擇 Google Antigravity
實際測試聊天功能後，確實得到了應答。
5. 輸入額外指示
「請將 AI 角色的名字改為哈姆次郎，並記錄過程的截圖。」
應用在 Chrome 上啟動，可以實時確認修正的過程。
此外，因為顯示了 Playback available，點擊「查看」，便可以在右側檢查 AI 實施的實際測試情況。
在額外的實作完成後，生成了 Walkthrough，並按照指示保存了截圖。
6. 從 Artifact 請求 UI 修正
2025/11/19 19:58 追記
生成的 Artifact 可以在畫面右側以列表形式顯示。
如果希望在 UI 上進行修正的地方，選擇該 Artifact 的畫面截圖，拖曳想要變更的部分並註明評論，該請求將會被反映。（驚訝！）
①拖拉選擇想變更的地方
②對想修改的內容進行評論
關於表情符號顯示位置的評論
希望改變對話框的顏色也進行評論
③根據評論內容實現！
2025/11/19 23:50 追記
拖拉對象區域的 UI 進行修正的方式，也可以使用於生成的單一圖片，並能夠進行美麗的修整。
選擇杯子蛋糕的區域，輸入評論以請求修正
7. 關於任務和 Walkthrough 的保存位置
在 Antigravity 中，代理執行的任務和生成的 Walkthrough 會自動儲存在使用者的主目錄下的隱藏文件夾 .gemini 中。
具體來說，可以確認其儲存位置如下。
- 儲存位置:
~/.gemini/antigravity/brain/<session_id>/task.md: 任務列表和進度狀況walkthrough.md: 工作記錄（包括截圖或錄影的鏈接）implementation_plan.md: 實作計畫書
這些檔案以 Markdown 格式儲存，因此可以在編輯器外作為文字進行檢視，也可以使用 Git 進行管理。
截圖則在 ~/.gemini/antigravity/browser_recordings/<session_id>/ 中。
當然，您也可以在 Antigravity 上的 任務面板 和 代理管理器 中以視覺方式進行查看和管理。
發現與優點
- 任務可視化順暢: 代理的進度一目了然。任務面板中，能實時檢視任務分解的情況，明確知道正在執行哪個流程。
- 自動化的工作流程: 瀏覽器操作、截圖獲取、Walkthrough 生成等一般繁瑣的手動流程都得到輔助。代理能自動進行測試和驗證工作。
- 工作歷史的保存: 任務和 Walkthrough 自動保存，方便日後查看。能在代理管理器中集中管理多個項目和工作空間。
- 簡單指示即可完成: 僅需一行指示，就能自動執行從項目初始化到開發伺服器啟動的整個過程。只需傳達想做的事情，無需關心技術細節。
結語
我感覺 AI 代理正在做什麼變得格外明了。
實時反映的任務分解和進度情況，讓人觀看時感到很愉快。
在前端開發中，因為視覺反饋的重要過程如瀏覽器操作和截圖獲取都能自動化，有可能提升開發效率。
因為目前還沒有充分利用所有功能，所以下面計劃持續比較與日常使用的 Cursor 等進行實驗。
希望大家也能嘗試一下 Antigravity，檢驗它如何融入您的開發工作流程。
參考資料
- Antigravity - 官方網站 - Google 的 AI 代理優先開發平台
- 為什麼前端開發者選擇 Google Antigravity - 前端開發者的使用案例
- 與 Gemini 3 一起迎接智能新時代 – Google 博客 - Gemini 3 的發布和 Antigravity 的介紹
- Google Antigravity 介紹代理優先架構以實現非同步、可驗證的編碼工作流程 – VentureBeat - 關於 Antigravity 的架構解說
- Antigravity 是 Google 的新代理開發平台 – The New Stack - 作為平台的 Antigravity 詳細介紹
原文出處：https://qiita.com/yokko_mystery/items/bb5615ebcd385a597c41
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
