WEBVTT

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

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

3
00:00:10.280 --> 00:00:12.845
畫面是我們重現的教學示意，

4
00:00:12.845 --> 00:00:17.382
並非原作者的私人操作紀錄；完整提示詞附在教材，

5
00:00:17.382 --> 00:00:18.960
練習集中在最後。

6
00:00:20.760 --> 00:00:24.943
先在 ChatGPT 或 Claude 開新對話，

7
00:00:24.943 --> 00:00:28.122
貼上畫面這段要求；重點是可操作的頁面，

8
00:00:28.122 --> 00:00:29.628
不能只有一張圖片。

9
00:00:29.878 --> 00:00:32.930
有預覽就打開；若只收到程式碼，

10
00:00:32.930 --> 00:00:37.610
接著要求完整檔案和開啟步驟，並把實際錯誤回傳，

11
00:00:37.610 --> 00:00:39.035
請它協助執行。

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

13
00:00:49.205 --> 00:00:52.490
先把看得到、動得了的最小成果完成。

14
00:00:52.740 --> 00:00:55.942
三維畫面可由 Three.js 處理，

15
00:00:55.942 --> 00:00:58.301
按鈕可由 React 管理；

16
00:00:58.301 --> 00:01:01.840
現在只要確認拖曳能換角度，重設能回到原位。

17
00:01:08.760 --> 00:01:10.971
海面不一定要先準備照片；

18
00:01:10.971 --> 00:01:14.472
這個示範直接請 AI 用程式建立平面，

19
00:01:14.472 --> 00:01:16.683
再加一個顯示網格的開關。

20
00:01:16.933 --> 00:01:21.428
此時老師先不要求漂亮的反光，只確認平面存在、

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

22
00:01:30.760 --> 00:01:34.503
老師打開開關，這些小格就是海面的骨架；

23
00:01:34.503 --> 00:01:38.049
格點可以移動，表面才有位置形成起伏。

24
00:01:38.299 --> 00:01:42.526
不用自己畫格子，只要請 AI 建立分格的平面，

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

26
00:01:52.760 --> 00:01:56.108
接著請 AI 讓格點隨時間上下移動，

27
00:01:56.108 --> 00:01:59.270
老師從側面檢查，確認波峰真的前進，

28
00:01:59.270 --> 00:02:01.501
而不是平面換了一張圖片。

29
00:02:01.751 --> 00:02:05.466
這類變形常交給著色器，讓顯示卡計算；

30
00:02:05.466 --> 00:02:08.768
初學時先做簡化波浪，確認流程後，

31
00:02:08.768 --> 00:02:10.832
再增加更精細的模擬。

32
00:02:16.760 --> 00:02:20.856
現在老師加上波高滑桿，先拉高、再拉低；

33
00:02:20.856 --> 00:02:25.384
數字和海面起伏必須一起變，才能算完成互動。

34
00:02:25.634 --> 00:02:29.944
這一版先標成教學示意，沒有假裝是目前海況；

35
00:02:29.944 --> 00:02:34.459
還原按鈕則讓每次比較，都能從相同的狀態開始。

36
00:02:40.760 --> 00:02:43.171
如果數字會變，海卻沒變，

37
00:02:43.171 --> 00:02:46.989
老師會把操作前後數值和截圖交給 AI，

38
00:02:46.989 --> 00:02:49.199
說清楚預期與實際差別。

39
00:02:49.449 --> 00:02:53.712
修正後再做同一組比較；能重複看到高低變化，

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

41
00:03:02.760 --> 00:03:07.649
做一座看得出外形的教學風機，可以先描述塔柱、機艙、

42
00:03:07.649 --> 00:03:11.952
輪轂和三片葉片，請 AI 用簡單形狀組起來。

43
00:03:12.202 --> 00:03:15.639
這一步不用先買模型，但要分組命名；

44
00:03:15.639 --> 00:03:19.480
如果要像某一個真實機型，就要補上型號、

45
00:03:19.480 --> 00:03:21.097
照片和尺寸資料。

