把 iOS 交互的物理感拆成公式,这个开源 skill 让Claude 复刻丝滑动效

一个顶级设计工程师，把「苹果品味」写成了 AI 能执行的硬规则

sonner、vaul 的作者把多年交互动画的判断，压成了四个开源 skill。没有一句「要好看」，全是机器能逐条执行的硬约束。

用 AI 写前端，功能很少出错，手感几乎全错。动画生硬、阴影乱套、圆角打架、弹窗从正中间「啪」地弹出来——不是模型不会写 CSS，是它从没被教过什么叫克制、什么叫物理正确。

sonner 和 vaul 的作者 Emil Kowalski 把这件事解决了一半。他把自己做交互动画多年的判断，写成了四个 Claude Code Skill，开源在 github.com/emilkowalski/skills，一句话介绍：Skills for Design Engineers。

值得写它，是因为这批 skill 没有一句「要好看」这种废话。全是能被机器直接执行的硬规则。

四个 skill，各管一段

emil-design-eng总则

管「这个动画该不该做、怎么做」。给的是决策框架，不是审美口号：按频率决定动不动，键盘触发的、一天出现 100 次以上的操作一律不加动画；UI 动画一律压在 300ms 以内，按钮按下 100–160ms、tooltip 125–200ms、抽屉 200–500ms。

进出场用 ease-out，界面内移动用 ease-in-out，UI 上永远别用 ease-in。它甚至给了具体曲线，比如强 ease-out 是 cubic-bezier(0.23, 1, 0.32, 1)。

apple-design跟手的物理感

把苹果那种「跟手」的物理感翻译成 Web 实现。核心就一句：界面要从当前屏幕上的值开始动，继承用户的手速，把动量甩出去，且任何一帧都能被打断、被抓住。

所以它推弹簧而非固定时长动画，用 damping + response 两个参数描述，给了苹果实际在用的数值（移动 1.0/0.4，抽屉 0.8/0.3），还有边缘的橡皮筋阻尼、速度接管、动量落点的指数衰减公式。

review-animations刻薄的审查员

一个只盯动画的代码审查员，它拒绝做通用 code review，姿态是「批准要靠挣，不是默认给」。十条铁律，见即拦截：transition: all、从 scale(0) 出场、UI 用 ease-in、给键盘快捷键加动画、trigger 弹窗却用 transform-origin: center、动画跑 layout 属性……

输出强制用 Before / After / Why 三列表格，最后给 Block 或 Approve，精确到 file:line。

animation-vocabulary反查词典

你描述一个「说不上名字但见过」的效果，它给你准确术语。比如「从按钮里长出来」→ Origin-aware animation，「甩到头又弹回来」→ Rubber-banding。它明确只负责命名，不负责实现——为的是让你能用对词去 prompt AI 或跟设计师沟通。

怎么装、怎么用

和所有 Claude Code Skill 一样，放进 skills 目录即可：

git clone https://github.com/emilkowalski/skills.git# 把需要的文件夹放到 ~/.claude/skills/ 下~/.claude/skills/emil-design-eng/ ~/.claude/skills/review-animations/

用法分两种。写代码时 emil-design-eng 和 apple-design 会被自动参考，出来的组件默认就带着这些约束。做审查时直接说「用 review-animations 审一下这段动画」，它会拿着那十条标准逐条过，给你带修改建议的表格。

效果与边界

装了之后最直接的变化，是 AI 不再给你那种「PPT 飞入」式的动画。它开始考虑这个交互一天出现几次、该不该有动效、出场从哪里长出来。审查 skill 尤其实用——请一个有品味的人 review 动画代码，过去是奢侈品，现在是一条指令。

边界要说清：它们编码的是 Emil 这一派的交互美学（偏苹果、偏克制、偏物理真实），不是你项目的 Design Token，也替代不了设计稿还原。它让 AI 从「工程师审美」爬到「有品味的工程师审美」，到不了「资深产品设计师」。

真正值得琢磨的是这批文件的形态：一个练了一万小时的人，把「什么好、什么不好」这种最难传授的隐性判断，压成了机器能逐条执行的规则。

AI 从不缺执行力，缺的是这种判断力。而判断力最好的来源，从来都是那些已经把手练熟的人。接下来这类「专家把品味做成 skill」的项目，只会越来越多。

PS：本文基于 GitHub 仓库 emilkowalski/skills 公开内容（含 emil-design-eng、apple-design、review-animations、animation-vocabulary 四个 SKILL.md）整理，具体规则与数值以仓库最新版本为准。文中曲线参数、时长区间、弹簧配置等均引自 skill 原文，落地前建议对照官方文件核对。Emil 的动画课程见 animations.dev。