emil-design-eng skill 是什麼、怎麼安裝使用：把 Emil Kowalski 的介面打磨標準交給 AI（動效時長、緩動、按壓反饋）

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

這個 Skill 做什麼

Emil Kowalski 是 Sonner、Vaul 等組件庫的作者，以介面細節和動效見長。這個技能把他的設計工程方法寫給智能體。description：編碼了 Emil Kowalski 在介面打磨、組件設計、動效決策，以及那些讓軟件「用着舒服」的隱形細節上的理念。

內容大致四塊：

• 核心理念：品味是練出來的；用戶注意不到的細節會累積成整體質感；好看本身是槓桿。
• 動效決策框架：寫動畫前按順序回答四個問題。先問該不該動——一天觸發上百次的操作（快捷鍵、命令面板開合）一律不加動畫，一天幾十次的要大幅減弱，偶爾出現的彈窗抽屜用標準動畫，首次引導這類少見場景才可以加點趣味。再問目的、緩動曲線和時長，技能給了一張時長表：按鈕按壓反饋 100–160 毫秒，提示與小浮層 125–200，下拉 150–250，彈窗抽屜 200–500，介面動畫總體控制在 300 毫秒以內。
• 彈簧動畫：何時用、怎麼配、為什麼可打斷。
• 組件原則：按鈕要有按壓反饋；不要從 scale(0) 開始出現；浮層從觸發點展開；第二個提示氣泡跳過延遲等。

它還規定了評審格式：必須用一張「改前 / 改後 / 原因」三列表格，一行一個問題。

怎麼安裝

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

bash
npx skills@latest add emilkowalski/skills --skill emil-design-eng

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

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

怎麼用

• 「用 emil-design-eng 評審這個下拉選單組件的動畫」——得到對照表，例如把 transition: all 300ms 改成只過渡 transform 的 200 毫秒緩出。
• 「這個命令面板要不要加開合動畫？」——它按使用頻率給判斷。
• 「給這個按鈕補上按壓態和合適的緩動」。

SKILL.md 規定，不帶問題直接調用時它只回一句就緒說明，等你提問。

適合誰 / 侷限

適合寫 React 與 CSS 介面、想把「能用」提升到「順手」的前端工程師，以及沒有專職動效設計師的小團隊。它講的是網頁端的交互細節，不涉及整體視覺風格和資訊架構；規則帶着作者鮮明的取向（偏快、偏剋制），做營銷頁的大動畫時未必適用。同庫的 review-animations 是專門的動效評審，animate 負責動手實現，可以搭配。

注意事項

• 許可：GitHub 標註為 MIT。
• 不帶腳本：純說明文字，約兩萬七千字符。
• 內容是作者個人方法的整理，更系統的講解在他的付費課程 animations.dev，技能本身免費。