LottieFiles Motion Design Skill：讓 AI Agent 先懂動態設計，再寫動畫程式
Design Skill / UI Animation
LottieFiles 的 Motion Design Skill 把 UI 動畫設計的 timing、easing、choreography、情緒語彙與 Disney 動畫原則整理成可被 AI agent 使用的技能。它的重點不是綁定某個動畫框架，而是讓 agent 在寫程式之前先像 motion director 一樣思考。
Threads 脈絡
原討論從「以前用 Lottie 做 SVG 動畫要畫很久，現在已經有 skill」展開。hearsilent 在回覆中分享了 LottieFiles 的 GitHub 專案：LottieFiles/motion-design-skill。留言區也出現「可以分享嗎」、「這是什麼 skill」、「可以不用 Lottie 手刻 keyframe 了嗎」等反應，代表這類 agent skill 正在把設計知識從工具操作層推向決策層。
這個 Skill 提供什麼
Core：快速決策清單
SKILL.md 提供 8 步驟 checklist、motion personality archetypes、duration / easing tables、property selection guide、常見 pattern 與品質規則。
Director：動態設計哲學
director/ 收錄三大支柱、Disney 12 原則的 UI 轉譯、emotion-to-motion mapping、choreography、敘事結構與情境調整。
Patterns：可套用動畫模式
patterns/ 包含 entrance / exit、success / error / loading / hover 狀態回饋、ambient motion 與多元素 choreography。
Reference：查表與除錯
reference/ 提供 timing / easing 查表、property selection、quality checklist，以及常見 animation smell 的 troubleshooting。
它和一般動畫工具的差別
| 層次 | 一般工具 / Prompt | Motion Design Skill |
|---|---|---|
| 輸入 | 「做一個漂亮動畫」 | 先定義情緒、節奏、優先順序與互動回饋 |
| 輸出 | 可能只是 keyframe 或框架語法 | 可套用到 CSS、Framer Motion、GSAP、Lottie、Spring 等系統 |
| 品質判斷 | 靠主觀感覺或反覆試 | 用 duration、easing、choreography、a11y、performance 檢查 |
| 適用場景 | 單點動畫 | 微互動、頁面轉場、狀態回饋、多元素進場、品牌 motion identity |
安裝方式
npx skills add LottieFiles/motion-design-skillREADME 表示它支援 40+ agents，包含 Claude Code、Cursor、Codex、GitHub Copilot 等。專案採 MIT License。
適合用在哪些任務
- 按鈕、卡片、modal、page transition 等 UI animation。
- loading、success、error、hover 等狀態回饋。
- scroll-triggered 或 progress-based animations。
- 建立產品的品牌 motion identity。
- 多元素 choreography，例如 dashboard 先進 hero chart，再進 stats cards，最後 sidebar。
- review 既有動畫程式碼，找出節奏、可及性或效能問題。
可以怎麼問 Agent
Add a playful entrance animation to these card components.Create a loading → success → error state transition for this form submit button.
Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar.
Review my animation code and suggest improvements based on motion design principles.