一句話結論
2026 年 9 月 22 日 Anthropic 發布 Claude Opus 5.5 之後，「用程式碼畫影片」這個做法在兩週內長出一整片技能生態。一篇自媒體影片把 20 個 GitHub 倉庫整理成「把 Claude 改造成影片生成機」的清單，本文把這 20 個倉庫逐一打 API 實查：20 個全部真實存在，星數、授權、最後更新時間如下表；但清單中「Netflix 工程師」的身分查不到任何佐證，另有幾個數字與原文對不上，這些都一併寫出來。
為什麼是現在：影片不是「生成」的，是「算」出來的
必須先把原理講清楚，否則會誤會這一波是什麼新模型。
- 傳統 AI 影片（Veo、Kling、Sora 這一類）走擴散模型，逐格生成像素，畫面漂亮但不可精準控制：想只改第 3 秒的一個字的顏色，往往只能整段重生成。
- 這一波的做法完全不同：模型寫的是程式碼（HTML／Canvas／React），用瀏覽器把每一格算出來，再用 ffmpeg 合成 MP4。整部片其實是「一個
seek(t)函數」，輸入相同就輸出相同，等於把動態設計變成可版控、可 diff、可單點修改的軟體。
這種路線帶來四個直接後果：
- 決定性：同一份程式碼每次算出的每一格都一樣，改一個場景不會動到其他場景。
- 免費：Chromium ＋ ffmpeg ＋ Python／Node，不需要 After Effects 授權，也不需要任何 AI 影片模型的訂閱。
- 天生對拍：場景直接排在 beat map 上，音樂重拍對齊關鍵畫面，音效依實測峰值落點。
- 適合代理迭代：「轉場快一點」、「音樂換掉」、「重拍加一顆 3D 方塊」都只是改程式碼。
而讓這條路線在 2026 年秋天突然可行的，是模型本身。Anthropic 官方資料顯示 Claude Opus 5.5 於 2026 年 9 月 22 日發布，是 Claude 5.5 家族第一款模型，定位在長時間執行的 agentic coding 與知識工作：上下文 1M token、單次輸出上限 128K token、價格每百萬 token $4／$20，輸出速度比 Opus 5 快 30% 以上。站上已另有發布當日的完整整理，此處不再重複。
第三方對「Opus 5.5 特別擅長動態設計」的觀察也對得上時間線。MarTech AI 電子報作者 Charlie Hills 在 9 月 27 日的 Substack 標題直接寫「Claude Opus 5.5 = your motion designer」，文中提到他前兩週才改推 Codex，Opus 5.5 一出就換回來，而「最大躍進就是 motion graphics」。同一個月，YouTube 上出現多支標準化教學：Lukas Margerie 的《How to Make Insane Motion Graphics With Opus 5.5》約 43 萬次觀看（9/28），RandomAI 的《Claude Opus 5.5 Is INSANE at Motion Graphics》約 17 萬次（10/2），流程幾乎一致——一句提示、逐格檢查、輸出 MP4。
20 個倉庫清單（星數／授權／最後更新實查）
以下三張表的星數與最後更新時間，皆為 2026-10-10 03:13 UTC 以 GitHub REST API 逐倉查詢；「授權」欄的「無授權檔」代表倉庫根目錄沒有標準授權檔（商用前必須自行確認）。
表 A：Opus 5.5 專用技能包
| # | 倉庫 | 星數 | 授權 | 最後更新 | 實際用途 |
|---|---|---|---|---|---|
| 1 | whaleyxbt/claude-motion | 206 | MIT | 2026-10-09 | 給程式代理的動態設計工具箱：不只教 API，還教「品味」、強制代理逐格檢查自己的畫面，內建音效引擎；原始碼模擬（simulation）也能逐格錄成 60fps 影片 |
| 2 | howseen-ai/claude-motion-design | 367 | MIT | 2026-10-04 | 純程式碼路線：HTML ＋ Playwright ＋ ffmpeg，不需要 After Effects、不需要 Remotion 授權；整部片是一個 seek(t)，場景排在 beat map 上。官方範例（Howseen 產品發布片）明寫是用 Opus 5.5 迭代 5 次生出來的 |
| 3 | charlie947/motion-graphics-skills | 143 | MIT | 2026-09-30 | 13 個技能組成的「發布級」動態圖像包，每一格都是程式碼；同時支援 Claude Code 與 Codex |
| 4 | haidrrrry/claude-remotion-skill | 336 | MIT | 2026-08-12 | Remotion 路線的代理人技能：彈簧動態、錯位編排、調色、底片顆粒、Ken Burns、逐字對齊字幕；硬性要求「渲染 → 看格 → 修 → 重渲」的自我檢查循環 |
| 5 | t3knobox/klik-anim-skill-creation | 37 | 無授權檔 | 2026-08-06 | 兩套技能：klik-anim-bible（動畫工藝法則，可獨立使用）＋ klik-remotion-method（端到端製片流程） |
| 6 | Sunwood-ai-labs/hyperframes-motion-reel-skill | 57 | MIT | 2026-09-29 | 以 HyperFrames（HTML ＋ GSAP ＋ SVG ＋ Canvas）做對拍宣傳片：120 BPM、60 FPS 輸出 MP4 |
| 7 | AbubakrChan/product-launch-motion | 117 | MIT | 2026-08-27 | 產品發布片、促銷片、Demo reel：HTML／CSS／GSAP 構圖、旁白逐字對齊、真實攝影機運動、電影級調色與廣播響度母帶處理 |
| 8 | cth9191/animate | 296 | MIT | 2026-10-05 | 單一 <canvas> 的程序式動畫短片：內建 7 種風格（剪紙、交叉線墨、孔版印刷、素描本、數學、像素、等角），第 8 格可由使用者提供的參考圖比對生成；流程含分鏡與風格檢查點 |
| 9 | iart-ai/motion-design-skills | 89 | MIT | 2026-06-22 | 動態設計基本功：時間感、排版、配色、構圖、Logo、背景，並含 After Effects 與 Remotion 對照 |
| 10 | nateherkai/hyperframes-student-kit | 1,265 | 非標準授權 | 2026-09-28 | Nate Herk 的影片剪輯工具包（Codex ＋ Claude Code 雙版本）：轉錄驅動剪點、去靜音、抓 NG、故事規劃，加上 406 張動態圖像素材卡與 HyperFrames 範本 |
表 B：渲染引擎（不是技能，是輸出影片的底層）
| # | 倉庫 | 星數 | 授權 | 最後更新 | 實際用途 |
|---|---|---|---|---|---|
| 11 | heygen-com/hyperframes | 59,856 | Apache-2.0 | 2026-10-10 | 「寫 HTML，渲染影片，為代理而生」：把 HTML 動畫輸出成 MP4，是目前這條路線最常被安裝的引擎（站上另有完整教學） |
| 12 | remotion-dev/remotion | 62,848 | 非標準授權 | 2026-10-09 | 用 React 以程式方式製作影片的老牌專案（站上教學）；注意其授權為公司／團隊分級，非純開源 |
| 13 | remotion-dev/skills | 4,972 | 無授權檔 | 2026-10-07 | Remotion 官方的 Agent Skills 集合，讓代理正確使用 Remotion API |
| 14 | greensock/GSAP | 28,979 | 無標準授權檔 | 2026-04-13 | JavaScript 動畫函式庫，是 HyperFrames 時間軸的驅動核心；商用授權條款須看 GreenSock 官方規定 |
表 C：配套生態
| # | 倉庫 | 星數 | 授權 | 最後更新 | 實際用途 |
|---|---|---|---|---|---|
| 15 | LottieFiles/motion-design-skill | 2,040 | MIT | 2026-05-18 | 給 AI 代理的通用動態原理：時間、緩動、編排，以及改寫自迪士尼動畫原則的 UI 版本 |
| 16 | frankxai/awesome-motion-design-agent-skills | 28 | CC0-1.0 | 2026-10-02 | 動態設計代理技能的地圖：GSAP、Motion、Remotion、Lottie、Rive，可用於網頁動畫、程序化影片與動作品質檢查 |
| 17 | Barty-Bart/motion-graphics | 554 | 非標準授權 | 2026-10-08 | 實用型技能（例如把主體從背景分離），對應作者同名的 YouTube 教學 |
| 18 | 199-biotechnologies/motion-dev-animations-skill | 130 | MIT | 2026-03-30 | Motion.dev 路線的代理技能：120fps 網頁動畫、彈簧物理、滾動效果、手勢互動 |
| 19 | motiondivision/motion | 33,919 | MIT | 2026-10-09 | Framer Motion 的後繼專案，React 與 JavaScript 的現代動畫函式庫 |
| 20 | airbnb/lottie-web | 32,170 | MIT | 2025-09-01 | 需要 Lottie 向量格式（而非 MP4）時的播放器，支援 Web／Android／iOS／React Native |
工作流就三步：寫碼 → 設定節奏與攝影機 → 輸出 MP4
把上面三張表串起來，實際操作就三步：
- 模型寫程式碼：交給 Opus 5.5（或任何讀得到
SKILL.md的代理）構圖、寫動畫與音效邏輯。 - 技能庫設定節奏與攝影機：技能包負責「品味」與規範——beat map、轉場時長、字級跨度、攝影機運動、逐格自檢。
- 引擎輸出 MP4：HyperFrames 或 Remotion 取格渲染，ffmpeg 合成。
安裝方式有三種，視代理而定：
- 複製到技能目錄（最通用）：
mkdir -p ~/.claude/skills && cp -r skill/motion-design ~/.claude/skills/ - npx 安裝：
npx skills@latest add <owner>/<repo>/<skill>（多數技能包都提供這行） - 外掛市集：
/plugin marketplace add <owner>/<repo>後再/plugin install <skill>@<marketplace>
技能格式本身是 Anthropic 公開的 SKILL.md 標準，同一個技能資料夾在 Claude Code、Codex CLI、Cursor 等工具間通常可共用。
三個實戰情境的挑法
| 情境 | 建議組合 | 理由 |
|---|---|---|
| 第一次試水溫 | claude-motion（#1）或 claude-motion-design（#2） | 兩者都是 MIT、都有作者附的成品範例、都內建代理自我檢查；先確認環境（Node 22+、ffmpeg、Chromium）能跑通 |
| 要做產品發布片 | product-launch-motion（#7）＋ hyperframes-motion-reel-skill（#6） | 前者處理旁白對詞與廣播響度，後者處理對拍與節奏；兩者授權皆 MIT |
| 要剪既有長片 | nateherkai/hyperframes-student-kit（#10） | 轉錄驅動剪點、去靜音、抓 NG，屬於「剪輯」而非「生成」；但授權非標準，商用需先確認 |
查證與保留：哪些說法站不住腳
這份清單在中文圈流傳時，有幾處需要更正或加註：
- 「Netflix 工程師」查不到佐證。 20 個倉庫中沒有任何一個屬於 Netflix 官方帳號；可辨識的作者是獨立開發者與內容創作者（Charlie Hills／MarTech AI 電子報、Nate Herk、Bart Slodyczka、X 帳號 whaleyxbt）與新創團隊（Howseen、HeyGen）。清單標題的這個身分，以公開資料無法證實。
- 技能數量對不上。 清單第 10 項寫「14 個技能」，倉庫 README 寫的是「15 skills」（406 張素材卡則對得上）。以倉庫自述為準。
- 第 13 項在中文圈被誤譯。 流傳版本把
remotion-dev/skills譯成「撤職技能／撤職官員技能」，實際上是 Remotion 官方的 Agent Skills 集合。 - 5 個倉庫沒有標準授權檔：t3knobox/klik-anim-skill-creation、remotion-dev/skills、GSAP、nateherkai/hyperframes-student-kit、Barty-Bart/motion-graphics（Remotion 本體則採公司／團隊分級授權）。要商用，這幾項必須個別確認條款，開源星數不等於可商用。
- 維護節奏差異極大：GSAP 最後更新停在 2026-04-13、lottie-web 停在 2025-09-01，屬成熟但低頻維護的底層；相對地，HyperFrames、Remotion、claude-motion 都在 10 月初仍有提交。
- 本文未自行產出影片成品驗證畫質，各倉庫的功能敘述取自其 README 與 GitHub API 描述，示範影片為作者自述；星數反映關注度，不等於成品品質。
成本與環境
- 模型端：Opus 5.5 每百萬 token 輸入 $4／輸出 $20（1M 上下文、128K 輸出上限），以 API 計費，台灣使用者沒有地區限制。
- 工具鏈端：Chromium、ffmpeg、Node 22+ 全部免費；與 After Effects 訂閱、或外包一支動態設計影片的報價相比，成本結構完全不同。
- 真正的學習曲線不在寫程式，而在動態設計的判斷：節奏、緩動、構圖、什麼時候該留白。這也正是技能包之所以存在的理由——它們把「品味」寫成代理可重複執行的規則。
站內延伸閱讀
- Claude Opus 5.5 正式發布：Artificial Analysis 智力指數 58 分登頂
- HyperFrames 是什麼？HeyGen 開源 HTML 轉 MP4 影片框架完整教學
- Remotion：用 React 以程式方式建立影片
- Claude 影片剪輯完整教學：Sonnet 5.5 三步工作流
- Video Use：用程式碼代理進行開源 AI 影片剪輯
- 2026 AI 影片生成工具比較：Veo 3.1、Kling、Sora 2、Runway 價格與台灣可用性
資料來源與查證方法
- GitHub REST API（
api.github.com/repos/<owner>/<repo>）逐倉查詢，時間 2026-10-10 03:13 UTC：存在性、星數、主要語言、授權、建立與最後推送時間。 - 各倉庫 README（raw.githubusercontent.com 抓取）：功能敘述、安裝指令、示範案例自述。
- Anthropic 官方：Claude Opus 5.5 發布頁與 Claude Platform Docs（模型 ID、上下文、輸出上限、定價、發布日期 2026-09-22）。
- 第三方觀察：Charlie Hills／MarTech AI 電子報（2026-09-27，標題直指 Opus 5.5 在動態設計的躍進）。
- 中文原文：微信公眾號〈67 个 Claude Skills：把 AI 用成一支开发团队〉（作者：路飞 AI 研究员）——該文主體是 67 個開發類 Skills 清單（來源為 Anthropic 官方
anthropics/skills、Matt Pocock 的mattpocock/skills與 SkillsMP 社群市場），影片標題提到的 20 個影片生成倉庫即本文查證對象。
本文為工具與生態整理，非投資或採購建議。所有開源專案請自行評估授權、供應鏈與資料安全風險後再導入。