【Vibe Coding】如何用 Google Antigravity 做手勢聖誕樹：張手炸開粒子、握拳一秒成樹

先認識 Google Antigravity 介面：你會用到哪幾個區塊

Google Antigravity 是 Google 推出的 agent-first 開發平台，重點不是只在側邊欄聊天，而是把 AI Agent 放到能「規劃、動手改碼、跑終端、開瀏覽器驗證」的工作流裡。

你最常用到的介面大致分兩種：

Editor View：像 IDE 一樣寫碼，但多了 AI 同步協作

當你要手動改檔案、看差異、調樣式，主要在 Editor View 操作。官方把它定位成你熟悉的 IDE 工作方式，加上 tab completion 與 inline 指令。

Manager Surface（Agent Manager）：像「任務指揮中心」派工給多個 Agent

這是 Antigravity 的核心賣點：你可以同時開多個 Agent，讓它們各自處理不同任務（例如：一個做 UI，一個補測試，一個做除錯）。

Artifacts：用「可檢查的成果」取代一長串 log

當你把任務交給 Agent，它會用 Artifacts 形式回報，例如：任務清單、實作計畫、截圖、瀏覽器錄影等，方便你快速審核與回饋。

小提醒：Antigravity 會牽涉到終端機指令執行權限。官方文件也特別把「Terminal Execution policy」拆成不同等級，建議你一開始先用更保守的設定，避免誤刪或跑錯指令。(Google Codelabs)

【Vibe Coding】Google Antigravity 出包了 ! 誤刪硬碟事件：開發者如何正確備份專案檔案？

想像有一天，你打開電腦準備繼續寫程式，卻發現整個 D 槽空空如也——專題原始碼、畢業作品、照片、文件全部消失，只剩下一行「刪除完成」的系統訊息。

AI郵報Vicky Tsai

目標：做一個「手勢控制」發光粒子聖誕樹網頁

• 黑底、高級感、數千顆寶石感粒子（紅／金／翡翠綠的小球與方塊）
• 張開五指：粒子像煙火炸開 → 發光星雲
• 握緊拳頭：粒子聚攏 → 堆出一棵發光聖誕樹（樹頂金色發光旋轉五角星）
• 上方金色字 “MERRY CHRISTMAS”
• 左下角半透明監控框：顯示相機畫面＋手部骨架
• 監控框上方狀態燈：EXPLODE / TREE
• 開場 Welcome Screen：黑底金字＋紅色 Start，點了才開相機

技術要求：
React + Three.js + MediaPipe Hands，粒子用 InstancedMesh，發光用 UnrealBloomPass。

簡單版本的互動粒子特效:

【Vibe Coding】Gemini 3 + three.js 3D 教學｜不用寫程式也能做 3D 手勢互動粒子特效

透過一段 Prompt，就能用 Gemini 3 自動生成 three.js 3D 手勢互動粒子特效。本教學完整示範從貼指令到開啟網頁、用雙手操控粒子的全流程。

AI郵報Vicky Tsai

Antigravity 實作流程

步驟一：建立專案工作區

在 Antigravity：

• 開一個新資料夾（例如 gesture-xmas-tree）
• 打開 Agent Manager（Manager Surface）

步驟二：把任務拆成「一個主 Prompt + 後續微調」

你在 Antigravity 的 Agent 輸入框，直接貼下面這段「工程版 Prompt」（它會自己建專案、裝套件、產出可跑的程式）。

直接可用的 Antigravity Prompt

經過反覆修正和測試後我整理出部會出錯的 Prompt:

還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～