AI 做動畫已經不只是叫模型生一段畫面。更實用的方向，是把動畫規則、鏡頭語言、渲染流程和品質檢查包成 Skill，讓 Codex、Claude Code 或其他 coding agent 知道該怎麼完成一支片。
這次整理的七個 AI 動畫 Skills，剛好涵蓋七種常見需求，從網頁動效、Logo 開場、數據動畫，到產品廣告、手繪故事和動態設計原則都有。它們不是同一類工具，也不需要全部安裝。先看自己要做什麼，再選對 Skill，會比堆一大包能力有效得多。
內容目錄
先講結論，短片該選哪一個
如果目標是快速做社群短片，我會先選 HyperFrames，它讓 Agent 用 HTML、CSS 和 JavaScript 描述畫面，再輸出成影片，對 Codex 很直覺，若內容以數字、圖表或年度回顧為主，Remotion 會更適合。產品網站想做成有電影感的廣告，可以直接看 video-shotcraft。
Logo 動畫選 Pixel2Motion，中文故事轉手繪日記選 story-to-handdrawn-video。GSAP AI Skills 負責把網頁互動做得更有彈性和節奏，LottieFiles motion-design-skill 則像一位動態設計導演，幫 Agent 先把時機、緩動和編排想清楚。
| Skill | 最適合的任務 | 主要輸出 | 我會怎麼選 |
|---|---|---|---|
| HyperFrames | 網頁式動畫、短影音、產品解說 | HTML 影片工程 | 想用 Codex 快速做片先選它 |
| GSAP AI Skills | 網頁互動、滾動動畫、UI 動效 | 可執行的前端動畫 | 網站看起來太硬時使用 |
| Pixel2Motion | Logo reveal、品牌開場 | SVG、HTML、GIF 或影片預覽 | 手上只有點陣 Logo 時使用 |
| Remotion Agent Skills | 數據、圖表、字幕、批次影片 | React 影片工程 | 需要精準時間軸與可重複生成時使用 |
| video-shotcraft | 產品宣傳片、網站功能廣告 | 電影感 Remotion 成片 | 有真實產品畫面時最有價值 |
| story-to-handdrawn-video | 中文故事、手繪日記動畫 | 直式手繪無聲影片 | 敘事型短片可以直接套流程 |
| motion-design-skill | 節奏、緩動、動態設計審查 | 設計規則與改進建議 | 搭配其他 Skill 一起用 |
Skill 和動畫工具有什麼不同
GSAP、Remotion 和 HyperFrames 是能真正執行動畫或渲染影片的工具，Skill 則是給 AI Agent 的工作說明，裡面會放最佳做法、檔案結構、動效規則、操作命令、常見失敗和驗收方式，它不會讓模型突然變成動畫師，但可以減少 Agent 亂猜 API、亂排時間軸和做出模板感畫面的機會。
如果你還不熟悉這種能力包，可以先看我整理的自訂 Skill 完整教學，它的重點不是多一個聊天指令，而是把可重複的製作方法交給 Agent。
1. HyperFrames，把網頁變成可渲染的影片
HeyGen HyperFrames 的核心很簡單，先用 HTML 寫畫面，再把瀏覽器中的動畫確定性地渲染成影片，Agent 可以處理分鏡、CSS、GSAP、素材、字幕、音訊和輸出，因此很適合做產品解說、社群短片、動態圖表與網站展示。
它和傳統剪輯軟體的差別，是畫面本身可以被程式控制，只要資料結構固定，同一套模板就能換內容重新輸出，想深入理解它的架構，可以接著看HyperFrames 用 HTML 寫影片。
npx hyperframes init my-video --example blank
cd my-video
npx hyperframes preview
npx hyperframes render2. GSAP AI Skills，讓網頁動效不再只是淡入淡出
GSAP AI Skills 是官方提供給 coding agent 的動畫知識包，涵蓋核心時間軸、Tween、ScrollTrigger、Flip、MorphSVG 和常見清理方式。它適合處理會浮、會彈、會跟著捲動改變的網站互動。
GSAP 的價值不是特效多，而是時間軸和控制能力成熟。Agent 知道怎麼設定 easing、stagger、觸發條件和資源清理後，做出來的動畫會比隨手拼 CSS transition 穩定很多。
npx skills add greensock/gsap-skills3. Pixel2Motion，一張 Logo 變成品牌動態開場
Pixel2Motion 會先把 PNG、JPG 或截圖中的 Logo 重建成平滑 SVG，再設計 motion、logo reveal 和 HTML 動態展示，它不是單純把圖片放大縮小，而是先處理向量結構，再對圖形部件安排動作。
這個流程很適合品牌開場、App 啟動畫面和社群短片片頭，官方專案也加入幾何比對、動作幀截圖和最終畫面檢查，讓 Agent 不只產出會動的檔案，也留下可審查的證據。
npx skills add nolangz/pixel2motion4. Remotion Agent Skills，用 React 做精準影片
Remotion Agent Skills 把 Remotion 的動畫、字幕、音訊、3D、圖表、渲染與元件設計規則交給 Agent。Remotion 本身以 React 組成影片，每一幀都能由程式和資料決定，因此很適合年度回顧、排行榜、圖表動畫、批次內容和字幕短片。
它的學習成本比單純 HTML 高，但大型專案會更好維護。之前整理的Codex 動態圖表和短影片工作流，就很適合拿 Remotion 處理需要精準幀數與資料驅動的部分。
npx skills add remotion-dev/skills
npx create-video@latest5. video-shotcraft，把產品畫面剪成電影感廣告
video-shotcraft 是一套以 Remotion 為基礎的產品影片製作 Skill。它提供超過一百張鏡頭配方卡、可預覽的動作樣式、2.5D 運鏡、節奏卡點、音效和可直接替換內容的完整模板。
最實際的用法，是把網站或桌面產品的真實畫面交給 Agent，再指定想使用的鏡頭卡。它會處理素材採集、分鏡、運鏡、轉場、聲音和品質檢查。相比只生成幾張氣氛圖，這條路更能把真正的產品功能講清楚。
npx skills add Vincentwei1021/video-shotcraft6. story-to-handdrawn-video，中文故事轉手繪日記動畫
story-to-handdrawn-video 能把中文故事或排序好的圖片，轉成直式手繪日記動畫，它會安排手寫文字、黑白線稿、彩色插圖與翻頁轉場，輸出可再加入旁白的 H.264 畫面。
這個 Skill 適合個人故事、知識小品、品牌創辦歷程和情緒型內容。它的風格很明確，不適合硬套在科技產品展示，但用在敘事題材時能快速建立一致的視覺語言。
git clone https://github.com/gnipbao/story-to-handdrawn-video.git
cd story-to-handdrawn-video
npm install7. motion-design-skill，先教 Agent 什麼叫手感
LottieFiles motion-design-skill 不綁定特定動畫框架。它教的是 timing、easing、choreography、情緒意圖和改寫成 UI 動效的經典動畫原則。CSS、GSAP、Framer Motion、Lottie 都能使用這套思考方式。
很多 AI 動畫技術上能跑，卻沒有重量、停頓和節奏，原因通常不是少一個套件，而是 Agent 沒先決定動作要傳達什麼。這個 Skill 最適合當成第二層能力，搭配 HyperFrames、GSAP 或 Remotion 一起使用。
npx skills add LottieFiles/motion-design-skill可以直接貼給 Codex 的繁體中文提示詞
不要只寫「幫我做一支動畫」。先把目的、尺寸、時長、素材、節奏和驗收條件講清楚。下面這份可以直接改主題使用。
請使用適合的動畫 Skill，製作一支 15 秒直式短片，比例 9:16。
目的
用最短時間介紹我的產品如何把文字整理成可搜尋的知識庫。
素材
使用專案中的真實產品截圖與品牌色，不要使用無關的 AI 圖片。
結構
0 到 3 秒呈現使用者找不到資料的痛點
3 到 8 秒展示匯入、整理與搜尋流程
8 到 12 秒用數字動畫顯示節省的時間
12 到 15 秒顯示產品名稱與行動文字
動效
畫面轉場要乾淨
數字使用平滑遞增
卡片進場要有重量感與短暫停頓
不要讓所有元素同時移動
限制
不要藍紫科技風
不要粒子背景
不要讓文字互相遮擋
不要使用未授權素材
驗收
先做 5 秒風格原型
確認手機畫面可讀後再完成全片
最後檢查每一幀是否有文字裁切、元素重疊和空白畫面我的建議組合
- 社群短片選 HyperFrames，加 motion-design-skill 控制節奏
- 網站互動選 GSAP AI Skills，加 motion-design-skill 做動態審查
- 數據影片選 Remotion Agent Skills
- 產品廣告選 video-shotcraft，再用真實頁面截圖
- 品牌片頭選 Pixel2Motion
- 故事內容選 story-to-handdrawn-video，再補旁白、字幕和音效
更完整的製作管線可以參考OpenMontage 本地 AI 影片工作流。它把研究、腳本、素材、渲染和驗收串起來，而這七個 Skill 比較像其中的專業工位。先把一個工位用熟，再擴大成自動化流水線，成功率會高很多。
FAQ
完全不會寫程式也能用嗎？
可以從提示詞開始，但仍要看得懂 Agent 建立了哪些檔案、如何預覽和輸出。HyperFrames 與 video-shotcraft 對成品導向較友善，Remotion 更適合願意維護 React 專案的人。
只想做短片，最推薦哪一個 Skill？
一般社群短片先選 HyperFrames。數據類短片選 Remotion。產品宣傳片選 video-shotcraft。風格容易僵硬時，再加 motion-design-skill 幫 Agent 調整節奏。
安裝很多 Skill 會不會讓 Agent 更強？
不一定。能力太多會增加選擇和上下文成本。每次任務只啟用一個主要製作 Skill，再搭配一個設計或品質檢查 Skill，通常會比較穩定。
近期留言