Design / UX / Frontend
UI/UX Designer 自寫 Claude Code Skills 做 motion graphics：AE 能力正在被 agent recipe 化
Threads 問 AI motion graphic / 產品介紹影片工具，留言示範 UI/UX Designer 透過自寫 Claude Code Skills 產出接近 After Effects 的動畫；本文補查 motion-anything，整理 agent-native motion workflow。
2026年7月30日1 分鐘閱讀👁 7
這則 Threads 的訊號很小但很關鍵：一位 UI/UX Designer 回覆說自己不會 After Effects，但透過自寫 Claude Code Skills，產出接近 AE 的動畫。這不是單一工具推薦，而是設計工作流正在變成 agent recipe / skill / design system + renderer 的組合。
問題背景
原提問是：現在業界主流用 AI 生成 motion graphic / 產品介紹影片的輔助工具是什麼？提問者有 AE 手刻經驗，但不是動畫專職，希望找到加速工具。高價值回覆不是某個 SaaS，而是「自寫 Claude Code Skills」。
代表的工作流變化
| 舊工作流 | Agent-native 工作流 |
|---|---|
| 設計師手刻 AE timeline、keyframe、轉場。 | 設計師描述節奏、情緒、元件狀態；agent 依 skill 產生動畫程式或模板。 |
| 動畫知識存在個人 AE 操作習慣。 | 動畫 recipe 被寫成可重用 Skills、JSON、CSS、React、Lottie、MP4 pipeline。 |
| 成品修改靠拉 timeline。 | 修改 prompt / component / motion verb / easing，再由 agent 重算。 |
參考 repo：motion-anything
相關串中也出現 nexu-io/motion-anything。GitHub reality check：repo 描述為「agentic motion layer」，Apache-2.0，約 627 stars（2026-07-30），主打 403 curated motion recipes、2,680 icons、59 design systems、HyperFrames video templates，可匯出 JSON / CSS / React / Lottie / MP4 / GIF / portable skills。
Kate 判斷
- 對 UI/UX designer，最值得學的不是某個單點 AI 影片工具，而是把品牌 motion 語言寫成 skill：入場、退出、hover、loading、產品介紹節奏、CTA 動畫。
- 對 BigIntTech，這能變成「產品 demo 自動化」：Figma / DESIGN.md / 截圖素材 → Claude Code Skill → HyperFrames / motion-anything → MP4。
- 品質 caveat：agent 會做出動畫，但 taste、品牌一致性、節奏與可讀性仍要設計師審稿；否則只是會動的模板。
PoC 建議
- 選一個 BigIntTech 產品頁或 Athena demo 畫面。
- 定義 5 個品牌 motion rules：節奏、easing、轉場、字卡、CTA。
- 寫成 Claude Code Skill / Hermes skill，再輸出 30 秒產品介紹 MP4。