给你的 AI 装上审美：Emil Kowalski 的设计工程 Skills

AI 写业务逻辑已经很能打了，但一让它做动画，味道就不对：进场动画用了 ease-in、元素从 scale(0) 里凭空冒出来、hover 一动就闪。不是 AI 不会写代码，是它没有审美——不知道什么样的动效才叫“对”。

Emil Kowalski 的做法是把审美写成规则，打包成 Skills 喂给 AI。他在 Vercel 做过设计、现在 Linear 的 Web 团队做设计工程，也是 Sonner、Vaul 两个被大量生产环境使用的 UI 库的作者。这套 emilkowalski/skills 就是他多年经验的沉淀。

一、AI 缺的不是能力，是品味

Emil 在 Agents with Taste 里点出一个现象：工程师从没像今天这样被 AI 放大过。但一到视觉活儿——尤其是动画——Agent 就不知道什么才叫“好”。

它会给进场动画配一个 ease-in 缓动（其实该用 ease-out），会拿实线边框而不是半透明阴影。这些小地方单看无所谓，累积起来，界面要么精致，要么就是“差点意思”。用他的话说，这是在一片 AI 生成的平庸里脱颖而出的捷径。

他的核心观点是：品味不是玄学，而是可以被清楚说出来的。有了足够经验，你不仅能判断哪个更好，还能说清为什么好。既然“为什么”能被表达，那就能写成规则，像带一个新手设计师那样，把规则交给 AI 去照做。

Skills 就是这套规则的载体——把每一类界面决策（动画、布局、图标、排版）各写一个 skill 文件，AI 读了之后就带上了你的品味和知识。

二、一个具体的例子：从哪个 scale 开始

Emil 举的例子很能说明问题。同样是元素进场，从 scale(0) 开始感觉不对，从 scale(0.95) 开始就对了。

为什么？因为 scale(0) 看起来像元素凭空蹦出来，不符合现实世界的直觉。而一个稍大的初始值更接近真实物体——就像气球，哪怕瘪着也有可见的形状，从不会完全消失。所以从 scale(0.95) 起步，动作会显得更柔和、自然、优雅。

这就是“为什么”。没有魔法，几乎每个“品味”决策，只要看得够近，都有它的逻辑。把这类道理提炼出来，就成了 skill 里的规则。这个 scale 小技巧和其它很多条，都收在他 skill 的 “Practical Tips” 里。

三、Skills 里到底装了什么

这套仓库目前包含五个 skill，各管一摊。

安装一行命令，支持任何认 SKILL 格式的工具：

1

npx skills@latest add emilkowalski/skills

缓动决策流程图

规则写得有多具体？看这张缓动选择流程图。缓动是任何动画里最重要的部分，这里写死成一个流程，AI 不用猜、不用自创规则，照着走就行。

这里最容易被 AI 搞错的是第一条：进入或离开视口的元素该用 ease-out。原因在于 ease-out 开头快、结尾慢，给人一种“响应很快”的感觉，同时保持平滑收尾。如果反过来用 ease-in（开头慢），元素进场会显得拖沓、迟钝。Emil 还有一条经验：UI 动画通常应该短于 300ms。

时长指南

时长同样给了明确区间，不再让 AI 拍脑袋：

配套几条规则：

• UI 动画尽量控制在 300ms 以内
• 大元素比小元素动得慢
• 退场动画可以比进场快约 20%
• 时长匹配移动距离——走得越远，时间越长

实用技巧速查

主 skill 里那张 “Practical Tips” 表，把常见毛病和解法一一对应，基本覆盖了日常八成的动画坑：

排版也有规则

skill 不只管动画。Emil 把排版这类决策也写成了条目，比如：

• 正文行宽控制在约 65ch，别拉满整行，行长舒服才好读
• 价格数字列用 tabular-nums，让数字对齐、整列读起来干净
• 用 … 字符而不是三个点 ...，截断会跟着容器走
• 大写标签放松字距，紧凑的大写读起来局促
• 下划线留给链接，非链接的强调用字重或颜色，别让人误点

四、review-animations：把审查标准写死

