第一場共備會議時間:

2026-07-27 (一) 下午1:30

第一場大群會議網址： http://meet.google.com/xbm-jfdu-vxh

第二場共備會議時間:

2026-08-06 (四) 下午1:30

第二場大群會議網址： http://meet.google.com/hbe-tdsu-oic

一、大群共同說明（15分鐘）

• 指導教授進行社群說明。
• 專長教師介紹共備主題與討論方向

參與人員：

夏綠荷輔導教授＋侯玫如專長教師、李國源專長教師、范村生專長教師＋33位種子教師（共37人）

二、小組共備討論（45分鐘）

• 依社群主題進行教學交流與討論
• 分享教學實務、數位工具應用或課程設計
• 各小組將推派1位種子教師進行成果分享

參與人員：

14人(李國源 專長教師+13位種子教師)

李國源 老師小組會議網址：http://meet.google.com/cwx-mipk-tmu

三、大群成果分享與教授回饋（30分鐘）

PS:這個階段會再回到大群的網址做分享

四、成果

共備社群兩場的會議結束，會依照專長老師的主題與與其所帶領的共備討論後，會產出教案或課程包或操作文件資料等，老師們完成繳交一份成果。

(成果產出內容可以是Word檔、PDF檔、PPT簡報)

一、觀看影片

請先觀看張頌宇老師的影片：

🎬 【AI 系列 EP1】三分鐘學會 Vibe Coding

觀看時請特別思考：

• Vibe Coding 和傳統寫程式有什麼不同？

• AI 在製作過程中扮演什麼角色？

• 使用者仍然需要做哪些判斷、修改與測試？

• 如果將這種方式帶進課堂，學生真正應該學會什麼？

二、動手實作

請參考影片的方式，運用 Gemini 或其他生成式 AI，完成一個簡單的小遊戲或互動作品。

不需要追求複雜或華麗，重點是親自經歷以下過程：

提出想法 → 向 AI 說明需求 → 產生作品 → 實際測試 → 發現問題 → 修改完善

若作品尚未完全成功，也歡迎分享半成品、錯誤畫面或卡關經驗。失敗與修正過程同樣是重要的共備素材。

不需要是資訊老師，也能用 AI 製作簡單的課程互動小遊戲，例如：

• 國文：成語配對、修辭辨識、課文角色對話選擇。

• 英文：單字配對、句型重組、情境會話闖關。

• 數學：心算挑戰、公式配對、生活情境解題。

• 自然：元素分類、實驗步驟排序、食物鏈配對。

• 社會：歷史事件排序、地理位置猜謎、公民情境判斷。

• 藝術：色彩搭配、作品風格辨識、音樂節奏挑戰。

• 健體：健康飲食分類、運動安全判斷、急救步驟排序。

• 家政：食材分類、烹調流程排序、服裝搭配挑戰。

• 商管：消費決策、行銷配對、模擬商店經營。

• 輔導：情緒辨識、人際溝通與生涯選擇情境題。

只要先告訴 AI「教學主題、學生年級、題目內容及遊戲方式」，就能從配對、選擇、排序或闖關等簡單形式開始。重點不是程式多複雜，而是遊戲是否符合學習目標，以及教師能否檢查內容、測試玩法並說明設計理由。

三、將成果貼到 Padlet

請新增一則貼文，標題格式為：

姓名｜作品名稱

貼文請盡量包含以下內容：

1. 作品介紹
   這是一個什麼樣的遊戲或互動作品？適合運用在哪一個科目、單元或年級？

2. 作品成果
   請附上作品連結、操作畫面、截圖或短片。

3. 我的原始構想
   在請 AI 協助以前，我希望完成什麼？有哪些基本規則或學習目標？

4. AI 協助的部分
   AI 幫我產生了哪些內容，例如構想、畫面、文字、程式或修改建議？

5. 我負責的部分
   哪些內容是由我決定、修改、測試或否決的？

6. 一次問題與修正經驗
   AI 曾經做錯、誤解或產生不適合的內容嗎？我是如何發現並修正的？

7. 教學應用與思考
   如果讓學生進行這項活動，我會如何確認學生真的有思考，而不是只接受 AI 產出的結果？

四、準備90秒分享逐字稿

請使用 AI 協助整理一份約 90 秒的分享逐字稿，並自行確認內容是否符合實際經驗。

分享內容建議包含：

• 我想解決的教學問題或作品構想。

• 我完成了什麼作品。

• AI 幫我做了什麼。

• 我做了哪些判斷、修改或測試。

• 這次實作帶給我的教學啟示。

可使用以下提示詞：

我要參加教師共備分享，請根據以下資料，幫我整理一份約90秒、口語自然、適合教師分享的逐字稿。內容依序包含：作品構想、作品功能、AI協助的部分、我親自判斷或修改的部分、一次問題與修正經驗，以及對教學應用的反思。請勿捏造我沒有提供的經驗。以下是我的資料：＿＿＿＿＿＿。

五、共備討論焦點

第一次共備時，我們將透過 Padlet 作品走讀與案例分享，共同討論：

當 AI 可以快速完成作品時，學生最需要保留哪些「人腦先行」的能力？

也請大家思考：

• 哪些工作可以交給 AI？

• 哪些決定不能交給 AI？

• 如何從學習成果中看見學生的思考與修改歷程？

• 教師應該評量成品，還是同時評量構想、提示、測試與反思？

• 學生如果無法解釋作品，是否能算真正完成學習？

共備結束前，我們將推派一位老師，代表本組到大群分享實作成果及人機協作的教學反思。

重點不是證明「我沒有使用 AI」，而是能夠說明：「哪些由我決定、哪些交給 AI 執行，以及我如何查核最後的結果。」

一、觀看影片

🎬 一行程式沒寫，零基礎，用50個小時也能做出遊戲？我是怎麼做到的？

一般聊天式 AI 主要根據對話產生文字或程式；AI 代理人在取得使用者授權後，還能存取指定的本機資料、操作檔案與開發工具，持續執行較長時間的任務，並依照檢核目標反覆測試、修正，直到完成或需要人類協助。

觀看時請思考：

• 人類如何把想法轉換成代理人能執行的任務？

• 代理人做了哪些規劃、製作、測試與修正？

• 哪些決定仍必須由人類負責？

• 「代理人說已完成」是否等於作品真的正確？

二、動手體驗

請使用 Antigravity 或其他 AI 代理人工具，嘗試完成一項課程作品。不必製作大型遊戲，也不要求資訊背景，可從小任務開始，例如：

• 國文：成語闖關、文本情節排序。

• 英文：單字配對、情境會話遊戲。

• 數學：心算挑戰、生活解題關卡。

• 自然：實驗流程排序、物種分類。

• 社會：歷史事件排序、地理猜謎。

• 藝術或生活科技：色彩、音樂、材料辨識遊戲。

• 其他：製作教材網頁、題庫或互動練習。

建議體驗一次完整循環：

人腦定義目標 → 代理人規劃與執行 → 自動測試 → 發現問題 → 修改 → 人類驗收

即使作品未完成，也可以分享代理人的工作紀錄、錯誤結果及卡關原因。

三、將成果貼到 Padlet

貼文標題格式：

姓名｜作品或任務名稱

內容請包含：

1. 教學目標：希望學生練習什麼？

2. 任務規格：我如何向代理人說明需求與完成標準？

3. 作品成果：附上連結、截圖、短片或 GitHub 網址。

4. 代理人的工作：它使用了哪些檔案或工具？完成哪些步驟？

5. 自主檢核歷程：代理人進行了哪些測試與修正？

6. 我的介入點：我在哪裡補充、修改、拒絕或重新下達指令？

7. 問題與風險：曾出現哪些錯誤、不適當內容或安全疑慮？

8. 教學反思：若交給學生操作，我會如何確認學習真的發生？

四、準備90秒分享逐字稿

可將實作資料交給 AI，使用以下提示詞：

請根據我提供的真實資料，整理一份約90秒、口語自然的教師共備分享逐字稿。內容包含：教學目標、交給AI代理人的任務、代理人使用的工具與完成的工作、一次自主檢核或修正經驗、我的介入與驗收方式，以及對學生使用AI代理人的教學反思。請勿捏造未提供的經驗。資料如下：＿＿＿＿＿＿。

五、操作安全提醒

AI 代理人能接觸本機檔案與工具，使用前請：

• 僅開放本次任務需要的資料夾。

• 不放入學生個資、密碼、金鑰或機密資料。

• 重要檔案先備份，避免直接操作原始資料。

• 上傳 GitHub 前檢查個資、素材授權及敏感資訊。

• 部署、公開、刪除或大量修改前，保留人工確認點。

• 不以代理人的「完成訊息」代替實際測試。

六、共備討論焦點

本次討論主題：

當 AI 不只提供答案，而能自主規劃、操作工具及反覆修正時，教師應如何保留人類的決策權與責任？

共同討論：

• 哪些工作可以交給代理人長時間執行？

• 哪些步驟必須設定人工確認點？

• 學生應具備哪些能力，才適合使用 AI 代理人？

• 如何要求學生提出任務規格、測試證據及修改紀錄？

• 如何避免學生把「代理人完成」誤認為「我已經學會」？

共備結束前，我們將推派一位老師到大群分享實作成果，以及對 AI 代理人進入教學現場的觀察。

AI 代理人可以執行工作，但不能承擔學習責任；人類必須定義目標、設定界線、查核結果並為最後決定負責。

2.https://st.ssivs.chc.edu.tw/binary%20tree.htm

3.學生能自主學習

4.HTML 、JavaScript 和 SVG ，實作了大量的計算機科學理論、資料結構、演算法以及前端視覺技術

5.看結果對不對，畫面呈現排版、動畫速度

6.同上，我不滿意就叫他改

7.網頁原始檔丟給ai檢查是否正確，讓學生用AI改用堆疊、括號法就容易出錯。

四、

各位好，今天我們「資訊科技」課程的主題是「資料結構」。

課程中，我們參考了簡報上這個二元樹的教學網站（st.ssivs.chc.edu.tw/binary tree.htm），而我們最重要的教學目標，就是要讓「學生能自主學習」。

在這個單元裡，我們透過 HTML、JavaScript 以及 SVG 這些網頁技術，實作了大量的計算機科學理論、資料結構、演算法以及前端的視覺技術。

在讓學生自主操作的過程中，學生必須自己去「看結果對不對」，並且觀察「畫面呈現排版」以及「動畫速度」是否符合預期。同樣的原則，如果對畫面的排版或動畫速度不滿意，就是直接「叫 AI 改」，透過不斷的對話來修正結果。

最後的檢視階段，可以將做出來的「網頁原始檔丟給 AI 檢查是否正確」。不過這裡有一個重點觀察指標：當我們讓學生用 AI，嘗試改用「堆疊」或是「括號法」來處理時，就很容易出錯。這正是學生需要去發現並解決的核心問題。

以上是我們的實作與教學重點，謝謝大家。

五、

1. 哪些工作可以交給 AI？

• 重複性與勞力密集的任務：例如產生基礎的程式碼框架（如 HTML/CSS 架構）、常規語法的快速撰寫，或是生成測試用的假資料。

• 初步的邏輯轉譯：讓 AI 將學生的抽象概念初步轉換為草稿（例如：請 AI 寫出一個中序轉後序的基礎程式碼）。

• 除錯助理與知識檢索：把網頁原始碼丟給 AI 檢查基礎的語法錯誤，或請 AI 解釋某個特定的函數用法。

