VibeCoding

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

聖誕節快到了，用 Antigravity 讓 AI 幫你做一棵「會回應手勢」的發光 3D 聖誕樹 !

💡

聖誕樹互動網頁: https://gesture-xmas-tree.vercel.app/
參考程式碼: https://github.com/vicky0619/gesture-xmas-tree

先認識 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)

💡

要注意不要讓 Antigravity 刪掉你的 D 槽!!!

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

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

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

0:00

/0:06

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

Antigravity 實作流程

步驟一：建立專案工作區

在 Antigravity：

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

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

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

直接可用的 Antigravity Prompt

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

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

Create a High-End Interactive 3D Gesture Christmas Tree

Objective: Build a React + Vite application with Three.js that uses a webcam to control a magical 3D particle system.

Tech Stack (CRITICAL - DO NOT CHANGE):

1. AI Vision: Use @mediapipe/hands (Legacy API) and @mediapipe/camera_utils.
  - Reason: The new tasks-vision library crashes on some Windows setups. Use the Legacy Hands class.
  - Load WASM from CDN: locateFile: (file) => \https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}``.

2. 3D Engine: three, @react-three/fiber, @react-three/drei, @react-three/postprocessing (UnrealBloom).

3. Framework: React. Important: Remove <StrictMode> from main.jsx to prevent camera double-init errors.

Scene Requirements:

1. Particles: ~2000 particles using InstancedMesh.
  - Mode A (Open Hand): Particles form a swirling galaxy/nebula ("EXPLODE").
  - Mode B (Fist): Particles form a conical Christmas Tree ("TREE").
2. Visuals: Pure Black background. Particles must use MeshBasicMaterial (not Standard) so they glow brightly with Bloom.
3. UI: Minimalist Gold text. The Camera feed should be in the bottom-left, styled with a glassmorphism effect, and mirrored.

Architecture:

- Ensure the HTML UI (Camera, Text) has a higher z-index (e.g., 100) than the 3D Canvas (z-index: 1) so it sits ON TOP.
- Handle camera permission errors gracefully with a status text.

你會看到 Agent 先吐出一份計畫，接著開始動手，並用 Artifacts 回報成果（例如 UI 截圖、任務清單）。