LottieFiles 的 motion-design-skill：先把動態設計想對，再開始做動畫

你一定遇過這種狀況：寫好了 CSS transition 或 Framer Motion，但頁面上的卡片彈出來就是很彆扭。不是動得太慢像在拖時間，就是快到眼睛來不及反應。最難的通常不是寫動畫語法，而是怎麼決定 timing、easing，還有誰先動、誰後動的 choreography（動態編排）。

LottieFiles/motion-design-skill 做的事，就是把這些動態設計原則整理成一套 AI Agent 可以讀懂的規則。它不幫你產出動畫檔，而是做動畫前的決策層。

你可以這樣理解：

• Lottie Creator MCP、Framer Motion 或 GSAP 是 AI 的「手」
• motion-design-skill 是 AI 的「腦」

手負責把東西畫出來、寫出來，而腦負責在動手前先想對。

動畫寫得很順，但介面看起來就是很廉價？

很多時候 AI 幫忙寫動畫，寫出來的效果很怪，不是技術出問題，而是 AI 根本沒有動態美感。

常見的踩坑狀況像是：

• 每個 element 進場都用一模一樣的 duration 和 easing
• 所有的 transition 都一樣重，分不出視覺主次
• 頁面加載的 loading 狀態和按鈕 hover 的回饋感完全沒有情緒差異
• 複數 element 同時彈出來，畫面上亂成一團

motion-design-skill 就是要幫 AI 補上這一層「動態設計師的直覺」，讓 Agent 在寫 code 前先學會怎麼拿捏分寸。

不綁 library，它管的是動態的「腦」而非「手」

這個 repo 的定位很明確：

• 給 AI Agent 用的通用動態設計原則（Universal motion design principles）
• 觀念先行（Philosophy-first）
• 不綁定實作工具（Implementation-agnostic）

意思是說，它不是要綁死某一套動畫框架。不論你最後是用 CSS Animation、Framer Motion、GSAP，還是直接套 Lottie、Spring 系統，甚至是用腳本去刻 SVG 動畫，都可以套用這套邏輯。

它管的是「怎麼想」，而不是怎麼去 call API。

Repo 結構拆解：從核心規則到防踩坑手冊

這個 repo 裡面分了幾層，結構相當完整：

1) Core：SKILL.md

這是給 Agent 的快速對照手冊，裡面列出了動態設計的基本規範，包括 8 步檢查清單、常見的動態個性原型（motion personality archetypes），以及 duration 與 easing 的對照表。

2) Philosophy：director/

這層在處理更深層的「動態思考」。它把迪士尼傳統的動畫原則轉譯成現代 UI 語境，並提供一套 mapping 機制，讓 Agent 知道怎麼把抽象的情緒（例如：輕快、沉穩）轉換成具體的 duration 與 easing 參數。

3) Patterns：patterns/

這裡收集了常見的互動模式，像是進出場動畫、狀態回饋、背景循環動畫等。當你想做某個特定功能時，可以直接來這抄結構。

4) Reference：reference/

這層是查表與排除疑難雜症用的。如果動畫效果出來不如預期，或者不知道某個 property 該用哪種變形（transform），這裡有詳細的 troubleshooting 指南可以查閱。

什麼時候該套用這套動態設計原則？

這套原則適合放在那些需要靠動態去堆疊質感、品牌感的地方，常見的情境有：

• 首頁 Hero 區塊的進場
• 表單送出後的 loading 狀態與 success/error 轉場
• 複雜的卡片與清單進場編排
• 隨著 scroll 觸發的滾動驅動動畫

總之，只要不是單純的「讓東西動起來」，而是需要複數元素配合、需要跟使用者互動產生情感連結的場景，這套原則都幫得上忙。

讓 Agent 學會「節制」的視覺能量

我目前看下來，這套規則最實用的地方在於教 Agent 學會「節制」。

動態設計最怕的就是塞得太滿。這套 skill 特別提醒 AI 幾點：

• 避免所有元素用同個節奏動，要有層次感（stagger）
• 背景跟輔助的動態一定要控量，不能搶主角風頭
• 動態要有個性，不能只是機械式地做點對點移動

這些細節如果沒有人在前面把關，光靠 AI 去猜，通常只會得到一個眼花撩亂的網頁。

搭配 Lottie Creator MCP：大腦與雙手的協奏

如果你的開發工作流裡有引入像 Lottie Creator MCP 這種 tool，它們兩者的角色分配會非常漂亮：

• MCP 負責操作 editor、處理實際的動畫檔案
• motion-design-skill 負責在動手前，給 Agent 設計原則與審美底線

當 Agent 同時具備了這兩者，它就不只是一個聽話寫 code 的機器，而是一個能幫你把關動態品質的助手。

實務上怎麼讓 Agent 產出合理的動畫？

為了讓這套 skill 發揮最大效果，在跟 Agent 溝通時，有幾個很實用的技巧：

1) 先給結構，再給動態

如果你的頁面已經排好了，先把 HTML/CSS 結構或 SVG 圖層丟給 Agent，讓它在現有架構上去加 transition。結構穩了，動畫才不會飄。

2) 圖層命名要明確

AI 是看圖層跟 variable 命名來做事的。圖層名稱最好能直接反映它的角色，例如 hero_title、cta_button、bg_circle。命名越清楚，Agent 越不容易搞錯順序。

3) 複雜動態要拆步驟

別只丟一句「幫我做一個炫酷的引導頁動畫」。把任務拆細：先建立靜態畫面、加入主要元素的進場順序、接著調節奏與 easing、最後做微調。這樣 Agent 跑起來最穩。

4) 用精確的術語溝通

與其說「讓它動得自然一點」，不如直接給限制：stagger 80ms、400ms ease-out，或是「先讓 main content 出現，再淡入 sidebar」。有了量化指標，Agent 產出的效果會好很多。

SVG 動畫也適用嗎？

答案是肯定的。

雖然 motion-design-skill 不會直接幫你寫出 SVG 的 XML 語法，但它可以幫你做好前面的企劃。例如決定哪一條 path 先畫出來、圓圈縮放的 easing 該怎麼設、多個 SVG 元素怎麼錯開時間。把這些規律訂好後，再叫 Agent 用 CSS 或 JavaScript 去實作，就不會寫出一堆生硬的動畫。

這套工具適合你嗎？

如果你正在建置 AI Agent 的開發流程，希望 Agent 在幫忙做 UI 或動畫時能有基本的審美品味，那這套 motion-design-skill 非常值得塞進 Agent 的 system prompt 裡。

它不是萬靈丹，也沒辦法幫你省去所有的調教時間，但至少它幫 AI 立下了一條及格線，讓你不至於每次看到 AI 生出來的動畫都想搖頭。