AI寫的 助教現場大揭秘！從 Gemini 規格書到 GitHub Pages 部署的 Vibe Coding 實戰指南（Day 25 - 外傳）

「和 AI 討論出 Vibe Coding 程式規格書，再搓出一個網頁不就很簡單！」
上一週課堂結束時，台下很多非本科系的同學信心滿滿地這麼說。
欸⋯⋯是這樣，但也不完全是這樣～
當真正打開 GitHub、看見冷冰冰的代碼目錄，
還有那個神秘又陰魂不散的 GitHub Pages 404 報錯時⋯⋯
同學們：助教救命啊啊啊！！！（大腦不會燒起來嗎🫠）

痛點剖析與日常觀察：非本科生的 Git 恐懼症與 Google Sites 平替版爭扎

下一週剛好是我在政大的「生成式 AI 助教課」。這一週我們給同學們指派了作業目標：與 AI 協商討論出專屬的 Vibe Coding 程式規格書（Spec），然後靠自然語言生成出一個具備互動性的專案網頁。

聽起來很美好對吧？但當理想照進現實，GitHub 的操作對於第一次接觸的同學來說，真的就像外星科技一樣新鮮又令人不知所措。

有的同學很聰明，可能會問：

「助教～如果我用入門偷吃步，把 Vibe Coding 搓出來的單檔 HTML 直接嵌入（Embed）到 Google Sites 裡面做快速呈現，這樣可以嗎？」

老實說，這招助教在iThome鐵人賽的【Day 2】文章也有教過，確實是個超好用的文科偷吃步！但這完全不符合我們這堂課的作業要求啦！

因為在真實的團隊協作與軟體開發中，理解靜態網站託管、版本控制以及資源路徑，是現代人必備的數位素養。GitHub Pages 部署過程中，初學者一定會踩進各種坑，大家除了多翻閱 NTU COOL 上的文件筆記，更要學會把報錯直接截圖丟給 AI 共同排錯！

看來，身為助教就必須在課堂現場急速演示一次完整的交付閉環！

Vibe Coding 實戰拆解：從規格書到 GitHub Pages 的四大核心心流

現場我們拆解成四大步驟，帶同學們走過一次完整的高速流程：

步驟 1：先展示用 Gemini 搓出 Spec 規格書與程式碼

最常見也最好上手的生成式 AI（Gemini、ChatGPT、Claude），其實已經完全具備強大的 Vibe Coding 能力。但很多同學一開口就是：「幫我寫一個網頁」，結果產出雜亂無章。

記住助教的心法：先要規格書（Spec），再要代碼！

核心 Prompt 模組：系統架構分析師與前端規格書制定

你現在是一位資深前端架構師與 UI/UX 設計師。我想為我的課程專案打造一個「互動網頁」。
請先不要急著寫代碼，請先為我制定完整且結構嚴謹的規格書（Specification）：
1. 核心目標與目標客群分析
2. 視覺風格定義（如：科幻未來風、復古像素風或極簡暗黑模式）與 HEX 色票規範
3. 功能模組拆解（標題導航、核心互動體驗區、資訊卡片、底部狀態欄）
4. 檔案架構規劃（index.html、style.css、app.js 以及 assets/ 靜態資源目錄）

確認好這份規格書後，再一步一步為我撰寫完整且不省略的 HTML、CSS 與 JavaScript 程式碼！

💡 提示：以上內容直接複製即為標準 Prompt！如果想單檔快速部署，可補上一句：「請將所有樣式與腳本完整整合於單一 index.html 檔案中！」

步驟 2：實作 GitHub 建立 Repo，貼上代碼並設定 GitHub Pages

拿到代碼之後，我們就要把它託管到雲端：

1. 建立儲存庫（Repository）：登入 GitHub 點擊「New」，輸入專案名稱，務必勾選 Public（公開）。
2. 新增入口檔案：點擊「Add file」➔「Create new file」，檔案名稱必須精準命名為 index.html（Linux 系統嚴格區分大小寫，千萬不能打成 Index.html 或 home.html！）。
3. 貼入代碼並 Commit：把 Gemini 寫好的完整代碼貼入編輯區，點擊右上角綠色按鈕「Commit changes」。
4. 開啟 GitHub Pages 服務：
   • 進入專案的 Settings ➔ 點選左側側邊欄的 Pages。
   • 在「Build and deployment」的 Branch 下拉選單中，將 None 改選為 main（或 master），資料夾維持 / (root)，按下 Save！
   • 等待約 60 秒（GitHub Actions 自動部署），重新整理頁面，頂部就會出現綠色的專屬公開網址（https://[使用者名稱].github.io/[專案名稱]/）！

