VIBE CODING · 2026-10-17 · 按老師補錄整理
製作午餐網站，發佈並繳交
35 個步驟、35 段短 GIF：Classroom → Gem 問答 → Canvas 預覽 → Google Sites → 繳交。點「播放這一步」觀看動作；再點可停止。每次只播放一段。
Windows 學生版：Ctrl+A 全選、Ctrl+C 複製、Ctrl+V 貼上。錄影使用 Mac，畫面與快捷鍵顯示可能不同。問答中的答案只供示範，你可以按自己的意願與設計需要選擇；請以自己當前題目的選項作答。影片示範「意見唔同 → 傳炸彈」，你的問答流程和成品可以不同。
下載靜態 PDF（35 個步驟）
開啟 Gem
步驟 01 · 原片 00:04 · 6 秒 GIF
進入課堂作業
點選 Classroom 上方的「課堂作業」。
看見甚麼：顯示課堂作業清單。
步驟 02 · 原片 00:08 · 4 秒 GIF
展開 Vibe Coding 作業
點選「Vibe Coding 氣氛式編程」。
看見甚麼：作業卡展開，見到老師提供的 Google Gemini 連結。
步驟 03 · 原片 00:10 · 6 秒 GIF
開啟老師提供的 Gem
點選作業卡內的「Google Gemini」。
看見甚麼：另一分頁開啟 Gem。錄影中的名稱是 Gem Instruction。
Gem 問答
步驟 04 · 原片 00:28 · 7 秒 GIF
開始對話
在輸入框輸入「Hi」，再送出。
看見甚麼：對話出現 Hi；等 Gem 回覆第一題後再回答。
步驟 05 · 原片 01:16 · 9 秒 GIF
選擇目標使用者
按自己的設計需要回答目標使用者題。錄影示範選 A：本校需要外出午膳的學生。 在下方輸入框輸入所選字母，再送出。
看見甚麼：Gem 會按你的答案繼續提問。示範答案只供參考，毋須跟錄影選同一項。
步驟 06 · 原片 01:59 · 9 秒 GIF
選擇午餐問題
按自己想解決的午餐問題選答案。錄影示範選 B：意見唔同。 在下方輸入框輸入所選字母，再送出。
看見甚麼：留意自己畫面中的選項與下一題；不同答案可能走不同的問答流程。
步驟 07 · 原片 02:19 · 9 秒 GIF
選擇遊戲
閱讀玩法選項，再選自己想製作的遊戲。錄影示範選 A：傳炸彈。 在下方輸入框輸入所選字母，再送出。
看見甚麼：Gem 記錄你選的玩法，再繼續提問。A／B／C 等字母只對應當前題目，請先讀選項。
步驟 08 · 原片 02:42 · 9 秒 GIF
選擇篩選功能
選擇自己需要的篩選功能。錄影示範選 D：全部都要。 在下方輸入框輸入所選字母，再送出。
看見甚麼：Gem 會把你的選擇加入規格；示範包含預算上限、食物類型及步行時間上限。
步驟 09 · 原片 03:01 · 8 秒 GIF
選擇外觀
選擇自己喜歡的外觀風格。錄影示範選 C：遊戲機。 在下方輸入框輸入所選字母，再送出。
看見甚麼：Gem 記錄你的外觀選擇；成品可以與錄影不同。
步驟 10 · 原片 03:24 · 9 秒 GIF
選擇品質要求
選擇自己重視的品質要求。錄影示範選 A：主要按鈕至少 44×44 像素。 在下方輸入框輸入所選字母，再送出。
看見甚麼：Gem 把你的品質要求加入規格，製作完成後再檢查是否做到。
步驟 11 · 原片 03:48 · 9 秒 GIF
選擇結果資料
選擇希望結果頁顯示的資料。錄影示範選 C：步行分鐘。 在下方輸入框輸入所選字母，再送出。
看見甚麼：完成問答後，Gem 整理你的規格與 Canvas 製作提示詞。若你的畫面有其他問題，按題目繼續回答。
交接 Canvas
步驟 12 · 原片 04:11 · 7 秒 GIF
複製完整規格與提示詞
先點一下生成文件的文字內容區，再按 Ctrl+A 全選，然後按 Ctrl+C 複製。
看見甚麼：確認選到完整規格、玩法及餐廳資料，唔好只選標題。以下快捷鍵均為 Windows 按法；錄影示範使用 Mac。
步驟 13 · 原片 04:20 · 7 秒 GIF
開普通 Gemini 新對話
點左側「新對話」圖示。
看見甚麼：離開 Gem 的對話，開到普通 Gemini 輸入頁。
步驟 14 · 原片 04:26 · 8 秒 GIF
選用 Canvas
在工具選單選擇「Canvas」。
看見甚麼：輸入框下方出現 Canvas 標記。
步驟 15 · 原片 04:38 · 10 秒 GIF
貼上製作提示詞
先在輸入框按 Ctrl+V 貼上完整提示詞；送出前，點輸入框右下方的模型選單，選「3.6 Thinking」（思考型），然後送出。
看見甚麼：確認 Canvas 已選用、模型顯示思考型，再送出並等待生成。錄影的模型選單可見「3.6 Thinking」。
步驟 16 · 原片 06:10 · 6 秒 GIF
展開作品畫面
生成完成後，點作品面板右上角、關閉（×）左邊的展開圖示（兩個對角角形，見紅框），把作品畫面放大。
看見甚麼：作品面板展開，方便查看和試用網站。這一步要按展開圖示。
步驟 17 · 原片 07:55 · 8 秒 GIF
試用新增 Gemini 功能
在 Canvas 預覽右側的直向工具列，點 Gemini 星形圖示「新增 Gemini 功能」，讓 Gemini 嘗試為程式加入 AI 功能。
看見甚麼：等待修改完成，再在預覽中試用新增的 AI 功能，觀察效果；完成後才複製更新後的程式碼。錄影示範加入 AI 雷達等功能。
放到 Google Sites
步驟 18 · 原片 08:46 · 4 秒 GIF
複製 HTML 程式碼
切換到「程式碼」，先用滑鼠點一下程式碼內容框，按 Ctrl+A 全選，再按 Ctrl+C 複製。
看見甚麼：確認程式碼呈藍色選取；如果選到整個網頁，先重新點程式碼內容框。此處要複製完整 HTML 程式碼。
步驟 19 · 原片 08:56 · 10 秒 GIF
開啟 Google 協作平台
從 Google 應用程式選單開啟「協作平台」。
看見甚麼：進入 Google Sites 首頁；載入所需時間按環境而異。
步驟 20 · 原片 09:05 · 7 秒 GIF
建立空白網站
點「空白網站」。
看見甚麼：開啟網站編輯畫面後，先在左上角改網站名稱，再繼續嵌入程式碼；下一項附有示範位置。
步驟 21 · 原片 09:11 · 8 秒 GIF
修改網站名稱並刪除頁首
點左上角「未命名的網站」修改網站名稱。改名後，把滑鼠移到頁首左側，點垃圾桶圖示「刪除頁首」。
看見甚麼：左上角保留新網站名稱，原本「你的頁面標題」整塊頁首消失，接著便可嵌入程式碼。短片先示範刪除頁首，再改名；這兩項操作都要完成。
步驟 22 · 原片 09:25 · 6 秒 GIF
開啟嵌入視窗
在右側「插入」頁籤點「內嵌」。
看見甚麼：出現「嵌入網頁內容」對話框。
步驟 23 · 原片 09:30 · 5 秒 GIF
貼入 HTML
選「嵌入程式碼」，點一下大輸入框，再按 Ctrl+V 貼上完整 HTML。
看見甚麼：程式碼欄出現 HTML；點「下一個」進入嵌入預覽。
步驟 24 · 原片 09:34 · 6 秒 GIF
插入嵌入內容
確認預覽後點「插入」。
看見甚麼：遊戲頁出現在 Sites 頁面內。
步驟 25 · 原片 09:40 · 7 秒 GIF
放大嵌入區域
拖拉嵌入框邊緣的藍色控制點，增加顯示尺寸。
看見甚麼：嵌入框變大，顯示更多遊戲設定。影片示範拖拉，而非修改程式碼。
發佈網站
步驟 26 · 原片 09:55 · 6 秒 GIF
開始發佈
點網站編輯器右上方的「發佈」。
看見甚麼：出現「發佈你的網站」視窗。
步驟 27 · 原片 10:03 · 10 秒 GIF
設定網站網址
在「網址」欄按規範輸入：lunch＋班別＋學號。例如 3A 班 99 號輸入 lunch3A99，中間不加空格。
看見甚麼：錄影示範是 3A 班 99 號。請改用自己的班別和學號；網址通過檢查會出現勾號。
步驟 28 · 原片 10:20 · 8 秒 GIF
設定誰可以查看
在已開啟的「管理」視窗中，點「已發佈的網站」一行的存取權下拉選單，按老師要求選擇，再點「完成」。
看見甚麼：錄影改成「公開」，草稿仍是限制。按課堂要求選擇；校內作品不一定需要公開。
步驟 29 · 原片 10:30 · 9 秒 GIF
確認發佈
返回發佈視窗後點「發佈」。
看見甚麼：影片出現發佈中，之後顯示已成功發佈。
步驟 30 · 原片 10:39 · 9 秒 GIF
查看已發佈網站
發佈完成後，點右上角「發佈」按鈕右邊的小箭咀，再點「查看已發佈的網站」，開啟已發佈的內容。
看見甚麼：已發佈的網站在另一分頁開啟。先完成這一步，下一步才複製該分頁的瀏覽網址。
步驟 31 · 原片 10:49 · 7 秒 GIF
複製瀏覽網址
在剛開啟的已發佈網站分頁，點一下網址列，按 Ctrl+A 全選，再按 Ctrl+C 複製。
看見甚麼：複製的是網站瀏覽網址，唔係 Sites 編輯網址；下一步貼回 Classroom。
繳交作品
步驟 32 · 原片 11:00 · 5 秒 GIF
選擇新增連結
返回作業，於「新增或建立」選「連結」。
看見甚麼：開啟「新增連結」視窗。
步驟 33 · 原片 11:03 · 5 秒 GIF
加入網站連結
點連結輸入框，按 Ctrl+V 貼上已發佈網站網址，再點「新增連結」。
看見甚麼：「你的作業」出現網站連結附件。檢查是自己的已發佈網站。
步驟 34 · 原片 11:07 · 6 秒 GIF
繳交作業
點「繳交」，在確認視窗再點「繳交」。
看見甚麼：Classroom 開始提交這個連結附件。
步驟 35 · 原片 11:12 · 4.5 秒 GIF
確認已繳交
查看「你的作業」右上角狀態。
看見甚麼：影片最後清楚顯示綠色「已繳交」及「取消繳交」按鈕。