使用手冊

開源技能庫 · 動態圖像 / 影片生成

教 AI Coding Agent, 把想法動起來。

iart-ai/motion-skills 實戰手冊——50 個開源技能、14 個可安裝技能包,讓 Claude Code 等 AI Coding Agent 製作動態圖像、文字動畫、資料視覺化與短影音。安裝、能力總覽、運作原則與使用實例。

motion-skills 是一組開源技能,教 Claude Code 等 AI Coding Agent 製作動態圖像、動畫與影片。共 50 個技能、14 個可獨立安裝的技能包,涵蓋文字動畫、資料視覺化、短影音、WebGL 與 3D、Manim 數學動畫與 Remotion 程式化影片。這份手冊說明安裝方式、能力範圍、運作原則與一段端到端使用實例。

iart-ai/motion-skills
星標
—
分支
—
授權
—
資料截至
—
閱讀時間
7 分
更新日期
開啟原始報告
GitHub Stars
198
開源技能
50
可安裝技能包
14
開源授權
MIT
本頁章節

01這到底是什麼

給 AI Coding Agent 的動態圖像技能庫。

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)與教學內容。

  1. 安裝技能包

  2. 描述需求

  3. 代理生成

  4. 檢視輸出

  5. 調整重生

  6. 交付

Open-source skills that teach AI coding agents to create motion graphics, animation, and video content.

— iart-ai/motion-skills · 專案定義

02安裝

用 npx skills add 單獨裝你需要的技能包。

技能包以獨立 repository 發佈,按需求單獨安裝。透過 npx skills add iart-ai/<pack> 即可加入對應技能包。以下為 README 提供的安裝範例。

bash
# 安裝短影音技能包(TikTok / Reels / Shorts)
npx skills add iart-ai/tiktok-video-skills

# 安裝資料動畫技能包(圖表 / 資訊圖)
npx skills add iart-ai/data-animation-skills

Claude Code plugin 整合

技能包也可以透過 Claude Code 的 plugin marketplace 機制加入。以網頁動畫技能包為例:

bash
/plugin marketplace add iart-ai/web-animation-skills

03能力總覽

一個技能包對應一種動態內容。

50 個技能依輸出類型打包成 14 個技能包。下方列出 README 點名的技能包與專案涵蓋的動態內容能力。前三項(tiktok-video-skills、data-animation-skills、web-animation-skills)是 README 列出的安裝範例;其餘為專案描述的能力面向,實際安裝的技能包名稱以主 repo README 為準。

技能包 · 01

iart-ai/tiktok-video-skills

短影音製作

TikTok / Reels / Shorts 直式短影音的生成技能。

技能包 · 02

iart-ai/data-animation-skills

資料視覺化

資料驅動的圖表與資訊圖動畫。

技能包 · 03

iart-ai/web-animation-skills

網頁動畫

GSAP、SVG、Lottie 等網頁動畫技術。

能力 · 04

kinetic typography

文字動畫

動態文字與字幕動效(kinetic typography)。

能力 · 05

WebGL / 3D

3D 動畫

WebGL 與 3D 場景動畫。

能力 · 06

Manim

數學動畫

以 Manim 製作數學與公式動畫,適合教學內容。

能力 · 07

Remotion

程式化影片

以 Remotion 用程式碼產生影片。

機制 · 08

deliver-and-verify

交付驗證迴圈

產出後檢視實際輸出再調整,而非一次生成即結束。

要做哪種內容?對應的入口

你要產出的內容對應技能包 / 能力
直式短影音(TikTok / Reels / Shorts)tiktok-video-skills
圖表、資訊圖、資料動畫data-animation-skills
網站上的互動 / 過場動畫web-animation-skills(GSAP / SVG / Lottie)
數學 / 教學動畫Manim 類技能
以程式碼批次產生影片Remotion 類技能

04運作原則 · 官方結構

它如何組織與運作。

