apple-design skill 是什麼、怎麼安裝使用：把蘋果的流暢交互原則搬到網頁（彈簧、手勢、可打斷過渡）

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

這個 Skill 做什麼

很多人想讓網頁「像 iOS 一樣順」，卻只學到毛玻璃和圓角。apple-design 講的是背後的交互原理。description：蘋果做介面設計和流暢、帶物理感的運動的方法，翻譯給網頁用；在構建或評審手勢驅動的介面、彈簧動畫、拖拽 / 滑動 / 底部彈層、慣性與可打斷過渡、半透明材質與層次、排版、減少動態效果，以及蘋果風格介面背後的設計基礎時使用。

SKILL.md 說明知識來源是蘋果的 WWDC 設計講座（主要是 2018 年的《Designing Fluid Interfaces》），並換成了 CSS、Pointer Events、requestAnimationFrame 和 Motion 這類彈簧庫的寫法。貫穿全文的一句話：運動從螢幕上的當前值出發、繼承用戶的速度、把慣性向前投射，並且隨時可以被抓住和反轉，介面才有活的感覺。

分節依次是：消滅響應延遲；一比一的直接操控；可打斷（被稱為最重要的一條）；用彈簧描述行為而不是寫死動畫；空間一致性；朝手勢方向給提示；橡皮筋式的軟邊界；手勢細節；逐幀流暢度；材質與層次；動效配合聲音與觸感；減少動態效果與無障礙；排版（視覺尺寸、字距、行距）；八條設計原則（目的、掌控感、責任、熟悉感、靈活、簡潔而非極簡、工藝、愉悅）；最後是流程和速查表。

怎麼安裝

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

bash
npx skills@latest add emilkowalski/skills --skill apple-design

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

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

怎麼用

• 「做一個可以下拉關閉的底部彈層，拖動要跟手，鬆手後按速度決定回彈還是關閉」。
• 「這個輪播在滑到盡頭時很生硬，按蘋果的做法加橡皮筋效果」。
• 「評審這個拖拽排序的實現，哪裏不可打斷」。

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

適合誰 / 侷限

適合做移動端網頁、PWA 和手勢交互較多的 Web 應用的前端開發者。侷限：它講的是網頁上的近似實現，系統級的觸感反饋、原生滾動物理在瀏覽器裏做不到完全一致；做原生 iOS 應用應以蘋果官方的人機介面指南為準。偏展示型的靜態頁面用不上這麼重的交互。

注意事項

• 許可：GitHub 標註為 MIT。
• 非蘋果官方內容：是作者對公開講座的整理和轉譯，文中引用的講座內容以蘋果官方發佈為準。
• 不帶腳本：純說明文字；實現時通常要引入彈簧動畫庫，按項目情況取捨。