给 AI 补上品味：Emil Kowalski 开源界面动效 Skills 库

emilkowalski/skills 是一个面向 AI 编程智能体的设计与动效规则库。它把资深设计工程师在前端界面和交互动效上的经验，整理成了一套可以直接喂给 AI agent 执行的技能清单，让模型在写前端代码时不再犯那些显粗糙的低级错误。

作者 Emil Kowalski 曾任职于 Vercel 和 Linear，也是知名开源组件库 Sonner 与 Vaul 的开发者。按他的说法，现在的 AI 编程工具最大的问题不是不会写代码，而是缺乏审美和品味。AI 经常会在弹窗入场时用错缓动函数，把该用 ease-out 的地方写成 ease-in；或者在做卡片边框时顺手画上一条生硬的实线，而不是叠一层细腻的半透明阴影。这些单看不致命的小毛病堆叠起来，就会让整个界面充满一种廉价的 AI 味。

它给 AI 补上了哪些规则

这套规则库把平时难以言传的动效直觉转化成了明确的规范，涵盖了从设计审查到代码落地的多个环节。

其中最核心的是 emil-design-eng 和 animate。它们负责指导 AI 从零搭建动效，从一开始就选对缓动曲线、持续时间和运动属性。面向移动端的 animate-expo 则把这套标准带到了 React Native 和 Expo 环境，专门解决手势跟手性、底栏抽屉、触感反馈和屏幕转场，确保动效始终运行在原生线程，避免 JavaScript 线程卡顿。

为了帮开发者省时间，项目里设计了一套名为 improve-animations 的审查机制。它借鉴了前端工具的做法，先让能力最强的模型去通读整个代码库，从动画的触发频率、物理惯性、可打断性、性能和一致性等 8 个维度打分，然后生成一份带优先级的待办方案，保存在项目目录里。接着你可以把这些明确的方案交给运行成本更低的轻量模型去逐一执行，高阶模型本身绝不直接碰业务代码。

除了动效本身，这套库还收纳了针对移动端网页的细节补丁 mobile-native。它专门清理事先容易忽略的浏览器顽疾，例如手机端粘滞的 hover 状态、点击高亮闪烁、经典的 100vh 滚动高度异常、输入框聚焦触发页面缩放，以及安全区适配等。

此外，库里还包含从苹果 WWDC 演讲中提炼出来的 apple-design、教开发者用准确术语向 AI 描述动效的 animation-vocabulary、用极端异常数据测试界面的 break-ui，以及辅助挑选靠谱第三方包的 pick-ui-library 等工具。

怎么用起来

这套规则完全开源在 GitHub。如果你正在使用支持 skills 规范的 AI 开发环境，只需在终端中运行一条安装命令，即 npx skills@latest add emilkowalski/skills，就能把这套规则挂载到你的智能体里。

它不需要额外的本地硬件配置，本质上是一组高度结构化的系统提示词和工程规则上下文。无论你底层使用的是哪家模型，只要它支持在对话或工作流中读取上下文，就可以直接生效。

为什么重要

我们认为，这个项目最有价值的地方在于给 AI 编程探索出了一种新的专长交付方式。过去我们总以为审美是纯粹的主观感觉，但 Emil Kowalski 用这套项目证明，顶级工程师的品味很多时候就是由成百上千条具体的边缘规则构成的。

如果你是独立开发者或者全栈工程师，平时知道自己做的界面不够高级但又说不清差在哪里，这套规则库非常值得直接装进你的开发环境。它不仅能让 AI 写出更靠谱的动画，更像是一个随时坐在你边上的资深动效顾问，帮你在代码提交前把那些破坏手感的细节全部揪出来。