2. 哪些決定不能交給 AI？

• 作品價值的最終判斷：畫面的排版是否美觀？動畫的速度是否符合使用者的閱讀節奏？結果是否真的符合最初的設計需求？這些需要人類直覺與品味的決定，必須由學生親自把關。

• 核心邏輯的正確性：AI 產生的演算法（如堆疊法、括號法）容易出錯，確認其邏輯是否嚴密且正確，這個責任必須留在學生身上。

• 學習目標的設定與最終成績評量：教師對學生真實能力的理解與評斷，是 AI 無法取代的。

3. 如何從學習成果中看見學生的思考與修改歷程？

• 檢視與 AI 的對話紀錄 (Prompt 歷程)：觀察學生是如何對 AI 下指令的。當結果不滿意時，學生是放棄，還是能精準地描述問題並「叫 AI 改」？這能看出學生的問題解決能力。

• 版本迭代比較：要求學生說明從「AI 的初版草稿」到「最終成品」，他們人工介入微調了哪些地方（例如修改動畫速度參數、調整 SVG 的線條位置）。

• 錯誤反思紀錄：請學生記錄 AI 曾經給過哪些「錯誤答案」（如括號法處理錯誤），以及他們是如何發現並除錯的。

4. 教師應該評量成品，還是同時評量構想、提示、測試與反思？

• 絕對是同時評量「構想、提示、測試與反思」（即歷程評量）。

• 在 AI 時代，產出一個完美的「成品」可能只需要幾秒鐘，單憑成品已經難以鑑別學生的真實能力。評量的重心必須轉移到：學生最初的問題定義是否清晰？下達的提示（Prompt）是否有邏輯？測試時有沒有敏銳地抓出 AI 的盲點？以及完成後的深度反思。

5. 學生如果無法解釋作品，是否能算真正完成學習？

• 不能。

• 如果學生交出了一個運作完美的二元樹圍牆法網頁，卻完全無法解釋程式碼中「堆疊 (Stack)」的作用，或者不知道歐拉巡迴的運作邏輯，那只能算是「AI 完成了專案」，而非「學生完成了學習」。

• 費曼學習法 (Feynman Technique) 的核心在於，只有當學生能用自己的話解釋作品的運作原理，甚至能回答別人對細節的提問時，才代表知識已經真正內化。

2. 作品連結https://share.gemini.google/0YsdxqO4QFcJ

3. 電工機械對於二年級剛接觸此專業科目的學生是較為抽象的課程想透過AI製作一個動態的畫面讓抽象的概念實體化

4. 我請AI先擔任高二電工機械專長的老師並且請他生成有關直流電機構造單元的響應式互動學習，但在產出之前我請他先告訴我這個單元再說甚麼內容以確保生成的東西不是天馬行空

5. 我負責的內容就是看生成出來的東西無論是圖片或是結果是否正確或是否需要優化

6. AI有產生不合適的內容再線圈電流的流進與流出的部分有些許問題有反覆詢問請他修改並糾正錯誤

對話過程:

https://gemini.google.com/share/78724e764341

7. 我會先跟學生講一個前提要知道AI所產出的東西不一定正確要反覆進行相關驗證，要去想我們自己在學習的過程中對於不確定的事情會如何做反覆驗證，一或是請AI再產出某樣東西前先請他說明你要產出的內容相關知識為何從這邊也能夠先看看他再準備產出前是否跟你想要產出的方向是一致的

分享逐字稿

大家好，我今天分享的是我在高二電機科《電工機械－直流電機構造》單元中，運用 AI 協助開發互動教材的經驗。

對於剛接觸電工機械的二年級學生而言，直流電機的構造與發電原理都相當抽象，因此我希望透過 AI，將原本平面的教材轉換成包含 2D 與 3D 動畫、各部位解構展示，以及直流電機如何產生直流電的運轉動畫，讓學生能更直觀地理解磁極、電樞、整流子、電刷等構造之間的關係，以及整個運作流程。

在製作過程中，我並沒有直接請 AI 生成教材，而是先要求 AI 扮演高二電工機械教師，先說明這個單元應該包含哪些知識重點，確認內容符合課程目標後，再開始生成互動教材，降低 AI 產生錯誤內容的機率。

我的工作則是擔任內容把關者，逐一檢查 AI 所生成的圖片、動畫與說明是否符合電工機械原理。例如，在線圈電流流入與流出的方向上，AI 一開始就出現了錯誤，我透過反覆提問、修正與驗證，讓 AI 修正成符合專業知識的內容。

這次經驗也讓我發現，**AI 真正的價值不是取代教師，而是提升教材設計的效率與呈現方式；教師則負責知識的驗證與品質把關。**我也會提醒學生，AI 產出的內容不一定完全正確，要養成查證、修正與驗證的習慣，甚至可以先請 AI 說明它準備產出的知識，再判斷是否符合自己的需求，培養資訊判讀與批判思考能力。

謝謝大家。

以此次的活動來回應底下的問題

一、哪些工作可以交給 AI？

AI適合協助教師處理重複性高、耗時且需要大量整理與視覺化呈現的工作。例如，在這次教材開發中，我利用AI協助整理直流電機構造的知識內容，並產生2D動畫、3D模型、部位解構以及直流電產生原理的動態展示，讓原本抽象的概念更容易理解。此外，AI也能協助規劃教材架構、設計互動功能及快速完成教材初稿，大幅提升教材開發效率，讓教師能將更多心力放在教學設計與學生學習引導上。

二、哪些決定不能交給 AI？

雖然AI能快速產出教材，但專業知識的正確性與教學決策仍必須由教師負責。例如，本次教材製作過程中，AI曾將線圈電流流入與流出的方向標示錯誤，若未經教師檢查，學生便可能學習到錯誤概念。因此，教材內容是否符合課綱、是否符合電工機械原理、教學重點如何安排，以及學生是否真正理解，都必須由教師依據專業知識與教學經驗進行判斷，而不能完全依賴AI。

三、如何從學習成果中看見學生的思考與修改歷程？

真正的學習不只是完成一份作品，而是在製作過程中是否經歷思考、驗證與修正。因此，我會要求學生保留AI對話紀錄、提示詞以及每一次修改的內容，並說明為什麼需要修正。例如，學生必須能指出AI哪裡產生錯誤、自己如何查閱資料或依據課堂所學進行判斷，以及最後如何修正。透過這些歷程，可以更清楚了解學生是否真正理解知識，而不是單純接受AI提供的答案。

四、教師應該評量成品，還是同時評量構想、提示、測試、測試與反思？

我認為教師不應只評量最後完成的作品，更應重視整個學習歷程。除了作品本身是否完整之外，也應評量學生的教材構想、提示詞設計、AI互動過程、測試與修正紀錄，以及最後的學習反思。因為AI可以協助完成作品，但學生是否具有提出問題、驗證內容、修正錯誤及反思學習的能力，才是真正需要培養的核心能力。因此，歷程與成果應同時納入評量。

五、學生如果無法解釋作品，是否能算真正完成學習？

我認為不能。學生若只能展示作品，卻無法說明作品中的原理、設計原因或回答教師的提問，代表可能只是依照AI的建議完成製作，而未真正理解知識內容。例如，若學生無法解釋為什麼整流子可以將交流轉換成直流、線圈為何會產生感應電動勢，或AI曾經出現哪些錯誤以及如何修正，就表示學生尚未真正內化所學。因此，我認為完成作品只是學習的一部分，真正完成學習，應該是學生能夠理解、解釋、驗證，並能將知識運用到新的情境中。

教師觀點總結

• 哪些工作可以交給 AI？：資料整理、教材初稿、2D／3D動畫、互動設計與視覺化呈現。

• 哪些決定不能交給 AI？：專業知識正確性、教學重點、教材難度、學習評量及最終判斷。

• 如何看見學生思考歷程？：保留提示詞、AI對話、修改紀錄、查證依據及反思內容。

• 教師應如何評量？：兼顧作品成果與整個學習歷程，包含構想、提示、測試、修正及反思。

• 無法解釋作品是否算完成學習？：不能，學生必須能解釋作品原理、說明修改依據並回答相關問題，才能代表真正理解與完成學習。

2.作品連結：https://chiajung.my.canva.site/cmsh114310

3.在請 AI 協助前，我想解決實作課時間有限、學生課外缺乏練習的問題。我希望設計一套多樣化、分階段的互動機制，學習目標是讓學生在課外時間透過練習牢記托育人員技能檢定的標準步驟與評量項目。基本規則是由我先擬定遊戲內容以及前後台的設計概念與檢定順序給AI進行設計。

4.AI 協助產生了互動作品的前後台邏輯概念、程式碼架構、介面文字說明，以及嬰幼兒清潔與洗澡流程的示範圖卡素材。

5.我負責決定檢定評量項目的正確順序、分階段關卡的難易度與教學規則；同時我也親自進行前後台的功能測試，並否決了 AI 最初產出不符合教學需求與視覺品質的方案。

6.在測試時我發現，雖然可以提供圖片讓 AI 新增在遊戲中，但若讓 AI 將單張圖片拆解成數十張拼圖，會導致圖片解析度嚴重降低、視覺效果不佳。發現這個問題後，我及時調整開發方向，決定改用「貪吃蛇」的遊戲機制，讓學生在操控吃取正確順序標籤的過程中，同樣能流暢且清楚地複習完整的托育順序。

5.除了完成線上遊戲練習外，我會要求學生口述或書面說明「為何要這樣排序」（例如：洗澡前為何要先清潔口腔？步驟順序背後的衛生與安全考量是什麼？）。透過引導學生解釋操作背後的邏輯，確保他們是真的理解檢定規範，而不是盲目點擊或被動接受答案。

各位老師好！今天想跟大家分享我在高三幼保科「托育人員技術實務」課程中的 AI 輔助教學實作成果。

在教「嬰幼兒清潔口腔與洗澡」時，最大的挑戰是實作時間有限，學生在課外很難熟記檢定的繁複流程。因此我的構想是：打造一款分階段的前後台互動遊戲工具，讓學生能在課外隨時練習並牢記評量項目。製作時，AI 幫我產生了前後台邏輯、程式碼和示範圖片。但我親自測試後發現，若讓 AI 把圖片切割成數十張拼圖，會導致解析度大減、畫面極不清晰。於是我果斷調整方案，改用「貪吃蛇」遊戲機制，讓學生在遊戲中依序吃取正確步驟，同樣能達到熟記全套流程的效果。為了確保學生有深度思考，我會在遊戲後搭配「步驟原因口述」驗證。由 AI 打造好用的練習工具，而我們教師則負責引導學生理解核心邏輯！

生活科技　高一高二　非電子電機背景專業的學生

作品連結:

https://share.gemini.google/DFG57fNrYr8h

對話過程:

https://share.gemini.google/fm9U3CTsSikt

一、哪些工作可以交給 AI？

視覺化呈現的工作及複雜的數學運算。

學生只要了解充放電原理及特性曲線。

輔助學生了解三用電錶及示波器的運作

二、哪些決定不能交給 AI？

雖然AI能快速產出教材，但專業知識的正確性與教學決策仍必須由教師負責。教材內容是否符合課綱、教學重點如何安排，以及學生是否真正理解，都必須由教師依據專業知識與教學經驗進行判斷，而不能完全依賴AI。

三、如何從學習成果中看見學生的思考與修改歷程？

