不會剪片也能做 MG 動畫：用 Codex、Claude、Canvas 與 FFmpeg 從零入門

- 從瀏覽器動畫到 MP4，再把同一套視覺延伸成互動網站與教材。 -

以前要做一支漂亮的動態圖形影片，可能得學 After Effects、研究關鍵影格、調整動畫曲線，甚至還要懂一點 3D。

現在還有另一種做法：讓 AI Coding Agent 撰寫動畫程式，由瀏覽器繪製畫面，再用影片工具輸出 MP4。

Claude Code 或 Codex 可以協助規劃畫面、修改程式和執行工具；實際渲染仍由瀏覽器與 FFmpeg 等工具完成。能不能自動跑完整流程，取決於你的專案、工具安裝與權限設定。最後也要自己播放影片，確認畫面和聲音。

更有趣的是，同一套動畫技術也能拿來做網站首頁、互動式教學頁面、產品展示和動態資訊圖表。

這篇文章會從完全零基礎開始，一步一步帶大家了解：

• MG 動畫是什麼？與 AI 生成影片有什麼不同？
• 需要準備哪些工具？哪些可以免費使用？
• 如何利用 Claude 製作第一個動畫作品？
• 如何讓 Codex 或 Claude Code 自動產出 MP4？
• 如何加入旁白、音效與自動品質檢查？
• 同一套技術怎麼用在網站、課程和商業行銷？
• 常見專業名詞究竟代表什麼？

整篇文章的目標不是讓你成為動畫工程師，而是讓你學會指揮 AI 完成一個真正能交付的作品。

如果你想先看 AI Agent 如何串起完整影片工作流，可接著讀Claude Opus 5.5 影片工作流解析；若想從作品反推動畫提示詞，則可參考Claude 程式碼動畫與 Motion Design Skill。本文聚焦在實際搭建、逐格輸出與互動網站。

一、什麼是 MG？為什麼現在 AI 可以做？

MG 是 Motion Graphics 的縮寫，中文通常稱為「動態圖形」。

它不是一般拍攝的影片，而是利用文字、幾何圖形、線條、數字、圖示與動畫效果，呈現內容或傳達資訊。

例如：

一個 Logo 從粒子聚合成形、一句標語隨著音樂節奏跳出、複雜的 AI 工作流程逐步展開，或是網站首頁充滿科技感的動態背景。

這些都屬於 MG 的常見應用。

與 AI 生成影片有什麼差別？

一般的 AI 生成影片，例如利用文字提示詞生成寫實人物、風景或電影場景，核心是由 AI 模型直接生成影像。

MG 的程式化製作則是另一條路線。

我們讓 AI 撰寫 JavaScript、Canvas、SVG 或 Three.js 程式碼，再交給瀏覽器繪製動畫。

所以，並不是 MG 一定比 AI 影片好，而是兩者擅長的事情不同。

想拍一隻狐狸在雪地奔跑，通常適合影像生成模型；想用漂亮的動畫講解 RAG、AI Agent 或行銷流程，就非常適合 MG。

二、一句提示詞，就能讓 AI 展現動畫能力？

這次看到一個很有意思的示範。

它的提示詞大意是：

製作一段充滿動感的 15 秒 Motion Graphics 影片，展現你身為頂尖動態設計師的實力，就像求職作品集中的 Showreel。全力以赴。

Showreel 指的是設計師或動畫師用來展示自己能力的精華作品集。

這種提示詞的巧妙之處，不是指定每個特效，而是直接告訴 AI：

「我要看到你最好的動態設計作品。」

AI 就可能自行規劃動態文字、幾何變形、粒子特效、轉場以及視覺節奏。

相關示範可參考這個 Claude Artifact 動畫作品。

如果開啟時要求登入，或無法檢視程式碼，仍可依照下面的方法製作自己的版本。

第一個實驗：直接讓 Claude 做動畫

前往 Claude，開啟新的對話。

貼上以下提示詞：

提示詞 A：15 秒 MG 作品集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

你是一位世界級 Motion Graphics 動態設計師。

請製作一段充滿動感的 15 秒 MG 動畫，
如同專業動態設計師求職時展示的 Showreel。

動畫必須包含：
1. Kinetic Typography 動態文字
2. Geometric Morphing 幾何變形
3. 流暢且富有節奏感的轉場
4. 具有空間感的動態構圖
5. 強烈且一致的視覺風格
6. 令人印象深刻的結尾

畫面比例 16:9。

