動態工藝工具包
來源： github.com/iart-ai/motion-skills — 14 個開源套件，51 項技能，MIT 授權。 這是一個統一的整合參考。原始 14 個套件可透過
npx skills add iart-ai/<pack-name>個別安裝，或作為 Claude Code 外掛使用。此技能涵蓋完整領域，讓您一次掌握全局。
資訊
| 儲存庫 | iart-ai/motion-skills（上游，MIT） |
| 整合者 | V4TIME — V4SKILL |
| 內容 | 為 AI 編碼代理重新組織的 51 項動態圖形/動畫/影片技能 |
| 格式 | 參考技能 — 閱讀起來像手冊，單一 SKILL.md 檔案 |
| 安裝原始套件 | npx skills add iart-ai/tiktok-video-skills 等 |
| 使用時機 | 任何涉及動態圖形、動畫、影片製作、網頁動畫、數據視覺化、3D/WebGL、數學動畫或接案動畫業務的請求 |
主要主題
教導 AI 編碼代理從頭到尾產出動態圖形、動畫與影片 — 從一個鉤子驅動的 TikTok 短片到 WebGL 著色器背景，從有旁白的解說影片到品牌動態系統文件。這個集合涵蓋 14 個領域，每個領域都有可安裝的套件，並共享一個通用結構：每個技能都是一個獨立的 SKILL.md + references/ 資料夾，用來教學一個工作流程。會產出視覺作品的技能，都包含一個交付與驗證迴圈，以及一個小型的 scripts/ 工具包。
貫穿主軸：動畫是工藝，不是魔法。 每個套件都根植於真實的製作技術 — 時間/緩動原則、精準到格的剪輯、節奏同步、60fps 紀律、平台規格、無障礙設計 — 而不只是「讓它動起來」。
主要關鍵主題
-
短影音垂直影片是一種獨特的文法。 鉤子、節奏中斷、步調、留存編輯、按字計時的字幕、下三分之一處、倒數計時器 — 9:16 是一種獨特的語言，而不只是「橫著拍的影片轉過來」。
-
數據驅動動畫。 圖表競賽、計數器、資訊圖表動畫、Wrapped 風格的回顧、從 CSV 批次生成的廣告素材 — 動畫是數據的函數，在每一格都精準渲染。
-
動態字體是文字即動畫。 字元/單字/行錯開、分割文字揭示、可變字重過渡、路徑文字、歌詞/標題卡 — 文字不只是靜止的，它會表演。
-
網頁動畫的生存關鍵在於 60fps 與無障礙。 只對
transform/opacity做動畫、消除布局抖動、尊重prefers-reduced-motion並提供分層降級、Next.js App Router 的頁面轉場、微互動、SVG 筆畫繪製、Lottie 播放。 -
3D/WebGL 是一條獨立賽道。 GLSL 片段著色器、Three.js/R3F 場景、粒子系統 — GPU 綁定、注意記憶體洩漏、作為背景和效果部署，而非整個產品。
-
數學動畫有其獨特的工藝。 Manim CE — 場景、Mobject、LaTeX 變形、ValueTracker、3D 移動攝影機 — 用於製作 3Blue1Brown 風格的教學影片和方程式視覺化。
-
編輯性地圖動畫是地理即敘事。 攝影機推近、繪製路線、放置圖釘、區域高亮、12fps 頓挫感 — Vox 風格，來自 Google Earth Studio 或 GeoJSON/SVG。
-
品牌動畫是一個系統，而非一次性產出。 緩動/時間標記、動畫程式庫、標誌規則、無障礙標準 — 一次撰寫，隨處引用。
-
接案動畫是一門生意。 簡報、報價、修改次數上限、交付規格、品牌動態指南 — 這些是讓動畫師或工作室能夠持續營運的後勤工作。
-
每個視覺技能都附有驗證迴圈。 凍結影格、製作聯絡表、檢查編碼後的 MP4 — 代理在回傳結果前先確認自己的輸出。網頁技能會渲染獨立的 HTML；影片技能則透過 Remotion 或 Manim 渲染。
51 項技能 — 整合、重新排序、重寫
按工作流程組織，而非原始套件。順序已重新排過。約一半的說明被完全重寫；其餘則濃縮自原始 README 的描述。
A. 短影音垂直影片（TikTok / Reels / Shorts）
1. short-form-video
功能： 垂直 9:16 影片的結構文法 — 能抵擋滑走的鉤子、重置注意力的節奏中斷、維持留存率的步調，以及可重複使用的模板結構。將「前三秒問題」視為設計約束，而非模糊感覺。
觸發時機： 製作 Reel/TikTok/Shorts、建立可重複使用的短影片模板、為留存率而剪輯、修正軟弱的開場、緊湊節奏、製作無縫循環影片。
2. caption-animation
功能： 從逐字稿或旁白生成按字計時的卡拉 OK 風格字幕 — 依字彈出時間、當前單字高亮、安全區域放置以確保字幕不與平台 UI 重疊。可渲染燒錄字幕，或提供計時單字陣列供其他渲染器使用。
觸發時機： 將旁白轉換為 Hormozi 風格的逐字字幕、將字幕燒錄到影片上、為 Reel 添加動畫字幕。
3. countdown-video
功能： 影格精準、無漂移的倒數計時器，具有數字翻轉/滾動動畫和可設定的持續時間 — 「即將開始」畫面、發布/銷售倒數、精準在正確影格歸零的動畫計數器。解決了大多數簡陋計時器實作中的漂移問題。
觸發時機： 建立倒數計時器、「即將開始」畫面、發布倒數、必須在歸零結束的動畫計數器。
4. lower-thirds
功能： 乾淨、品牌化的姓名/職稱下三分之一處動畫，帶有分階段的進/出動畫 — 模板化，可對整個名單套用相同外觀並更換姓名。包含安全區域放置和品牌鎖定（顏色、字型、標誌位置）。
觸發時機： 為一群人建立動畫化的下三分之一處、姓名標籤、講者覆蓋層、廣播風格標題。
5. text-message-animation
功能： 將聊天對話動畫化 — 對話泡泡逐一彈出、打字指示器脈動、發送音效與節奏同步、討論串自動滾動 — 涵蓋 iMessage/WhatsApp/SMS 美學，並從訊息陣列或 CSV 渲染，使一個模板能產出無限數量的影片。
觸發時機： 製作假簡訊影片、iMessage 故事、WhatsApp/SMS 對話片段、聊天回覆動畫、從 CSV 批次產生簡訊影片。
B. Podcast / YouTube / 長影片
6. audiogram
功能： 將 podcast 片段、旁白或引言轉換為適合 Reels/TikTok/Shorts/動態牆貼文的加字幕波形影片 — 反應式波形、可選的進度條、字幕、方形或垂直輸出。音訊驅動的視覺線索本身就是產品，而非裝飾。
觸發時機： 製作音波圖、將 podcast 轉為影片、為旁白添加動態波形、將 podcast 引言匯出到社交媒體。
7. youtube-intro-outro
功能： 建立 3–5 秒的品牌片頭和 20 秒的片尾畫面，並將 YouTube 的可點擊元素區域（訂閱按鈕、下一個影片卡片等）視為設計約束，而非事後添加。可重複使用的模板，只需更換名稱/標誌/顏色/片頭短曲。
觸發時機： 製作 YouTube 片頭、頻道宣傳片、標誌短曲、片尾、結束畫面、包含訂閱/下一部影片空間的結束卡片。
C. 電子商務 / 產品
8. product-demo-video
功能： 將靜態的產品/應用程式截圖轉換為精美的動畫展示 — 設備邊框、合成滑鼠游標 + 點擊、縮放到特定區域、功能說明 — 讓一張平面截圖無需螢幕錄影即可變成逐步導覽。可逐格控制觀眾看到什麼以及何時看到。
觸發時機： 製作產品展示影片、應用程式/SaaS 逐步導覽、從截圖製作功能公告影片、將每個畫面放入瀏覽器視窗中。
9. promo-video
功能： 簡潔有力的 6–15 秒銷售廣告 — 折扣揭示、「原價→特價」價格劃掉、促銷代碼、倒數計時、行動呼籲 — 並可從資料表批次處理多個產品，使一個模板能從數據中提取價格，渲染 N 個促銷影片。專為黑色星期五 / 限時搶購等高量需求設計。
觸發時機： 製作銷售/促銷/折扣揭示/黑色星期五/限時搶購影片、從包含優惠的 CSV 批次產生促銷影片。
10. photo-slideshow
功能： 將一個資料夾中的照片轉變為完成的影片 — 每張照片的 Ken Burns 效果、與節奏同步的轉場、處理混合的長寬比、在頂部疊加說明文字。照片不只是被剪接；它們有目的地移動。
觸發時機： 將照片轉為附有音樂的幻燈片/蒙太奇/回顧影片，Ken Burns 效果與配樂同步。
D. 廣告 / 行銷
11. ad-creative-video
功能： 一個數據驅動的廣告模板 × 一個 CSV = 產生 N 個訊息匹配的變體，並匯出到所有投放長寬比（9:16、4:5、1:1、16:9）以供 A/B 測試。創意是參數化的，因此鉤子、內文、行動呼籲和優惠都來自數據列。
觸發時機： 製作影片廣告、從資料表批次產生用於 A/B 測試的廣告變體、將一個廣告匯出到多種長寬比以用於 Meta/TikTok/Reels/YouTube。
12. launch-video
功能： 高能量產品發布 / 炒作影片 — 鉤子 → 暗示 → 揭示 → 功能蒙太奇 → 片尾行動呼籲，剪接與節奏同步。結構是模板；能量是你可以調整的變數。
觸發時機： 製作 30 秒產品發布影片、炒作影片、與節奏同步的揭示、附片尾行動呼籲的影片。
13. testimonial-video
功能： 動畫化的引言/評論片段，帶有錯開的行揭示、關鍵詞強調、分星級評分和作者區塊 — 將客戶評論列表轉變為一個品牌鎖定的社交證明影片。
觸發時機： 將客戶評論轉為動畫化的推薦片段、附星級評分的引言影片、從評論列表製作社交證明影片。
E. 解說 / 教育
14. explainer-video
功能： 將一個訊息轉變為節奏得當、有旁白的 30–90 秒短片 — 腳本 → 分鏡 → 場景建置 → 旁白/字幕同步 → 剪輯 → 打磨。這是完整流程，而非僅是渲染步驟。處理了大多數動畫工具忽略的從腳本到畫面的差距。
觸發時機： 製作解說、運作方式、入門引導或概念影片；將一個功能轉變為有旁白的運作方式示範影片。
15. wrapped-video
功能： 建立「Spotify Wrapped」風格的回顧 — 一個模板 × 一個資料表 → 產生許多個人化的 9:16 影片，每個影片由一行數據填充。模板保持不變；數據因使用者而異。
觸發時機： 從包含使用者的 CSV 製作 Spotify Wrapped 風格的年度回顧影片，每個使用者都有自己的統計影片。
16. diagram-animation（重寫）
功能： 隨著時間揭示圖表，而非一次性完全顯示 — 漸進的節點/邊緣揭示、自動繪製的連接線、逐漸升高的長條圖、滴答作響的計數器。觀眾在圖表建構的過程中閱讀它，而不是看到一個突然出現的靜態圖像。以相同的方式處理架構圖、流程圖和數據圖表：階段性揭露。
觸發時機： 逐步將圖表、流程圖、架構圖或圖表動畫化；逐節點揭示；長條圖增長和數字計數。
17. whiteboard-animation（重寫）
功能： 「VideoScribe」風格的繪製式解說 — 一隻手在板上逐筆繪製插圖和手寫文字，與旁白同步。揭示本身就是動畫，而手是載體。這不是優質內容的替代品，而是一種傳遞機制，讓基本的插圖感覺像是一堂正在展開的課程。
觸發時機： 製作白板風格解說、繪製式動畫、與旁白同步的手繪插圖。
18. isometric-animation（重寫）
功能： 等角 / 2.5D 場景 — 堆疊圖層、拉伸方塊、爆炸圖、具有錯開揭示和攝影機漂移的等角網格。為平面的圖形感提供了第三維度，而無需完全 3D；攝影機會漂移，圖層會分離，觀看者無需 WebGL 管線即可獲得深度提示。
觸發時機： 建立等角/2.5D 場景、堆疊圖層圖表、爆炸視圖、具有錯開揭示和攝影機漂移的等角網格。
19. manim（重寫）
功能： 使用 Manim Community Edition 以 Python 建立數學/物理/計算機科學動畫 — Scenes 和 Mobjects、動畫原語、LaTeX/MathTex 方程式變形、圖形和更新器（ValueTracker）、3D 和移動攝影機、CLI 渲染為 MP4/GIF，並包含先渲染一幀的驗證迴圈。這是 3Blue1Brown 的工具鏈，可供能編寫場景程式碼的代理使用。
觸發時機： 製作數學動畫、將方程式動畫化、使用 Manim、製作 3Blue1Brown 風格影片、繪製並動畫化函數、將一個公式變形為另一個公式、用環繞攝影機渲染 3D 表面。
F. 動態字體
20. kinetic-typography
功能： 在 CSS、GSAP SplitText、Framer Motion 和 Remotion 中將文字動畫化 — 字元/單字/行錯開、分割文字揭示、可變字重過渡、路徑文字、歌詞/標題卡。文字是動畫主體，而不是坐在其他東西上面的標籤。
觸發時機： 將標題動畫化、製作動態字體影片、建立動畫標題卡、分割文字揭示、按字元/單字/行交錯顯示文字、製作歌詞或字幕影片、將可變字重動畫化、將文字放在路徑上。
G. 網頁動畫
21. gsap-web
功能： 使用 GSAP 進行程式碼驅動的網頁動畫 — 時間軸、ScrollTrigger、SplitText、Flip 和 Lenis 平滑滾動同步。這是業界標準的時間軸工具，與網頁整合，而非封閉的外掛。
觸發時機： 使用 GSAP 在網頁上建立滾動驅動、英雄區域或文字揭示動畫；將一個英雄區域固定住，使其隨滾動而調整時間軸。