简介说明
用 AI 写一个按钮并不难。
真正麻烦的是，你让它“给按钮加一点高级感”，它很可能给你一段 transition: all 0.5s ease-in，再配上一个从 scale(0) 开始的入场动画。代码能跑，效果也确实会动，但看起来总有一种说不出的生硬。
问题通常不在于 AI 不会写 CSS，而在于它不知道什么样的动画才算合适。
Emil Kowalski 开源的 Skills for Designers and Engineers，就是为了解决这件事。这个仓库没有提供一套新的动画框架，也没有塞进几十个现成组件，而是把 UI 设计和动效制作中的判断经验整理成了 10 个可以交给 AI 编程代理使用的 Skill。
简单来说，它教给 AI 的不是“怎样让元素动起来”，而是“什么时候应该动、怎样动才自然，以及什么时候最好别动”。
从一句大白话，找到真正想要的动画
B 站 UP 主“未来奇点FSLab”在视频《用了这个 skill，我的动画丝滑的像——！》里提到了一个很有代表性的场景：
我想给这个按钮加上一个星星，可以被吹出来，然后悬浮在界面上。
这句话对人来说很好理解，但对编码模型并不够精确。它不知道这里需要的是粒子、漂浮、错峰入场，还是某种基于物理效果的运动。
仓库里的 animation-vocabulary 正是用来处理这类问题的。它像一本反向查询的动效词典，可以把“从按钮里长出来”“有点弹”“像 iOS 滚动到边缘后被拉回来”这样的口语描述，转换成更准确的专业术语。
例如：
多个元素依次出现叫做 Stagger
元素从触发按钮的位置展开叫做 Origin-aware animation
图片从缩略图连续过渡到大图叫做 Shared element transition
iOS 列表被拉过头再弹回来的感觉叫做 Rubber-banding
这一步看起来只是换了几个词，实际却很重要。提示词越准确，AI 越不容易靠猜，也越有可能生成符合预期的实现。
它不会看到空白处就塞动画
许多 AI 生成的页面都有一个共同问题：标题淡入、卡片上浮、按钮缩放、列表依次出现。单独看都没错，放在一起却显得吵闹。
这个项目的设计思路恰好相反。
find-animation-opportunities 会在项目中寻找真正值得加入动效的位置，同时指出哪些地方不应该动。animate 在写代码前也会先判断交互频率和动画目的。
如果一个操作每天会被触发上百次，例如快捷键、命令面板或者高频导航，最好的动画往往就是没有动画。弹窗、抽屉和 Toast 偶尔出现，可以使用简短的过渡；庆祝、首次引导这类低频场景，才适合加入更明显的表现力。
这种克制比“每个元素都动一下”难得多，也是仓库真正有价值的地方。
动画是否自然，往往藏在几个小参数里
两个持续时间同样为 200 毫秒的动画，感受可能完全不同。
比如，一个元素进入界面时使用 ease-in，开头会比较慢，用户最关注的那一刻反而显得迟钝。项目建议入场和退场优先使用更有力度的 ease-out，屏幕内的位置移动则适合 ease-in-out。
仓库还给出了许多很具体的规则：
普通 UI 动画通常控制在 300 毫秒以内
高频触发的 Toast 和开关应使用可中断的 transition，而不是每次从头播放的 keyframes
尽量只动画化 transform 和 opacity
弹出菜单应该从触发它的按钮附近展开，而不是永远从中心缩放
入场不要从 scale(0) 开始，scale(0.95) 配合透明度会自然得多
悬停动效需要判断设备是否真的支持鼠标悬停
位移动画需要照顾 prefers-reduced-motion 用户
这些规则并不神秘，却很容易在赶进度时被忽略。AI 也一样：如果提示词里没有相关约束，它通常只会选择“能用”的写法，而不是手感最好的写法。
不只是生成，还能扫描和审查现有项目
如果项目已经做了一半，也不需要推倒重来。
improve-animations 可以检查整个代码库，从动效目的、缓动曲线、持续时间、性能、可访问性和一致性等方面寻找问题，然后按照影响和修改成本进行排序。它的主要产物是可执行的修改计划，而不是不分轻重地重写全部代码。
review-animations 则更像一个严格的动效审查员。它会重点检查这些常见问题：
transition: all
UI 元素使用 ease-in
从 scale(0) 开始出现
动画持续时间过长
使用 width、height、top 等属性制造高成本动画
忽略减少动态效果的系统设置
弹出层的动画原点和触发位置不一致
这也对应了视频里提到的体验：Skill 可以扫描项目，发现哪里缺少必要的状态过渡，也能找出那些已经加了、但看起来割裂或者不够自然的动画。
10 个 Skill 各自负责什么
截至 2026 年 8 月，仓库包含以下 10 个 Skill：
emil-design-eng：主要的设计工程规则集，涵盖动画和部分 UI 设计建议。
animate：从需求出发设计并实现一段完整动画。
review-animations：严格审查已有动效代码。
improve-animations：扫描整个项目并生成按优先级排列的优化计划。
find-animation-opportunities：寻找值得添加动画的位置，也会指出不该动画化的地方。
animation-vocabulary：把模糊的自然语言转换成准确的动效术语。
apple-design：整理 Apple 在 WWDC 中分享的界面与流畅动效原则，并转换成 Web 开发建议。
pick-ui-library：根据需求选择可靠的 UI 库，避免重复造轮子或安装失去维护的依赖。
prototype：为同一个组件制作多个真正不同的方案，通过选择器逐个比较。
ask-sonner：提供 Sonner Toast 组件的安装、样式、用法和常见问题解决方案。
安装命令很简单：
npx skills@latest add emilkowalski/skills
安装后，可以根据任务调用对应的 Skill。要实现动画时使用 animate，想检查整个项目时使用 improve-animations，连动画名称都说不清时则先用 animation-vocabulary。
这个项目最有意思的地方，不是“让动画更炫”
仓库作者在 README 中说了一句很实在的话：AI 并不会替代专业经验，而是放大你能够从专业经验中获得的东西。
这句话也解释了这个项目为什么有效。
它不是要求 AI 展示更多技巧，而是给 AI 增加一套判断标准。什么时候需要反馈，什么时候要保持空间连续性，什么时候动画会打断操作，什么时候应该直接删掉，这些问题比“该用 CSS 还是 Motion”更靠前。
一个成熟的界面并不一定拥有很多动画。真正舒服的动效经常不容易被用户注意到：菜单从正确的位置出现，内容切换不会突然跳动，按钮按下时有轻微反馈，页面在繁忙状态下仍然保持流畅。
当这些细节都做对时，用户不会说“这个贝塞尔曲线真漂亮”，只会觉得这个界面用起来很顺。
这大概才是这个仓库所谓“给 UI 附魔”的真正含义。
下载地址
https://github.com/emilkowalski/skills
https://pan.baidu.com/s/1wwZWRwskSw_L63yyFp3VFg?pwd=gjjh 提取码: gjjh
评论抢沙发