請使用 HTML、CSS、SVG、Canvas
或適合的 JavaScript 動畫技術製作。

優先產生可以在瀏覽器預覽的動畫。

請注意：
此階段的目標是確認動畫創意，
不必假裝已經完成 MP4 匯出。

請發揮你的最佳動態設計能力。

如果 Claude 產生可以預覽的 Artifact，就先播放，看看作品的視覺表現。

這時候不必急著追求完美。

我們先學會一件事：

AI 可以把文字描述變成真正會動的網頁。

截至 2026 年 10 月，Claude Motion 仍是 Beta 範本，官方說明列在 Team 與 Enterprise 方案，並支援將動畫匯出成 MP4；一般互動式 Artifact 或 HTML／JavaScript 程式碼，不代表一定有相同的 MP4 匯出功能。方案與功能會調整，使用前請查看Claude Artifacts 官方說明。

三、真正的重點：怎麼把網頁動畫變成 MP4？

剛剛我們做的是「網頁動畫」。

它可以播放，但如果想上傳 YouTube、Facebook、Instagram，通常還是需要 MP4 影片。

這時就要認識整個流程中最重要的五個階段。

提出需求 → 編寫動畫 → 渲染合成 → 檢查改進 → 匯出 MP4

這裡會用到三個非常重要的工具。

可以把整個過程想像成拍動畫片。

Canvas 是畫師，負責把每一格畫面畫出來。

Playwright 是攝影師，負責把每一格拍下來。

FFmpeg 是剪輯輸出師，負責把所有照片變成影片，再加入聲音。

例如我們要做 30 秒、每秒 30 格的影片，就需要：

30 × 30 = 900 個影格。

程式可以產生這 900 張畫面，再由 FFmpeg 合成 30 秒影片。

但要注意，正式渲染時應該讓每一格的畫面由固定時間決定，而不是靠電腦即時播放 30 秒再錄影。

這樣即使電腦運算速度不同，也不容易造成動畫長度與節奏不一致。

四、開始實作！先準備工具

這裡以 Mac 為主要示範環境，Windows 也可以操作。

我們需要準備四項工具。

如果已經安裝 Codex 或 Claude Code，就不用重新安裝。

步驟 1：安裝 Node.js

前往 Node.js 官方網站：

https://nodejs.org/en/download

新手建議使用 LTS 長期支援版本。

下載適合自己作業系統的安裝程式，依照指示完成。

安裝完畢後打開「終端機」。

Mac 可使用 Terminal，Windows 可以使用 PowerShell。

輸入：

1
2

node -v
npm -v

如果分別顯示版本號碼，代表安裝成功。

npm 是 Node.js 的套件管理工具，接下來會用它安裝 Playwright。

步驟 2：安裝 FFmpeg

Mac 如果已經安裝 Homebrew，可以輸入：

1

brew install ffmpeg

如果沒有 Homebrew，先到 https://brew.sh/ 查看官方安裝方式。

Windows 使用者可從 FFmpeg 官方下載頁 選擇適合自己的 Windows build。不同發行版本可能包含不同編碼器；安裝後確認 ffmpeg 和 ffprobe 都能在終端機呼叫。

安裝完成後，重新開啟終端機並輸入：

1
2

ffmpeg -version
ffprobe -version

如果看到版本資訊，就代表 FFmpeg 可以正常使用。

步驟 3：建立第一個動畫專案

在 Mac 的終端機輸入：

1
2
3
4
5
6

mkdir -p ~/Desktop/mg-studio/agent-explainer
cd ~/Desktop/mg-studio/agent-explainer

npm init -y
npm install --save-dev playwright
npx playwright install chromium

這幾行指令的意思是：

• 建立一個新的動畫工作資料夾。
• 進入資料夾。
• 初始化 Node.js 專案。
• 安裝 Playwright。
• 安裝 Playwright 使用的 Chromium 瀏覽器。

Windows 不需要照抄 Mac 的資料夾路徑，可以先在桌面建立 mg-studio 資料夾，再用 Codex 或編輯器開啟。

現在我們已經準備好讓 AI 開始製作動畫了。

五、第一支作品：用 MG 講解什麼是 AI Agent

第一次不建議直接做 30 秒。

因為動畫每增加一秒，就需要更多影格和渲染時間。

我會先做 5 秒、1280 × 720 的短版測試，確定流程通了，再擴充到 30 秒、1920 × 1080。

這次選擇的主題是：

「AI Agent 就像你的數位員工。」