讓學生對照真實實驗與Tinkercad 模擬結果是否一致

四、教師應該評量成品，還是同時評量構想、提示、測試、測試與反思？

測試與反思　

能了解充放電時間的影響因素是評量重點　　

利用實驗改變單一變數　判斷影響原因

五、學生如果無法解釋作品，是否能算真正完成學習？

學生只需要了解電容器　電阻 電壓 電流 示波器 三電錶使用　　不會數學運算　也可當成完成學習

這是一個「二元搜尋法（Binary Search）視覺化互動作品。

適用科目與單元：高中資訊科技 — 陣列實作

適用年級：高中一年級

設計初衷：在引導學生進行二元搜尋法的「程式碼實作」之前，先透過視覺化的互動，讓學生直觀地理解二元搜尋法「如何利用已排序陣列」、「如何透過比較中間值減少搜尋範圍」的運作方式。

2.作品成果

作品連結：

https://share.gemini.google/TDvKebs6Brzo

3.我的原始構想

了解二元搜尋法的先決條件：陣列資料必須先經過排序。

掌握陣列索引指標的移動規則：Mid = (Low + High) / 2，並根據比對結果調整 Low = Mid + 1 或 High = Mid - 1。

體會陣列大小與搜尋次數的關係，為後續實作奠定邏輯基礎。

4. AI協助的部分

AI 為這個作品的「Web 前端快速開發助手」，快速生成了卡片式陣列的 RWD 響應式版面，省去大量程式撰寫開發的時間。

5.我負責的部分

提供給AI作品的概念說明，以及確認演算法的操作方式是否正確，整體是否符合想要的呈現方式。

6. 一次問題與修正經驗

原先產出的是互動卡片式點選的方式，為了有效的讓學生了解運作的方式，在學生互動的方式，要求只能輸入index的值，防止盲目亂點的方式。

7. 教學應用與思考

設計學生在互動過程，必須透過輸入的方式輸入index值，無法直接點選。

並在互動結束後，抽點學生詢問一個題目的搜尋過程。

最後詢問學生如果要找的數字根本不在陣列裡面的狀況，，引導學生思考 Low > High 這個迴圈結束的關鍵條件。

分享逐字稿：

各位老師好！今天想跟大家分享我最近設計的一個小作品 —— 『二元搜尋法視覺化互動遊戲』。 這個作品的構想，是源自於我在帶高一『陣列與搜尋演算法』單元時，發現學生如果直接看程式碼，常搞不懂指標到底是怎麼移動的。所以我想在寫程式之前，先讓他們透過遊戲直觀地理解運作機制。

作品的功能很直接，它把排序好的陣列變成一張張卡片，並把 Low、Mid、High的位置視覺化。學生比對後，系統會自動把不可能的區間灰階鎖定，讓他們親眼看到搜尋範圍『每次砍一半』的過程。

在開發過程中，AI 幫忙處理了大部分版面美化，還有寫出控制陣列指標與動態畫面的 JavaScript 程式碼。 但我親自判斷與修改的部分才是教學的關鍵！AI 最初只設計了簡單的數字輸入框，後來改為『顯示數字卡片』，並強制學生只能透過輸入的方式，按演算法規範去操作。 最後對教學應用的反思：AI 工具雖然便利，但為了確認學生有真思考，我在課堂會搭配提問的方式，確保他們玩完遊戲後，真的能把這份邏輯轉化為寫程式的能力。謝謝大家！

2.作品連結：https://gemini.google.com/app/52e2df524390f164?hl=zh-TW

3.我請AI打造一套專為高中程式設計的 「響應式互動學習平台：選擇排序法 (Selection Sort)」。

4.AI結合了 108 課綱的核心素養，提供動畫演示、程式碼同步追蹤、親自動手演練互動關卡以及複雜度觀念解析。會生成一個單一特製的 HTML 互動網頁檔。

5.剛開始 AI沒有以哪種程式語言為主來設計，後來再加上「以學習python程式語言為主」，才有想要的程式語言顯示

4.這套教材結合了 108 課綱的核心素養，提供動畫演示、程式碼同步追蹤、親自動手演練互動關卡以及複雜度觀念解析。我將會生成一個單一特製的 HTML 互動網頁檔。

3.我請AI打造一套專為高中程式設計的 「響應式互動學習平台：選擇排序法 (Selection Sort)」。

2.作品成果，因使用教育帳號無法進行分享僅能發布於classroom中。

3.我希望能做到讓學生精熟各項細胞內專有名詞的分子大小層次，分成三個層次，細胞以上層級、細胞以內層級，以及化學分子層級三種。

4.幫我產生了圖像，以及整個遊戲的頁面跳轉內容，而且在結果頁面無法顯示時自行修正.

5.這個遊戲的內容切換及限定的各項名詞是由我決定的。

6.不知道是不是指令下的太複雜，只有出現動物細胞跟植物細胞的畫面，接下來點選進去是空白的，而且修正多次AI仍無法正確顯示，所以換成付費版的，並且給予示範影片，就可以正確顯示，但在分子層級的顯示只有文字的圖像，跟我想像的要顯示出分子的樣態不同。接下來一個一個增加名詞的構造細節，如細胞膜加入流體相嵌模型、葉綠體、粒線體加入構造細節，過程中一度程序亂掉了，無法顯示程式，請AI自己修正後，又恢復顯示。繼續逐步加入細節，如各項分子的化學結構圖，最後產生出來的結果仍有一些不完整，感覺可以重新使用架構的方式再與AI對話一次，而且檢核學生學習的部分也還沒有想的很清楚。

7.學生看著這些圖案跟名詞，一層一層的進入觀看，如果能建立一個像遊戲中那樣，每位學生的完成路徑以及未完成路徑都能顯示出來的話，就可以讓學生即時補足自己沒完成的部分。

分享逐字稿

各位老師好，想跟大家分享我最近試著用 AI 解決的教學問題。

在教生物第一章時，大家應該都覺得專有名詞實在太多了，學生光是理解名詞的意思，認知負荷就已經很大，更不用說還要弄懂它們之間的組成與連結關係。以往我都是請學生自己繪製心智圖來學習，但這次我想：如果能透過 AI 把這些抽象名詞具象化，也許能幫學生的記憶扎得更穩。

基於這個構想，我完成了第一版的「微觀細胞探索器」，目的是讓學生能在互動中熟習細胞內各項專有名詞的意義，以及它們彼此之間的關聯性。

在開發過程中，AI 幫了我很大的忙，它替我產生了圖像，並處理了整個遊戲的頁面跳轉內容；甚至在結果頁面跑不出來時，它還能自行修正完成。

不過，當我自己進行實際測試時，發現許多名詞只出現了文字，跟原本希望「圖文同時呈現」的樣態有落差。所以我親自做了調整，在指令中一個一個加入我想要增加的圖像內容，一步步修正成理想的畫面。

這次實作帶給我蠻大的教學啟示：與 AI 協作時，一定要「分次下指令、逐步微調」，先給大方向的概念，再一個一個加入細節。而且測試完這個第一版之後，我發現自己對想要呈現的教學內容，反而有了更明確的想法。有明確想法後，我會把這些內容整理成更完整的架構，再去重新跟 AI 對話，打造出下一版更完善的成果。謝謝大家！

2.作品成果：https://gemini.google.com/share/a9bb32f1cc41?skid=01b986cd-795d-42af-bd0f-e808a21f5e41

3.我的原始構想：

由於自身教學課程太廣泛，選擇國語文設計成生活化小遊戲或互動作品，加上對象是重度障礙學生，每個學生特質、能力與障礙程度不一，將課程設計成簡單化和視覺化，運用節慶搭配小遊戲，讓所有年齡層學生都能認識過年有關的詞彙、吉祥話，以及欣賞過年經典歌曲。對於手部精細較弱的學生可以提供單鍵輔具或搖桿遊戲手把參與課堂活動。

4.AI協助的部分：

我請AI幫我設計3個小遊戲，第一個是將20個跟過年有關的詞彙做成釣魚遊戲；第二個是將10個跟馬年吉祥話/成語做成拼字遊戲，呈現視覺化讓學生能清楚操作與即時回饋；第三個是找出5首跟過年有關的經典歌曲做成拍子節奏遊戲，在前端修改過程中AI幫我增加一鍵切換小遊戲，讓學生可以自由選擇小遊戲。

5.我負責的部分：

檢視圖文符合(例如：元寶、春聯、蘿蔔糕、金條、馬年圖片)、確保音樂輸出完整(例如：播放音樂時沒有聲音)

6.一次問題與修正經驗：

在前端圖片多次修改，下方顯示控制台錯誤，經過幾次點擊才修正完畢；在後端兩個小遊戲中間增加一個小遊戲，出現控制台錯誤，系統顯示說是因為部分程式碼在之前的修改中缺少了完整定義，將缺少的程式碼與完整邏輯補充完畢，確保所有頁面切換、聲音播放、釣魚與唯舞獨尊拍子節奏畫面都能順暢運行。

對話紀錄：https://gemini.google.com/app/07d703a88c500b96?utm_source=app_launcher&utm_medium=owned&utm_campaign=base_all

7.教學應用與思考：

學生進行課程活動時可以按照自己的能力選擇遊戲速度，不用一定要快速跟上其他同儕的學習水準，另外如果過度依賴遊戲輔助，反而學習不到真正知識，AI只是輔助工具。課程目的是瞭解過年相關的每個詞彙背後歷史或故事，在過年期間能夠向家人/親朋好友祝賀吉祥話。

分享逐字稿：

各位老師們好，我今天要分享的是特殊教育科的國語文領域，課程活動是歡樂過好年，設計釣魚/拼字/節奏這三種不同小遊戲。

由於我們學生的障礙程度較重，必須要調整課程內容，加上學生生活經驗不足，因此選擇過年節慶融入國語文領域，並搭配生成式AI呈現小遊戲或是互動作品，針對重度障礙或腦麻的學生，提供單鍵或平板輔具搭配小遊戲以便能夠參與課堂活動。

這是一個選擇排序法的互動學習遊戲，適合高一程式設計科目。

二、作品連結：

https://gemini.google.com/app/52e2df524390f164?hl=zh-TW

三、我的原始構想：

在請 AI 協助以前，我希望完成能動畫展示選擇排序法程式運作的步驟以及互動遊戲，讓學生清楚選擇排序法的原理。

四、AI 協助的部分：

AI 幫我產生了動畫演示、動手演練、Python解析、隨堂測驗。

五、我負責的部分

「Python解析」是我後來再加上「以學習python程式語言為主」，才有想要的程式語言顯示。剛開始 AI沒有以哪種程式語言為主來設計

六、一次問題與修正經驗：

剛開始 AI沒有以哪種程式語言為主來設計，我後來再加上「以學習python程式語言為主」，才有想要的程式語言顯示。

七、教學應用與思考：

首先講解選擇排序法的原理，再介紹動畫演示畫面的各項元素就播放動畫，接著親自動手演練看看，再來解析Python程式，待大家沒人提出問題後就隨堂測驗。

八、90秒分享逐字稿：

各位老師大家好，我今天分享的是一個選擇排序法的互動學習遊戲，主要適合高一程式設計課程使用。

一開始我的構想，是希望透過動畫展示選擇排序法的執行步驟，再搭配互動遊戲，讓學生不只是看程式，而是真正理解選擇排序法的運作原理。

