給 AI 補上品味：Emil Kowalski 開源介面動效 Skills 庫

emilkowalski/skills 是一個面向 AI 程式設計智慧體的設計與動效規則庫。它把資深設計工程師在前端介面和互動動效上的經驗，整理成了一套可以直接餵給 AI agent 執行的技能清單，讓模型在寫前端程式碼時不再犯那些顯粗糙的低階錯誤。

作者 Emil Kowalski 曾任職於 Vercel 和 Linear，也是知名開源元件庫 Sonner 與 Vaul 的開發者。按他的說法，現在的 AI 程式設計工具最大的問題不是不會寫程式碼，而是缺乏審美和品味。AI 經常會在彈窗入場時用錯緩動函式，把該用 ease-out 的地方寫成 ease-in；或者在做卡片邊框時順手畫上一條生硬的實線，而不是疊一層細膩的半透明陰影。這些單看不致命的小毛病堆疊起來，就會讓整個介面充滿一種廉價的 AI 味。

它給 AI 補上了哪些規則

這套規則庫把平時難以言傳的動效直覺轉化成了明確的規範，涵蓋了從設計審查到程式碼落地的多個環節。

其中最核心的是 emil-design-eng 和 animate。它們負責指導 AI 從零搭建動效，從一開始就選對緩動曲線、持續時間和運動屬性。面向移動端的 animate-expo 則把這套標準帶到了 React Native 和 Expo 環境，專門解決手勢跟手性、底欄抽屜、觸感反饋和螢幕轉場，確保動效始終執行在原生執行緒，避免 JavaScript 執行緒卡頓。

為了幫開發者省時間，專案裡設計了一套名為 improve-animations 的審查機制。它借鑑了前端工具的做法，先讓能力最強的模型去通讀整個程式碼庫，從動畫的觸發頻率、物理慣性、可打斷性、效能和一致性等 8 個維度打分，然後生成一份帶優先順序的待辦方案，儲存在專案目錄裡。接著你可以把這些明確的方案交給執行成本更低的輕量模型去逐一執行，高階模型本身絕不直接碰業務程式碼。

除了動效本身，這套庫還收納了針對移動端網頁的細節補丁 mobile-native。它專門清理事先容易忽略的瀏覽器頑疾，例如手機端粘滯的 hover 狀態、點選高亮閃爍、經典的 100vh 滾動高度異常、輸入框聚焦觸發頁面縮放，以及安全區適配等。

此外，庫裡還包含從蘋果 WWDC 演講中提煉出來的 apple-design、教開發者用準確術語向 AI 描述動效的 animation-vocabulary、用極端異常資料測試介面的 break-ui，以及輔助挑選靠譜第三方包的 pick-ui-library 等工具。

怎麼用起來

這套規則完全開源在 GitHub。如果你正在使用支援 skills 規範的 AI 開發環境，只需在終端中執行一條安裝命令，即 npx skills@latest add emilkowalski/skills，就能把這套規則掛載到你的智慧體裡。

它不需要額外的本地硬體配置，本質上是一組高度結構化的系統提示詞和工程規則上下文。無論你底層使用的是哪家模型，只要它支援在對話或工作流中讀取上下文，就可以直接生效。

為什麼重要

我們認為，這個專案最有價值的地方在於給 AI 程式設計探索出了一種新的專長交付方式。過去我們總以為審美是純粹的主觀感覺，但 Emil Kowalski 用這套專案證明，頂級工程師的品味很多時候就是由成百上千條具體的邊緣規則構成的。

如果你是獨立開發者或者全棧工程師，平時知道自己做的介面不夠高階但又說不清差在哪裡，這套規則庫非常值得直接裝進你的開發環境。它不僅能讓 AI 寫出更靠譜的動畫，更像是一個隨時坐在你邊上的資深動效顧問，幫你在程式碼提交前把那些破壞手感的細節全部揪出來。