我們希望觀眾看到三個畫面：

步驟 4：開啟 Codex 或 Claude Code

在 AI Coding 工具中，開啟剛剛建立的專案資料夾。

貼上以下提示詞。

提示詞 B：建立第一個可播放的 MG 動畫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

你是一位 Motion Graphics 動態設計師，
也是熟悉 JavaScript Canvas 的前端工程師。

請在目前專案資料夾內，
幫我製作第一支 MG 知識講解動畫。

【主題】
什麼是 AI Agent？
核心比喻：AI Agent 就像數位員工，
能接收任務並執行多個工作步驟。

【第一階段規格】
影片長度：5 秒
畫面大小：1280 × 720
比例：16:9
影格率：30 FPS
語言：正體中文

【分鏡】
0–1.5 秒：
顯示大標題「什麼是 AI Agent？」
使用動態文字和幾何圖形進場。

1.5–3.5 秒：
展示使用者將任務交給 AI Agent，
再由 Agent 自動執行的流程。

3.5–5 秒：
畫面展開「理解 → 執行 → 回報」
三個工作節點，最後收尾。

【技術規範】
1. 使用 JavaScript + HTML Canvas。
2. 建立 index.html 和動畫程式碼。
3. 必須可以在瀏覽器中預覽。
4. 提供 window.renderFrame(frame) 函式。
5. 每個影格都依 frame / fps 計算畫面。
6. 不得依賴 requestAnimationFrame
   的實際執行速度決定輸出畫面。
7. 動畫使用固定亂數種子。
8. 所有字體必須支援正體中文。
9. 文字不可超出安全區域。
10. 所有動畫必須可重複產生相同結果。

【視覺風格】
高級科技感、深色背景、
藍紫色強調、簡潔文字、
流暢但不過度花俏。

請先完成可以預覽的動畫，
並告訴我如何在本機開啟。

目前先不要加入音訊，
也不要直接製作 30 秒完整版。

這個提示詞最重要的地方，其實不是視覺設計，而是：

window.renderFrame(frame)

這個函式代表我們可以要求動畫跳到指定影格。

例如第 0 格、第 30 格、第 90 格。

這是後面能夠穩定渲染 MP4 的基礎。

步驟 5：預覽動畫

讓 Codex 完成程式碼後，可以請它啟動本機預覽伺服器。

也可以在專案目錄執行：

1

python3 -m http.server 3000 --bind 127.0.0.1

開啟瀏覽器進入：

http://127.0.0.1:3000

如果看到會動的動畫，代表第一階段完成。

如果沒有看到動畫，不必急著重新建立專案。直接告訴 Codex：

1
2
3
4
5
6
7
8
9
10
11

請檢查目前動畫為什麼無法正常顯示。

請自行檢查：
1. 瀏覽器 Console 錯誤
2. Canvas 是否正確初始化
3. 動畫是否正常播放
4. 中文字體是否正常
5. 本機伺服器是否啟動

修正後重新預覽，
不要只修改程式碼就宣稱完成。

六、讓 AI 把動畫輸出成 MP4

現在動畫已經可以在網站播放了。

接下來要做最重要的一件事：

讓 Playwright 一格一格擷取畫面，再讓 FFmpeg 合成影片。

步驟 6：要求 AI 建立自動渲染程式

提示詞 C：Playwright + FFmpeg 自動匯出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

目前專案已有可播放的 Canvas 動畫。

請建立完整的 MP4 輸出流程。

【渲染要求】
使用 Playwright 控制 Chromium，
呼叫 window.renderFrame(frame)
產生每個指定影格。

請建立 render.mjs，
讓它完成：

1. 啟動或連接本機預覽頁面。
2. 等待字體和素材載入完成。
3. 逐格呼叫 renderFrame(frame)。
4. 將 Canvas 擷取成 PNG。
5. 存放至 frames/ 資料夾。
6. 使用連續影格檔名。
7. 發生錯誤時停止並回報。

【影片規格】
5 秒
1280 × 720
30 FPS
總共 150 個影格

【輸出】
使用 FFmpeg 編碼成 H.264 MP4。
輸出路徑：
out/agent-intro-5s.mp4

【驗收】
必須實際確認：
- PNG 影格數量正確
- MP4 可以播放
- 影片長度正確
- 解析度正確
- 無明顯黑格
- 沒有文字被裁切

請提供我可直接執行的指令。
不要只產生程式碼而不驗證。

如果 AI 依照要求建立了 render.mjs，通常就可以執行：