在製作過程中，AI 協助我完成了許多內容，包括動畫演示、動手演練、Python 程式解析，以及隨堂測驗，讓整個教材更加完整，也節省了不少製作時間。

不過，AI 產出的內容並不是直接就能使用。我有自己進行調整，尤其是在 Python 程式解析的部分。一開始 AI 並沒有以特定程式語言來設計內容，所以呈現方式不是我想要的。我後來修改提示，加入「以學習 Python 程式語言為主」的要求，AI 才產生符合課程需求的程式解析。

這也是我印象最深刻的一次修正經驗，讓我體會到，AI 的產出品質很大程度取決於提示內容，教師仍然需要依照教學目標進行判斷與調整。

在教學應用上，我會先講解選擇排序法的原理，再介紹動畫畫面的各項元素並播放動畫，接著讓學生親自動手演練，之後再解析 Python 程式，最後確認學生沒有問題後，再進行隨堂測驗。透過這樣循序漸進的流程，希望能幫助學生從理解概念到實際應用，提升學習效果。

2.作品連結：

https://share.gemini.google/FJmdrOKCe5c6

3.請AI用繁體中文寫一個網頁版「IP網段判斷」，單一 HTML 檔案。第一個畫面可以填選要判斷幾個IP位址(2-6組)。第二個畫面已第一個畫面選擇的IP為指數量出現幾個空白來輸入 IP 位址與遮罩，以 AND 運算一秒看穿他們是不是在同一個網段。

請將介面改為滿版自適應 RWD 排版，支援電腦與手機。讓 畫面自動放大縮小、佔滿螢幕且絕不產生捲軸。

「各位老師好！今天想跟大家分享我運用 AI 輔助設計『IP 位址與網域名稱』單元教學的經驗。

【作品構想】 在教『數位科技概論』第 15 章時，學生常覺得 IP 位址分類與子網路遮罩運算非常抽象。我的構想是結合實務操作，讓學生從動手查 IP、ping 網域中，理解網路運作邏輯。

【作品功能】 教材包含三個重點：第一，引導學生用 ipconfig 指令與視窗介面查詢本機 IPv4 與 IPv6 位址；第二，運用大廈地址與門牌比喻，拆解 Class A/B/C 的網路位址與主機位址，並示範子網路遮罩的 AND 運算與切割；第三，透過台大或 Facebook 範例，說明 DNS 如何將 URL 轉為 IP 位址，並涵蓋 DHCP 與 NAT 概念。

【AI 協助的部分】 在備課時，AI 幫我將繁複的網段計算轉化為清晰的比喻，並快速產出結合統測題型的差異化測驗題與解析。

【親自判斷與修改】 但 AI 生成內容仍需把關。我親自審核並修正了二進位轉換的運算邏輯與專業術語，同時重排課堂節奏，確保留有足夠的學生實作時間。

【問題與修正經驗】 設計實作時，AI 原本建議讓學生自由 ping 各知名網站觀察 IP。但我課前預試發現，部分網站設有防火牆會阻擋 ping 而超時。我立刻修正講義，改指定 Google 或 Facebook 等穩定回應的網站，並向學生補充說明防火牆機制，避免課堂混亂。

【教學應用反思】 這次經驗讓我體會到：AI 是極佳的備課助手，能大幅省下發想時間；但教師的專業審查、課前實測與教學現場的彈性調整，才是教學成功的核心關鍵！謝謝大家！」

• 作品類型： 這是一個名為 Cyber Siege 4.5 的 20 vs 20 資安攻防模擬戰場遊戲。這是一款融合了科幻資安風格（Cyberpunk/Neon）的單網頁互動應用程式，具備三合一角色控制台與即時動態戰報。

• 適用科目與年級： 適合運用在高中職至大學的「資訊科技」、「網路與資訊安全」、「微課程」或「社團專題」。

• 適用單元： 網路安全概論、資安事件應變（Incident Response）、藍紅隊攻防概念與 SOC 運作。

二、作品成果

• 作品連結：https://share.gemini.google/wQPacSI3tSKt

• 對話紀錄：https://share.gemini.google/73MLQPmIhPCt

• 操作畫面與功能：

  • 高科技視覺與大廳： 採用 Slate 暗黑主題與霓虹發光邊框（紅隊 Rose、藍隊 Cyan、主持人 Amber），並提供特工/衛士代碼登入與職業選擇。

  • 主持人端（Admin）： 輸入預設 PIN 碼 835217 即可進行簡報與開啟戰鬥。

  • 紅/藍隊戰鬥終端： 具備 20 vs 20 的即時計分板。紅隊可操作 Kill Chain 滲透；藍隊擁有高科技警報卡牌流，支援點擊或拖曳反制卡牌進行實時處置。內建虛擬多人攻防引擎（AI 模擬器），以及支援 XAMPP 環境的 API 模式。

三、我的原始構想

• 核心目標： 在請 AI 協助前，我希望能打造一個 20 vs 20 的資安攻防模擬戰場，讓學生在 10 分鐘內體驗高頻率的攻防拉鋸。

• 基本規則： 遊戲分為六大戰場（如企業網路、醫療系統、關鍵基礎設施等），每個戰場包含六個節點。紅隊的目標是攻擊並奪取節點控制權，藍隊的目標則是分析警報、處置事件與維持服務運作。

• 學習目標： 期望透過遊戲培養學生的 Incident Response、Threat Hunting、Kill Chain 概念、SOC 流程，以及攻防協作與團隊溝通能力。

四、AI 協助的部分

• 單檔案架構與前端程式： AI 幫我撰寫了完整的 HTML5 與 Tailwind CSS，將龐大的介面邏輯（紅隊 Command、藍隊 SOC、Admin 主持人）整合進一個單一檔案中，達到一鍵運行體驗。

• 視覺設計與動態特效： AI 提供了科技感視覺的配色建議與 CSS 動態邏輯，包含節點狀態發光、倒數計時警報卡牌流。

• 離線 AI 模擬器引擎： AI 幫我撰寫了「虛擬多人攻防引擎」，能每 4 秒隨機對戰場發起自動攻擊並生成藍隊警報，完美模擬另外 39 名玩家的在線操作。

五、我負責的部分

• 系統架構與專業知識定義： 我決定了 XAMPP + PHP API + MySQL 的完整後端架構藍圖與資料流。

• 遊戲機制與職業技能： 我親自設計了六大戰場，並定義了紅藍隊的職業（如紅隊的偵察員、滲透員，藍隊的 SOC 分析師、網路工程師）與專屬技能。

• 攻擊鏈與防禦邏輯： 我嚴格規範了「偵察 → 弱點暴露 → 漏洞利用 → 控制節點」的 Kill Chain 邏輯。

• 商店系統平衡： 我規劃了 Zero-Day Toolkit、Botnet 與 SOC Upgrade 等商店道具，並決定了雙方的計分方式（例如藍隊清洗 DDoS 封包可得分）。

六、一次問題與修正經驗

• 遭遇問題： 一開始 AI 產出的網頁完全是純前端的單機版，雖然有 AI 模擬器，但無法滿足我未來讓全班連線對戰的需求。

• 發現與修正： 我發現若只有前端，無法實現真實的 20 vs 20 體驗。因此，我指示 AI 必須在頂部導航列新增一個「API Mode」切換按鈕。我要求 AI 將前端邏輯與我規劃的 api/action.php、api/state.php 進行對接。經過反覆測試與修改 Fetch 邏輯，最終成功讓網頁既能單機體驗，又能無縫切換到 XAMPP 區網多人同步架構。

七、教學應用與思考

為了確認學生真的有思考，而非單純享受遊戲聲光效果或亂點一通：

1. 卡牌對應限制： 藍隊必須依警報內容選擇「正確」的反制卡牌（如拖曳 Firewall 或 Patch）才能防禦成功，避免學生盲目亂按。

2. 攻擊條件檢驗： 紅隊必須先建立攻擊條件，遵循偵察到控制的順序，無法跳關，以此驗證他們對 Kill Chain 的理解。

3. 戰後覆盤報告： 遊戲結束後，要求雙方針對警報日誌進行覆盤，藍隊需說明為何採取特定的 Incident Response，紅隊需解釋為何選擇特定節點與漏洞進行攻擊。

八、90 秒分享逐字稿

「各位老師好，今天我想分享我設計的資安教學遊戲：Cyber Siege 4.5 模擬戰場。

過去在教網路安全時，學生很難想像真實的駭客攻擊與防禦是什麼樣子。因此，我的原始構想是打造一個 20 對 20 的網頁模擬戰場，讓學生體驗紅隊的攻擊鏈與藍隊的即時警報處置。

在這個專案中，AI 是我極佳的程式開發夥伴。它幫我用 Tailwind CSS 刻出了充滿科幻感的控制終端，包含動態發光的節點與警報卡牌流。更棒的是，AI 幫我寫了一個內建的『虛擬玩家模擬引擎』，就算只有一個人開啟網頁，也能感受到 39 人同時在線攻防的壓迫感。

但遊戲的靈魂與教育價值是由我決定的。我親自設計了六大戰場，定義了包含偵察員與 SOC 分析師的專屬職業。開發過程中，為了讓遊戲未來能真實在電腦教室連線，我引導 AI 加入了『API 切換模式』，成功對接我設計的 PHP 區網資料庫。

這次實作給我最大的啟示是：AI 能幫我們解決技術與視覺的門檻，讓老師能把百分之百的精力，專注在『學習目標與遊戲機制的結合』上。透過這個系統，學生不僅是在玩遊戲，更是在實戰中學會團隊溝通與資安應變。謝謝大家！」

https://gemini.google.com/share/57c5496b3930?skid=8859cd23-6551-4b04-bc2c-374ecd99ad0c

3.我的原始構想

透過遊戲的方式，學生可以手動打開電路中的開關ON/OFF狀態，並且調整電壓與電阻大小，來控制LED狀態。如果電流過大，則LED燈會燒毀。

4. AI協助的部分

以Canva模式生成電路實驗遊戲。可以切換多種模式，包含串聯結構、並聯結構。學生可以更清楚課程概念。

5.我負責的部分

我準備好教學方向與教材綱要，轉化為生成需求，描述給gemini，請他幫忙生成需要的程式碼與介面，並產生連結。

6.一次問題與修正經驗

一開始我下指示是具備多個LED、電阻、開關。來達成多種結構(串聯與並聯)，但是實際上Gemini產生的遊戲，元件配置不太符合課程需求。要不斷請他修正結構。一開始以為AI應該對串並聯等基礎的建構很清楚，但我發現雖然AI有些地方非常厲害，但是反而有些看起來簡單的地方，卻無法達成需求。

7.教學應用與思考

實際應用於教學場合，會搭配章節題材，設計更精準與多樣化的電路結構。甚至加入更多種元件，比如電感與電容。也可以加入交流電實驗。

8.分享逐字稿

我平時就有使用gemini，自己也有升級PRO方案，不過沒有使用過canva模式來製作遊戲，也發現Gemini原來這麼強大。這次我設計的是電路實驗的小遊戲，對應科目為資訊科一年級科目-基本電學。畢竟原本上課內容都是以概念與算式來學習，雖然有對應的實習課，但是透過小遊戲模擬，可以更快速的掌握電流電壓電阻等概念。一開始我就下指令，請AI產生一個，可以讓學生手控電壓與電阻，開關，串並聯的電路實驗遊戲。不過過程中發現AI雖然功能強大，但是會在一些簡單的地方產生邏輯錯誤，比如我會覺得並聯結構，應該是三個LED燈個別接一個電阻，但是他卻 [並聯三個電阻]後，再串聯往[並聯三個LED燈]的電路，很明顯這樣設計無法達成教學需要的結果。所以也要不斷下指示修正才能達成。

