1
00:00:00,650 --> 00:00:04,570
今天先看老師把一片海面，逐步變成可以控制、

2
00:00:04,570 --> 00:00:09,370
可以點選的網站；每一步都展示輸入、結果和修改方式。

3
00:00:09,370 --> 00:00:11,610
畫面是我們重現的教學示意，

4
00:00:11,610 --> 00:00:15,770
並非原作者的私人操作紀錄；完整提示詞附在教材，

5
00:00:15,770 --> 00:00:17,450
練習集中在最後。

6
00:00:17,450 --> 00:00:20,170
先在 ChatGPT 或 Claude 開新對話，

7
00:00:20,170 --> 00:00:23,610
貼上畫面這段要求；重點是可操作的頁面，

8
00:00:23,610 --> 00:00:25,130
不能只有一張圖片。

9
00:00:25,130 --> 00:00:27,770
有預覽就打開；若只收到程式碼，

10
00:00:27,770 --> 00:00:31,930
接著要求完整檔案和開啟步驟，並把實際錯誤回傳，

11
00:00:31,930 --> 00:00:33,370
請它協助執行。

12
00:00:33,370 --> 00:00:37,770
老師第一步只要求藍色平面、拖曳視角和重設按鈕，

13
00:00:37,770 --> 00:00:40,650
先把看得到、動得了的最小成果完成。

14
00:00:40,650 --> 00:00:43,050
三維畫面可由 Three.js 處理，

15
00:00:43,050 --> 00:00:44,810
按鈕可由 React 管理；

16
00:00:44,810 --> 00:00:48,730
現在只要確認拖曳能換角度，重設能回到原位。

17
00:00:48,730 --> 00:00:50,890
海面不一定要先準備照片；

18
00:00:50,890 --> 00:00:53,930
這個示範直接請 AI 用程式建立平面，

19
00:00:53,930 --> 00:00:56,010
再加一個顯示網格的開關。

20
00:00:56,010 --> 00:00:59,930
此時老師先不要求漂亮的反光，只確認平面存在、

21
00:00:59,930 --> 00:01:04,010
按鈕有效；這樣下一步出問題時，才知道是哪裡造成。

22
00:01:04,010 --> 00:01:07,370
老師打開開關，這些小格就是海面的骨架；

23
00:01:07,370 --> 00:01:10,650
格點可以移動，表面才有位置形成起伏。

24
00:01:10,650 --> 00:01:14,010
不用自己畫格子，只要請 AI 建立分格的平面，

25
00:01:14,010 --> 00:01:18,490
並要求手機品質選項；格子過密，手機也可能跟著變慢。

26
00:01:18,490 --> 00:01:21,530
接著請 AI 讓格點隨時間上下移動，

27
00:01:21,530 --> 00:01:24,490
老師從側面檢查，確認波峰真的前進，

28
00:01:24,490 --> 00:01:26,490
而不是平面換了一張圖片。

29
00:01:26,490 --> 00:01:29,850
這類變形常交給著色器，讓顯示卡計算；

30
00:01:29,850 --> 00:01:32,730
初學時先做簡化波浪，確認流程後，

31
00:01:32,730 --> 00:01:34,490
再增加更精細的模擬。

32
00:01:34,490 --> 00:01:38,090
現在老師加上波高滑桿，先拉高、再拉低；

33
00:01:38,090 --> 00:01:41,770
數字和海面起伏必須一起變，才能算完成互動。

34
00:01:41,770 --> 00:01:45,610
這一版先標成教學示意，沒有假裝是目前海況；

35
00:01:45,610 --> 00:01:49,370
還原按鈕則讓每次比較，都能從相同的狀態開始。

36
00:01:49,370 --> 00:01:51,530
如果數字會變，海卻沒變，

37
00:01:51,530 --> 00:01:54,730
老師會把操作前後數值和截圖交給 AI，

38
00:01:54,730 --> 00:01:57,050
說清楚預期與實際差別。

39
00:01:57,050 --> 00:02:00,730
修正後再做同一組比較；能重複看到高低變化，

40
00:02:00,730 --> 00:02:04,490
才繼續下一步，這比只說不好看，更能找到問題。

41
00:02:04,490 --> 00:02:08,890
做一座看得出外形的教學風機，可以先描述塔柱、機艙、

