motion-skills 是一組開源技能,教 Claude Code 等 AI Coding Agent 製作動態圖像、動畫與影片。共 50 個技能、14 個可獨立安裝的技能包,涵蓋文字動畫、資料視覺化、短影音、WebGL 與 3D、Manim 數學動畫與 Remotion 程式化影片。這份手冊說明安裝方式、能力範圍、運作原則與一段端到端使用實例。
motion-skills 是一組開源技能,目的單一:教 AI Coding Agent 製作動態圖像、動畫與影片。它本身不是一個應用程式,而是可以安裝進 Claude Code 等代理環境的技能集合,讓代理在原本的對話流程裡直接產出動態內容。
整個專案由 50 個技能組成,打包為 14 個可獨立安裝的技能包。涵蓋的內容類型包含文字動畫(kinetic typography)、資料驅動的圖表與資訊圖、TikTok / Reels / Shorts 短影音、WebGL 與 3D 動畫、Manim 數學動畫,以及 Remotion 程式化影片。各技能包以獨立 repository 發佈,可按需求單獨安裝。
執行面採用 deliver-and-verify(交付並驗證)迴圈:代理產出內容後會檢視實際輸出,再據此調整,而非一次生成就結束。對應的使用場景包括短影音、解說短片、資料視覺化、產品 demo、品牌素材、網頁動畫(GSAP / SVG / Lottie)與教學內容。
技能包以獨立 repository 發佈,按需求單獨安裝。透過 npx skills add iart-ai/<pack> 即可加入對應技能包。以下為 README 提供的安裝範例。
技能包也可以透過 Claude Code 的 plugin marketplace 機制加入。以網頁動畫技能包為例:
tiktok-video-skills、data-animation-skills、web-animation-skills)是 README 列出的安裝範例;其餘技能包同樣以 iart-ai/<pack> 形式發佈,可在主 repo 的 README 查到完整清單後再選裝。
50 個技能依輸出類型打包成 14 個技能包。下方列出 README 點名的技能包與專案涵蓋的動態內容能力。前三項(tiktok-video-skills、data-animation-skills、web-animation-skills)是 README 列出的安裝範例;其餘為專案描述的能力面向,實際安裝的技能包名稱以主 repo README 為準。
| 你要產出的內容 | 對應技能包 / 能力 |
|---|---|
| 直式短影音(TikTok / Reels / Shorts) | tiktok-video-skills |
| 圖表、資訊圖、資料動畫 | data-animation-skills |
| 網站上的互動 / 過場動畫 | web-animation-skills(GSAP / SVG / Lottie) |
| 數學 / 教學動畫 | Manim 類技能 |
| 以程式碼批次產生影片 | Remotion 類技能 |
以下整理自專案 README,說明 motion-skills 的結構與設計取向,而非社群技巧。每一條都可在主 repo 對照查證。
motion-skills 提供的是安裝進 AI Coding Agent 的技能,不是獨立工具。能力來自代理本身執行這些技能,因此需要相容的代理環境(如 Claude Code)。
來源 · 官方 README50 個技能依輸出類型打包為 14 個技能包,各以獨立 repository 發佈。用 npx skills add iart-ai/<pack> 只裝需要的部分,不必全部載入。
代理產出後會檢視實際輸出再調整,而非單次生成。這個交付並驗證的迴圈用來降低「看起來對、實際渲染錯」的落差。
來源 · 官方 README技能對應的是業界既有工具:網頁端 GSAP / SVG / Lottie、數學動畫 Manim、程式化影片 Remotion、3D 用 WebGL。產物因此能銜接既有製作流程。
來源 · 官方 README除了 npx skills add,技能包也能透過 Claude Code 的 plugin marketplace 加入(/plugin marketplace add iart-ai/<pack>),在代理的對話流程內直接使用。
適用場景包含短影音、解說短片、資料視覺化、產品 demo、品牌素材、網頁動畫與教學內容,對應不同技能包而非單一輸出格式。
來源 · 官方 README以下示意一段端到端流程:在 Claude Code 安裝短影音技能包,描述需求讓代理生成,接著進入 deliver-and-verify 迴圈檢視輸出並調整。命令以 README 的安裝語法為準;代理的內部步驟為流程示意,實際技能名稱依安裝的技能包而定。
差異在於 deliver-and-verify 迴圈:代理不是生成完就結束,而是檢視渲染後的實際畫面(例如字幕是否超出安全區),發現問題再修正重渲。這正是讓「生成式動畫」可用於正式產出的關鍵環節。
另一個重點是按需安裝:這個案例只裝了短影音技能包,要做資料圖表或網頁動畫時再各自安裝對應技能包即可,不必一次載入全部 50 個技能。
motion-skills 以 MIT 授權開源,可自由使用與修改。下方是把它放進實際內容生產的幾條路徑。
1. 從一個技能包起步。先用 npx skills add iart-ai/tiktok-video-skills 裝最貼近需求的單一技能包,跑通一支短影音,再依需要擴充。
2. 用 plugin marketplace 整合 Claude Code。/plugin marketplace add iart-ai/web-animation-skills 把技能包接進代理的對話流程,內容生成不離開既有工作環境。
3. 對齊底層工具鏈。依目標輸出先備好對應環境——網頁動畫的 GSAP / Lottie、數學動畫的 Manim、程式化影片的 Remotion,讓代理產出的腳本能直接渲染成片。
4. 把 deliver-and-verify 納入流程。將「渲染草稿 → 檢視輸出 → 調整重渲」設為固定環節,把生成結果當草稿迭代,而非單次定稿。
5. 查閱完整技能包清單。主 repo README 列出全部 14 個技能包;依內容類型挑選要安裝的部分,而非全部載入。
① iart-ai/motion-skills——主 repo,完整技能包清單與安裝說明。
② README.md——安裝範例、能力範圍與使用方式。
③ showcase.html / showcase.gif——成品展示。