希望可以用自己上課的邏輯去架設單元

製作了三種版本，還是無法達到心目中的要求

一、Python 互動學習館

第一個成功的版本

產生一個看起來很棒的版本

https://share.gemini.google/1UQtUDSKgJbD

因為有很多想改的地方，於是一直要求AI修改，最後整支程式壞了

中途可RUN的程式

https://share.gemini.google/YJQfSqY7Twzb

改細節時一次不能給太多 會改到無法負荷

出現以下訊息

身为一个语言模型，我没法提供这方面的帮助。

由于程序代码的局限，我无法提供这方面的帮助。

我只是一个语言模型，无法为你提供这方面的帮助。

最後一個 改到壞 的版本

https://share.gemini.google/yukcIHxCvQaY

（程式碼沒有留下來)

二、Python 互動學習課程

https://share.gemini.google/WyT1wdP47QFS

原本產生的不滿意 改過好多次的版本

有15個單元 程式實作的部分每個單元出題

https://share.gemini.google/KglWU1Cd1hDt

三、Python 學習館

單元確立 各單元不能執行

https://share.gemini.google/mXxwb5sHZtKF

可執行程式的版本

https://share.gemini.google/EugrNV3Ucsjz

可執行程式 每題有留著上一題的程式碼

https://share.gemini.google/UuYeNButfiYq

留有3-18單元的實作 有挑戰

https://share.gemini.google/W0PDfKgcI8K6

留有1-5單元的實作 有挑戰

https://share.gemini.google/7eOSd3dHlpbb

只留下最後一版的程式碼

打算用修改程式的方法來做最後的可以上課的網頁

因為剛新接觸antigravity，所以我先用gpt幫我介紹一下antigravity如何使用，然後透過gpt先幫我生成電子學有關的小遊戲並且請他給我提示詞後我再丟到antigravity內進行生成遊戲，然後生成完後想說做一個爆爆王小遊戲試試

2.

我先用gpt寫我想要做的內容請gpt幫我轉換成prompt再給antigravity去生成我要的東西

3. file:///C:/Users/junha/Desktop/game/index.html

(電子元件分類)

file:///C:/Users/junha/Desktop/game/BomberGame/index.html

(爆爆王)

4.

代理人主要在原有專案中建立新的遊戲資料夾，並使用 HTML、CSS 與 JavaScript 建立完整的網頁遊戲，完成遊戲架構、角色移動、炸彈放置、敵人 AI、碰撞判定、美術素材引用及遊戲介面的設計。同時也會修改相關程式檔，建立圖片、音效等資源資料夾，並在完成後自動執行遊戲進行測試，檢查是否有 JavaScript 錯誤或功能異常。

使用的檔案／工具：

• HTML（遊戲頁面）

• CSS（畫面與版面配置）

• JavaScript（遊戲邏輯）

• Images／Sprites（圖片素材）

• 瀏覽器測試工具（執行與驗證）

• Console（檢查程式錯誤）

完成的步驟：

1. 建立新遊戲專案資料夾。

2. 建立遊戲程式架構。

3. 製作遊戲畫面與角色。

4. 實作角色移動、炸彈及敵人功能。

5. 執行遊戲並測試。

6. 根據指令持續修改與更新功能。

5.

代理人在完成每一項功能後，會自行執行遊戲測試，確認角色是否能正常移動、炸彈是否能放置及爆炸、敵人是否正常行動，以及遊戲是否能正常運作。當測試發現問題時，會重新修改程式，再次測試直到功能正常。

例如：

• 檢查角色是否能正常移動。

• 檢查炸彈倒數與爆炸效果。

• 檢查敵人是否會移動。

• 檢查是否有 JavaScript 錯誤。

• 修改碰撞判定後再次測試。

• 驗證修正是否造成其他功能異常

6.

我的主要工作是決定遊戲需求與規則，而不是直接撰寫程式。

在開發過程中，我多次介入調整需求，例如：

• 要求建立新的遊戲專案，而不是修改原本的電學遊戲。

• 指定遊戲玩法參考炸彈迷宮類型，但要求美術重新設計，不直接使用既有角色。

• 要求新增敵人全數消滅後的過關機制。

• 要求炸彈放置後具有碰撞效果，玩家離開炸彈後不能再穿越。

• 當代理人產生與預期不同的結果時，重新描述需求並要求局部修改，而不是全部重做。

7.

開發過程中遇到的問題包括：

• 遊戲完成後，敵人全部消滅卻沒有進入下一關。

• 炸彈放置後仍可直接穿越，不符合遊戲規則。

• 部分功能完成後仍需人工再次驗證是否符合需求。

• AI 有時會自行加入未要求的新功能，需重新限制修改範圍。

• 若要求圖片與商業遊戲過於相似，可能涉及著作權與智慧財產權，因此需改為設計原創角色與素材。

8.

我不會只要求學生完成遊戲，而是將重點放在「需求分析、AI協作及驗證能力」。

我會要求學生：

1. 先規劃遊戲功能，再交由 AI 開發。

2. 每完成一項功能就進行測試與紀錄。

3. 比較 AI 產出是否符合原始需求，而不是直接接受結果。

4. 學習重新撰寫 Prompt，逐步修正 AI 的產出。

5. 說明自己如何發現問題、如何修正，以及最後如何驗證功能是否正常。

我的評量重點：

• 是否能清楚描述需求。

• 是否能有效與 AI 協作。

• 是否能發現 AI 的錯誤。

• 是否能透過測試驗證成果。

• 是否能反思並持續改善作品。

心得分享

大家好，今天想跟大家分享我第一次使用 Google Antigravity 的經驗。

因為這是我第一次接觸 AI Agent，所以一開始我沒有急著操作，而是先利用 ChatGPT 了解 Antigravity 到底是什麼、它可以完成哪些事情，以及它和一般聊天式 AI 有什麼不同。了解之後，我開始思考要設計什麼專案來測試它的能力。

一開始，我先製作了一個簡單的電學遊戲作為測試，並請 ChatGPT 協助我優化提示詞，再將整理好的 Prompt 交給 Antigravity 執行。熟悉操作流程後，我決定挑戰製作一款炸彈迷宮類型的遊戲。

在開發過程中，代理人協助我建立新的專案資料夾、規劃遊戲架構、撰寫 HTML、CSS 與 JavaScript，並完成角色移動、炸彈放置、敵人 AI、遊戲介面等功能，同時也會自行執行遊戲測試，檢查程式是否有錯誤。

我的角色則是負責提出需求、驗收成果及持續修正。例如，我要求新增敵人全部消滅後要進入下一關，也要求炸彈放置後要具有碰撞效果，不能讓玩家隨意穿越。當 AI 產出的結果與預期不同時，我會重新撰寫 Prompt，引導它修改特定功能，而不是全部重做。

這次最大的收穫是，我發現 AI Agent 並不是一次就能完成所有需求，真正重要的是使用者是否能清楚描述需求、持續測試、驗證並修正結果。因此，如果未來讓學生使用 AI Agent，我會更重視他們需求分析、Prompt 設計、測試驗證與反思的過程，而不是只看最後有沒有完成作品。

謝謝大家。

90秒分享逐字稿

各位老師大家好，今天想跟大家分享我近期嘗試用 AI 代理人輔助教學的經驗。

【教學目標與任務交辦】 這次我的教學目標，是希望讓學生練習「若 p 則 q」的邏輯思考。為此，我使用了 Gemini Spark 作為 AI 代理人，請它幫我收集網路素材，企劃一個「華森選擇題」的小遊戲。

我給它的任務很明確，遊戲要分成三個部分： 第一部分，簡介什麼是華森選擇題與科學思維。 第二部分是初階練習，我特別要求它，每題回答完都必須給出小學生也能看懂的詳細分析。 第三部分則是正式考驗，每次要隨機生成 5 題考題並計算得分。

【代理人的工作與自主檢核】 過程中，AI 使用了網路搜尋工具，完成了題目的解說、生成各種題型，甚至包含美術編輯的規畫。

很有趣的是 AI 的自主檢核歷程。它在分析需求後，為了達到「易於理解」的標準，主動結合了生動的生活實例；後來它自己又進行了修正，額外加入兩個更簡單的例子來幫助釐清概念，並設計好隨機抽題機制與詳細的題庫規則。

【介入、驗收與問題風險】 不過，在我的介入與驗收階段，發現了一個理想與現實的落差。這也是這次遇到的主要問題：我原本以為下達指令後，AI 會直接幫我寫出一個「可以點擊互動的網頁版遊戲」，但後來發現，它完成的其實是「遊戲的素材與企劃規畫」。這提醒了我，未來在任務期待與指令下達上需要更精確。

【教學反思】 最後，在教學反思方面，如果我把這套設計好的題目交給學生操作，我要如何確認學習真的發生呢？因為這個任務主要是在鍛鍊學生簡單的邏輯直覺，所以我的設定是：讓學生在正式考驗階段不斷反覆練習，目標是要求他們重複考到 100 分。藉由反覆達到滿分，來確認他們真的掌握了這個邏輯推演。

以上是我這次的實作與踩坑經驗，分享給大家，謝謝！

第一次使用 製作簡單的歷史遊戲 讓學生了解歷史故事

圖片為gemini 生成

簡化製作

歷史上是騎馬作戰

張飛使用的武器也不正確

人物出場時間需要再修正

製作過程:

我要製作一個 2D 橫向捲遊戲

人物呂布 再右邊 往左邊行走攻擊 圖片使用K.png 人物張飛 再左邊 往右邊行走攻擊 人物呂布 圖片使用CHANG.png 人物關羽 再左邊 往右邊行走攻擊 圖片使用G1.png 然後 呂布都完全阻擋攻擊 沒有受傷 散個人物都是電腦自動執行 然後過了10秒 加入人物劉備 圖片使用RU.png 由最左方出現 然後 我可以使用間盤對它移動 按下確認健可以攻擊呂布 如果我攻擊呂布五次後 呂布就往最右邊離開 然後跳出 遊戲結束

需要讓人物可以 上下平面移動

人物非只能水平動 整個平面都是移動範圍 當攻擊碰到呂布 後 呂布會往後退 隨機移動

剛開始 出現的三個人物 不在同一個水平面

攻擊五次後 呂布跑到最右方後 結束遊戲

劉備出現時 呂布會大喊 沒在怕 然後攻擊五次 後喊不妙

教師共備分享逐字稿（發表時間：約 90 秒）

各位老師好，今天想跟大家分享我第一次使用 Google Antigravity 來輔助教學專案的經驗。

我這次的教學目標，是希望能製作一款簡單的歷史小遊戲，讓學生在互動中更了解歷史故事。我交給 AI 代理人的任務，就是幫我簡化製作流程，打造一個 2D 橫向捲軸的歷史對戰遊戲。

在工具與完成的工作方面，我使用了 Google Antigravity，遊戲圖片則是透過 Gemini 來生成。AI 幫我設定了基礎畫面與自動運行機制：畫面上右邊是呂布（圖片使用 K.png），左邊是張飛（圖片使用 CHANG.png）和關羽（圖片使用 G1.png）。這三個人物會先由電腦自動執行行走與攻擊，而且呂布一開始能完全阻擋攻擊不受傷。遊戲過了 10 秒後，劉備（圖片使用 RU.png）會從最左方登場，玩家可以透過鍵盤控制劉備移動，並按確認鍵攻擊呂布；當攻擊呂布 5 次後，呂布就會往最右邊離開，畫面跳出「遊戲結束」。

