到底如何製作一個互動式模擬動畫呢？

第一步：向 AI 提出初步構想

我會以「摩擦力」作為主題，從頭到尾製作一次試給你看！

我第一步向我製作的 Gem『我的Html設計大師』提出需求。我的初步想法非常口語：
「我想要製作一個摩擦力的互動式動畫，我的初步想法是，左邊有一隻手在一張桌子上推著木塊，請幫我標注外力(F)、摩擦力(f)、正向力(N)和重力(W)的向量與符號，然後畫面左邊幫我畫一個會隨著我施力改變而產生的外力-摩擦力圖(F-f圖)」

是不是非常口語呢？然後他就會給我幫我寫好的「高品質提示詞」，讓我直接複製貼上到另一個對話去產生程式碼：

「請扮演一位專業的物理教育網頁開發者，幫我編寫一個完整的單一檔案 HTML/CSS/JavaScript，製作「摩擦力互動式模擬教學（Friction Simulation）」網頁。**需求規格與功能：**

1.  **版面佈局：**
    * 畫面分為左右兩區。
    * **左側（模擬區）：** 顯示桌面、木塊、以及一隻可以推動木塊的手。
    * **右側（圖表區）：** 顯示外力 ($F$) 對 摩擦力 ($f$) 的關係圖 ($F-f$ 圖)。
2.  **互動控制：**
    * 在左側模擬區下方或透過拖曳手部，使用者可以控制「施力 ($F$)」的大小（從 0 逐漸增加）。
    * 提供一個「重置」按鈕。
3.  **物理邏輯（核心）：**
    * 設定木塊質量 ($m$)、重力加速度 ($g$)、靜摩擦係數 ($\mu_s$) 與動摩擦係數 ($\mu_k$)。確保 $\mu_s > \mu_k$。
    * 當施力 $F < f_{s,max}$ 時，木塊靜止，摩擦力 $f = F$（靜摩擦力）。
    * 當施力 $F \ge f_{s,max}$ 時，木塊開始移動，摩擦力瞬間變為 $f_k$（動摩擦力，定值）。
    * 請模擬出木塊在受力後的運動狀態（靜止或加速移動）。
4.  **視覺呈現（向量與標示）：**
    * 在木塊重心處繪製四個力的向量箭頭，並標上代號：
        * 外力 ($F$)：向右，長度隨施力大小改變。
        * 摩擦力 ($f$)：向左，長度隨摩擦力大小改變。
        * 正向力 ($N$)：向上，長度固定。
        * 重力 ($W$)：向下，長度固定。
    * 箭頭長度需與數值成正比，顏色需區分清楚。
5.  **右側圖表動態繪製：**
    * X 軸為外力 ($F$)，Y 軸為摩擦力 ($f$)。
    * 隨著使用者調整施力，即時在圖表上畫出軌跡。
    * 呈現出 45 度斜線（靜摩擦區）上升到最高點，然後垂直下降到一水平線（動摩擦區）的典型特徵。
6.  **技術要求：**
    * 使用 HTML5 Canvas 進行繪圖。
    * 所有 CSS 和 JS 寫在同一個 HTML 檔案中。
    * 代碼結構清晰，變數命名具語意化。
**7. 強制浮水印功能（重要）：**
請在 Canvas 動畫程式碼中加入浮水印功能。在每次繪圖循環（animation loop）的最後，務必於畫布右下角繪製半透明的文字浮水印 "© 阿偉的物理 x AI實驗室" ，字體大小適中，顏色使用淺灰色，以免干擾教學內容。」

貼上後，選擇 Canvas，按送出，他就開始幫我寫程式碼了！等了一下就完成了。
👇 我們來看看版本一的預覽畫面，直接拖動下方的滑桿，觀察變化！

第一波修正：校正方向與細節

感覺已經很完整了，但是有些細節沒有達成我想要的內容，我就跟 AI 說：

然後他就開始努力的幫我改寫程式碼了。成果如下，還是有些沒修改到喔！

第二波修正：強化物理圖示與教學體驗

那我就只好繼續跟他講我的細部想法，繼續追加需求：

貼上後，有些修改了，有些還是沒到位。我們看看版本三的結果：

最後細節打磨：完美對準教學需求

那我就只好繼續跟他講我的想法：「你做得很好，但是我想要再細部修改一下：」

經過這輪修改，生成的「版本四」就非常接近我想呈現的畫面，幾乎已經可以直接在課堂上使用了。👇