步驟 3：現場示範建立 assets 資料夾與 AIGC 多模態素材矩陣

純文字網頁太枯燥？既然是生成式 AI 的課，我們當然要用 AI 生成的內容（AIGC）把網頁塞滿滿！

助教建議大家在本地電腦建立一個叫 assets 的資料夾，把所有圖片、音訊集中管理後上傳至 GitHub：

⚠️ 智慧財產權重要叮嚀：AIGC 的著作權與商用權限仍處於法律爭議期，大家在公開作品時務必標註 AI 工具來源，並對引用的素材負起資訊倫理責任喔！

助教避坑鐵律：路徑檔名一定要對得上！

在程式碼中引用素材時，路徑必須 100% 精準吻合：

• ❌ 錯誤：引用本地硬碟路徑（file:///C:/Users/...，傳上網別人絕對破圖）
• ❌ 錯誤：大小寫打錯（代碼寫 assets/Bg.jpg，實際檔案是 assets/bg.jpg）
• ✅ 正確：一律使用相對路徑 assets/bg.jpg！

若介面版面破掉，隨時複製 Console 報錯丟回給 Gemini 進行「迭代與修正」，這就是標準的 Vibe Coding 節奏！

步驟 4：學科 ✕ Vibe Coding！五大跨領域實戰範例大公開

台下同學常問：「助教，我沒有靈感怎麼辦？我不是資工系的，能做什麼？」

別慌！試著用你的本門學科 ✕ Vibe Coding，看看助教自己過去隨手搓出來的五個跨界範例：

• 🐾 案例 1：科技普及教育 ✕ 科技企業分析（元太科技電子紙技術科普平台）：
  結合研報 PDF、官網資料與 Perplexity 深度搜尋，用 Antigravity 搓出具備微膠囊動態模擬與營收分析的互動平台。
  🔗 展示連結：點此造訪 元太科技電子紙科普平台

• 🐾 案例 2：硬體原理 ✕ Cyberpunk 遊戲化維修艙（電子紙修理小遊戲）：
  將生硬的面板損壞排錯，包裝成霓虹閃爍的未來修配艙，引導玩家手動替換故障排線與 3D 模組。
  🔗 展示連結：點此造訪 電子紙維修互動艙

• 🐾 案例 3：人機互動議題 ✕ 心理測驗體驗（AI 情感依賴度心理測驗）：
  探討現代人對 AI 虛擬伴侶的依戀現象。特別加上媒體資訊識讀宣告：「本測驗純屬體驗遊戲，非臨床診斷」，啟發反思數位倫理。
  🔗 展示連結：點此造訪 AI 情感依賴心理測驗

• 🐾 案例 4：科幻文學策展 ✕ 戀愛互動情境（致幻技電影館）：
  將自己寫的原創小說轉化為線上策展館，配合實體 QR Code 掃描與後製去背的 AI 角色，甚至能從 Google AI Studio 一鍵直連 GitHub！
  🔗 展示連結：點此造訪 致幻技電影館

• 🐾 案例 5：SCA 專業農業文獻 ✕ 角色對話遊戲（咖啡色計劃）：
  直接把精品咖啡協會（SCA）艱深厚重的學術論文餵給 AI，讓 AI 轉譯成傲嬌女主角與玩家討論咖啡萃取學問的微型戀愛對話遊戲。

深度反思：跳出玩具思維，用 Vibe Coding 打造有社會價值的產物

在課堂的最後，助教想給所有非本科的同學一句真心話：

很多人會糾結：「我一行程式碼都沒手打，完全靠 AI 搓出來，這算我做的嗎？」

但在生成式 AI 的時代，語法與代碼早就已經降級為隨手可得的建築磚塊。真正值錢且無法被取代的，是你腦袋中對自己學科專業的洞察、你對問題的敏銳度，以及你如何將看似毫不相關的領域（文學、心理、商管、咖啡）與科技碰撞出火花的能力！

學會用 GitHub 把成果架起來，不單單只是交作業、做做靜態頁面，更是讓你有能力打造出好玩的、甚至帶有社會價值與意義的真實產物！🔥

📌 本篇重點整理