在製作過程中，我也進行了檢核與修正。在歷史考據上，我發現歷史上其實是騎馬作戰，而且張飛使用的武器不太正確，人物登場時間也需要再修正。而在遊戲機制上，原本人物只能水平移動，我要求調整為整個平面都可以上下移動，且初始的三個人物不能在同一個水平面上；另外也補強了碰撞與對話機制：當攻擊碰到呂布時他會隨機後退，劉備出現時呂布會大喊「沒在怕」，被攻擊 5 次後喊「不妙」，隨後跑開結束遊戲。

我的介入與驗收方式，主要是扮演「規格引導與測試驗收者」。透過給予明確的指令（如指定圖片檔名對應、操作方式、對話觸發條件與勝敗判定），並親自進行鍵盤操作測試，確認整體遊戲流程順暢。

最後，這次經驗給了我很棒的教學反思：AI 代理人確實能大幅簡化遊戲製作的門檻，但 AI 生成的內容——不論是歷史考據（如騎馬、武器）還是邏輯設定——都可能出現錯誤。因此，未來讓學生使用 AI 代理人時，重點不只是交給 AI 去做，學生自己更需要具備對歷史文本的檢核能力與修正導正的能力。

謝謝大家！

https://elegant-blini-b1d411.netlify.app/

1. 教學目標：希望學生練習什麼？

本課程希望學生透過 AI 代理人完成一個可以分享在網頁上的遊戲，學習如何將創意轉化為具體作品。學生需練習以提示詞（Prompt）描述需求、設計遊戲規則、規劃故事情境、建立出題模式、測試遊戲功能，并理解 AI 協助程式開發（Vibe Coding）的流程。此外，也培養學生問題分析、除錯、反思與數位素養能力。

2. 任務規格：我如何向代理人說明需求與完成標準？

在向 AI 代理人說明需求時，採用了「逐步迭代、漸進式開發」的策略，具體規格如下：

       ．視覺與角色設計：以 images/background.png 為背景、images/CATMARIO.png 為主角（後續放大 2 倍並於通關時轉身切換為 CATMARIO2.png），並引入 attack/ 資料夾圖片作為隨機出現的攻擊者（放大 1.5 倍）。

       ．遊戲機制與玩法：

o   闖關設計：從單一元素測驗逐步過渡到多元素配對；遇到攻擊者時觸發防禦答題機制。

o   題目類型：涵蓋原子序、元素符號、中文名稱，以及「族、週期、金屬/類金屬/非金屬」等屬性；包含單選、複選與點選連線配對（免輸入，最多 7 個選項）。

o   最終關卡：完成全圖 data/b元素週期表.jpg 格線對齊的終極填空，支援滑鼠滾輪橫向滾動且不顯示捲軸與前綴數字。

        ．完成標準：

o   正確解答可累積寶藏勝率，通關時觸發主角轉身動畫。(主角圖最後怪怪的-去背不完全)

o   答題互動需具備高視覺辨識度（當前位置閃爍提示、答錯重出題且清除舊選項、最後一關一次亮一格且答對才進下一格）。

3. 作品成果

       ． 作品名稱：貓咪瑪莉歐之元素週期表大冒險 (網頁互動遊戲)

       ． 核心功能：

      1).浮動週期表參考圖：支援滑入、浮出與關閉，方便隨時查閱。

     2). 動態戰鬥答題系統：玩家控制主角移動，當攻擊者出現時暫停並觸發隨機元素測驗，答對才能繼續前進。(目前是一直出題，主角沒有移動的餘地)

      3).多樣化題庫與介面：結合屬性配對與填空，完全免去鍵盤輸入，採用純點選/連線互動。

      4).終極週期表填空關卡：精確對齊週期表網格，並提供流暢的滾輪橫向瀏覽體驗與閃爍提示。(目前仍未對齊)

4. 代理人的工作：它使用了哪些檔案或工具？完成哪些步驟？

       ． 使用檔案與資源：

