【STEAM教育素養】從規格書到 GitHub Pages：生成式 AI 助教課的 Vibe Coding 實戰指南
和 AI 討論出規格書，搓出網頁不就很簡單！」面對非本科系學生打開 GitHub 看到黑白代碼與 404 報錯的大腦燒毀瞬間，身為助教該如何引導？本文完整公開生成式 AI 助教課的 Vibe Coding 實戰心流：從引導 Gemini 制定嚴謹 Spec 規格書與程式碼、零伺服器成本的 GitHub Pages 雲端部署避坑 SOP，到建立 assets 多媒體資料夾精準對齊檔名。並收錄電子紙科普、Cyberpunk 維修艙、AI 心理測驗、致幻技微策展與咖啡對話等五大跨學科落地案例，引導創作者從玩玩具邁向真正的數位架構師。
▲ 圖片說明：AI助教課
🤖 「和 AI 討論出 Vibe Coding 程式規格書，再搓出一個網頁不就很簡單！」
上一週課堂結束時，很多非本科系的同學信心滿滿地這麼說。但當真正打開 GitHub、面對黑底白字的代碼檔案與神秘的 GitHub Pages 404 報錯時，大腦是不是瞬間燒起來了？這堂助教課，我們不講生硬的終端機指令，而是要帶大家用最接地氣的四步走心流，把天馬行空的靈感直接落地成可被全世界看見的線上專案！
⚡ 01// 課堂四大核心心流架構
許多同學問助教：「能不能直接把寫好的單檔 HTML 塞進 Google Sites 裡面就好？」答案是：快速預覽可以，但這完全失去學習現代軟體協作與版本控管的意義！本堂課的標準交付管線如下：
先定義架構再寫代碼！引導 AI 自動推導功能清單、UI 色調規範與 HTML/CSS/JS 程式碼。
建立公開 Repository，貼入代碼檔案，啟用 GitHub Pages 免費 CDN 零主機發布靜態網站。
建立 assets 目錄精準對齊檔名，結合圖像、音訊、3D 等 AIGC 工具矩陣豐富感官體驗。
跳脫死板作業！結合自身主修專業，打造兼具科技普及、社會關懷與互動趣味的成果。
🛠️ 02// 實戰流程 1：用 Gemini 提煉 Spec 規格書與程式碼
不要一開口就跟 AI 說「幫我寫個網頁」。資深創客的做法是：先讓 AI 成為系統分析師，輸出規格書（Specification），再要求產出程式碼！
AI 會先列出條理分明的規格清單，再將結構（HTML）、樣式（CSS）與邏輯（JavaScript）清晰分工。若同學想快速部署，亦可要求 AI：「請將所有 CSS 與 JavaScript 完整內嵌在單一
index.html 檔案中，方便直接在 GitHub Pages 運行！」
🌐 03// 實戰流程 2：GitHub 建立 Repo 與 GitHub Pages 部署
很多同學在這一關卡關，其實只要記住以下標準四步驟：
my-vibe-project），並務必勾選 Public（公開）。• 步驟 B：建立根目錄入口
index.html：點擊「Add file」➔「Create new file」，檔名必須一字不差叫做 index.html（大小寫須一致），將 AI 產出的程式碼完整貼上並提交（Commit changes）。• 步驟 C：啟動 GitHub Pages 服務：進入專案頂部選單 Settings ➔ 左側側邊欄點選 Pages ➔ 在「Branch」下拉選單將
None 改為 main（或 master），目錄維持 / (root)，按下 Save。• 步驟 D：等待部署並取得專屬網址：約 1~2 分鐘後重新整理頁面，頂部即會出現綠色打勾提示：
Your site is live at https://[帳號].github.io/[專案名]/！
1. 檔名打成 Index.html、home.html 或 index.html.txt（Windows 常見副檔名隱藏陷阱）。
2. 儲存庫設成 Private，但免費版帳號不支援私有倉託管 GitHub Pages。
3. GitHub 後台剛按下 Save 需要 60~90 秒進行 Actions 自動建置，請給伺服器一點點時間喝杯咖啡！
🎨 04// 實戰流程 3：上傳 assets 素材與 AIGC 多模態矩陣
純文字網頁太單調？身為生成式 AI 課堂的學生，我們當然要讓 AI 生成的各種多媒體內容（AIGC）成為網頁的主視覺與聲光效果！
assets 目錄：在電腦中建立名為
assets 的資料夾，將背景圖（bg.jpg）、角色立繪（avatar.png）、背景音樂（theme.mp3）集中存放。上傳至 GitHub 時，直接在網頁端將 assets 資料夾拖曳至上傳區塊。
網頁之所以圖片破圖，99% 是路徑大小寫或層級寫錯：
| 素材向度 | 具體應用情境 | 推薦生成式 AI 工具 |
|---|---|---|
| 🖼️ 圖像視覺 | 科技感背景、角色立繪、海報宣傳圖、三視圖 | Midjourney, Stable Diffusion, Flux |
| 📝 文本設定 | 世界觀小說、NPC 對話、劇情文案、名詞解釋 | Google Gemma, ChatGPT, Claude |
| 🎵 音訊音效 | 賽博龐克背景音樂、按鈕互動音效、ASMR 語音 | Suno AI, Udio, ElevenLabs |
| 🎬 影片動畫 | 首頁動態 Banner、情境轉場短影音 | Google Veo, Runway Gen-3, Luma Dream Machine |
| 🧊 3D 與空間 | 網頁可旋轉 3D 道具模型、VR 360 度空間背景 | Meshy AI, Tripo 3D, World Labs, Genie |
生成式 AI 產出的圖像與音訊在版權歸屬與商業條款上仍持續演進。在課堂作品中，請務必養成良好習慣：主動標註使用的 AIGC 模型名稱，避免直接拿具有爭議的侵權風格進行商業化宣傳。
🌟 05// 實戰流程 4：學科 ✕ Vibe Coding 五大跨界展示案例
不要再做千篇一律的個人簡歷了！看看助教如何將文科、商管與科技管理的不同學科背景，轉譯成五款好玩又具備深度意義的 GitHub Pages 應用：
• 核心理念：將硬梆梆的電子紙雙穩態與微膠囊技術，轉化為直觀的互動圖解與營收分析平台。
• 使用工具：Antigravity ✕ Perplexity 深度搜尋 ✕ 企業白皮書 PDF。
• 🔗 線上體驗：點此造訪 元太科技電子紙科普平台
• 核心理念：讓使用者化身未來電子工程師，在霓虹閃爍的修配廠中模擬修復壞軌的電子墨水螢幕。
• 使用工具：Antigravity ✕ 3D 零件渲染 ✕ 遊戲化互動設計。
• 🔗 線上體驗：點此造訪 電子紙維修互動艙
• 核心理念：探討現代人對虛擬伴侶與聊天機器人的心理投射，引導反思數位倫理，兼顧媒體資訊識讀。
• 使用工具：Antigravity ✕ 科技倫理調查 ✕ 動態計分演算。
• 🔗 線上體驗：點此造訪 AI 情感依賴心理測驗
• 核心理念：結合原創小說世界觀、QR Code 實體掃描互動與沉浸式電影海報視覺，打造線上微策展空間。
• 使用工具：Google AI Studio ✕ AI 生成圖像後製 ✕ 直連 GitHub 導出。
• 🔗 線上體驗：點此造訪 致幻技電影館
• 核心理念：把精品咖啡協會（SCA）艱澀的沖煮與烘焙論文，餵給 AI 消化後轉譯為傲嬌女主角的咖啡對話劇本！
• 使用工具：Google AI Studio ✕ 專業技術論文 ✕ 去背角色立繪。
很多非本科生會焦慮地覺得：「我只是用 AI 拼湊出代碼，這算寫程式嗎？」
助教想告訴大家：在生成式 AI 時代，程式代碼已經降級為通用的建築磚塊，真正不可替代的是你的『跨領域痛點洞察』、『規格書定義能力』與『審美素養』！當你能把文學、商管、心理學或咖啡學問，透過 GitHub Pages 轉化為任何人都能點開體驗的互動產品，你就是真正賦予技術靈魂的數位架構師！
🤔 共同討論：你在這次 Vibe Coding 實作中，最想解決什麼專業領域的痛點？
是想把系所厚重的研究論文做成互動懶人包？還是想為自己的社團設計一套兼具音樂與動態的展示頁面？
在部署 GitHub Pages 或引導 Gemini 寫 Spec 的過程中遇到了什麼有趣或崩潰的 bug 嗎？
歡迎在 NTU COOL 討論區或實體課堂隨時與助教交流，讓我們一起用 AI 玩出有溫度的跨界作品！