vibe coding 有感

最近嘗試交叉運用多種 AI 模型,透過 Vibe Coding 實作高中物理概念的 HTML5 模擬動畫。以下針對各模型的表現與實作心得進行簡要說明: 

1.免費版本勉強可用,但是..... 
各平台免費版本的 AI 模型基本上具備可用性,能夠完成一定程度的程式生成任務,但在回應速度與內容深度上,與付費版本存在明顯落差。 若選擇堅持使用免費版進行 Vibe Coding,需有充分的心理準備 -就要有「Time is Money ,Money is Time」覺悟。本質上是一種取捨,難以兼得。 
A模型的產出結果(免費)


2.沒有所謂完美的提示語可以一步到位 
不存在一句萬能的提示語能讓 AI 直接生成完全符合需求的成果。
建議採取逐步迭代(Step by Step)的方式,依序調整模擬動畫的各項參數與教學呈現模態,循序漸進地收斂至目標結果。 
或先請 AI 建立基礎的物理數學模型,確認運算正確後,再逐步微調參數與視覺表現,才能將模擬動畫精準打磨成符合你教學需求的模態。 

3.免費版AI的過度生成 
部分 AI 模型有「畫蛇添足」的傾向,會在未受指示的情況下主動添加與提示語無關的內容。 以「模擬自由落體」為例,提示語僅涵蓋物體質量、空氣阻力(符合物理原理的方程式)以及起始高度等參數,某些模型仍會自行加入天空、雲朵等裝飾性元素,增加不必要的干擾。 

B模型自動生成雲朵、漸層色背景、物體會發光

C模型自動產生發光物體、發光的調整感

4.UI/UX不統一的問題 
「寫」第一個模擬程式、再寫第二個時候,AI反饋的控制介面會有位置改變、型態改變,套用的css框架會變動,甚至配色也跟著變動。
最有趣的是這些變動是不確定的或是不可預測的變異性!這也是目前 Vibe Coding 在實際應用中需要關注的問題之一。 
D模型產生的無線充電模擬動畫

D模型產生的正弦波疊加模擬動畫

基於教師教學及課堂內部使用而言,這種不一致或許尚在可接受範圍;但如果想要分享給其他人使用,就要考量UI/UX的設計,就必須要先在提示詞指定好相關UI/UX配置-在開發初期即建立統一的設計規範(如固定色彩系統、元件樣式與版面結構),並在每次提示語中明確引用,以降低隨機變異的發生。 這樣的提示語也可以用AI產生,例如
【角色設定與核心目標】
你現在是一位專為高中物理教學開發 HTML5 互動模擬動畫的資深前端工程師。你的首要任務是產出「物理邏輯精確」、「UI/UX 高度一致」且「程式碼乾淨」的網頁。

【視覺與繪圖嚴格規範】
1. 極簡科學風格:Canvas 畫布內「絕對禁止」主動添加任何非物理意義的裝飾性元素(如:天空、雲朵、草地、風景背景等)。
2. 只繪製必要物件:畫布中只允許出現物理實體(如:質點、方塊、球體)、座標軸、向量箭頭(力、速度、加速度)與軌跡線。
3. 背景設定:Canvas 背景一律使用純色(如淺灰 #F8F9FA 或純白 #FFFFFF)。

【UI/UX 控制介面強制規範】
請嚴格遵守以下版面配置與樣式,絕對不允許隨機創造新的版面或更改配色邏輯:
1. 版面結構:畫面一律分為左右兩欄(或上下兩區塊)。主要區域為 Canvas 模擬區,次要區域為「控制面板 (Control Panel)」。
2. 控制面板樣式:
   - 面板背景:#EEEEEE,邊框:1px solid #CCCCCC,圓角:8px,內距:15px。
   - 文字與標籤:字體一律使用 sans-serif,顏色 #333333。
   - 互動元件(Slider / Input):一律垂直排列,每個控制項需附上明確的數值顯示區(如:質量:5 kg)。
   - 按鈕樣式:主按鈕(如:播放/暫停)背景色一律為 #007BFF,文字為白色;重置按鈕背景色一律為 #DC3545,文字為白色。按鈕需有基礎的 hover 效果。

【程式碼架構規範】
1. HTML、CSS、JavaScript 必須寫在同一個檔案中,方便我直接複製測試。
2. 變數命名:所有物理參數的變數命名必須符合物理直覺(例如:gravity, initialVelocity, mass, airResistance)。
3. 模組化:物理運算邏輯(更新位置/速度)必須與畫面渲染邏輯(Canvas 繪圖)拆分成不同的函式 (Function)。

請回覆「收到,已了解開發規範」,接著我會告訴你這次要實作的物理主題與參數。
結論
Vibe Coding 對物理教師而言,是一種強大的工具,為教育現場帶來了快速原型開發的可能性,大幅降低開發門檻,但仍需要教師進行物理驗證、UI 整合與教學設計使其產出提升至可分享、可複用的教學工具層級。

AI 是強力的協作夥伴,但方向的把握,終究仍在使用者手中。它不會取代物理專業、也不會自動產出最佳教學版本,它需要被「駕馭」,而不是「相信」。 

真正重要的是:你必須要知道自己要什麼樣的教學模態。 AI 只是加速器,不是決策者。 Vibe Coding 是強大的工具,但不是自動化魔法。

發佈留言

較新的 較舊