以下整理自專案 README,說明 motion-skills 的結構與設計取向,而非社群技巧。每一條都可在主 repo 對照查證。

原則 · 技能而非應用程式

motion-skills 提供的是安裝進 AI Coding Agent 的技能,不是獨立工具。能力來自代理本身執行這些技能,因此需要相容的代理環境(如 Claude Code)。

來源 · 官方 README

原則 · 14 個技能包,可獨立安裝

50 個技能依輸出類型打包為 14 個技能包,各以獨立 repository 發佈。用 npx skills add iart-ai/<pack> 只裝需要的部分,不必全部載入。

來源 · 官方 README

原則 · deliver-and-verify 迴圈

代理產出後會檢視實際輸出再調整,而非單次生成。這個交付並驗證的迴圈用來降低「看起來對、實際渲染錯」的落差。

來源 · 官方 README

原則 · 對接既有動畫工具鏈

技能對應的是業界既有工具:網頁端 GSAP / SVG / Lottie、數學動畫 Manim、程式化影片 Remotion、3D 用 WebGL。產物因此能銜接既有製作流程。

來源 · 官方 README

原則 · Claude Code plugin 整合

除了 npx skills add,技能包也能透過 Claude Code 的 plugin marketplace 加入(/plugin marketplace add iart-ai/<pack>),在代理的對話流程內直接使用。

來源 · 官方 README

原則 · 涵蓋多種輸出格式

適用場景包含短影音、解說短片、資料視覺化、產品 demo、品牌素材、網頁動畫與教學內容,對應不同技能包而非單一輸出格式。

來源 · 官方 README

05使用實例

從安裝技能包到產出一支短影音。

以下示意一段端到端流程:在 Claude Code 安裝短影音技能包,描述需求讓代理生成,接著進入 deliver-and-verify 迴圈檢視輸出並調整。命令以 README 的安裝語法為準;代理的內部步驟為流程示意,實際技能名稱依安裝的技能包而定。

~/projects/launch-clip · claude code · motion-skills


$ npx skills add iart-ai/tiktok-video-skills


ok: ✓ installed iart-ai/tiktok-video-skills
# [skill pack available to this agent]


$ You ›
  幫我做一支 15 秒的直式短影音,介紹我們的新功能 "Instant Export"。
  風格簡潔,深色背景,重點文字逐字浮現。


claude: Claude(motion-skills)›
  先確認規格,再開始生成:
    · 畫面比例 9:16(1080×1920)
    · 長度 15s · 深色背景
    · 主視覺:kinetic typography 逐字浮現


# [生成分鏡與動畫腳本]
# [渲染草稿輸出 draft-01.mp4]


hl: — deliver & verify —
# [檢視 draft-01.mp4 實際輸出]
claude: 第 8 秒文字超出安全區,字幕被裁切。已調整邊距與字級後重新渲染。
# [渲染 draft-02.mp4 · 重新檢視 ✓]


ok: 輸出:launch-clip.mp4 · 1080×1920 · 15.0s
# [可再要求調整節奏、配色或字體]

代理產出後會檢視實際輸出再調整, 而非一次生成就交付。

— deliver-and-verify · motion-skills 的核心執行迴圈

這段流程的重點

差異在於 deliver-and-verify 迴圈:代理不是生成完就結束,而是檢視渲染後的實際畫面(例如字幕是否超出安全區),發現問題再修正重渲。這正是讓「生成式動畫」可用於正式產出的關鍵環節。

另一個重點是按需安裝:這個案例只裝了短影音技能包,要做資料圖表或網頁動畫時再各自安裝對應技能包即可,不必一次載入全部 50 個技能。

06先看清楚這些

不是銀彈。知道邊界再上路。

07進階路徑

把它接進你的內容流程。

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——成品展示。

Open-source skills that teach AI coding agents to create motion graphics, animation, and video content.

— iart-ai/motion-skills · 50 個技能 · 14 個技能包 · MIT