animation-vocabulary skill 是什麼、怎麼安裝使用：說不出動效叫什麼？讓 AI 幫你把「那個彈一下的效果」對上術語

本文根據 emilkowalski/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 20.1 萬次；所在倉庫 emilkowalski/skills 在 GitHub 約 4.5 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

讓 AI 做動效，卡住的往往不是技術，而是不知道那個效果叫什麼：「點按鈕後浮層像是從按鈕里長出來的」「滾到頭還能再拉一點然後彈回去」。說不出名字，就只能反覆描述、反覆返工。animation-vocabulary 是一本反查詞典。description：把對網頁動畫或運動效果的含糊描述變成準確的術語（例如「浮層打開時彈一下的那個」對應 Pop in，「iOS 那種橡皮筋滾動」對應 Rubber-banding）；用戶問「這個叫什麼」，或描述了一個效果卻不知道名字、想要一個能拿去向 AI 或設計師提需求的詞時使用。它只負責命名，不負責設計和實現。

SKILL.md 給智能體定了五條做法：

1. 讀意圖而不是抓關鍵詞——用戶描述的是看到的和感覺到的，不是技術名；
2. 詞表裏的釋義原樣引用，不改寫；
3. 相近的詞要對比着講，比如裁剪路徑與遮罩、彈入與回彈、共享元素過渡與佈局動畫；
4. 沒有完全對應的詞時，給出最接近的並明說是近似，或者用詞表裏的詞組合描述，例如「這是一組縮放進場加上依次錯開」；
5. 只在這份詞表內回答，確實沒有就說沒有，不編新詞。

輸出格式也是固定的：術語加一句釋義；有多個可能時，最匹配的放前面，再列一兩個備選並說明區別。

詞表分十二類：進場與退場、編排與時序、移動與變換、狀態之間的過渡、滾動相關、反饋與交互、緩動、彈簧動畫、循環與環境動效、打磨與特效、性能、應當了解的原則。

怎麼安裝

倉庫 README 的安裝命令是 npx skills@latest add emilkowalski/skills（整庫，安裝時可在選擇器裏勾選）。只裝這一個，按 skills CLI 文檔加 --skill 參數：

bash
npx skills@latest add emilkowalski/skills --skill animation-vocabulary

裝好後技能進入所選智能體的技能目錄，按 description 自動觸發，也可以用 /animation-vocabulary 手動調用。

倉庫整體介紹和其他安裝方式，詳見本站《emilkowalski/skills 是什麼、怎麼安裝：Emil Kowalski 的介面動效與設計 Skills（讓 AI 做的動畫不再生硬）》。

怎麼用

SKILL.md 自帶的兩個例子：

• 「浮層看起來是從你點的按鈕里長出來，而不是從自己中間放大，這叫什麼？」——答案是 Origin-aware animation（感知起點的動畫）。
• 「一張圖變成另一張圖的那種效果」——首選 Morph（形變），並提示如果只是原地交疊淡入淡出，那叫 Crossfade。

問到名字之後，把術語直接寫進給智能體的需求裏，例如「卡片列表用 stagger 依次進場」，比描述半天更準。不帶問題直接調用時，它只回一句就緒說明。

適合誰 / 侷限

適合產品經理、設計師和不常寫動效的開發者，在向 AI 或同事提需求前先把詞找對；也適合學前端動效的人當術語表翻。侷限：術語以英文為準，中文圈的叫法並不統一，溝通時最好中英文一起寫；它只管叫什麼，不解釋怎麼實現——實現可以交給同庫的 animate 或 emil-design-eng；詞表之外的冷門效果它會如實說沒有。

注意事項

• 許可：GitHub 標註為 MIT。
• 不帶腳本、不聯網：一份一萬三千多字符的說明加詞表。
• 詞表反映的是作者的歸類方式，個別術語在不同團隊裏含義略有出入，以實際效果為準。