LottieFiles Motion Design Skill:讓 AI Agent 先懂動態設計,再寫動畫程式
LottieFiles 的 Motion Design Skill 將 timing、easing、choreography、Disney 動畫原則與 UI 動態設計知識整理成 agent skill,讓 AI 在撰寫 CSS、Framer Motion、GSAP、Lottie 等動畫前,先建立正確的動態設計判斷。
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。