AI 協作簡報實戰：從手繪到上線 GitHub 的 HTML 簡報製作

📚

Day 1：HTML 簡報基礎與模板建立

實作 1-12 | 認識 HTML、建立模板、AI 協作內容生成

Day 1 將帶你從零開始認識 HTML，學會用 Reveal.js 製作簡報，並透過手繪設計讓 AI 幫你生成 HTML 程式碼。下半天學習使用 NotebookLM 整理資料，設計可重複使用的 Prompt 組，最後建立你的 AI 協作 Skill。

HTML 基礎入門

實作 1-2 | 認識標籤、VS Code 操作

Reveal.js 簡報框架

實作 3 | 快捷鍵、總覽模式、講者備註

手繪設計與 AI 生成

實作 4-6 | Wireframe、Prompt 三要素、模板化

資料收集與 NotebookLM

實作 7-9 | 資料整理、來源標註、內容大綱

Prompt 設計與內容生成

實作 10-12 | 5 個 Prompt 組、AI 生成內容

Day1 統整與 AI 協作心流

統整 | 課程回顧、AI 協作心法

進階技巧與 Skill 建立

進階 | README.md、資料夾結構、GitHub

🚀

Day 2：完善簡報與 GitHub 上線

實作 13-24 | 瀑布式卡片網頁、GitHub Pages 部署、AI 客服系統

Day 2 將帶你認識另一種網頁呈現方式——瀑布式卡片網頁，學習用 AI 快速生成完整模板，加入截圖和滾動動畫，然後把作品部署到 GitHub Pages 讓全世界都能看到。下午還會體驗 Fork 開源專案、部署 AI 客服系統到 Netlify，最後完成 README 撰寫與課程總結。

瀑布式卡片網頁基礎

實作 13-14 | div 容器、AI 生成卡片模板

真實專案與卡片內容

實作 15-16 | LINE 貼圖工具、AI 生成卡片文字

圖片美化與互動效果

實作 17-18 | 截圖插入、CSS 動畫、滾動效果

GitHub Pages 部署

實作 19-20 | 建帳號、上傳部署、Fork 開源專案

AI 客服系統部署

實作 21-22 | Netlify、Supabase、環境變數

上線測試與課程總結

實作 23-24 | README、手機測試、成果展示

課程認證測驗

隨機 10 題 | 80 分及格 | 認證證書下載