1

node render.mjs

但要以 AI 實際建立的檔案與執行說明為準。

有些專案需要先保持本機伺服器執行，有些則會由渲染腳本自行啟動伺服器。

如果採用逐幀 PNG 的方式，FFmpeg 合成影片的基本指令如下。這裡假設你的 FFmpeg build 包含 libx264；若指令回報找不到 encoder，請使用包含該編碼器的 FFmpeg build。

1
2
3
4
5
6
7

ffmpeg -y \
  -framerate 30 \
  -i frames/frame_%05d.png \
  -c:v libx264 \
  -pix_fmt yuv420p \
  -movflags +faststart \
  out/agent-intro-5s.mp4

這裡的 %05d 代表五位數的連續編號，例如 frame_00000.png。

如果你的 AI 使用其他檔名，記得請它同步調整指令。

完成後，應該可以在 out 資料夾找到第一支 MP4。

恭喜！如果真的可以正常播放，你就已經完成一次從程式碼到影片的製作流程。

七、從 5 秒升級成 30 秒知識講解影片

現在不要重新建立專案。

只需要讓 Codex 延伸既有動畫即可。

這次我們把內容變得更完整。

提示詞 D：擴充成 30 秒完整版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

請以目前已驗證成功的 5 秒動畫專案為基礎，
擴充為完整 30 秒 MG 知識講解影片。

主題：什麼是 AI Agent？

規格：
- 1920 × 1080
- 16:9
- 30 FPS
- 共 900 個影格
- 正體中文
- H.264 MP4

請依照以下分鏡製作：

0–4 秒：提出問題
4–9 秒：傳統 AI 對話模式
9–15 秒：AI Agent 自主規劃
15–22 秒：三步驟任務示範
22–27 秒：Chatbot 與 Agent 比較
27–30 秒：核心概念與結尾

請保持：
1. 視覺設計一致
2. 每個場景有明確資訊重點
3. 文字有足夠閱讀時間
4. 動畫轉場流暢
5. 畫面不得裁切
6. 所有影格可以獨立渲染

先完成動畫與無聲 MP4。
確認正常後，再進行音訊階段。

我特別建議「先做無聲版本」。

因為動畫、音樂、旁白同時出問題時，新手很難知道該從哪裡修正。

分階段完成，成功率反而比較高。

八、進階：加入旁白與音樂

動畫完成後，接下來可以讓它變成真正的知識講解短片。

這裡有兩種方式。

方法 A：沒有旁白，只有配樂

適合品牌影片、科技產品展示、視覺 Showreel。

可以請 AI 使用 Web Audio API 或程式化音效生成方式，製作簡單的背景節奏，再透過 FFmpeg 合成。

提示詞 E：加入程式化配樂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

請為目前的 30 秒 MG 動畫加入配樂。

音樂風格：
現代科技感、電子節奏、簡潔俐落。

請優先使用可合法使用的原創音效，
可利用程式碼合成音訊。

要求：
1. 配樂長度與影片一致。
2. 場景切換盡量對齊音樂節拍。
3. 主要轉場可加入簡潔音效。
4. 音量不能過大。
5. 開頭與結尾避免突兀切斷。
6. 輸出合成後的 MP4。

請保留無聲版本作為備份。

這種做法通常不需要購買商業音樂素材，但程式生成的聲音品質仍需要實際聆聽。

方法 B：加入 AI 旁白或真人旁白

如果要做知識教學影片，我會更推薦旁白版本。

先用自己的聲音錄製，或利用授權合適的文字轉語音服務產生旁白。

把音訊檔命名成：

voice.mp3

放進專案的 assets 資料夾。

接著讓 AI 進行語音轉文字，並取得時間資訊。

這裡要認識 Whisper 與 WhisperX。

Whisper 原始輸出主要以語音片段時間為主；如果需要逐詞同步，可評估 WhisperX 或其他強制對齊工具。WhisperX 需要相應語言的對齊模型；中文及臺灣華語的可用模型與結果都要先確認，辨識和對齊結果仍需人工檢查。

提示詞 F：讓動畫跟著旁白同步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

專案 assets/voice.mp3 是正式旁白音訊。

請將它與 30 秒 MG 動畫整合。

工作流程：

1. 使用合適的語音辨識工具取得逐字稿。
2. 取得句子與重要詞語的時間資訊。
3. 需要精細同步時，使用適合中文的
   Forced Alignment 工具。
