從一句提示詞，做出能操作的網站。
9:30・中文旁白與繁體字幕。用 ChatGPT／Claude 通用的需求表達方式，示範海面、風機、素材準備、資料查找與公開發布。練習集中在最後 8:40。
點影片內的播放鍵即可觀看；手機可橫放，再切換全螢幕。
看完後動手試
影片中的短版提示詞
我們要學會的是：怎麼開始、怎麼改
請陪我分階段做一個可操作的 3D 海洋網站。每次只加一項功能，完成後告訴我要看哪裡、怎麼確認有效。
本片為本次重現的教學示意；提示詞並非原作者私人對話。
先要求「可以操作的頁面」
請建立可預覽、可拖曳視角的互動網頁，不要只給說明文字。若目前不能直接預覽，請提供完整可執行檔案、檔名，以及逐步開啟方法。
介面與預覽能力依裝置、方案、帳號及設定而異；本片不保證每個帳號都有同一按鈕。
第一句先限定：只做海面
先只做一片藍色 3D 平面與可拖曳視角，加入重設視角按鈕。請用適合瀏覽器的做法；若使用 React、Three.js，請一併處理需要的依賴。這一步不加風機或資料。
Three.js 負責 3D；React 管理介面；React Three Fiber 讓兩者整合。無須先背 API。
先有平面，才有可以變形的表面
請保留目前平面，增加「顯示網格」按鈕；開啟後顯示組成表面的小格，關閉後回到藍色表面。先保持完全平坦。
此步不需要先下載海洋照片或 3D 模型；照片可供外觀參考，但不會自動變成可動海面。
打開網格，看見海面的骨架
請把平面分成足夠的小格，保留網格切換。先用適合一般手機的密度，不必一開始就用最高品質；請說明怎麼降低負擔。
格子較多可呈現較細變形，也增加計算量；密度應依裝置調整。
第二次指令：讓起伏持續移動
讓格點依位置與時間持續上下移動，形成向前推進的波浪。先做簡化波浪，保留網格切換，從側面也能看見起伏。請不要只換貼圖。
著色器可以讓顯示卡處理變形與水色；本片示範不等於已完成 FFT 海浪模擬。
加滑桿：數字與海面要一起變
加入波高滑桿，顯示公尺數值；拉高時波峰與波谷差距明顯增加，拉低就恢復。先標示「教學示意」，並加上還原預設按鈕。
教學波高控制用來觀察效果；接入預報後，需說明統計波高與模型振幅的換算方式。
結果不對：描述「做了什麼、哪裡沒變」
我把波高從 0.5 拉到 2，數字會變，但側面看起伏相同。請檢查滑桿值是否真的傳到正在顯示的海面，修正後保留網格，讓我比較兩種波高。
回饋格式：操作 → 預期 → 實際 → 證據；每次只針對一項差異修正。
先用簡單形狀，組成一座風機
請在海面放一座教學用三葉片風機，用簡單形狀組成塔柱、機艙、輪轂與三片葉片。零件分組命名，先不做內部，也不要宣稱對應真實機型。
程式模型適合先驗證互動；照片、授權模型與工程圖各有用途，並非每個專案都要全部提供。
把動作講清楚：只有轉子轉
讓三片葉片與輪轂成為同一個轉子，繞輪轂中心旋轉；塔柱和機艙保持不動。加入停止與播放，先用固定轉速，不連氣象資料。
同一組零件共用旋轉中心，才能避免葉片各自打轉或整座塔一起轉。
要做內部，先找能回答結構的資料
我想做風機內部教學。請先協助尋找官方結構說明或指定機型型錄，列出來源、零件與傳動方式。若資料不足，先告訴我缺什麼，不要自行補出內部。
參考入口：energy.gov/cmei/systems/how-do-wind-turbines-work。外觀照片不能證明內部結構。
上傳資料後，先核對再建模
請只依附件整理：這是直驅還是齒輪箱型？動力依序經過哪些零件？每項標出文件頁碼或來源。先給我結構清單確認，不要先畫內部。
若工具無法讀取網址或附件，改貼相關文字與頁碼；不能把看不到的資料當已讀取。
把「點開機艙」寫成明確的互動
依剛才確認的結構，加入點選機艙互動：外殼移開、顯示零件名稱與能量傳遞方向，並可關閉復原。若採簡化比例，請標「教學示意」。
結構正確、可以操作、比例精確是不同要求；本次優先呈現可理解的教學簡模。
先找風：Weather API 選兩個欄位
請從 Open-Meteo Weather API 讀取指定海域的 10 公尺風速與風向。先只顯示資料卡：座標、資料時間、單位、來源和取得狀態，尚不控制風機。
Weather API：Current → Wind Speed (10 m)、Wind Direction (10 m)；10 公尺風速不等於輪轂高度風速。
再找浪：Marine API 選波高、週期、方向
請從 Open-Meteo Marine API 讀取同一海域的 wave_height、wave_period、wave_direction。顯示公尺、秒、角度及資料時間；沒有數值就顯示缺值，不可自動造數字。
wave_height：有效波高 m；wave_period：週期 s；wave_direction：波浪來向 °。有資料不代表岸邊局部狀況。
資料先看懂，再讓它推動畫面
請核對兩份資料的座標、時區、有效時間及單位，選用相同有效時間。讀取失敗或欄位為空時，顯示原因；可以切回明確標示的手動示範，不要冒充即時資料。
每次查詢可能使用不同模型網格點；顯示實際回傳位置。預報、模型現況與測站觀測應分清。
接上控制：一個欄位，對應一種變化
把已核對的資料接到畫面：風速影響教學轉速，波高影響起伏，週期影響節奏。請列出換算規則，保留手動測試；不要把轉速或發電量宣稱為真實機組預測。
有效波高是統計量，不等於單一波振幅；教學映射與工程模型必須分開標示。
海浪、洋流、潮位是三件事
請把波浪、洋流與水位分開。洋流可先畫箭頭，但有流速流向資料才能稱為資料驅動；若用 sea_level_height_msl，請說明高度基準及它不只包含潮汐。
Marine：ocean_current_velocity／ocean_current_direction；sea_level_height_msl 含潮汐及其他海面高度影響，基準為全球平均海平面。
先做示意日夜：一個時間控制三件事
加入 0 到 24 小時滑桿，同時控制光源方向、亮度與天空水色。先做示意日夜，顯示目前時間；切到晚上時，保留足夠光線看清楚風機與按鈕。
第一階段為視覺示意，不宣稱太陽月亮的方位對應真實日期。
要對應真實天空，再補地點與日期
若要真實日月位置，請加入經緯度、日期與台北時區，使用有文件的天文計算工具，列出角度單位與場景座標轉換，並用一個已知時刻核對結果。
例如 SunCalc 可計算日月位置；天文方位、場景座標、天氣雲量是不同層次。衛星雲圖不是日月計算的必要素材。
請 AI 交付完整專案與建置步驟
請交付完整可下載專案，包含依賴、素材、README 與建置指令。逐步說明在哪個資料夾執行、成功會看到什麼；若是 Vite 專案，請確認 build 後 dist 內有 index.html。
以 Vite 專案為例：npm install → npm run dev → npm run build；實際步驟以交付專案的 README 為準。
Cloudflare 上傳的是「建置成果」
這是純前端靜態專案。請帶我把建置輸出部署到 Cloudflare Pages，說明要上傳哪個資料夾；取得 HTTPS 網址後，請用未登入視窗檢查首頁、互動與手機版。
管理者發布需要 Cloudflare 帳號；公開訪客可免登入。請依當下後台選擇 Pages 的 Direct Upload，介面名稱可能調整。
練習一：用三次指令完成小海面
請分三步陪我做：先有可拖曳的平面，再加網格與移動波浪，最後加波高滑桿。每步完成都列出檢查方法，等我確認再繼續。
可暫停影片，從教材複製完整提示詞。若卡住，附上操作、預期、實際與截圖再請 AI 修改。
練習二：換成我們下一個網站
我要做【主題】互動網站。觀眾要理解【目的】，能操作【一個動作】。已有素材【檔案與來源】，缺少【待找資料】。請先做最小可預覽版本，再列檢查方式。
下載教材含完整提示詞、素材清單、資料欄位與發布檢查。先求可檢查的一步，再逐步擴充。