夜雨聆风
👆 「关注」加「星标」，一起用 AI 搞点有意思的事！
今天我让 AI 审了一段它自己写的动画代码，判决是 Block。三条硬伤，条条是我平时看不出来的。
事情要从塑料味说起。让 AI 写个页面，功能都对，跑起来也没报错，但就是哪里不对劲。按钮弹得像果冻，下拉菜单开得慢半拍，数字一刷新还要蹦跶两下。能用，但廉价。我管这个叫塑料味。
我自己是没资格嘲笑 AI 的。高中摆摊那会儿进过一批首饰，自信满满挑的款，结果滞销到怀疑人生，后来才知道那叫直男审美 =。= 所以 AI 写的 UI 丑，我一般看不出来，只觉得别扭。
直到今天上午，刷到一个东西。
大佬把审美开源了
Emil Kowalski，你可能没听过这名字，但你大概率用过他的东西。Sonner，那个 React 圈人手一个的 toast 组件，周下载量 1300 多万，就是他写的。他还开了个动画课程 animations.dev，专门教怎么把界面做得有质感。
这几天他干了件事：把自己多年的 UI 和动画原则，打包成了三个 Skill，开源在 GitHub 上。装到 Claude Code、Cursor、Codex 里，你的 AI 就带上了他的审美判断。
三个 Skill 各管一摊：
• emil-design-eng：设计工程哲学本体，动画什么时候该做、怎么做 • review-animations：拿着严格标准审你的动画代码，输出 Before/After/Why 对照表 • animation-vocabulary：把「弹一下的效果」这种模糊描述翻译成专业动效术语
安装就一行命令：
1
npx skills add emilkowalski/skill
我看到的时候仓库刚过 2000 star，下午再刷已经 4300 多了，半天翻倍。
里面的规则挺狠的。比如：每天被触发 100 次以上的操作，快捷键、命令面板这种，「No animation. Ever.」，一点动画都不许加。再比如：永远别从 scale(0) 开始入场动画，要从 0.95 起步，理由是「现实世界里没有东西是从虚无中出现的」。
这话说得，有点哲学了。
装上前后，差距有多大
光看规则没意思，我直接测。拿我一个游戏工具站项目，同一个任务喂给两个隔离的 AI 会话：给计算器结果面板加刷新动画，给主按钮加点击反馈，给导航下拉菜单加打开动画。一个裸写，一个先读 Skill 再写。
裸写那版，乍一看没毛病。动画有了，缓动曲线也用了，甚至还记得处理 prefers-reduced-motion。搁平时我就直接合了。
然后我用 review-animations 审了它一遍，直接被判了 Block。三条硬伤。
下拉菜单退场用了 ease-in。这是 Skill 的红线，ease-in 起步慢，恰好拖在用户盯着看的那一瞬间，感觉就是卡。
按钮用了 transition-all。看着省事，实际会把一堆不该动的属性一起动画，性能和观感双输。
最扎心的是第三条：给计算器数字加了 450ms 的弹跳。裸写的 AI 觉得「数字弹一下，强调值变了」很贴心，注释都这么写的。但 Emil 的频率表里，一天几十次的操作属于「大幅削减」档。你算第十次收益的时候，数字还在那蹦跶，烦不烦。
再看读了 Skill 的那版。它做的第一件事不是写代码，是判断频率：结果面板一天刷新几十次，动画降档，只给 180ms 的淡入加 4px 微位移。然后有个细节给我看愣了：它在过渡期间加了 2px 的 blur，用来掩盖新旧数字交叠的瞬间，视觉上像一次变形而不是两个数字打架。
我翻了下 Skill 附带的标准文档，这是 Emil 处理 crossfade 的招：调不好两个状态的交叠，就加一点模糊把它们糊成一次变化。裸写的 AI 不是不会写 blur，是压根不知道这里该用。
它最后还列了一段「刻意没做的事」：没加弹跳，因为工具站要干脆；没给菜单项加 stagger，因为高频操作等不起装饰。
会做减法了。这才是审美。
顺手审了下自己的代码，被打脸了
装都装了，我让 review-animations 把我站点现有的动画代码也过了一遍。
好消息是按钮按压反馈做对了，scale(0.98)，150ms，还知道包在 prefers-reduced-motion 里。坏消息是首页有个引导下滑的小箭头，我给它加了 animate-bounce，无限循环那种。审查意见很不客气：常驻的装饰性动画，「It looks cool」不构成动画的合法理由。
emmm，有被冒犯到。但仔细一想，那个箭头确实在页面上一直蹦，蹦到你想把它摁住。
还有一条：hover 动画没做 hover gating，触屏设备上手指一点就误触发悬停态。这种坑我自己测一百遍也发现不了，因为我总在电脑上测。
品味也是上下文
之前聊 Context Coding 的时候我说过，Vibe Coding 的前提是给 AI 喂对上下文。那时候我理解的上下文是事实：项目结构、技术选型、业务规则。
这次实测让我补上了另外半块：品味也是上下文。
模型是同一个模型，任务是同一个任务，差的只是先读没读那份 SKILL.md。读了，它就知道 300ms 是 UI 动画的天花板，知道 ease-in 碰不得，知道什么时候该删动画而不是加动画。这些判断你用嘴提示是提示不出来的。多数人看到塑料味 UI，连「哪里不对劲」都说不出来，更别说写进提示词了。
以前我说装 Skill 像送 AI 上大学。这次感觉更具体了：是给它请了个私教。而且这个私教是 Sonner 的作者，搁现实里你约不起。
审美这东西，过去是天赋加多年熏陶，现在变成一个可以安装的文件。我这种卖首饰能滞销的人，和设计科班出身的人，AI 写出来的动画是同一个水准。想想有点魔幻。
站点那几处被抓的问题，我还没修。蹦跶的箭头先留着蹦两天，坑挖了，后面填。
你们的 AI 写的 UI，有塑料味吗？
对了，animation-vocabulary 那个 Skill 我还没细玩，「把人话翻译成动效术语」听起来像个宝藏。下次单独写。
关于作者 | 谈小罗Coding
AI 程序员， 白天写代码，晚上折腾 AI Agent。相信「先吃饱，再吃好」，喜欢用最小成本跑通一件事。
如果这篇文章对你有帮助，欢迎点赞、在看、转发，让更多人看到。
有任何问题欢迎留言，我会一一回复。