4. 將旁白時間對應動畫場景。
5. 調整文字、圖形及重點動畫出現時間。
6. 保持旁白與畫面語意一致。
7. 合成旁白、背景音樂與 MP4。

如果旁白長度不是 30 秒，
請先回報並提出調整建議，
不要自行裁切重要內容。

如對齊結果不精準，
請標記需要人工確認的段落。

完成後檢查音訊有無缺失、
爆音與音量失衡問題。

這也是為什麼我們需要前面提到的固定時間軸。

因為有了絕對時間，就可以在旁白說到某句話時，精準顯示對應圖形。

九、影片做完還不夠！要讓 AI 自己檢查品質

這次教學最讓我感興趣的，其實是它的檢查循環。

抽取關鍵影格 → 查看拼圖 → 修正問題 → 重新渲染

這個流程可以降低 AI 宣稱完成、實際影片卻有問題的機率。

什麼是 Contact Sheet？

Contact Sheet 就是把不同時間點的影片影格，排列成一張圖片。

原本要看完 30 秒影片才能檢查畫面，現在一張圖就可以快速看到整體分鏡、構圖和視覺一致性。

例如我們要每五秒擷取一格，可使用：

1
2
3
4
5

ffmpeg -y \
  -i out/agent-explainer-30s.mp4 \
  -vf "fps=1/5,scale=480:-1,tile=3x2" \
  -frames:v 1 \
  out/contact-sheet.png

以上假設影片檔已經正確產生，而且輸出資料夾存在。

如果要檢查轉場，還應該多擷取轉場前後的畫面，而不只是每五秒一張。

提示詞 G：讓 AI 自動驗收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

請對最終 MG 影片執行完整 QA。

QA 工作包括：

1. 使用 FFprobe 檢查影片：
   - 解析度
   - FPS
   - 實際長度
   - 音訊是否存在

2. 使用 FFmpeg 製作 Contact Sheet。

3. 針對每個場景轉場，
   額外擷取前後影格。

4. 檢查：
   - 文字是否裁切
   - 中文字是否缺字
   - 是否有黑格
   - 是否有畫面閃爍
   - 是否有元素重疊
   - 音訊與畫面是否同步
   - 結尾是否完整

5. 將問題分級：
   P0：無法交付
   P1：明顯品質問題
   P2：可改進項目

6. 自動修正可以明確判斷的問題。

7. 修正後重新渲染並重新檢查。

8. 輸出 qa-report.md。

請不要只根據程式執行成功
就判定影片通過驗收。

視覺與節奏等主觀項目，
請保留人工審片狀態。

我會建議把這個提示詞保留下來，未來每次製作影片都使用。

因為真正商業化的差異，不只是 AI 能不能做出影片，而是能不能持續做出品質穩定的影片。

十、除了製作影片，還能拿來做網站？

這裡就是我認為 MG 很值得延伸的地方。

如果已經有一套 JavaScript 動畫，不一定要全部轉成 MP4；同一組圖形、文字與動態概念，也能成為網站的一部分。

但要記得，Canvas 本身是點陣畫布，畫在裡面的文字和圖形不會自動成為螢幕閱讀器可讀的語意內容。網站的重要標題、說明與操作控制應使用 HTML 元素，並提供動畫暫停、重播和減少動態效果等選項。

不過要先區分三種用途。

案例一：企業官網的科技感首頁

假設我們正在做一家 AI 顧問公司的網站。

一般首頁可能只有一張大圖，加上標題和服務介紹。

如果改用 MG，就可以讓首頁出現：

• 粒子聚合成品牌 Logo。
• 服務項目隨動畫展開。
• AI、資料、自動化三個節點彼此連結。
• 使用者往下捲動時，流程逐步展開。
• 點選服務時，動畫切換對應內容。

這就不再只是看影片，而是變成真正可以互動的網站。

提示詞 H：建立 MG 動態首頁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

你是一位 Creative Frontend Developer，
擅長 Motion Graphics、GSAP、
Canvas 和互動式網站設計。

請幫我製作一個具有高級 MG 動畫效果的
AI 顧問公司官方網站首頁。

【網站目的】
展示 AI 顧問公司的專業能力，
並引導訪客預約諮詢。

【網站內容】
主標題：
讓 AI 從工具，變成你的工作夥伴。

副標題：
AI 工作流、自動化行銷與企業應用。

服務項目：
1. AI 教育訓練
2. AI 自動化工作流
3. AI 行銷與內容製作

