WEBVTT

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
也能用在其他互動主題。