這次內容是在AI教育年會小組分享時，見到許凱琳老師a.k.a小葵神人的神技。我們在「語音備忘錄」前亂聊一通，結束後小葵神人把亂聊的逐字稿和Ｗord檔丟進Claude的Agent裡，不到幾分鐘的時間我們小組要繳的word檔就好了！真讓我大開眼界。因此第二次討論，我就主動提出錄下步驟的請求。
以下內容經過Gemini整理：
💡 核心觀念：什麼是「思考脈絡（Context/Logic）」？
在動手操作前，必須先理解老師強調的最重要觀念：AI 的產出品質，取決於你給它的「思考脈絡」而非單純的指令。
什麼是脈絡？ 以「雞兔同籠」數學題為例，網頁中的第一關、第二關、第三關、第四關，這種引導學生循序漸進理解的教學邏輯與步驟，就是脈絡。
為什麼脈絡重要？ 老師們擁有豐富的教學現場經驗，知道學生在哪裡容易卡關（迷思概念）。如果直接叫 AI 寫一個網頁，它只會給出非常陽春、空洞的產品（如一般的計算機）；但如果將你的教學脈絡輸入給 AI，它就能精準生成符合教學需求的互動引導教材。
🛠️ 第一階段：親手體驗與 Gemini 的前期溝通
在將任務完全交給 Agent 自動化之前，建議新手先使用 Gemini (Canvas) 等口語化 AI 工具進行「原型設計」，體驗人機互動的邏輯。
【步驟一】準備基礎教學資料
將你現有的教學手冊、課本內容、或一整份 PDF 教學手冊 準備好。
專業心法： 老師的專業資產（教學手冊）非常珍貴，將其作為 AI 的輸入源，能讓產出高度聚焦。
【步驟二】初步分析與迷思概念整理
不要一開始就叫 AI 寫網頁。先對 Gemini 發出以下指令，請它協助梳理教學邏輯：
💡 新手實戰對話範本：
「我目前有一份國小高年級的數學教學手冊。在進入互動網頁設計前，請先幫我整理：在這個學習階段，學生遇到這個單元（如：雞兔同籠/速率）時，常見的迷思概念有哪些？以及必須學會的核心概念有哪些？」
【步驟三】匯入「問題定義單」生成初版網頁
當 AI 幫你釐清邏輯後，即可將學校或團隊設定好的「問題定義單」丟給 AI，並下達具體需求：
指令重點： 格式指定為 HTML 輸出，內容需符合剛剛定義的教學脈絡。
產出結果： AI 會根據指令，生成第一版的互動式遊戲網頁（例如：利用圖形、卡片替換的方式，讓學生點選「增加一隻雞」或「減少一隻兔子」，觀察腳總數的變化，進而發現數學規律）。
🚀 第二階段：進階自動化——交給進階 Agent（如 Claude）
當你確認了初版網頁的「教學脈絡」可行後，進階的 Claude (或 CodeX) 等付費/進階 Agent 工具，就能幫你省去繁瑣的文書與編碼工作，甚至打通前後台。
[ 老師輸入口語化需求 ] ──> [ AI Agent 自動執行 ] ──> [ 自動上架部署至 GitHub ]
【核心操作流程】
設定不打擾模式： 訓練你的 Agent「不要一直問問題，直接把事情做好並上架」。
上傳指令與文件： 將問題定義單、PDF 教學檔，以及你剛剛在 Gemini 測試成功的脈絡直接提供給 Agent。
串接 GitHub（前端）： 指令 Agent 自動將生成好的網頁代碼上架、部署到你的 GitHub Pages 網路端，這樣網址就直接建置完成了。
串接 Supabase（後端資料庫）： 為了即時掌握學生的學習狀況，開啟 Supabase 後台權限給 Agent，讓它幫你把學生的操作數據（例如在第幾關卡關、座號、班級）即時回傳到後台資料庫。
註：錄音中提到，若 Supabase 超過一週沒使用可能會暫停，記得重新登入激活即可。
【人機協同：如何修正錯誤？】
如果網頁執行時出現錯誤（例如字體跑掉、邏輯出錯、或是功能失效），請直接截圖，將圖片丟給 Agent，並對它說：
「這裡執行出錯了，請對照原本的問題定義單，幫我把網頁修改成正確的邏輯。」
（Agent 會自動判讀圖片並修正網頁，完全不需手動改代碼。）
📝 第三階段：產出與優化（成果盤點）
透過 Agent 的強大能力，你可以讓它自動完成所有繁瑣的 Paperwork（行政與教學表單）。
📊 Day 2 / Day 3 表單自動填寫
將官方要求的成果表單（Word 檔、觀課記錄等）丟給 Agent，它會根據你們昨晚開會的錄音檔（或逐字稿），自動將「交流重點筆記」、「問題調整與解決方案」填入對應的表格中，完全符合格式要求。
🏆 學生端的有感優化
客製化後台格式： 指定班級座號格式（例如：
601XX），方便後台數據撈取。動態獎勵機制： 根據學生的破關記錄，除了讓老師下載關卡記錄外，也可以請 Agent 設計一個「自動生成獎狀/成就感勳章」的功能，提高學生的學習動機。
🛠️ 常見 AI 工具特性與選擇指南（老師私房心得）
建議新手，暑假是很好的充電期，可以先投資一個月試用付費工具，包準能大幅提升未來的工作效率：
| 工具名稱 | 特性與建議 | 新手適用度 |
| Claude (Paid) | 目前最聰明、做事最令人放心的 Agent。處理複雜任務、前後台串接最精準。 | ⭐⭐⭐⭐⭐ (極推) |
| CodeX | 代碼與網頁開發能力優秀，目前有提供免費試用一個月，適合跟著教學影片（如 30_Days 頻道）一步步操作。 | ⭐⭐⭐⭐ |
| Gemini (Canvas) | 最適合前期的口語溝通、邏輯梳理與概念生成。 | ⭐⭐⭐⭐⭐ (新手起手式) |
| Anti-Gravity | 適合處理簡單的重複性任務（如：整理電腦檔案），複雜的填表或寫網頁容易亂填，不建議交給它。 | ⭐⭐ |
🎯 新手結語：把 AI 當成一個「聰明的人」
使用 Agent 的最高境界不是盲目依從，而是「你教它做事，它也教你怎麼做」。在請 Agent 幫你上傳 GitHub 或串接資料庫時，多加一句：「請不要只是幫我做，還要一邊教我你是怎麼做的。」 如此一來，你不但能快速產出高品質的互動教材，你自己的 AI 素養與數位教學轉型能力也會隨之突飛猛進！