【動態效果】
- 首頁標題採用 Kinetic Typography
- 背景具有科技感的粒子動畫
- 服務項目使用 Scroll Animation
- 工作流程使用動態節點連線
- 按鈕具有精緻 Hover 效果

【技術要求】
可使用 HTML、CSS、JavaScript、
GSAP、Canvas、SVG。

請依照必要性選擇工具。

【效能要求】
1. 支援手機與桌面。
2. 不得讓動畫阻塞頁面操作。
3. 提供 prefers-reduced-motion 支援。
4. 文字必須是真正可讀取的 HTML 內容。
5. 不因動畫而犧牲基本 SEO 與無障礙性。
6. 不要自動播放有聲音的內容。
7. 動畫失敗時仍可正常瀏覽網站。

請先製作首頁原型，
完成後使用瀏覽器實際驗收。

這裡有一個很重要的觀念：

網站動畫應該服務內容，而不是讓內容變成動畫的陪襯。

如果每個元素都在跳動、旋轉，訪客可能連資訊都看不清楚。

所以真正專業的 MG 網站，還是要重視閱讀動線、速度與使用者體驗。

案例二：互動式教學網站

想像我們要教學員理解「AI Agent 工作流程」。

一般簡報可能就是一張流程圖：

使用者 → AI Agent → 工具 → 結果

但如果用程式化動畫，可以讓學員點選每一個步驟。

例如點選「工具」，就展示 AI 如何呼叫搜尋工具；點選「結果」，就顯示任務回報。

這樣就不只是動畫，而是互動式教材。

提示詞 I：製作互動式 MG 教學網頁

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

請製作一個互動式教學網頁。

主題：AI Agent 如何工作？

教學對象：
沒有程式背景的一般職場工作者。

請設計四個步驟：
1. 接收目標
2. 規劃任務
3. 呼叫工具
4. 檢查結果

每一個步驟都要有：
- 動態圖形
- 簡短白話說明
- 真實工作案例
- 下一步按鈕

使用者可以：
- 暫停動畫
- 重播動畫
- 切換步驟
- 控制動畫進度
- 回到上一個畫面

請製作適合投影教學的桌面版，
並支援手機操作。

使用 HTML、CSS、JavaScript，
必要時可以使用 GSAP 或 Canvas。

請特別注意中文字體、
畫面安全區域和可讀性。

做完之後，這個網站不只可以拿來上課，也能放到官網，成為公開的互動教材。

十一、MG 網站怎麼發布？Cloudflare 可以嗎？

可以。

如果成品只是 HTML、CSS、JavaScript 與靜態素材，可以部署到 Cloudflare Pages 等靜態網站託管服務。

基本流程是：

1. 請 Codex 整理可以獨立運作的網站輸出資料夾。
2. 確認裡面有 index.html 和必要素材。
3. 在 Cloudflare 開啟 Workers & Pages。
4. 使用 Direct Upload 或 Git 整合進行部署。
5. 部署後取得 pages.dev 網址並測試。
6. 有需要再設定自己的網域。

選擇前先想好部署方式：Direct Upload 專案之後不能直接切換成 Git 整合；若希望每次 push 後自動建置與部署，建立專案時就選 Git 整合。詳情見 Cloudflare Pages Direct Upload 說明。

Cloudflare 官方文件：

https://developers.cloudflare.com/pages/get-started/direct-upload/

要特別注意：

部署網站動畫，不等於 Cloudflare 會自動替你渲染 MP4。

網站上的 Canvas 動畫可以由使用者的瀏覽器執行。

但若要在雲端大量產出 MP4，還需要額外規劃影片渲染環境，例如本機、CI 工作流程或專用渲染服務。

因此，新手最簡單的方式是：

本機製作影片 → 本機輸出 MP4 → 將完成的影片或網站素材部署到 Cloudflare。

不需要第一天就把整套影片工廠搬到雲端。

十二、進階工具：GSAP、Three.js、GLSL、Remotion 怎麼選？

前面使用 Canvas，是為了讓大家先理解核心原理。

但實際開始製作更多作品後，就會發現不同動畫，適合不同工具。

如果目標是互動網站，通常先評估 CSS、SVG、GSAP，再視需求使用 Canvas 或 Three.js。

如果目標是大量產出可以下載的影片，我會優先評估 Remotion。

Remotion 是什麼？

Remotion 是一套利用 React 程式碼製作影片的框架。

它可以讓每一個畫面依照影格編號產生，再輸出成正式影片。

