本頁示範如何用一則自然語言需求，請 AI（此例為 Gemini）產出可貼給模型的結構化提示詞，再產出單檔網頁原型，並依操作體驗迭代修正。外部連結需登入 Google。
站內單檔示範（iframe）
單檔來源：public/showcase/billiard-simulator-standalone.html（檔名刻意與本頁路徑 /showcase/billiard-simulator 區隔，避免正式環境將 billiard-simulator.html 誤當成 React 頁）。備用嵌入：/embed/billiard-simulator。於框內瞄準、點擊擊球；高度不足可用「全螢幕」。
流程：需求 → 提示詞 → 產出 → 迭代
- 原始需求（給 AI）：「請教我產生一個『撞球教學網頁』的提示詞，要有擊球、進球的角度示範。」
- 模型回覆：角色、任務、視覺、互動、教學輔助線、物理、技術限制等段落化提示詞（見下方可複製區塊）。
- 產出：將提示詞貼回 Gemini（或其他程式碼模型）產生單檔 HTML/JS 應用。
- 迭代：成果示範1有錯誤：擊球後，球的形狀變了；請修正，滾動時要維持球的一致性；另外，角度正確後，球仍不太容易入袋，請改為較易入袋的可容誤差。
推薦提示詞（可複製貼給 AI）
角色設定：你是一位精通 HTML5 Canvas、Physics Engine（物理引擎）與幾何學的前端工程師。 任務：請寫一個單一檔案的 HTML/JS 網頁應用程式（Single File Web App），主題是「撞球進球角度教學模擬器」。 核心功能與需求： 視覺呈現： 繪製一個俯視視角的綠色撞球桌，包含 6 個球袋。 包含一顆母球（白色）和一顆子球（彩色）。 球體需要有簡單的光影渲染，看起來立體一點。 互動操作： 滑鼠移動控制球桿方向（瞄準）。 滑鼠點擊進行擊球（蓄力或直接擊發皆可）。 提供按鈕：「重置球位」、「隨機球位」。 教學輔助線（這是最重要的）： 假想球（Ghost Ball）：當瞄準線對準子球時，顯示子球進袋前，母球應該撞擊的理想位置（用半透明虛線圓圈表示）。 進球路線：顯示子球被撞擊後的預測路徑。 分離角（Tangent Line）：顯示撞擊後，母球會往哪個方向彈開（90度分離角原理）。 物理模擬： 實現基礎的 2D 碰撞物理（動量守恆）。 模擬摩擦力，讓球會慢慢停下來。 邊緣反彈。 技術限制：使用 Tailwind CSS 進行 UI 排版，所有程式碼（HTML, CSS, JS）整合在一個檔案中。
前往體驗（Gemini Share）
連結開啟後可能需登入 Google；無法於本站以 iframe 嵌入。