46
00:03:26.760 --> 00:03:31.022
老師接著交代誰要動、繞哪裡動、誰保持不動；

47
00:03:31.022 --> 00:03:34.676
三片葉片和輪轂一起轉，塔柱留在原地。

48
00:03:34.926 --> 00:03:38.680
如果葉片各自打轉，就回覆旋轉中心錯了，

49
00:03:38.680 --> 00:03:41.051
請它把轉子組在同一中心；

50
00:03:41.051 --> 00:03:44.212
再用停止和播放確認控制真的有效。

51
00:03:50.760 --> 00:03:55.867
要打開機艙，就先找結構資料；老師從官方原理頁開始，

52
00:03:55.867 --> 00:03:58.931
再用機型加上型錄或剖面圖查找。

53
00:03:59.181 --> 00:04:02.276
外觀照片幫助外形，尺寸幫助比例，

54
00:04:02.276 --> 00:04:06.145
剖面才幫助零件關係；資料沒有交代的地方，

55
00:04:06.145 --> 00:04:08.466
要讓 AI 列成待確認。

56
00:04:14.760 --> 00:04:18.470
老師把資料交給 AI，先要求零件清單、

57
00:04:18.470 --> 00:04:22.572
傳動順序和來源頁碼，確認後才請它建立內部。

58
00:04:22.822 --> 00:04:26.123
直驅與齒輪箱的配置不同，不能混用；

59
00:04:26.123 --> 00:04:30.201
如果工具讀不到附件，就貼出相關頁面的內容，

60
00:04:30.201 --> 00:04:31.949
不讓它憑外觀猜測。

61
00:04:38.760 --> 00:04:42.893
現在才把點開機艙變成操作要求：點選哪裡、

62
00:04:42.893 --> 00:04:47.233
外殼怎麼開、出現哪些說明，以及怎麼關回去。

63
00:04:47.483 --> 00:04:52.225
老師實際點一次，再關一次，確認不是只有說明文字；

64
00:04:52.225 --> 00:04:56.572
為了看清楚而放大的零件，則明確標示教學示意。

65
00:05:02.760 --> 00:05:06.743
老師打開 Open-Meteo 的天氣文件，

66
00:05:06.743 --> 00:05:11.268
輸入海域座標，選十公尺風速與風向，單位選公尺每秒。

67
00:05:11.518 --> 00:05:15.154
把產生的網址交給 AI，先顯示資料卡；

68
00:05:15.154 --> 00:05:17.068
這是模型提供的風況，

69
00:05:17.068 --> 00:05:20.895
十公尺風速也不能直接當作風機高度的風速。

70
00:05:28.760 --> 00:05:31.591
海浪則到 Marine 文件，

71
00:05:31.591 --> 00:05:34.798
用相同海域座標選波高、週期和方向；

72
00:05:34.798 --> 00:05:38.006
畫面先保留欄位原名，方便逐項核對。

73
00:05:38.256 --> 00:05:42.262
公尺表示高低，秒表示週期，角度表示來向；

74
00:05:42.262 --> 00:05:46.868
它們是讓模型改變的輸入，不是下載一段海浪影片。

75
00:05:54.760 --> 00:05:58.672
接線以前，老師先檢查地點、時間和單位，

76
00:05:58.672 --> 00:06:03.409
尤其分清剛剛下載的時間，與數字真正代表的時間。

77
00:06:03.659 --> 00:06:07.389
如果服務失敗，就顯示失敗；要繼續展示，

78
00:06:07.389 --> 00:06:10.138
可以切回清楚標記的手動模式，

79
00:06:10.138 --> 00:06:12.887
不能把預設數字寫成即時資料。

80
00:06:18.760 --> 00:06:22.344
老師請 AI 寫清楚每個數字控制什麼，

81
00:06:22.344 --> 00:06:27.059
再用低值與高值比較，確認轉速、起伏和節奏都有反應。

82
00:06:27.309 --> 00:06:30.174
預報波高與畫面振幅需要換算，