42
00:02:08,890 --> 00:02:12,810
輪轂和三片葉片，請 AI 用簡單形狀組起來。

43
00:02:12,810 --> 00:02:15,690
這一步不用先買模型，但要分組命名；

44
00:02:15,690 --> 00:02:18,730
如果要像某一個真實機型，就要補上型號、

45
00:02:18,730 --> 00:02:20,330
照片和尺寸資料。

46
00:02:20,330 --> 00:02:24,090
老師接著交代誰要動、繞哪裡動、誰保持不動；

47
00:02:24,090 --> 00:02:27,450
三片葉片和輪轂一起轉，塔柱留在原地。

48
00:02:27,450 --> 00:02:30,890
如果葉片各自打轉，就回覆旋轉中心錯了，

49
00:02:30,890 --> 00:02:33,050
請它把轉子組在同一中心；

50
00:02:33,050 --> 00:02:36,010
再用停止和播放確認控制真的有效。

51
00:02:36,010 --> 00:02:40,410
要打開機艙，就先找結構資料；老師從官方原理頁開始，

52
00:02:40,410 --> 00:02:43,290
再用機型加上型錄或剖面圖查找。

53
00:02:43,290 --> 00:02:46,410
外觀照片幫助外形，尺寸幫助比例，

54
00:02:46,410 --> 00:02:49,850
剖面才幫助零件關係；資料沒有交代的地方，

55
00:02:49,850 --> 00:02:51,690
要讓 AI 列成待確認。

56
00:02:51,690 --> 00:02:54,810
老師把資料交給 AI，先要求零件清單、

57
00:02:54,810 --> 00:02:58,730
傳動順序和來源頁碼，確認後才請它建立內部。

58
00:02:58,730 --> 00:03:01,610
直驅與齒輪箱的配置不同，不能混用；

59
00:03:01,610 --> 00:03:04,970
如果工具讀不到附件，就貼出相關頁面的內容，

60
00:03:04,970 --> 00:03:06,650
不讓它憑外觀猜測。

61
00:03:06,650 --> 00:03:10,490
現在才把點開機艙變成操作要求：點選哪裡、

62
00:03:10,490 --> 00:03:13,930
外殼怎麼開、出現哪些說明，以及怎麼關回去。

63
00:03:13,930 --> 00:03:17,930
老師實際點一次，再關一次，確認不是只有說明文字；

64
00:03:17,930 --> 00:03:21,930
為了看清楚而放大的零件，則明確標示教學示意。

65
00:03:21,930 --> 00:03:24,330
老師打開 Open-Meteo 的天氣文件，

66
00:03:24,330 --> 00:03:29,050
輸入海域座標，選十公尺風速與風向，單位選公尺每秒。

67
00:03:29,050 --> 00:03:32,090
把產生的網址交給 AI，先顯示資料卡；

68
00:03:32,090 --> 00:03:33,770
這是模型提供的風況，

69
00:03:33,770 --> 00:03:37,290
十公尺風速也不能直接當作風機高度的風速。

70
00:03:37,290 --> 00:03:38,970
海浪則到 Marine 文件，

71
00:03:38,970 --> 00:03:42,330
用相同海域座標選波高、週期和方向；

72
00:03:42,330 --> 00:03:45,370
畫面先保留欄位原名，方便逐項核對。

73
00:03:45,370 --> 00:03:49,290
公尺表示高低，秒表示週期，角度表示來向；

74
00:03:49,290 --> 00:03:52,970
它們是讓模型改變的輸入，不是下載一段海浪影片。

75
00:03:52,970 --> 00:03:56,610
接線以前，老師先檢查地點、時間和單位，

76
00:03:56,610 --> 00:04:00,410
尤其分清剛剛下載的時間，與數字真正代表的時間。

77
00:04:00,410 --> 00:04:03,610
如果服務失敗，就顯示失敗；要繼續展示，

78
00:04:03,610 --> 00:04:06,010
可以切回清楚標記的手動模式，

79
00:04:06,010 --> 00:04:08,490
不能把預設數字寫成即時資料。

80
00:04:08,490 --> 00:04:11,530
老師請 AI 寫清楚每個數字控制什麼，

