使用手冊

第 01 期 · 開源技能 / 設計工程

Agent 沒有品味, 但可以裝一個。

Emil Kowalski 開源的 Design Engineer 技能集完整實戰手冊——三個技能涵蓋動畫品味哲學、嚴格審查標準與精準詞彙表,取材自他在 Vercel、Linear 等公司的經驗。含安裝、規則總覽與審查實例。

emilkowalski/skills 是設計工程師 Emil Kowalski 開源的技能集,取材自他在 Vercel、Linear 等公司累積的經驗。收錄三個技能——動畫與設計哲學、嚴格的動畫程式碼審查、精準動畫詞彙表——目標是把「什麼樣的緩動曲線、時長、觸發時機才算對」這種難以言傳的判斷,變成 Agent 能照著執行的具體規則。

emilkowalski/skills
星標
—
分支
—
授權
—
資料截至
—
閱讀時間
8 分
更新日期
開啟原始報告
GitHub Stars
4,978
收錄技能
3
動畫審查硬性標準
10
開源授權
MIT
本頁章節

01這到底是什麼

品味是練出來的, 不是天生偏好。

emilkowalski/skills 的 repo 描述只有一句話:「Skills for Design Engineers.」作者 Emil Kowalski 在 README 裡說明,這些技能取材自他在 Vercel、Linear 等公司累積的經驗。核心問題很直接:AI 生成的介面能動、能跑,但緩動曲線選錯、陰影疊錯、時長抓錯這些小地方會不斷累積,決定一個介面是「令人驚艷」還是「就那樣」。SKILL.md 把這句話寫得更白:Agent 沒有品味(Agents don't have great taste)。

技能的哲學核心有三條:品味是練出來的——透過研究優秀作品、逆向拆解互動、反覆練習養成,不是個人喜好;看不見的細節會疊加——大部分使用者不會意識到的微調,加總起來才是真正的質感;美感是槓桿——在功能同質化的軟體市場,打磨過的動效是少數還能拉開差距的地方。

三個技能分工明確:emil-design-eng 是主要的設計哲學與判斷框架,review-animations 是專門審查動畫程式碼的嚴格審查員,animation-vocabulary 是把模糊描述翻成精準術語的反查詞彙表。

  1. 判斷框架

  2. 精準詞彙

  3. 嚴格審查

All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune.

— Paul Graham,skills/emil-design-eng/SKILL.md 引用

02安裝

一行 npx, 三個技能一次裝進去。

安裝透過官方的 skills CLI 完成,不需要手動 clone 或複製資料夾。在專案根目錄執行:

bash
npx skills@latest add emilkowalski/skills

這條指令會把 emil-design-eng、review-animations、animation-vocabulary 三個技能一次裝好。前兩者(哲學框架、詞彙表)會在合適情境下自動載入;review-animations 的 frontmatter 明確標了 disable-model-invocation: true——也就是說審查技能不會自動觸發,必須明確呼叫。

03三個技能總覽

一套哲學, 一本詞典, 一個把關人。

三個技能各司其職,不重疊。emil-design-eng 提供判斷框架,平常會自動載入;animation-vocabulary 是反查詞典,把你模糊的描述翻成精準術語;review-animations 是嚴格的守門員,frontmatter 寫明 disable-model-invocation: true,預設不觸發,只在你明確要求審查動畫時介入。

框架 · 01

emil-design-eng

設計哲學

UI 打磨、元件設計、動畫決策的完整判斷框架。涵蓋頻率規則、緩動選擇、時長標準、GPU 效能與無障礙。

詞典 · 02

animation-vocabulary

反查詞彙表

把「開啟時彈一下的那個效果」翻成「Pop in」這類精準術語,方便你跟設計師或 AI 精準溝通。

審查 · 03

review-animations

動畫守門員

十條硬性標準逐條檢查動畫程式碼。預設攔下,核准要靠爭取。disable-model-invocation: true,必須明確呼叫。

核心時長與緩動標準(emil-design-eng)

以下數字直接取自 SKILL.md,是判斷框架裡最常被引用的一組具體規則。

元素建議時長建議緩動
按鈕按壓100–160mshover / 顏色變化用 ease
Tooltip、popover125–200ms進場用 ease-out
下拉選單、select150–250ms螢幕內移動用 ease-in-out
Modal、drawer200–500ms持續運動用 linear

04硬性標準 · review-animations

核准要爭取, 不是預設給的。

review-animations 的 frontmatter 寫著「Default to flagging; approval is earned.」——預設攔下,核准要靠爭取。以下是它逐條檢查的十條標準,以及 SKILL.md 裡標記為「立即攔下」的具體觸發條件。

標準 01 · 動畫要有理由

動畫必須服務於空間一致性、狀態指示、回饋或說明。對高頻出現的元素,「看起來很酷」不算理由。

來源 · review-animations SKILL.md

標準 02 · 依頻率決定要不要動

一天觸發 100 次以上的操作(如鍵盤快捷鍵)不該有動畫;偶爾出現的互動可以用標準動畫;稀有事件才容許加驚喜感。

來源 · emil-design-eng SKILL.md

標準 03 · 進出場緩動要對

進場、離場用 ease-out 或自訂曲線;CSS 內建的 easing 太弱,預期要用自訂的 cubic-bezier。

來源 · review-animations SKILL.md

標準 04 · 不能無故超過 300ms

沒有正當理由,UI 動畫時長不該超過 300 毫秒。這是攔下審查最常見的原因之一。

來源 · review-animations SKILL.md

標準 05 · Popover 要從觸發點展開

Popover 該用 transform-origin 從觸發元件展開,絕不從 scale(0) 開始(modal 例外,永遠置中)。

來源 · review-animations SKILL.md

標準 06 · 手勢動畫要能被打斷

由手勢驅動的動畫必須從目前狀態重新定向,而不是用 keyframes 從頭重播。

來源 · review-animations SKILL.md

標準 07 · 只准動 GPU 屬性

只能對 transform 跟 opacity 做動畫;動 padding、margin、height、width 這些排版屬性會拖垮效能。

來源 · emil-design-eng SKILL.md

標準 08 · Framer Motion 的隱藏陷阱

x、y、scale 這些簡寫屬性不會被硬體加速。要用完整的 transform 字串,例如 animate={{ transform: "translateX(100px)" }}。

來源 · emil-design-eng SKILL.md

標準 09 · 尊重減少動態偏好

prefers-reduced-motion 開啟時,保留有助理解的 opacity、顏色轉場,移除位移與位置動畫。手機觸控裝置的 hover 動畫要用 @media (hover: hover) and (pointer: fine) 隔開,避免點擊誤觸發。

來源 · emil-design-eng SKILL.md

標準 10 · 進出場時長要不對稱

刻意的動作放慢(如按住兩秒刪除用 2s linear),系統的即時回應要快(放開時用 200ms ease-out)。

來源 · emil-design-eng SKILL.md · Sonner 案例

05使用實例

看 review-animations 怎麼攔下一段 CSS。

以下是示意情境:你寫了一個 dropdown 選單的進場動畫,想請 Agent 依這套標準審查。review-animations 不會自動觸發(disable-model-invocation: true),所以你要明確點名它。輸出格式固定兩段:findings 表格,再加分級後的 Block / Approve 判決——這是 SKILL.md 規定的格式,不是自由發揮。

~/projects/app · review-animations


$ You ›
  用 review-animations 審查這個 dropdown 動畫:


  # .dropdown-menu {
    # transition: all 400ms ease-in;
    # transform-origin: center;
  # }
  # .dropdown-menu.enter {
    # transform: scale(0);
  # }


# [loaded skills/review-animations/SKILL.md]
# [default: flagging · approval must be earned]


claude: Claude(review-animations)›
  Part 1 — Findings


  hl: | Before                          | After                                  | Why |
  | transition: all 400ms ease-in;  | transition: transform 200ms ease-out;  | 標準 07:只動 transform/opacity,別用 all |
  |                                  |                                         | 標準 03:進場禁用 ease-in,改用 ease-out |
  |                                  |                                         | 標準 04:400ms 超過 300ms 上限,無正當理由 |
  | transform: scale(0);            | transform: scale(0.95); opacity: 0;    | 標準 05:不可從 scale(0) 進場 |
  | transform-origin: center;       | transform-origin: var(--radix-...);    | 標準 05:非 modal 元件要從觸發點展開 |


  Part 2 — Verdict


  hl: [Feel-breaking] ease-in 進場 + scale(0) → 動作會顯得遲鈍、突兀
  hl: [Performance]   transition: all 讓瀏覽器監聽所有屬性變化
  hl: [Accessibility] 未見 prefers-reduced-motion 處理


# [BLOCK] 三項標準未過,修正後再送審

Default to flagging; approval is earned.

— skills/review-animations/SKILL.md,frontmatter description

這段審查為什麼值得拆解

同一段 CSS 換了四個地方,理由各自對應到第 04 節不同的標準編號——不是模糊的「感覺不太好」,而是可以逐條指認、逐條核對的具體規則。這正是三個技能分工的意義:哲學框架定義什麼是對的,審查技能負責把守門檻,而不是讓「品味」停留在只能意會的階段。

06先看清楚這些

不是設計系統。知道邊界再上路。

07進階路徑

把它改成你團隊的品味標準。

每個 SKILL.md 都是純 Markdown,可以直接打開改。以下是幾條可行的下一步。

進階玩法地圖

**1. 把你團隊的規則加進 review-animations。**打開 skills/review-animations/SKILL.md,在十條標準之外補上你產品特有的限制(例如特定元件庫的緩動慣例),連同觸發條件與 Block 理由一起寫進去。

**2. 用 animation-vocabulary 統一團隊用語。**把設計師常用但不夠精準的說法,對照到詞彙表裡的正式術語,寫進你的設計交接文件,減少「那個彈一下的效果」這類來回確認。

**3. 決定審查要不要卡進流程。**因為 review-animations 預設不自動觸發,團隊可以自行決定:是每次 PR 手動呼叫,還是寫進 CI 腳本強制執行,兩種都合理,取決於團隊規模。

4. 直接讀官方網站的示範。emilkowal.ski/skill 通常會比 README 有更即時的示範與說明,適合定期回頭確認規則是否更新。

最該讀的延伸閱讀

① skills/emil-design-eng/SKILL.md——完整的判斷框架、元件原則與效能規則。 ② skills/review-animations/SKILL.md——十條硬性標準與立即攔下的觸發條件。 ③ skills/animation-vocabulary/SKILL.md——完整動畫詞彙分類。 ④ emilkowal.ski/skill——作者的官方介紹頁面。

Knowing whether you made a right choice when it comes to animations, or design in general, is hard.

— Emil Kowalski,README.md