也支援將文字、圖片、動畫、音訊組合成可以重複使用的影片元件。

而且官方提供 Agent Skills，讓 Claude Code、Codex 等 Coding Agent 在 Remotion 專案中參考官方慣例。安裝前仍要確認來源和版本，閱讀 Skill 的檔案與會執行的步驟，不要把任何第三方安裝器當成免檢查的捷徑。

如何開始使用 Remotion？

先確認 Node.js 已安裝，再執行官方提供的專案初始化指令：

1
2
3
4

npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

這個流程會建立新專案，並啟動 Remotion 的開發預覽介面。

如果要額外使用官方 Agent Skills，可參考：

1

npx skills add remotion-dev/skills

官方說明：

https://www.remotion.dev/docs/ai/skills

之後可以要求 Codex 使用 Remotion 建立具有固定解析度、影格率與長度的動畫。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

請使用目前 Remotion 專案，
製作一支 30 秒正體中文 MG 教學短片。

主題：什麼是 AI Agent？

請採用可重複使用的 React 元件，
使用固定影格時間控制動畫。

包含：
- 開場標題
- 動態流程圖
- 概念比較
- 文字重點動畫
- 結尾 CTA

請先在 Remotion Studio 預覽，
確認 Composition 正確，
再輸出 H.264 MP4。

請使用官方 Remotion Skills，
並提供完成的檔案及 QA 報告。

截至 2026 年 10 月 9 日，Remotion 官方的免費授權適用於個人與符合條件的三人以下組織，商業用途仍須遵守官方條款；四人以上組織及自動化服務可能適用不同方案與費用。GSAP 的標準授權目前允許一般商業專案免費使用，但仍有使用範圍限制。正式使用前，請重新查看 Remotion 授權與價格及 GSAP 標準授權。

這條路線和前面的 Canvas + Playwright + FFmpeg 都可行。

但對初學者，我建議一次先學一條。

想理解網頁動畫原理，從 Canvas 開始；想建立大量影片生產流程，再研究 Remotion。

十三、五種最值得落地的商業應用

學會這套技術後，我認為可以從以下幾種場景開始。

應用 A：AI 知識短影音工廠

輸入：「什麼是 RAG？」

AI 自動把概念拆解成幾個畫面。

接著製作圖形、文字與動畫，最後輸出一支 30 秒短片。

當這套流程成熟，就可以更換主題，繼續製作：

• 什麼是 MCP？
• 什麼是 AI Agent？
• 什麼是 Vibe Coding？
• 什麼是向量資料庫？
• Chatbot 與 Agent 有何不同？

其中動畫框架可以共用，改變的只有腳本、文字、圖示與內容。

應用 B：產品操作動畫

例如製作 LINE 自動化行銷系統。

不一定要拍攝真實系統操作。

可以用 MG 呈現：

客戶加入 LINE → 填寫資料 → 系統建立名單 → AI 自動分類 → 發送通知。

這種動畫非常適合放在銷售頁，讓客戶快速理解一套複雜的系統。

如果要展示真實產品，記得使用正確的系統截圖與功能資訊，不要讓 AI 自行編造尚未存在的功能。

應用 C：品牌動態識別

假設我們有固定的 Logo、色彩與品牌字型。

就可以將它們做成：

• 3 秒 Logo 片頭。
• 5 秒品牌結尾。
• 課程片頭動畫。
• 社群貼文動態版本。
• 網站首頁動畫。

未來只要更換標題與內容，就不必重新設計整套視覺。

應用 D：互動式教學頁面

對教育訓練而言，這可能是最有潛力的用途。

因為同一個流程可以產出兩種成果：

第一種是固定時間的 MP4，拿來上傳社群、放進簡報。

第二種是可以點擊、暫停、拖曳、互動的網站，拿來實際教學。

同一份概念設計，變成影片與互動式教材，這才是內容資產的真正重複使用。

應用 E：大量客製化動畫

假設我們要替十家企業製作品牌短片。

如果每支影片都從零開始，修改成本很高。

但如果先建立可參數化的動畫範本，就可以讓不同企業使用：

• 不同 Logo。
• 不同品牌顏色。
• 不同標語。
• 不同產品圖片。
• 不同 CTA。
• 不同影片尺寸。

這樣就能把動畫製作從「一次性的創作」，逐步變成「可重複的生產流程」。

十四、遇到問題先檢查哪裡？

十五、專業名詞懶人包

