Apple Design

Apple Design 是一套可加载技能，把 Apple WWDC 界面演讲变成 Web 上的手势 UI、弹簧和半透明材质规则。它在 emilkowalski/skills 的 skills/apple-design，MIT，创建于 2026-03-16，Markdown。2026-09-14 GitHub 显示父仓库 37,460 star、2,108 fork（整包 12 个技能，不是 apple-design 单独的数字）。安装：npx skills@latest add emilkowalski/skills。它出现在 X「为你推荐」里，作为给 Codex 做网页/App 的苹果风 UI 技能。

这不是 Apple、不是作为产品的 Human Interface Guidelines，也不是 GUI。对照 UI Skills 若你要更宽的 UI/UX 包，对照 Frontend Design 若你要 Anthropic 官方前端技能，对照 Agent Skills 若你要 Addy Osmani 的工程生命周期包。

核心功能

• 触发：SKILL.md 写明用于手势驱动 UI、弹簧动画、拖/滑/抽屉、动量、可中断转场、半透明材质、光学字号、减弱动态效果，或苹果风基础（反馈、空间一致性、克制）。
• 核心想法：动效从屏幕上的当前值起步，继承手指速度，投射动量，飞行中还能被抓住。弹簧是默认工具，因为可中断。
• 技能里的具体数字：默认 UI 弹簧 damping 1.0 / response 0.3-0.4；轻甩 bounce damping ~0.8；动量投射 decelerationRate ≈ 0.998；橡皮筋常数 0.55。对应 Motion / Framer Motion 的 bounce + duration。
• Web 映射：Pointer Events + setPointerCapture，只动 transform/opacity，材质用 backdrop-filter，字距随字号变，prefers-reduced-motion 用交叉淡入淡出而不是滑动。
• 同仓库兄弟技能：emil-design-eng、animate、animate-expo、review-animations、improve-animations、find-animation-opportunities、animation-vocabulary、write-swift、pick-ui-library、prototype、ask-sonner。

限制：37,460 star 是整包热度，不是经过认证的 Apple 移植。技能正文引用 WWDC 2018 Designing Fluid Interfaces、WWDC 2020 字体、音频触觉演讲，以及 Principles of Great Design（WWDC 2026）。CSS transition 和 @keyframes 被明确写成抓取反转动效的错误工具。减弱动态效果的用户必须拿到淡入淡出，而不是弹簧。

适用场景

• 做网页或 App UI、希望手感像 iOS 抽屉而不是普通 CSS ease 的 Claude Code / Codex / 其他技能宿主。
• 已经在用 Motion、Vaul 或 Embla、需要速度交接而不是松手吸附的 设计工程。
• 应该改用 Frontend Design 的人：如果你要的是 Anthropic 官方前端技能，不是苹果动效教义。

定价方案

快速开始

1. npx skills@latest add emilkowalski/skills，或克隆 github.com/emilkowalski/skills。
2. 把宿主指到 skills/apple-design/SKILL.md。
3. 要一个抽屉、sheet 或拖动手势，并要求从展示值起步的可中断弹簧。
4. 通讯和扩展：animations.dev/skills。

一手资源：SKILL.md 和 整包 README。

常见问题

这是官方 Apple 吗？

不是。这是 Emil Kowalski 给 Web 的蒸馏。Apple HIG 仍是一手规范。

只能装 apple-design 吗？

文档里的安装会拉整包。若宿主支持单文件夹，也可以只把 skills/apple-design 拷进技能目录。

还能用 CSS keyframes 吗？

技能写明：用户能抓住的东西不要用。要用能从当前速度重新瞄准的弹簧。

替代方案

• UI Skills：更宽的 UI/UX 原则和组件。
• Frontend Design：Anthropic 官方前端技能。
• Agent Skills：工程生命周期，不是动效品味。

使用技巧

1. 引用 MIT、12 个技能、37,460 父仓库 star 和 damping 1.0，数据来自 2026-09-14 核对的页面。
2. 不要声称这是 Apple，也不要把 3.5 万 star 算成 apple-design 单独所有。
3. 第一轮之后配合同仓库的 review-animations。

总结

Apple Design 是「为你推荐」里出现的 WWDC 到 Web 动效技能：弹簧、速度交接、材质，以及减弱动态效果时的淡入淡出。从 emilkowalski/skills 开始。若你要 Anthropic 官方前端包，改看 Frontend Design。