Gemini Canvas 教學：零代碼打造 3D 遊戲與實用 App，5 大玩法實測

唔識寫程式，都可以自己整遊戲、網頁同學習工具？今次 SYSTEMDADDY 帶你實測 Gemini Canvas 5 大玩法，由 3D 波波競速遊戲、戰機模型，到餐廳網站同互動英語學習 App，睇吓點樣透過文字提示，將構思變成可以操作嘅作品。

呢篇 Gemini Canvas 教學會整理影片入面嘅示範，同埋介紹生成作品後，點樣繼續修改內容、試用功能及處理錯誤。

Gemini Canvas 可以做到啲咩？

從影片示範可以見到，Gemini Canvas 可以根據你輸入嘅提示詞（Prompt），生成程式碼，並提供預覽，方便你直接檢查效果。

對初學者而言，你可以先用文字描述想要嘅作品，再透過對話逐步調整。例如要求加入遊戲關卡、修改網頁圖片，或者為學習工具增加發音功能。

零代碼入門，意思係你可以透過文字指令開始製作。 不過，生成結果仍然需要試用同檢查，部分功能亦可能要再修改先符合預期。

玩法一：製作 3D 波波競速遊戲

影片首先示範用 Gemini Canvas 製作 3D 彈珠競速遊戲。生成嘅作品包含立體賽道、不同顏色嘅波波，以及遊戲資訊介面，可以直接喺預覽畫面試玩。

製作呢類遊戲時，提示詞最好交代清楚玩法、操作方式同勝負條件，令 AI 更容易理解你想做嘅效果。

延伸練習 Prompt：

幫我製作一個可以喺瀏覽器遊玩嘅 3D 彈珠競速遊戲，加入斜坡賽道、障礙物、計時功能同重新開始按鈕，並顯示操作說明。

生成之後，可以先檢查控制是否正常、彈珠會唔會卡住，以及重新開始按鈕有冇作用，再逐項要求修改。

 

玩法二：參考圖片生成 3D 戰機模型

第二個示範係提供戰機圖片作參考，要求 Gemini Canvas 建立 3D 模型。影片展示咗 F-14 風格戰機，以及不同角度同顯示模式，包括線框效果。

呢個玩法適合用嚟探索物件展示、互動教材，或者簡單嘅 3D 概念原型。

延伸練習 Prompt：

參考我上傳嘅戰機圖片，製作一個可互動嘅 3D 模型展示頁面，支援旋轉、縮放，以及實體和線框模式切換。

要留意，示範展示嘅係根據參考圖生成嘅模型效果；如果你需要精確尺寸或者細節，仍然要另外核對。

 

玩法三：打造 3D 地球天氣儀

第三個示範將 3D 地球同城市天氣資訊結合。使用者可以選擇城市，再查看相應嘅天氣面板，令資訊呈現更加直觀。

呢類工具除咗外觀，仲要檢查資料來源。畫面成功顯示天氣，唔代表資料一定係即時更新。 如果想作日常查詢用途，應確認有冇接駁天氣服務，以及更新時間是否清楚。

延伸練習 Prompt：

製作一個互動地球天氣網頁，可以看見整個旋轉地球，支援搜尋及點選城市，顯示溫度、天氣狀況和資料更新時間。如果未接駁真實天氣資料，請清楚標示為示範數據。

玩法四：製作產品介紹及餐廳網頁

影片第四個示範係餐廳介紹網站，包括主視覺圖片、菜式展示及品牌介紹等內容。生成初稿後，可以繼續要求 Gemini 修改文字、圖片同版面。

對小店店主、自由工作者，或者想試做品牌網站嘅人嚟講，呢個方法可以幫你先建立一個可預覽嘅網站初稿。

延伸練習 Prompt：

幫我製作一頁中菜餐廳介紹網頁HTML5，採用黑金色設計，加入餐廳簡介、招牌菜式、菜單、地址及聯絡資料，並適應手機和電腦畫面。

準備正式使用之前，記得換上真實嘅店舖資料、價錢同可使用嘅圖片，並測試手機版面及各個按鈕。預览完成後，亦需要另外處理網站發布。

 

玩法五：建立互動英語學習 App

最後一個示範係基礎英語學習工具。影片展示咗圖片單字卡、發音、主題分類，以及測驗相關介面，將一般文字教材變成互動學習體驗。

如果想為小朋友或者英語初學者製作練習，可以先由少量常用單字開始，再逐步增加內容。

延伸練習 Prompt：

幫我製作一個適合英語初學者使用嘅互動學習 App，加入動物及水果單字卡，每張卡包含圖片、英文、中文意思和發音按鈕，並提供簡單選擇題測驗。

生成後，應逐項檢查圖片同單字是否配對、發音是否正常，以及測驗答案有冇錯誤。

 

 

以上 Prompt 為根據影片玩法整理嘅延伸練習，並非影片逐字稿。

▶️YouTube🔥🔥🔥👇🏻👇🏻👇🏻

🔥 [免費] 唔識寫 Code 都做到！Gemini Canvas 一句 Prompt 整出 3D 遊戲＋實用 App｜5 大玩法實測 #ai工具 #gemini #廣東話 #vibecoding

Gemini Canvas 新手操作流程

1. 開啟 Canvas，描述你想製作嘅作品

跟住影片嘅操作方式，喺 Gemini 選擇 Canvas，再輸入需求。提示詞可以包含以下資料：

• 作品類型：遊戲、網站、模型展示或學習工具。
• 使用對象：小朋友、顧客或一般使用者。
• 主要功能：操作按鈕、搜尋、發音或測驗。
• 視覺風格：配色、圖片方向及版面要求。

2. 生成後，先測試主要功能

唔好只睇畫面靚唔靚。遊戲要試操作，網站要按連結，學習工具要檢查答案。先確認核心功能正常，再調整外觀。

3. 用具體指令逐步修改

相比「幫我整好啲」，明確指出問題會更容易跟進，例如：

手機畫面嘅按鈕太細，請加大按鈕並調整間距。

或者：

點擊重新開始之後，計時器冇歸零，請修正。

4. 遇到錯誤，提供畫面或錯誤訊息

影片亦示範咗生成內容需要修正嘅情況。遇到問題時，可以將錯誤訊息交畀 Gemini，描述觸發問題嘅操作，再要求修正及重新測試。

常見問題

完全唔識寫程式，可以使用 Gemini Canvas 嗎？

可以透過文字提示開始製作，影片亦展示咗多種由提示詞生成嘅作品。不過，想令成品符合需求，仍然需要試用、描述問題同逐步修改。

一句 Prompt 就可以完成整個 App？

一句 Prompt 可以作為起點，但完成程度取決於需求複雜度同生成結果。影片中亦有修改同修正錯誤嘅過程，實際製作時應預留測試時間。

Gemini Canvas 生成嘅網頁可以直接當正式網站使用嗎？

可以先作為初稿或原型。正式發布前，應確認內容、圖片、連結、手機版面及資料功能正常，再安排部署。

影片提到免費使用，係咪代表完全冇限制？

影片以免費製作作為入門賣點，同時亦提及用量情況。實際可用模型、功能及額度，應以你帳戶當時顯示嘅資訊為準。