AI 協作教材開發實錄
用 AI 製作互動模擬
不是一次提示就得到完美成品，而是把需求、物理判斷與畫面問題拆成四輪修改；每一個版本都保留下來，讓你看見教材如何逐步成形。
這篇不是「一鍵生成」教學
AI 可以協助寫出 HTML、CSS 與 JavaScript，但題目是否正確、互動是否適合教學，仍需要教師逐輪檢查與決定。
這次以摩擦力為主題，從一段口語構想開始，依序留下 1.html、2.html、3.html 與 4.html。它們不是四個獨立模擬器，而是同一個作品的四個時間切片：每一次都先觀察目前結果，再只針對看得見的問題提出下一輪修改。
定義教學目標
決定學生要觀察的物理關係、可調變因、關鍵提示與圖表意義。
產生與修改程式
依照明確需求建立單檔網頁，再根據回饋調整視覺、控制與邏輯。
操作、比對、記錄
實際拖動控制項、檢查臨界狀態，再保存版本，避免修改後無法回頭。
四個版本各自解決什麼問題
版本號的價值不是證明越新越好，而是讓你知道哪一輪改了什麼、是否真的改善。
先讓核心模型動起來
建立施力滑桿、木塊運動、四個力與 F–f 關係圖，確認基本物理流程能操作。
修正方向與臨界提示
調整手勢、向量與軌跡呈現，加入最大靜摩擦力提示，但仍留下需要再修改的細節。
加入質量這個可調變因
讓質量改變正向力與最大靜摩擦力，並在接近臨界時提前提示。
把向量與圖表放到更好讀的位置
固定箭頭端點、放大木塊，並補上動摩擦力標記，讓畫面更接近課堂需要。
步驟 1 · 需求
版本一：先把腦中的課堂畫面說出來
第一輪不用先寫出完美規格，但要交代主題、可操作的量、學生要看到的關係，以及希望呈現的物理標示。
最初的口語需求是：
查看第一輪整理後的完整提示規格
角色與產出：請扮演物理教育網頁開發者，製作完整的單一檔案 HTML／CSS／JavaScript 摩擦力互動模擬。
版面：左側是桌面、木塊與推動木塊的手；右側是外力 \(F\) 對摩擦力 \(f\) 的關係圖。
互動：使用滑桿或拖曳控制施力，並提供重置按鈕。
物理：設定 \(m\)、\(g\)、\(\mu_s\) 與 \(\mu_k\)，且 \(\mu_s>\mu_k\)。靜止時 \(f=F\)，直到 \(f_{s,\max}\)；開始運動後改為動摩擦力 \(f_k\)。
視覺：畫出外力、摩擦力、正向力與重力向量，箭頭長度與數值對應，顏色清楚區分。
圖表：即時呈現靜摩擦區上升、達到最大靜摩擦力後下降至動摩擦力水平的典型關係。
技術與署名：使用 Canvas，程式集中在單一 HTML 檔，並在每次繪圖最後加入「© 阿偉的物理 x AI實驗室」浮水印。
操作施力滑桿，先確認核心模型是否能呈現靜摩擦與動摩擦的轉換；不要急著只看畫面是否漂亮。
步驟 2 · 修改
版本二：把「哪裡不對」改寫成具體任務
第一版已經能動，但手勢、力箭頭與圖表不符合預期。第二輪不重講全部需求，只列出可驗證的修改項目。
- 手應該朝右推動木塊，修正原本方向。
- 外力與摩擦力的向量必須清楚畫出來。
- 移除右側預先畫好的灰色關係線，只保留操作時逐步形成的紅色軌跡。
- 到達最大靜摩擦力時，在畫面與圖表上明確標記。
比較版本一與版本二：臨界提示變明顯了，但哪些畫面仍會讓學生誤讀力的作用位置？
步驟 3 · 再修改
版本三：增加質量，讓物理關係可以比較
第三輪不只修外觀，也加入新的可調變因，讓學生能觀察質量如何透過正向力影響最大靜摩擦力。
- 把外力紅色向量放在手的附近並指向木塊，摩擦力藍色向量靠近接觸面、方向相反。
- 移除圖表中不需要的 \(f_{s,\max}\) 與 \(f_k\) 預畫虛線，只在實際到達臨界點時標記。
- 到達臨界前先提示「快到最大靜摩擦力」，突破時再顯示更醒目的訊息。
- 新增質量滑桿，讓 \(N=mg\) 與 \(f_{s,\max}=\mu_sN\) 隨質量更新。
新增控制前要問
這個變因是否真的服務學習目標？質量滑桿的價值，是讓學生比較臨界摩擦力，不只是讓控制面板看起來更豐富。
新增控制後要測
改變質量後，正向力、最大靜摩擦力、圖表尺度與提示時機是否一起更新，不能只確認滑桿數字有變。
分別選擇較小與較大質量，再慢慢增加施力，觀察臨界提示與圖表標記的位置是否跟著改變。
步驟 4 · 成果前夕
版本四：把向量放到學生看得懂的位置
物理數值正確只是基本條件。箭頭從哪裡開始、往哪裡延伸、會不會壓住文字，都會影響學生如何解讀畫面。
- 外力箭頭尖端固定貼近木塊，力變大時向左延長，避免箭頭穿入木塊文字。
- 摩擦力箭頭移到木塊右下角，尖端固定在接觸處，向右延長並指回木塊。
- 除了最大靜摩擦力，也在實際進入運動後標記動摩擦力 \(f_k\)。
- 放大木塊與標示，改善投影時的辨識度。
比較版本三與版本四的向量端點、木塊大小，以及圖表是否同時標出最大靜摩擦力與動摩擦力。
把這次經驗變成可重複的製作流程
-
先寫學習目標，再寫畫面
先決定學生要理解什麼關係，再選擇滑桿、動畫、向量或圖表；不要從「我要一個很炫的網頁」開始。
-
第一輪只求核心模型可操作
先確認物理狀態、主要控制與數據更新，避免同時要求過多裝飾，讓真正的邏輯錯誤被畫面掩蓋。
-
一次修改一組相關問題
把方向、位置、臨界提示或新增變因分組處理。需求越能具體觀察，越容易判斷 AI 是否真的完成。
-
每一輪另存版本並寫下差異
保留可回復的檔案，不要永遠覆蓋同一份成品。若新修改破壞原本功能，才能快速比較與退回。
-
用極端值與臨界值測試
不要只停在預設狀態。測試施力為 0、接近 \(f_{s,\max}\)、剛開始運動、質量最小與最大時的結果。
-
正式上課前再做裝置測試
用投影幕、手機與窄螢幕檢查文字、滑桿、Canvas 尺寸、全螢幕與重新整理後的狀態。
常見問題
需要會寫程式才能開始嗎？
不一定需要從空白手寫程式，但至少要能操作檔案、辨認錯誤現象並保存版本。若要長期維護或處理複雜資料，理解基本 HTML、CSS 與 JavaScript 會大幅降低風險。
為什麼不直接請 AI 一次做到完整版？
需求越多，越難確認每一項是否完成，也更容易在修正新功能時破壞舊功能。分輪製作讓每次變化可比較、可測試、可退回。
1.html～4.html 是四個模擬器嗎？
不是。它們是同一個摩擦力教材在四個製作階段的存檔，刻意使用數字命名來呈現演進順序，因此不會改成 -sim。
AI 沒有照指示修改完整，應該怎麼辦？
先指出哪一個可見結果仍不符合預期，描述目前狀態與目標狀態，再要求只修改相關區域。避免只說「還是不對」，也不要在同一輪加入一長串全新功能。
怎麼判斷一個版本可以拿去上課？
至少要確認物理正確、操作目的清楚、關鍵文字在投影上可讀、手機與桌機不溢出、重置有效，並用臨界值走過完整教學流程。
製作結論
AI 負責寫程式，你負責「教學設計」
看看我最後的成果吧！下方就是經過這些對話溝通後產出的最終互動模擬。
透過這次製作「摩擦力模擬」的過程，你可以發現：我一行程式碼都沒寫，我所做的僅僅是「精準地描述需求」與「用物理專業進行除錯」。
過去，我們因為不會寫 Code 而無法把腦中的想法具現化；現在，各種 AI 工具就像是隨時待命的工程師。只要你擁有足夠的學科知識與想像力，你就能創造出專屬於你的互動教材。
別讓技術限制了你的教學，現在就開始這場「與 AI 的對話」吧！
最後再以學生視角操作：文字是否清楚、控制是否好理解、臨界狀態是否能被看見，而不只是確認程式沒有報錯。
重點整理
AI 寫程式，教師掌握教材方向
- 先描述學習目標、物理關係與可觀察結果，再要求 AI 實作介面。
- 每一輪保存獨立版本，逐條操作驗證，不接受只有文字上的「已完成」。
- 修改需求要具體到方向、端點、狀態與觸發條件。
- 1.html～4.html 保留真實歷程；正式上線版則負責穩定的課堂使用。