不用寫程式-設計師也能用 Gemini 3 打造「3D魔法聖誕樹」！附提示詞
想要節省調試時間，思路比提示詞更重要！本文拆解了「設計師視角」的 AI 協作流：從情緒版搭建、指令骨架設計，到如何利用 Figma UI 截圖引導 Gemini 進行精確的前端實現。內含關鍵 Tip：當效果不理想時，如何利用 GUI 面板實時調參數，以及如何部署成網頁與朋友分享。
最近被 Gemini 生成的 3D 聖誕樹刷屏了？身為一個完全不會寫程式的設計師，我也成功做出了一個可以「手勢互動」且「在線許願」的夢幻聖誕樹！利用 Gemini 3 的邏輯構建能力，將粒子物理與視覺藝術結合。這篇文章不只分享提示詞，也分享我如何透過「積木式開發」思路，讓 AI 從聽不懂需求到精確執行，帶你一步步實現屬於你的魔法聖誕。
一、 核心底層邏輯：從「畫圖」到「構建」
在開始操作前，我想分享一個觀念。很多人在使用 AI 時，會把它當成一個進階版的「美圖秀秀」或「畫圖工具」。但在這一次的創作中，我更傾向於將 Gemini 3 視為我的 Creative Technologist（創意技術專家）。
這就是我之前提到的 Nano Banana Pro 的核心精神：AI 已經從單純的「模仿」進化到了「理解與邏輯構建」。它不再是隨機生成像素，而是理解了物理世界中的光影、粒子動力學以及前端的交互架構。當你以「構建一個世界」的思路去引導它時，它回饋給你的驚喜將遠超預期。
二、我踩過的最大坑：一開始就想讓 AI 一次做完所有事情
老實說，一開始我對 Gemini 的期待非常單純——
我把它當成一個什麼都懂的魔法機器。
於是我做了第一個錯誤示範：
在 Google AI Studio 裡，然後在同一個輸入框裡，一口氣描述了——
- 我想要一棵粒子組成的 3D 聖誕樹
- 要有粉金色、夢幻、魔法感
- 要可以跟滑鼠或手勢互動
- 還要能輸入願望，最後像煙火一樣綻放
- 最好還能直接變成一個可以分享的網頁
結果可想而知。
Gemini 並不是完全做不到，而是產出的東西既不穩定，也不可控：
有時候畫面是對的，但互動壞掉；
有時候功能有了，但整體視覺完全走樣；
更多時候，是改一個地方、壞三個地方。
當下我其實很挫折，甚至一度懷疑是不是自己「不夠會下指令」。
但後來我才意識到，問題不在 Gemini，
而在於 我給它的任務方式，本身就不合理。
這也是為什麼後來我發現，
與其不斷修改提示詞，不如先停下來，重想一件事：
👉「我到底要 AI 先做什麼，再做什麼？」
當我把這個問題想清楚之後，整個流程才真的開始順起來。
三、實戰二部曲：不寫Code的開發流
第一步：複製這段Prompt吧
還想看更多嗎？完整內容只對註冊用戶開放喔！
點下方的免費 Subscribe，馬上加入我們～
Prompt提供給各位，將這段發送給Google AI Studio。
2. 核心視覺風格 (Visual Style) 整體氛圍：營造「粉紅夢幻與科技感結合」的聖誕氛圍。背景色為深邃的黑粉紅色 (#050103)，搭配強烈的輝光 (Bloom) 和邊緣光 (Rim Light)。 幾何堆疊 (Instanced Geometry)：不要使用簡單的粒子點，而是使用大量的 3D 實體幾何體透過 InstancedMesh 實例化渲染以確保效能（總數 7000+）。
3. 樹葉：大量粉紅色系 (#FFB7C5, #FF69B4) 的八面體 (Octahedrons)，材質為半霧面金屬。 裝飾：高反光的白色/淡紫色立方體 (Cubes) 和二十面體 (Icosahedrons)，材質像寶石或鏡面。 螺旋絲帶：一條由白色微小四面體 (Tetrahedrons) 組成的螺旋線，環繞樹身向上盤旋（約 3 圈），線條要極簡優雅。
4. 進階手勢控制 (AI Gesture Control) 整合 MediaPipe (Hand Landmarker) 實現攝影機手勢辨識。 UI 回饋：在右下角顯示相機預覽（鏡像翻轉），並提供一個跟隨手指的自訂遊標。 手勢邏輯： 握拳/捏合 (Pinch/Grab)：觸發 TREE 狀態，粒子聚攏成聖誕樹。 張開手掌 (Open Hand)：觸發 EXPLODE 狀態，粒子被打散。 手掌移動：當手掌張開並左右移動時，控制場景中粒子群的旋轉角度（高靈敏度，模擬拖曳感）。
如果你想嘗試，可以參考我這套分層次的提示詞邏輯。
1. 角色與環境設定
「你是一位世界頂級的創意開發專家和圖形工程師。精通 React 19、Three.js、WebGL 和 Tailwind CSS。你對電影級的後處理特效（如 UnrealBloomPass）有深厚的造詣。現在，我們需要共同開發一個名為『Magic Wishing Tree』的高保真 WebGL 應用。」
2. 視覺風格描述（視覺語言）
「聖誕樹應由數萬個發光粒子組成。主色調為 #FFD700 和 #FFB6C1 的漸變。背景需深邃且具備景深感。粒子需要有微弱的布朗運動，看起來像是在魔法空氣中飄浮。」
3. 交互邏輯 (Interaction)
「場景必須對用戶做出反應。鼠標交互：當鼠標靠近時，粒子應輕微排斥或產生擾動。手勢互動：調用 MediaPipe Hands 庫，使用攝像頭追蹤用戶手勢。當手掌
張開時，聖誕樹綻放光芒；當握拳時，粒子向中心匯聚。
第二步：Try& Error
把上面那段 Prompt 貼到 Google AI Studio 後，你通常會拿到一個「能跑、但還不夠像你想像」的雛形。
不論你複製了多完整的 Prompt，第一次丟進 Google AI Studio 跑出來的結果，都只會是一個「看得到方向，但還很粗糙」的雛形。
而這其實是正常的，甚至是必要的，請根據你的想法慢慢建構吧。
四、結語
當我最終調試完畢，我直接在 Google AI Studio 裡「Share」出去，將它以一個網頁鏈接，發給朋友們後，大家都在感嘆「這真的是你自己做的嗎？」，這種分享快樂的感覺真的很開心。
我想說，雖然提示詞分享在內容中，但無法保證每個人都能生成一模一樣的效果。因為 AI 本身就有隨機性，所以每個人跑出來的結果都是獨一無二的版本。與其追求復刻，不如享受這個過程，擁抱 AI 給你的小驚喜。
小 Tips 是，你需要想清楚你想要什麼，再告訴 AI 先做什麼、後做什麼。順序清楚了，效率自然就高了。