83
00:06:30.174 --> 00:06:34.267
風機轉速也只是教學規則；先說明這些對應，

84
00:06:34.267 --> 00:06:36.723
再切換成讀取資料的模式。

85
00:06:42.760 --> 00:06:47.286
浪的上下起伏、水往哪裡流，以及水面整體升降，

86
00:06:47.286 --> 00:06:50.989
是三件事，不能用同一個數字一起代表。

87
00:06:51.239 --> 00:06:55.337
要做潮位，還要找對地點、時間和高度基準；

88
00:06:55.337 --> 00:06:58.616
海面高度可能包含潮汐以外的影響，

89
00:06:58.616 --> 00:07:01.279
本次網站沒有接入真實潮汐。

90
00:07:06.760 --> 00:07:11.214
日夜先做簡化版，讓時間滑桿一起控制光源方向、

91
00:07:11.214 --> 00:07:15.466
亮度和顏色；老師從中午拉到夜晚，直接比較。

92
00:07:15.716 --> 00:07:20.019
重點是時間真的影響場景，而且晚上仍能操作；

93
00:07:20.019 --> 00:07:22.068
反光與陰影可再調整，

94
00:07:22.068 --> 00:07:25.551
但此時還沒有宣稱是真實的日月位置。

95
00:07:28.760 --> 00:07:32.595
如果目標是真實某一天的天空，就補上經緯度、

96
00:07:32.595 --> 00:07:36.978
日期和時間，請 AI 使用有文件的天文計算工具。

97
00:07:37.228 --> 00:07:40.880
老師會要求列出角度和場景方向的轉換，

98
00:07:40.880 --> 00:07:44.938
再找已知時刻核對；不需要為了算太陽位置，

99
00:07:44.938 --> 00:07:46.561
先準備衛星照片。

100
00:07:50.760 --> 00:07:55.008
聊天預覽能操作之後，老師要求下載完整專案，

101
00:07:55.008 --> 00:07:58.244
不是只複製一小段程式；依照說明，

102
00:07:58.244 --> 00:08:00.672
在專案資料夾開啟和建置。

103
00:08:00.922 --> 00:08:03.590
以這類 Vite 專案為例，

104
00:08:03.590 --> 00:08:07.211
建置會產生可發布的輸出資料夾；若失敗，

105
00:08:07.211 --> 00:08:10.451
就把完整錯誤回傳，修正後重新建置。

106
00:08:14.760 --> 00:08:17.307
老師登入 Cloudflare，

107
00:08:17.307 --> 00:08:20.810
在 Pages 的直接上傳流程放入建置成果，

108
00:08:20.810 --> 00:08:23.198
發布後才會取得可以分享的網址。

109
00:08:23.448 --> 00:08:28.625
接著用未登入視窗和手機開啟，測試拖曳、滑桿和點選；

110
00:08:28.625 --> 00:08:33.595
聊天預覽、建置成功與公開能用，是三次不同的檢查。

111
00:08:40.760 --> 00:08:45.356
完整示範到這裡，現在才開始練習；先暫停影片，

112
00:08:45.356 --> 00:08:49.743
從教材複製第一組提示詞，分三步做出小海面。

113
00:08:49.993 --> 00:08:54.156
每一步都留下截圖，確認視角能拖、波峰會動、

114
00:08:54.156 --> 00:08:57.130
滑桿有效；遇到差異，就用操作、

115
00:08:57.130 --> 00:09:00.104
預期和實際結果請 AI 修正。

116
00:09:05.760 --> 00:09:08.918
第二個練習，換成我們下一個網站：

117
00:09:08.918 --> 00:09:12.471
寫下觀眾要理解什麼、要操作哪一件事，

118
00:09:12.471 --> 00:09:14.839
以及已有素材與缺少資料。

119
00:09:15.089 --> 00:09:18.215
先讓 AI 做出最小可預覽版本，

120
00:09:18.215 --> 00:09:23.097
逐項檢查後再增加內容；這個輸入、觀察、修正的方法，

121
00:09:23.097 --> 00:09:25.246
也能用在其他互動主題。