Part 6:Day 1 統整與 AI 協作心流

掌握 AI 協作的核心方法論

學習統整 AI 協作心法 工作流程 驗證檢查

曾慶良(阿亮老師) | AI 協作簡報實戰工作坊

AI 協作核心心法

用 AI 做簡報不是「讓 AI 幫你做」,而是「你和 AI 一起做」。

📝
描述需求
🤖
AI 生成
👀
測試效果
🔧
微調修正
關鍵原則:這個循環會重複很多次!每次只做「一小步」,累積成完整作品。

❌ 錯誤做法

  • 一次問太多功能
  • 不測試就繼續往下做
  • 出錯時不知道是哪步錯
  • 期待 AI 一次做完

✅ 正確做法

  • 每次只問「一個功能」
  • 每步都「立即測試」
  • 小步驟,好除錯
  • 循序漸進,逐步累積

Day 1 學習回顧

今天你學會了完整的 AI 協作簡報製作流程!

1
HTML 基礎入門 - 認識標籤、VS Code 操作
2
Reveal.js 簡報框架 - 快捷鍵、總覽模式、講者備註
3
手繪設計與 AI 生成 - Wireframe、Prompt 三要素、模板化
4
資料收集與 NotebookLM - AI 整理素材、自動化工具
5
Prompt 設計與內容生成 - 5 個 Prompt 組、批次生成
核心技能:你已經掌握「手繪 → AI 生成 → 內容填充」的完整工作流程!

Prompt 問法範本

好的 Prompt 有固定結構,用「範本」可以讓 AI 更精準理解你的需求。

// 簡報投影片生成範本

【角色】你是一個專業的簡報設計師

【任務】幫我生成一頁關於「{主題}」的投影片

【格式要求】
- 使用 Reveal.js 框架
- 標題在上方
- 內容分成 3 個重點
- 每個重點配一個 emoji

【風格】專業、簡潔、視覺化
範本優點:
1. 複製貼上,只改 {主題} 就能用
2. 每次產出風格一致
3. 可以存成 Skill 反覆使用

單功能提問原則

一次只問一件事,是 AI 協作最重要的技巧!

❌ 不好的問法

幫我做一個簡報,
要有 10 頁,
每頁都有動畫,
背景要漸層色,
還要有講者備註,
最後存成 PDF。
問題:太多需求混在一起,AI 容易漏掉或搞混。

✅ 好的問法

// 第一步
幫我建立 Reveal.js 簡報的基本架構

// 第二步
加上漸層背景,從藍色到紫色

// 第三步
為第一頁加上淡入動畫
優點:每步都能確認效果,出錯容易找到原因。

即時驗證的重要性

AI 生成的程式碼不一定正確,每一步都要立即測試!

💻
AI 生成
📋
複製到 VS Code
🌐
瀏覽器預覽
確認效果

驗證要點

網頁能正常開啟嗎?
有出現錯誤訊息嗎?(按 F12 開啟開發者工具)
畫面顯示的是我要的效果嗎?
互動功能(點擊、切換)正常嗎?
重要:驗證通過才能進行下一步!不要「假裝沒問題」繼續做。

簡報製作效果確認清單

完成簡報後,用這份清單確認品質!

📋 基礎檢查

HTML 檔案能正常開啟
左右鍵可以切換投影片
ESC 可以開啟總覽模式
S 鍵可以開啟講者備註
所有圖片都有正常顯示

🎨 視覺檢查

字體大小適中,遠處看得清楚
配色一致,沒有突兀的顏色
排版整齊,沒有重疊或超出
每頁內容不會太多(5-7 點為佳)
動畫效果自然,不會太花俏

卡關急救包

遇到問題時,先用這些方法排查!

🔴 網頁空白或亂碼

  • 檢查 HTML 標籤有沒有漏掉結尾
  • 確認 <html> <head> <body> 都有
  • 用 UTF-8 編碼儲存檔案

🔴 投影片不能切換

  • 確認 Reveal.js CDN 連結正確
  • 確認 Reveal.initialize() 有執行
  • 檢查 <section> 標籤是否完整

🔴 樣式沒有效果

  • 確認 CSS 放在 <style> 標籤內
  • 檢查選擇器名稱有沒有打錯
  • 確認沒有被其他樣式覆蓋

🔴 圖片顯示不出來

  • 檢查圖片路徑是否正確
  • 確認圖片檔案存在
  • 注意大小寫(Linux 區分大小寫)
萬用解法:按 F12 開啟「開發者工具」→ Console,看看有沒有紅色錯誤訊息!

AI 協作的三個層次

隨著經驗累積,你會逐步提升 AI 協作能力。

🌱 初學者

特徵:

  • 複製貼上 AI 的程式碼
  • 不太知道為什麼有效
  • 出錯時不知道怎麼改

目標:先讓東西能動

🌿 進階者

特徵:

  • 會修改 AI 的程式碼
  • 理解基本原理
  • 能自己排除簡單問題

目標:能微調和客製化

🌳 專家

特徵:

  • 設計 Prompt 範本和 Skill
  • 建立可重複使用的工作流
  • 教別人使用 AI 協作

目標:提升效率、傳承經驗

只要動手、持續練習,你就能不斷進步!每一次的嘗試都是成長的養分。

建立你的 Prompt 資料庫

把有效的 Prompt 收集起來,建立自己的「問法寶典」!

推薦收集的 Prompt

  • 建立 Reveal.js 基本架構
  • 設計漸層背景樣式
  • 製作表格投影片
  • 加入動畫效果
  • 整理 NotebookLM 資料
  • 生成簡報大綱
  • 修正 HTML 錯誤

儲存方式建議

方式 1:Markdown 檔案
建立 我的Prompt.md,分類整理
方式 2:Notion / HackMD
用筆記軟體管理,方便搜尋
方式 3:建立 Skill
學習 Part 7,把 Prompt 變成可執行的 Skill!

Day 1 成果展示

經過今天的學習,你應該已經完成:

📄

HTML 簡報模板

可重複使用的
Reveal.js 基礎架構

🎨

視覺設計稿

手繪或工具繪製的
Wireframe 設計

📊

NotebookLM 專案

整理好的
簡報素材資料庫

📝

內容大綱

簡報的章節架構
和重點整理

💬

Prompt 組

5 個可重複使用的
AI 提問範本

🎬

簡報初版

至少 5 頁的
HTML 簡報

Day 2:我們會完善簡報細節、優化視覺設計,最後部署到 GitHub Pages 讓全世界看到!

Part 6 完成!🎉

AI 協作心流已建立,繼續前往 Part 7 進階學習!

今日心法回顧:

1️⃣ 描述 → 生成 → 測試 → 微調 的循環
2️⃣ 單功能提問,一次只做一件事
3️⃣ 即時驗證,每步都測試
4️⃣ 建立範本,累積你的 Prompt 資料庫

進階學習:Part 7 - Skill 建立 →

Day 2 - 完善與上線 →