如果说主 skill 教 AI 怎么做，review-animations 就是教它怎么挑刺。它把 AI 变成一个“对工艺有严苛眼光的资深动效审查者”，默认倾向于挑毛病——一个动画“能跑”但手感迟钝、从错误的原点弹出、触发太频繁或掉帧，都算倒退，不算通过。审查通过要靠挣，不是默认给。

它有十条不可协商的标准，每一条被违反就是一个 finding。第一条最能体现思路：每个动画都必须能回答“它为什么要动”——空间连续性、状态提示、反馈、解释，或者是为了避免一个突兀的变化。对一个高频出现的元素，理由是“看起来酷”就直接判不通过。

更细的规则目录（缓动曲线、时长表、弹簧参数、手势、clip-path、性能、无障碍）单独放在一个 STANDARDS.md 里，需要给出精确数值或引用时才加载。这种“主文件讲原则、细节文件按需查”的组织方式，本身也是给 AI 用的省 token 设计。

五、improve-animations：审计与执行分离

这里面最有意思的是 improve-animations，思路借鉴了 shadcn 的 improve：用你最强的模型做审计，把执行交给便宜的模型。

它不看单个 diff，而是扫描整个代码库，从八个维度审计动画：

1. 目的与频率——它该不该动，动得是不是太勤
2. 缓动与时长——曲线和时间对不对
3. 物理感——动起来像不像真实世界的物体
4. 可打断性——用户能不能中途打断，还是被强制播完
5. 性能——有没有掉帧、有没有触发重排
6. 无障碍——尊不尊重 prefers-reduced-motion
7. 一致性——整个产品的动效语言统不统一
8. 错失的机会——哪些地方本该有动效却没有

审计完给出一张按优先级排序的问题清单。你挑想改的，它把每一项写成一份自包含的方案文件放进 plans/：精确到哪个文件、哪条曲线、多长时间，还附一个“手感检查”。这样另一个没有上下文、也没有品味的 Agent 也能照着执行。关键是它自己从不碰你的源码，只产出方案。

几个用法：

1
2
3
4
5

> improve the animations in this codebase
> improve-animations quick        # 只看热点
> improve-animations performance  # 单个维度
> improve-animations plan add press feedback to all buttons
> improve-animations execute plans/001-fix-dropdown-easing.md

审计与执行分离这个设计很务实：贵的模型负责判断（需要品味），便宜的模型负责搬砖（只要照做），成本和效果都照顾到了。

六、animation-vocabulary：先学会怎么“说”

还有一个容易被忽略但很实用的 skill——animation-vocabulary。它解决的是另一半问题：很多时候动画做不好，不是 AI 不会，是你没说清楚。

“让它弹一下”、“丝滑一点”、“别那么生硬”，这些模糊的表述 AI 只能猜。而如果你能说出“进场用 ease-out、220ms、从 scale 0.95 起、transform-origin 设在触发按钮上”，AI 就能一次到位。这个 skill 教你用准确的词汇描述动画意图，本质上是在训练人这一端的表达能力——毕竟规则再好，也得先说得出口。

七、值得琢磨的一点

这套 Skills 真正的价值，不在于那几张表格本身，而在于它示范了一种方法：把难以言传的“手感”拆解成有逻辑、可执行的规则。

Emil 说得直白——AI 不会取代专业能力，它放大你能从专业能力里榨出的东西，让你相对别人强得多。所以去学编程、学设计，或者在任何领域积累真本事，这依然极其值钱。Skills 只是让你的这份本事，能通过 AI 规模化地复制出去。

反过来看也成立：如果你本身没有品味，这套 skill 顶多让你的 AI 少犯低级错误，但产出上限还是取决于你能不能判断“这样到底对不对”。工具放大的是你已有的东西，放大不出你没有的东西。

对写前端的人来说，哪怕不装这套 skill，把里面的缓动流程图、时长表、实用技巧当成一份动画 checklist 收藏，也够用很久了。

相关链接

• 仓库：emilkowalski/skills
• 核心文章：Agents with Taste
• 延伸阅读：Great Animations
• 作者博客：emilkowal.ski
• 作者的开源库：Sonner · Vaul