Vibe Coding XR 介紹

Google 推出「Vibe Coding XR」，一套快速原型製作工作流程，將 Gemini Canvas 與開源的「XR Blocks」框架相結合，讓使用者透過自然語言提示直接生成功能完整、具物理感知能力的 WebXR 應用程式。這套系統在 60 秒內將人類意圖轉化為可在 Android XR 頭戴裝置上執行的互動空間體驗。

開發背景與問題

大型語言模型（LLM）和 Agent 工作流程正在改變軟體工程和創意運算的方式，催生「Vibe Coding」趨勢——即 LLM 直接將人類意圖轉變成可執行的程式。Gemini Canvas 已為 2D 和 3D 網頁開發提供支援，但擴展實境（XR）領域仍存在明顯障礙：XR 原型製作通常需要組合零碎的感知管線、複雜的遊戲引擎與低階感應器整合，耗費大量時間。此方案透過快速原型測試，幫助開發者驗證新的 UI、3D 互動與空間視覺化，可節省數天工作量，尤其對最終被放棄的想法更能省時。

工作流程與使用方式

工作流程分為三個核心步驟：

• 自然語言輸入：使用者在 Android XR 頭戴裝置（如 Galaxy XR）或桌面 Chrome 上打開「XR Blocks Gem」，透過鍵盤或語音輸入提示，例如「建立一個美麗的蒲公英」，無需 XR 相關先備知識
• Gemini 設計實現：Gemini 基於 XR Blocks 樣本進行多步驟規劃和推理，自動配置場景、感知與互動邏輯
• 即時演示與迭代：使用者在 Android XR 中按下「Enter XR」按鈕進行捏合手勢，瞬間看到結果——可動畫化的蒲公英在捏合互動下吹散。支援分享功能生成公開連結

框架額外提供「模擬實境」桌面環境，讓製作者在部署至 Android XR 設備前進行快速原型設計與互動測試。深度感知、手部互動和物理模擬等進階感知功能最佳化則需在 Android XR 設備上體驗。

技術架構

Vibe Coding XR 利用 Gemini 的長上文能力與思考過程，使其充當 XR 設計師與工程師。系統包含經過特化設計的「system prompt」，「教導」Gemini 認識 XR Blocks 架構與樣本，涵蓋房間規模 XR 環境指南、套件管理與 XR 互動最佳實踐。底層框架建基於 WebXR、three.js 與 LiteRT.js 等可近用網頁技術，其核心引擎管理空間運算所需的複雜子系統，包括環境感知、XR 互動與人工智慧整合。提示內容窗口包含：

• 角色與準則：確立 LLM 為遵循房間規模 XR 環境最佳實踐的領域專家
• 套件管理：規範 XR Blocks 內依賴項的處理方式與預設樣式
• 源程式與範本：在上下文窗口內提供經過精選的 XR Blocks 範本與樣本源程式，減少幻覺現象並確保遵守有效 API 呼叫與既定設計模式

應用案例

評測展示多個由 Vibe Coding 生成的原型應用：

• 數學家教：視覺化歐拉定理，Gemini 智慧選擇四面體、立方體與八面體作示例，並允許使用者透過捏合切換不同高亮策略
• 物理實驗室：互動式天平實驗，使用者可拖曳不同重量的物體進行平衡學習
• 沉浸式化學：三組燃燒實驗（甲烷、乙烯、乙炔），搭配 3D 體積視覺化，提供安全的混合實境體驗
• 薛丁格的貓：量子疊加態演示，使用者捏合引導 3D 貓進入盒子，接近時盒子分裂揭示生死兩態，再次捏合坍縮為單一現實
• XR 排球與恐龍遊戲：展示手部互動與環境碰撞檢測、經典 Chrome 恐龍遊戲的 XR 版本

評測結果與現況

團隊基於 20 位內部參與者提供的 60 個提示建立「VCXR60」測試集。初期發現約 70% 成功率，主要錯誤源於 XR Blocks 本身 bug 或 API 幻覺。經過 11 次主要版本迭代後，目前 XR Blocks Gem v0.11.0 的評測結果顯示，使用「Pro Mode」能獲得最可靠的結果。簡單提示（如「20 秒內完成蒲公英」）在 Gemini Flash 上通常完成較快，但處理動畫與手部互動時，Gemini Pro 因思考過程需更多 token 而出錯率較低。