把 Apple 設計方法塞進 AI Agent
這張圖裡的 apple-design,不是 Apple 推出的 UI Kit,而是設計工程師 Emil Kowalski 製作的開源 Agent Skill。他把 Apple 在 WWDC 分享的介面設計方法,整理成 AI Coding Agent 能讀懂的 SKILL.md,再翻譯成 CSS、Pointer Events、requestAnimationFrame 與 Motion/Framer Motion 等 Web 實作方式。它能協助 Agent 製作或審查拖曳、滑動、Sheet、彈簧動畫、動量銜接、半透明材質、字體排版與無障礙動態,不只是叫 AI 把畫面做得「像 Apple」。
現實應用
前端工程師可以把它當成互動設計規範,拿來改善 Modal、Drawer、Carousel、拖曳卡片與行動版手勢;設計師則能用它審查動畫是否即時回應、能否中途打斷,以及進出場路徑是否一致。對沒有專職 Motion Designer 的新創團隊、接案工作室或正在用 Claude Code、Codex 等工具做 Prototype 的人尤其實用,因為它把原本仰賴經驗的細節,變成 Agent 可以逐條檢查的規則。
期望評估
低標來看,我認為它至少能減少 AI 常見的亂選 easing、動畫過慢、所有元件都加彈跳,以及忽略 prefers-reduced-motion 等問題。就算沒有一次產出完美介面,也能得到一份具體的 UI Review 清單。
高標來看,我猜熟悉前端的團隊可以把它變成共用的設計工程規範,讓多個 Agent 產出的互動維持一致,並更快做出可實際操作的高擬真 Prototype。不過它提供的是判斷框架,不是自動生成 Apple 品質的按鈕;品牌個性、資訊架構與最後的手感仍要靠人決定。
商業策略分析
我認為最直接受影響的是 UI 外包、低階 Prototype 製作與只負責套動畫的工作。這些工作不會立刻消失,但報價依據會從「能不能做」轉向「是否知道為什麼要這樣做」。商業上的真正價值,是把資深設計工程師的隱性經驗封裝成可重複使用的 Agent Context。
值得跟進,但不必把它當成新的設計系統。我會把它定位成團隊的品質基線,再疊加自己的 Brand、Component Library 與使用者研究。未來真正有差異化的,可能不是誰有 AI,而是誰能持續把自己的品味與決策理由整理成 Skill。
實作細節
作者提供的安裝指令是:
npx skills@latest add emilkowalski/skills
安裝後,可要求支援 Agent Skills 的 Coding Agent 使用 apple-design 建立或審查互動介面。內容包含可直接參考的彈簧參數、動量投射公式、Pointer Capture、Rubber-banding、backdrop-filter、字距與行高,以及 Reduced Motion 的替代方案。
已知限制是它屬於社群整理內容,並非 Apple 官方規範或現成元件套件,而且主要把 Apple 的原生介面觀念轉譯到 Web;實際成果仍需在不同瀏覽器、輸入裝置與無障礙設定下測試。