下面把這篇用到的重要名詞整理成表格，之後忘記可以直接回來查。

十六、從做一支影片，到建立自己的 MG 影片工廠

如果只想體驗 AI 動畫，可以停在 Claude Artifact。

如果想做社群短片，可以學會 Canvas、Playwright、FFmpeg。

如果想做互動網站，就可以繼續研究 GSAP、SVG 和 Three.js。

如果想長期、大量製作影片，則值得進一步研究 Remotion、參數化模板與自動品質驗收。

我會把整個學習過程分成四個階段：

當做到第四階段，真正重要的就不是這次用了哪一個模型。

而是已經擁有一套能夠持續使用的動畫製作方法。

例如先建立一套視覺規則，讓不同影片都能沿用同樣的字體、配色、鏡頭語言與轉場風格。

之後只要更換主題和旁白，就能用相近的品質持續產出新作品。

這也很適合延伸成線上課程、教材製作或品牌行銷的自動化工作流。

十七、我的最後建議：先完成一支影片，再開始追求特效

很多人第一次看到 AI 做出的 MG，就會想立刻加入更多功能。

要 3D、要粒子、要液態金屬、要音樂、要自動旁白，最好還能一次做十支。

但對初學者而言，我反而建議先照著這個順序：

第一天： 完成 5 秒 Canvas 動畫，並確定可以在瀏覽器播放。

第二天： 使用 Playwright 與 FFmpeg，真的產生第一支 MP4。

第三天： 把內容延伸成 30 秒，加上旁白與品質檢查。

第四天： 把動畫改造成一個互動式網站，或製作第二支不同主題的短片。

四個階段完成後，才開始研究更複雜的動態設計和批量生成。

因為 AI Coding 最有價值的地方，不是把所有最新技術塞進同一個專案，而是把一個能運作的成果，慢慢變成可以重複使用的系統。

以前做影片，我們要學的是「怎麼把動畫做出來」。

現在多了一種可能：

我們可以先讓 AI 幫忙建立一套會做動畫的工具，再利用這套工具不斷產生新的作品。

這也許才是 AI 對影片製作流程更深遠的改變。

常見問答 (FAQ)

Q1：完全不會 JavaScript，也能用 AI 做 MG 動畫嗎？

可以先讓 Claude Code 或 Codex 協助撰寫動畫程式，但你仍需要建立專案、執行指令、預覽成品，並確認 MP4 的畫面、長度和聲音。AI 產生程式不等於成品已驗收。

Q2：Claude Artifact 會動，為什麼還要 Playwright 和 FFmpeg？

互動式網頁動畫與影片檔是不同輸出。Claude Motion Beta 範本可依帳號方案直接匯出 MP4；若是一般 HTML／Canvas 動畫，就可以用 Playwright 固定影格、擷取 PNG，再由 FFmpeg 合成影片。

Q3：5 秒、30 FPS 的動畫需要幾格？

需要 150 格，計算方式是秒數乘上每秒影格數。若從第 0 格開始編號，影格索引會是 0 到 149。

Q4：Remotion 可以免費用於商業專案嗎？

官方目前對個人與符合條件的三人以下組織提供免費授權，商業使用仍受條款限制。組織規模或服務型態不同時，費用也可能不同；請在採用前查看官方最新授權頁。

Q5：可以把 MG 網站部署到 Cloudflare Pages，順便在雲端輸出影片嗎？

Pages 可以部署靜態網站，但不會自動替網站執行大量影片渲染。要在雲端輸出影片，需要另外準備渲染服務或自動化執行環境。

參考資料與延伸閱讀

以下整理這次研究與實作相關的公開資源。

原始示範與案例

1. Claude Artifact 動畫示範
2. Claude Opus 5.5 的 13 個動態影片案例與原始提示詞（Zenn）
3. Claude Artifacts 官方使用說明（包含 Motion Beta 方案與 MP4 匯出說明）

動畫與影片製作技術

4. MDN：Canvas API
5. Playwright 官方文件
6. FFmpeg 官方文件
7. GSAP 官方文件
8. Three.js 官方網站
9. Remotion 官方文件
10. Remotion Agent Skills

語音與網站部署

11. OpenAI Whisper
12. WhisperX GitHub
13. Cloudflare Pages Direct Upload

授權與成本

14. Remotion License & Pricing
15. GSAP Standard License

本文於 2026 年 10 月 9 日依官方文件與公開案例整理。工具功能、方案、授權條件與免費額度都可能變動，正式商業使用前請再次確認。