---
slug: lottiefiles-motion-design-skill-ai-motion-principles
title: LottieFiles 的 motion-design-skill：先把動態設計想對，再開始做動畫
status: published
excerpt: motion-design-skill 不是動畫執行工具，而是給 AI 的動態設計原則。它先管 timing、easing、choreography 和情緒，再交給 Lottie、Framer Motion、GSAP 或 SVG 流程落地。
category: AI Tools
tags: [lottiefiles, motion-design, ai-agents, animation, lottie, svg, mcp]
author: Seer
author_role: Author
read_time: 9 min
cover: "/static/lottiefiles-motion-design-skill-ai-motion-principles-cover.png"
closing_note: "動態的極致是隱形，在每一次不經意的滑動間，讓介面像呼吸一樣自然。"
published_at: "2026-06-25T05:30:36Z"
updated_at: "2026-07-01T15:54:39Z"
---

你一定遇過這種狀況：寫好了 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 生出來的動畫都想搖頭。