81
00:04:11,530 --> 00:04:16,330
再用低值與高值比較，確認轉速、起伏和節奏都有反應。

82
00:04:16,330 --> 00:04:18,970
預報波高與畫面振幅需要換算，

83
00:04:18,970 --> 00:04:22,490
風機轉速也只是教學規則；先說明這些對應，

84
00:04:22,490 --> 00:04:24,770
再切換成讀取資料的模式。

85
00:04:24,770 --> 00:04:28,570
浪的上下起伏、水往哪裡流，以及水面整體升降，

86
00:04:28,570 --> 00:04:31,610
是三件事，不能用同一個數字一起代表。

87
00:04:31,610 --> 00:04:35,130
要做潮位，還要找對地點、時間和高度基準；

88
00:04:35,130 --> 00:04:38,010
海面高度可能包含潮汐以外的影響，

89
00:04:38,010 --> 00:04:40,530
本次網站沒有接入真實潮汐。

90
00:04:40,530 --> 00:04:44,330
日夜先做簡化版，讓時間滑桿一起控制光源方向、

91
00:04:44,330 --> 00:04:48,010
亮度和顏色；老師從中午拉到夜晚，直接比較。

92
00:04:48,010 --> 00:04:52,010
重點是時間真的影響場景，而且晚上仍能操作；

93
00:04:52,010 --> 00:04:53,850
反光與陰影可再調整，

94
00:04:53,850 --> 00:04:56,890
但此時還沒有宣稱是真實的日月位置。

95
00:04:56,890 --> 00:05:00,490
如果目標是真實某一天的天空，就補上經緯度、

96
00:05:00,490 --> 00:05:04,570
日期和時間，請 AI 使用有文件的天文計算工具。

97
00:05:04,570 --> 00:05:07,770
老師會要求列出角度和場景方向的轉換，

98
00:05:07,770 --> 00:05:10,970
再找已知時刻核對；不需要為了算太陽位置，

99
00:05:10,970 --> 00:05:12,450
先準備衛星照片。

100
00:05:12,450 --> 00:05:16,090
聊天預覽能操作之後，老師要求下載完整專案，

101
00:05:16,090 --> 00:05:18,930
不是只複製一小段程式；依照說明，

102
00:05:18,930 --> 00:05:21,317
在專案資料夾開啟和建置。

103
00:05:21,317 --> 00:05:22,970
以這類 Vite 專案為例，

104
00:05:22,970 --> 00:05:26,250
建置會產生可發布的輸出資料夾；若失敗，

105
00:05:26,250 --> 00:05:29,610
就把完整錯誤回傳，修正後重新建置。

106
00:05:29,830 --> 00:05:31,470
老師登入 Cloudflare，

107
00:05:31,470 --> 00:05:35,030
在 Pages 的直接上傳流程放入建置成果，

108
00:05:35,030 --> 00:05:37,990
發布後才會取得可以分享的網址。

109
00:05:37,990 --> 00:05:43,710
接著用未登入視窗和手機開啟，測試拖曳、滑桿和點選；

110
00:05:43,710 --> 00:05:48,390
聊天預覽、建置成功與公開能用，是三次不同的檢查。

111
00:05:48,390 --> 00:05:52,870
完整示範到這裡，現在才開始練習；先暫停影片，

112
00:05:52,870 --> 00:05:57,190
從教材複製第一組提示詞，分三步做出小海面。

113
00:05:57,190 --> 00:06:01,430
每一步都留下截圖，確認視角能拖、波峰會動、

114
00:06:01,430 --> 00:06:04,230
滑桿有效；遇到差異，就用操作、

115
00:06:04,230 --> 00:06:07,110
預期和實際結果請 AI 修正。

116
00:06:07,110 --> 00:06:09,910
第二個練習，換成我們下一個網站：

117
00:06:09,910 --> 00:06:13,030
寫下觀眾要理解什麼、要操作哪一件事，

118
00:06:13,030 --> 00:06:15,510
以及已有素材與缺少資料。

119
00:06:15,510 --> 00:06:18,150
先讓 AI 做出最小可預覽版本，

120
00:06:18,150 --> 00:06:22,870
逐項檢查後再增加內容；這個輸入、觀察、修正的方法，

121
00:06:22,870 --> 00:06:25,030
也能用在其他互動主題。