o   圖片資源：images/background.png、images/CATMARIO.png、images/CATMARIO2.png (去背處理)、attack/* 攻擊者圖檔。

o   圖表資料：data/元素週期表.webp (浮動參考圖)、data/b元素週期表.jpg (終極關卡底圖)。

       ． 執行的開發步驟：

      1).前端架構搭建：建立 HTML5 Canvas/DOM 遊戲渲染機制，繪製背景與角色。

      2).邏輯與事件處理：編寫主角與攻擊者的碰撞偵測、動態生成攻擊者演算法。

      3).題庫與答題邏輯開發：建立元素屬性映射表，實現隨機抽題、選項生成（最多 7 選項）、單/複選與配對機制。

     4). UI/UX 優化：設定 CSS 自動去背、元素格線精確對齊、動態高亮閃爍效果及隱藏捲軸（支援 wheel 事件橫向滾動）。

5. 自主檢核歷程：代理人進行了哪些測試與修正？

代理人在收到修正指令後，進行了以下幾輪的調整與修復：

       ． 第一輪：建立基礎遊戲流程、浮動視窗與初步的答題機制。

       ． 第二輪（視覺與題目優化）：執行主角去背圖片切換；移除計算量較大的「原子量」題目以符合國中複習需求；微調終極關卡 DOM 元素以對齊背景圖格線；加入「閃爍顏色標示」提升使用者注意力。

       ． 第三輪（教學邏輯修正）：調整錯題機制為「答錯不提示答案，直接隨機抽新題」；終極關卡改為「一次亮一格，答對才亮下一格」的遞進式體驗。

       ． 第四輪（UI 細節修補）：重置答題狀態（答錯重出題時清除前次選項）；擴充複選題功能；隱藏 UI 捲軸與選項左側數字，改為純滑鼠滾輪橫向滑動。

       ． 第五輪（整體細節修補）：修補出現的考題無選項的重大錯誤，微調主角與攻擊者做放大，增加攻擊者數量，且遇到攻擊再出題。

6. 我的介入點：我在哪裡補充、修改、拒絕或重新下達指令？

作為開發者與教學設計者，我在以下關鍵點進行人為介入：

     1). 刪減不合適內容：在第二次修改時，主動要求「去掉計算原子量的題目」，避免遊戲過於冗長，聚焦於週期表規律記憶。

      2).調整遊戲節奏與難度：在第三、四次修改中，拒絕了 AI 原本「直接給解答」的預設邏輯，改為「答錯不提示直接換題」，並新增「複選題」與「動態閃爍提示」來提升挑戰性與指引性。

     3). 優化 UI 質感：針對第四、五次出現的畫面問題，明確指定「主角放大 2 倍、攻擊者 1.5 倍」、「隱藏捲軸與數字」、「最後一關答案格精確對齊」。

     4). 抓出邏輯 Bug（致命錯誤）：在第五次修改時，發現「出現考題無選項導致無法繼續遊戲」的重大缺陷，並及時下達指令要求修復。

7. 問題與風險：曾出現哪些錯誤、不適當內容或安全疑慮？

       ． 邏輯漏洞與程式崩潰：第五次修改後出現「觸發考題時畫面沒有出現選項，導致遊戲卡死無法繼續」的嚴重邏輯錯誤。

       ． UI/UX 對齊與視覺不佳：最後一關答案框無法精確覆蓋底圖格線、出現冗餘的捲軸與數字前綴、角色尺寸過小導致視覺張力不足。

       ． 題目難度不符目標：初版包含「原子量計算」，對國中生快速複習元素週期表的意圖而言過於負擔，偏離了遊戲化學習的初衷。

8. 教學反思：若交給學生操作，我會如何確認學習真的發生？

      1).提示詞工程日誌 (Prompting Log)：要求學生記錄每次下指令的理由與修正邏輯（例如：為什麼要去掉某種題型？遇到了什麼 Bug？如何向 AI 描述問題？）。

      2).Vibe Coding 測試與除錯報告：學生不能只「複製貼上」，必須能指出 AI 寫出的遊戲在哪裡出錯（例如選項沒印出來、格線沒對齊），並能用精準的語言要求 AI 修復。

      3).同儕互評與試玩：讓學生互相交換玩對方的元素週期表遊戲，測試遊戲性與題目正確性，從玩家反饋中進行多次迭代。

      4).試玩與修正歷程口述：講述遊戲規則、理念、欲達到的目標，確認學生在設計遊戲與測試遊戲的過程中，真的掌握心裡理想與實際產出是否符合原先的預想。

      5).AI最終沒做到的補述：距離理想目標有多大的差距。

90 秒分享逐字稿

大家好！今天想跟大家分享我如何透過 AI Agent，打造一款國中化學的『貓咪瑪莉歐元素週期表冒險遊戲』！

這次的開發體驗完全就是標準的 Vibe Coding 流程。這次的教學設計是希望學生透過 AI 協助程式開發（Vibe Coding），將創意轉化為網頁遊戲作品。一開始，我給AI 基本的遊戲架構：用貓咪瑪莉歐當主角、minecraft界面與人物當背景，結合怪物襲擊觸發元素問答，將原子序、元素符號及金屬非金屬屬性融入單複選與連線題庫中，挑戰全圖格線對齊的終極填空。

在開發過程中，我經歷了五次精細的調校。例如，我發現計算原子量會打斷遊戲節奏，就主動請 AI 刪除計算原子量的題目，改聚焦在複習重點『族群、週期與金屬屬性』；為了增加挑戰性，我讓AI Agent答錯時答錯不給答案(不做提示)、直接隨機抽新題；並修復介面捲軸、精確對齊背景格線。

當然，過程中也遭遇挑戰，像是第四次修改後出現『考題卻沒有選項導致遊戲卡死』的重大邏輯錯誤，使遊戲無法繼續而被迫進入第五次修改。這時候，教師與開發者的『人為介入與中途驗收』就非常關鍵！這次希望怪物數量增加與角色調整放大，剛好也遇到額度滿了且改好了，雖然不是自己想要的結果。

如果把這套經驗帶到課堂中，我會透過提示詞工程日誌、除錯報告、同儕互評以及學科知識快問快答及AI未達成的部分做補述，學生在過程中不只是把原本枯燥的背誦化學元素當成是苦差事，而是實際練習如何定義問題、下達精準提示詞、進行軟體測試、問題分析、補充修正內容，進而學習與 AI 協作的數位素養。這就是我們想帶給學生與AI共學的學習模式。

https://docs.google.com/presentation/d/19ykF7scjeSI-xq8_cJ2vNxrZohyzKTPFWYZ_Nwm4x6A/edit?usp=sharing

寫一個可以用鏡頭控制滑鼠的python程式並執行它

1.如果系統沒有安裝python請安裝合適的版本並安裝必要的元件

2.反覆執行並除錯，直到程式成功啟動並功能可以正常運作

3.幫我在桌面上創一個專案資料夾，並做一個可以快速執行的批次檔(先驗証可否順利執行)

4.程式上傳到github

由於學生識字率不足或看了文字卻讀不出來，僅靠教師口頭棒助學生朗讀並仿說，然而接收詞彙後還是不能夠達到標準，於是在國語文領域課程設計上可以透過生成式AI遊戲讓學生也能夠學習單字、詞語和成語，增加識字量。

2.任務規格：我如何向代理人說明需求與完成標準？

AI代理人工具：Google AI Studio

我請AI幫我做一個適合給多重障礙學生的中文打字遊戲app，裡面包含單字、詞語、成語，螢幕要有上下左右按鍵呈現視覺化，加上使用單桿並搭配大按鈕可以操控戰鬥機射擊怪獸身上按照順序的字，並且加上視覺提示和語音輔助學生完成遊戲任務，遊戲是積分制，有3次機會，機會用完重新開始，雖然有達到我想要的作品成果，但有些小部分需要微調與修改。

3.作品成果：附上連結、截圖、短片或 GitHub 網址。

https://aistudio.google.com/apps/1bda3bf1-3af8-4344-afb2-ed896202a46f?showAssistant=true&project=gen-lang-client-0045690773&showPreview=true

4.代理人的工作：它使用了哪些檔案或工具？完成哪些步驟？

Google AI Studio幫我生成：

三階段(單字、詞語、成語)學習題庫與自訂(家長或教師)詞庫

按照順序射擊怪獸字卡

視覺化單桿與超大發射按鈕

多重無障礙視覺與語音輔助

積分制與 3 次機會機制

另外我也使用過Antigravity設計一個中文打字遊戲，可是只能免費使用5小時，而且是每週定期重置，需要花錢購買pro，但是兩樣作品的呈現內容上大同小異，過程不同。

5.自主檢核歷程：代理人進行了哪些測試與修正？

混淆干擾字怪獸與無障礙彈性設定

6.我的介入點：我在哪裡補充、修改、拒絕或重新下達指令？

7.問題與風險：曾出現哪些錯誤、不適當內容或安全疑慮？

在遊戲螢幕中有出現漢字拼字，教材內容上不負和我的期望，但可以做為羅馬拼音教材參考。

8.教學反思：若交給學生操作，我會如何確認學習真的發生？

(1)認知層面：理解基本邏輯閘（AND, OR, NAND ,NOR）與組合邏輯閘的真值表與運算邏輯。

(2)技能層面：能透過圖形化拖拉介面，將輸入訊號（高/低電位）與邏輯閘組合，精確控制指定 LED 燈泡的亮滅狀態。

(3)思維層面：培養邏輯推理與反向思考能力，並建構動態除錯的精神。

2.任務規格

遊戲核心機制：

(1)輸入源：提供可切換的高/低電位開關（Switch 1/0）。

(2)元件庫：包含 AND、OR、NAND、NOR 等 4 種圖形化邏輯閘模組。

(3)輸出終端：LED 燈泡（1 為亮燈，0 為熄滅）。

3.作品成果

(1)跨平台 Web 互動式教學軟體：免安裝、開啟瀏覽器即可運行的圖形化邏輯閘模擬器。

(2)可視覺化電路介面：具備直覺的點選開關功能、訊號動態顯示。

4.代理人（AI Agent）的工作

(1)前端介面生成：使用 HTML5 技術繪製圖形化邏輯閘模組，並建立結點連線的邏輯。

(2)電路模擬引擎撰寫：建立運算核心，遞迴計算由開關至 LED 燈泡的最終邏輯值。

(3)自動化測試：代理人自動啟動虛擬瀏覽器，模擬點擊與連線動作，確保每個關卡的預設解法均能正常觸發亮燈。

5.自主檢核歷程

(1)語法與邏輯檢驗：寫完運算核心後，自動執行單元測試，驗證如 1 NAND 1 = 0 等運算是否精確。

(2)邊界條件測試：檢測懸空連線（未連接輸入端的邏輯閘）、環狀連線是否會導致系統崩潰或死鎖。

(3)UI/UX 自動化驗證：Agent 透過截圖與操作錄影，檢視邏輯閘圖示是否對齊、連線是否流暢、亮燈特效是否正常呈現。

6.我的介入點（教師/開發者的角色）

(1)教學法與關卡範疇定調：定義關卡難度梯度，決定納入哪些邏輯閘。

(2)介面體驗指導：對 AI Agent 提出優化指令。

(3)教育學適切性審查：審核 AI 產出的遊戲文字描述與提示，確保專業術語精確且符合學生認知負荷。

7.問題與風險

(1過度試錯：學生可能不思考邏輯，只靠隨機拉線嘗試亮燈。

(2)邏輯混淆：學生如果對邏輯閘沒基礎認知，可能難以內化。

8.教學反思

(1)工具輔助開發的效率：藉由 AI Agent 處理繁瑣的圖形拖拉與電路邏輯算式，讓教師能將 90% 的精力聚焦於「關卡設計」與「教學引導」。

(2)引導式探索勝過口頭講解：傳統寫黑板真值表學生容易枯燥，透過遊戲化「亮燈」視覺回饋，學生的學習動機與抽象邏輯理解力顯著提升。

(3)未來發展方向：可考慮新增「自訂關卡模式」，讓學業成就較高的學生自己出題給同儕挑戰，深化邏輯設計能力。

【教學目標】
希望學生練習將影像辨識、程式設計與人機互動整合在一起，了解如何利用 Webcam 擷取即時影像，辨識手部關鍵點，並將手指的移動軌跡轉換成畫面上的線條。同時也希望學生學習如何清楚描述需求、測試 AI 產生的程式，並針對實際操作結果進行調整。

【任務規格】
我向 AI 代理人提出的核心需求是：「製作一個 Python 程式，可以藉由 Webcam 辨識手指，並在攝影機影像上產生畫圖效果。」

完成標準包括：

1. 能夠正常開啟 Webcam 並顯示即時畫面。

2. 能辨識手部與食指位置。

3. 食指移動時，可以在影像上畫出連續線條。

4. 手指收起或離開畫面時，停止畫線。

5. 提供基本的清除、橡皮擦、顏色與儲存功能。

6. 程式需附上套件安裝及操作說明。

【作品成果】
https://webcam-air-draw-web.vercel.app/

程式完成後，可利用食指在 Webcam 畫面上進行空中繪圖，也能切換顏色、使用橡皮擦、清空畫布及儲存圖片。

【代理人的工作】
AI 代理人使用 Python，並整合 OpenCV、MediaPipe 與 NumPy 等工具完成程式。

主要工作包括：

1. 使用 OpenCV 讀取並顯示 Webcam 即時影像。

2. 使用 MediaPipe Hand Landmarker 辨識手部關鍵點。

3. 取得食指指尖座標，將移動位置轉換成繪圖軌跡。

4. 建立透明畫布，將繪圖結果疊加在攝影機畫面上。

5. 設計食指畫圖、食指加中指選擇工具的操作方式。

6. 加入選色、橡皮擦、清除畫面、筆刷調整與圖片儲存功能。

7. 整理套件安裝指令及程式操作說明。

【自主檢核歷程】
代理人已對程式進行 Python 語法檢查，並在程式中加入攝影機無法開啟時的錯誤提示，也處理手部離開畫面後停止連線的情況。

此外，程式會在第一次執行時下載手部辨識模型，後續即可離線使用。由於代理人的執行環境無法連接實際 Webcam，因此目前尚未完成不同光線、背景、鏡頭角度及手指移動速度的實機測試，這些項目仍需由使用者在自己的電腦上進一步驗證。

【我的介入點】
我提出了使用 Webcam 辨識手指，並在影像上畫圖的核心需求。代理人完成初版後，我需要負責實際安裝、啟動攝影機及測試操作效果。

後續我也必須依照實際情況決定是否調整辨識靈敏度、筆刷粗細、選色介面、手勢判定方式及畫線穩定度，而不是直接將 AI 產生的程式視為最終成果。

【問題與風險】
可能出現的問題包括：

1. 光線不足或背景過於複雜，造成手部辨識不穩定。

2. 手指移動太快時，線條可能中斷或產生抖動。

3. 不同 Webcam 的解析度與效能，可能影響辨識速度。

4. MediaPipe 模型首次下載時，需要網路連線。

5. AI 產生的程式雖然通過語法檢查，但不代表已經完成所有實機測試。

6. Webcam 涉及即時影像，教學時應說明影像是否儲存及個人隱私注意事項。

【教學反思】
若交給學生操作，我不會只以「程式能不能執行」作為評量標準，而會要求學生說明手部關鍵點如何轉換成畫線座標，以及食指與中指手勢如何影響程式狀態。

學生也需要保留提示詞、測試紀錄、錯誤畫面與修改內容，並說明哪些程式是由 AI 產生、哪些地方由自己修改，以及為什麼要修改。最後可安排不同光線、距離與移動速度的測試，要求學生比較結果並提出改進方法，以確認學生真的理解程式，而不是只複製並執行 AI 提供的內容。

90 秒教師共備分享逐字稿

這次我實作的作品是「Webcam 手指辨識空中畫筆」。教學目標是希望學生能將 Python 程式設計、即時影像處理和手部辨識結合起來，了解手指的座標如何轉換成畫面上的繪圖軌跡。

我交給 AI 代理人的任務是，製作一個能透過 Webcam 辨識手指，並直接在攝影機影像上畫圖的程式。完成標準包括能開啟攝影機、辨識食指、畫出連續線條，並提供清除、橡皮擦、選色和儲存圖片等基本功能。

代理人使用 Python，搭配 OpenCV、MediaPipe 和 NumPy，完成攝影機畫面擷取、手部關鍵點辨識、透明畫布疊加，以及手勢操作功能，也整理了套件安裝和程式操作說明。

在自主檢核方面，代理人完成了 Python 語法檢查，並加入攝影機開啟失敗等錯誤處理。不過，因為代理人的環境無法實際連接 Webcam，所以光線、鏡頭角度與手指移動速度等問題，仍需要由我在實際電腦上測試。

我的介入主要是提出核心需求，並負責最後的實機驗收。我不會因為程式可以執行，就直接認定作品完成，而是會觀察辨識是否穩定，再調整靈敏度、筆刷和手勢設計。

若讓學生使用 AI 代理人，我會要求他們說明程式原理、保留測試與修改紀錄，並比較不同環境下的辨識結果，確認學生真的理解與參與，而不是只把 AI 產生的程式複製下來。

適用年級：高二

設計初衷：讓學生透過實作了解加解密的方法

2.作品連結：

https://gemini.google.com/share/d/1JJHCH8kdYm5kK1ojCpRYp2Xyt6v97zwZ?usp=sharing

3. 我的原始構想：

希望能設計一款專為初學者打造的互動式「資安加解密小遊戲」，打破密碼學枯燥抽象的刻板印象。構想包含由淺入深的關卡機制、即時運算的解密工作臺，以及破關前的觀念範例引導，讓學生能透過角色扮演與動態實驗，輕鬆理解經典至現代密碼學的核心原理。

4. AI協助的部分：

AI 在此專案中擔任技術與介面實現的角色。主要負責使用 Tailwind CSS 製作響應式網頁，並以 JavaScript 編寫 5 種密碼學演算法（凱撒、阿特巴什、Base64、維吉尼亞、XOR）的演算邏輯、計分計時器，以及彈出式的教學與結算視窗元件。

5. 我負責的部分：

我主要負責教學架構規劃與學習體驗設計。包含設定從古典單表置換到現代二進位運算的關卡遞進邏輯、編寫適合初學者的白話解說與解密秘訣、定義題型範例，並向 AI 提出調整需求，確保整體遊戲難度與介面設計能精準契合課堂學生的學習脈絡。

6. 一次問題與修正經驗：

初版生成後，我發現關卡缺乏前導引導，無基礎的學生直接面對密文容易感到挫折。因此我請 AI 調整流程，增加「前導教學 Model」，在學生挑戰前先展示觀念與運算步驟卡片，並新增「重看範例」按鈕，成功讓學生在學習觀念後再順利破關。

7. 教學應用與思考：

運用「觀念說明 ➔ 範例演示 ➔ 互動測試 ➔ 實戰破關」的鷹架教學，在遊戲中加入 Base64，讓學生更加了解「資料編碼」不等於「安全加密」的迷思，結合情境任務與即時音效，提升資訊課堂的參與度與學習動機。

8. 分享逐字稿：

「各位老師好！今天分享我開發的《資安特攻：密碼解構者》小遊戲。我的構想是讓學生以特工破關學密碼學。我規劃了 5 個漸進關卡與觀念範例，AI 則負責網頁與演算法程式。開發中我發現初學者容易卡關，因此請 AI 加上『前導教學』。這個設計能幫助學生先懂觀念再破關，增加他們的信心」

我們學校學生程度較重，大多數學生識字量不足或看了文字卻讀不出來，僅靠教師口頭協助學生朗讀並仿說，即使從教師口中說出的詞彙卻還是不能夠獨立唸讀，於是在國語文領域課程設計上透過生成式AI遊戲讓識字率低的學生也能夠學習更多單字、詞語和成語，增加識字量。

2.任務規格：我如何向代理人說明需求與完成標準？

AI代理人工具：Google AI Studio

我請AI幫我做一個適合給多重障礙學生的國語識字遊戲app，裡面包含單字、詞語、成語，螢幕要有上下左右按鍵呈現視覺化，加上使用單桿並搭配大按鈕可以操控戰鬥機射擊怪獸身上按照順序的字，並且加上視覺提示和語音輔助學生完成遊戲任務，遊戲是積分制，有3次機會，機會用完重新開始。雖然有達到我想要的作品成果，但部分內容需要多次微調與修改。

3.作品成果：附上連結、截圖、短片或 GitHub 網址。

https://ai.studio/apps/1bda3bf1-3af8-4344-afb2-ed896202a46f

4.代理人的工作：它使用了哪些檔案或工具？完成哪些步驟？

我請Google AI Studio幫我生成：

★三階段(單字、詞語、成語)學習題庫與自訂(家長或教師)詞庫

★ 按照順序射擊怪獸字卡

★視覺化單桿、單鍵掃描與超大發射按鈕

★ 多重無障礙視覺與語音輔助

★積分制與 3 次機會機制

另外我也使用過Antigravity設計一個國語識字遊戲，可是只能免費使用5小時且每週定期重置，若再繼續使用則需要花錢升級，但是兩樣作品呈現的內容上大同小異，過程不同罷了。

5.自主檢核歷程：代理人進行了哪些測試與修正？

★混淆干擾字怪獸與無障礙彈性設定

★語音與視覺即時提示：關卡開始時，語音輔助會提醒學生：「注意：畫面上有混淆干擾字，請找到正確的成語字！」。

★移除應用程式中的所有漢字拼音

★全新精靈造型設計並隨機遊走

★自訂題庫中的「IEP特教個別化目標」文字標籤更改為「自訂學習詞彙」，並註明「教師與家長自訂」

★浮動半透明 HUD 雙角設計：將原本會遮擋整個螢幕下半部的大區塊，改為左下角浮動方向搖桿與右下角浮動紅色發射大按鈕，中央飛行戰鬥區域完全透明，無遮擋。

★靈活可讀：上方保留輕量化目標提示 Badge 與輔助設定按鈕，提供學生清晰易操作的介面體驗。

★移除重複與衝突遮擋：清除了虛擬操控介面左上角的重複目標標籤，避免控制鈕與頂部學習資訊欄相互碰撞遮擋。

★優化怪獸漂浮區域：調整怪獸漂浮範圍於螢幕中段，確保怪獸不會飄至頂部橫幅後方擋住文字閱讀。

★單鍵掃描四向箭頭 UI：單鍵掃描模式已改為呈現**「⬆️ 上、⬇️ 下、⬅️ 左、➡️ 右」四個方向箭頭**與發射主鈕，讓學生能直觀地看著四個箭頭位置進行自動循序掃描與單鍵觸發。

★快捷音樂開關：於遊戲頂部 HUD 工具列加入【音樂：開/關】快捷按鈕，可一鍵隨時開啟或關閉背景音樂。

★刪除「成語/詞意：」文字前綴：已將頂部提示欄的「成語/詞意：」標籤移除，改以簡潔的 💡 圖示直接呈現完整語意與解釋內容。

★隨機題目與流暢重新開始：取消從頭開始（第 0 題）的固定順序，不論是按「重新開始」、過關換題或是切換題庫類別，系統都會隨機抽出學習字詞，確保練習過程多變且具趣味性。

★自訂題庫新增 Gemini AI 自動生成解釋：在「學習字詞卡庫」自訂題庫中，輸入字詞後點擊「AI生成」按鈕或離開輸入框，系統會自動呼叫 Gemini 語言模型，產生適合不同程度學生理解的白話字詞解釋，無需手動輸入。

★正確認讀與注音支援：自動生成時，系統亦會一併生成正確的繁體中文注音符號標記。

★彈性手動微調：自動生成後，教師或家長仍可自由編輯或修改解釋內容。

6.我的介入點：我在哪裡補充、修改、拒絕或重新下達指令?

★自訂題庫新增自動生成解釋：手動輸入相關字詞，新增「AI生成」自動幫我生成解釋，省下手動輸入字詞解釋的時間。

★浮動半透明 HUD 雙角設計：大區塊遮擋中間螢幕，導致操作戰鬥機視線不清晰，修改成兩邊各別放置方向搖桿及紅色發射按鈕。

★隨機題目與流暢重新開始：每次機會用完重新開始後仍然出現同個題目，於是修改成隨機切換題目不重複，增加趣味性。

7.問題與風險：曾出現哪些錯誤、不適當內容或安全疑慮？

在遊戲螢幕中有出現漢字拼音，教材內容上不符合我的期望，但可以做為英文科教學參考，例如：護照及畢業證書名字使用羅馬拼音。

8.教學反思：若交給學生操作，我會如何確認學習真的發生？

在教學前先確認學生是否會操作，例如電腦、平板或手機，以往我過去的教學經驗，很多學生家中幾乎沒有電腦或平板供他們自主學習，導致他們沒有機會操作滑鼠或鍵盤，或者是缺乏家長陪伴與指導，在學校中教師都需要花時間解釋如何使用滑鼠和鍵盤，甚至螢幕介面操作，與其教導他們怎麼使用滑鼠和鍵盤，不如教他們融入遊戲學習更多詞彙，透過多次刺激反應練習、增加反應速度、提升專注力、獎賞準備來幫助學生增加識字量，漸漸地學生學會操作平板和電腦來參與課堂活動，提升自主學習能力。

希望可以用自己上課的邏輯去架設單元

製作了三種版本，還是無法達到心目中的要求

一、Python 互動學習館

第一個成功的版本

產生一個看起來很棒的版本

https://share.gemini.google/1UQtUDSKgJbD

因為有很多想改的地方，於是一直要求AI修改，最後整支程式壞了

中途可RUN的程式

https://share.gemini.google/YJQfSqY7Twzb

改細節時一次不能給太多 會改到無法負荷

出現以下訊息

身为一个语言模型，我没法提供这方面的帮助。

由于程序代码的局限，我无法提供这方面的帮助。

我只是一个语言模型，无法为你提供这方面的帮助。

最後一個 改到壞 的版本

https://share.gemini.google/yukcIHxCvQaY

（程式碼沒有留下來)

二、Python 互動學習課程

https://share.gemini.google/WyT1wdP47QFS

原本產生的不滿意 改過好多次的版本

有15個單元 程式實作的部分每個單元出題

https://share.gemini.google/KglWU1Cd1hDt

三、Python 學習館

單元確立 各單元不能執行

https://share.gemini.google/mXxwb5sHZtKF

可執行程式的版本

https://share.gemini.google/EugrNV3Ucsjz

可執行程式 每題有留著上一題的程式碼

https://share.gemini.google/UuYeNButfiYq

留有3-18單元的實作 有挑戰

https://share.gemini.google/W0PDfKgcI8K6

留有1-5單元的實作 有挑戰

https://share.gemini.google/7eOSd3dHlpbb

只留下最後一版的程式碼

打算用修改程式的方法來做最後的可以上課的網頁

一、教學目標:希望學生練習用AI Agent來生成遊戲

二、任務規格:幫我打造一個超華麗的進階版小蜜蜂遊戲。請同時併發執行以下幾個子代理任務，不要循序等待，你負責將這些人的成果整合起來，做出遊戲：

1.專案建置：用背景指令直接幫我建立一個vite + react的現代化前端框架。

2.美術生成：同時發動5次圖片生成工具，分別生成「玩家戰機」、「3種不同風格的小怪」、「1隻巨大的異形母艦」。

3.資料搜尋：同時去網路上搜尋"Galaga Original arcade enemy movement patterns”(經典小蜜蜂敵機移動邏輯)。

4.特效與音效：等到專案建好後，結合你搜隻到的移動邏輯，寫出動態星空CSS以及Web Audio的射擊音效。

三、作品成果:如截圖(因為是安裝在電腦,所以生成在自己電腦,無法連續結作品)

四、代理人的工作:用antigravity 2.0,剛開始打字只打第一行(幫我打造一個超華麗的進階版小蜜蜂遊戲),要換行打任務分配時不慎按了Enter ,所以沒有交待1~4的任務就執行了,只生成了遊戲的封面,換了遊戲開始裡面是空的,再交待要完成後續任務,就消耗完了目前的token.

五、自主檢核歷程:antigravity剛生成的遊戲裡面是空的,告知裡面沒有玩家戰機和敵機,請它生成,結果都生在遊戲的封面(即一開始的畫面),請它在遊戲開始之後生成玩家戰機和敵機,它雖然說已生成完畢,仍然看不見,請它修正這問題,仍不見效。

六、我的介入點:把它的程式及問題丟給chatgpt,它最後一步步告知我如何修改程式,最終完成了。

七、問題與風險:當然,如果學生在利用這些工具生成圖片、內容、程式,都要隨時在旁觀察,是否有不當內容或危害。目前我生成的遊戲還沒有風險,只是叫它一次做太多,有時會做錯,或許用到免費版所局限,也有可能。

八、教學反思:要確認學生是否真的學習到,可以交待複雜的工作,一般免費AI無法一次達成,要多次try-and-error,測試功能是否正常,並檢查生成的過程,就知學生是否用心。

九、90秒分享逐字稿:教學目標是希望學生練習用AI Agent來生成遊戲。我利用antigravity 2.0來生成一個超華麗的進階版小蜜蜂遊戲。我請同時併發執行以下幾個子代理任務:專案建置、美術生成、資料搜尋、特效與音效。剛開始沒打字完不慎按了Enter就開始生成了,剛生成的遊戲裡面是空的,告知裡面沒有玩家戰機和敵機,請它生成,結果是生在遊戲的封面(即一開始的畫面),想再交待要完成後續任務,就消耗完了目前的token,還要等約一個禮拜後,才叫修正沒有玩家戰機和敵機的問題,但檢查還是沒有做到。最後把它的程式及問題丟給chatgpt,它一步步告知我如何修改程式,最終完成了。