一句話總結 TL;DR
作者實測用 Claude Code + Remotion 做程式化動畫：單一 prompt 效果很差，關鍵是先把官方 Skill 複製進專案，再依需求搭配 GSAP、D3、Lottie、Three.js、Canvas、Blender 等套件，各有適用場景。
為什麼一句 prompt 不夠：先加 Skill
- 兩支動畫都是 Claude Code 做的：主角是 GitHub 三萬六千星的 Remotion 00:00
- 照貼官網 prompt 效果差很多：空專案等於要 AI 從零拼樂高 00:26
- 補救關鍵是先加官方 Skill：等於先給 AI 現成模組再生成 01:02
- 加 Skill 後效果好很多：第一件事就是把 Skill 複製進專案 01:02
抽 Frame 重現 SaaS 行銷動畫
- 用 ezGIF 把影片抽成一張張 Frame：再全部餵給 Claude Code 01:25
- 抽 Frame 重現效果差很多：AI 沒真懂圖，只照線條顏色文字重排 01:36
- 但在此基礎上再修改沒問題 01:36
各套件實測：程式驅動的視覺庫
- 先跟 AI 整理出套件對照表：每個套件優勢與場景都不同 02:00
- Remotion + GSAP 做投影片式動畫：一幕幕展開很滑順 02:18
- Remotion + D3.js 做資料視覺化：人口變化、捷運圖、颱風路徑 02:42
- Remotion + Lottie 做簡單動畫：一句話生刷條碼、過年動畫 03:06
- Remotion + Three.js 做 3D 場景：塔防遊戲、工廠流水線 03:27
- Remotion + Canvas 類 one shot 就可用：含 Fabric.js、P5.js 03:48
Remotion 進階技巧與 Blender
- 控制移動軌跡靠白圖畫線：讓 Claude Code 照這條線的軌跡運動 04:06
- 要透明字卡 render 選 ProRes 4444 XQ：Picture 選 PNG 才有透明 04:06
- Blender + MCP 讓 Claude Code 控制 3D：把車模型 load 進來做實驗 04:32
- 結論：Remotion 非常強大值得使用 05:11
金句與關鍵數據 Quotes & Numbers
- Remotion 在 GitHub 已有三萬六千顆星，主打用程式做動畫做影片——影片開場的介紹 00:00
總結與行動建議 Takeaways
- 先複製官方 Skill 再開工：這是提升品質最有效的第一步
- 別期待一句 prompt 到位：抽 Frame 只能當修改的起點
- 依需求選套件：投影片用 GSAP、資料圖用 D3、3D 用 Three.js
- 要透明字卡記得選 ProRes 4444 XQ 加 PNG：否則透明效果會失效
- 3D 進階可用 Blender 加 MCP 控制