现在用 AI 写界面越来越方便了，你说一句话，它就给你吐出整段代码，按钮、卡片、弹窗全都有。

但，东西是出来了，用起来总觉得哪里不对。

比如你点一个按钮，它没有那种「被按下去了」的感觉，像是戳在一张纸上。动画倒是有，但就是感觉慢半拍，说不上来的别扭。功能都是对的，但 用起来就是不舒服 。

这种感觉，过去只有专业设计师才能准确地说出问题在哪。但现在，一份开源的「设计品味说明书」让 AI 也能懂了： Skills For Design Engineers 。

项目名字直译就是给设计工程师用的技能包，但我觉得它真正的受众远不止设计师。任何用 AI 写界面的人，都会直接受益。这个项目本质上做了一件事： 把「什么是好界面」的判断力，编码成 AI 能执行的规则 。

具体怎么做的呢？项目作者把自己的设计知识打包成了四个「技能文件」。你安装之后，AI 在写代码时就会自动加载这些规则，像一个严格的老师傅在旁边盯着，随时纠正那些不专业的做法。

这是怎么工作的？打个比方：

你让一个刚入职的实习生做一个弹出菜单。他三两下写完了，功能没问题。但你一看：弹窗是从屏幕正中央放大出来的，不是从你点的那个按钮展开的；关闭动画用的是缓慢的淡出；整个过程拖了快半秒。

为啥会这样？因为实习生只关心「能不能用」，还没建立「好不好用」的判断力。 AI 目前就处在这个阶段 。

Skill 的作用，是直接给 AI 塞一份老师傅的经验清单——哪些做法是对的，哪些一出现就要打回去重做。AI 不需要自己慢慢「领悟」品味，规则已经写好了，照做就行。

那这份清单里到底写了什么？

项目一共四个文件，刚好对应了从「原则」到「实践」到「审查」再到「词汇」四个维度。

第一个：Apple 是怎么做的

这个技能的内容直接来自 Apple 的 WWDC 设计讲座，尤其是那场著名的 Designing Fluid Interfaces （设计流体界面），但项目作者把它翻译成了 Web 开发能直接用的话。

核心思想很简单： 界面应该像物理世界里的东西 。

你推它，它应该立刻动。你松手，它应该带着你手指的速度继续滑。你突然反方向拉，它应该能中途掉头而不是等上一个动作播完。拖到边界，它应该像皮筋一样有阻力，而不是直接卡死。

Apple 把这套哲学建立在一个很有意思的框架上： 好的设计服务于人的四个基本需求——安全与可预测、理解力、成就感、愉悦感 。

下面是我对这些需求在 Skill 中如何体现的个人理解：

安全感，说的是界面要可预测。点一个按钮，它就应该有被按下的反应，而且是按下那一瞬间就有，不用等你手指抬起来。如果按下去了什么反应都没有，人会本能地再按一次——这就是不安全。

理解力，说的是层次清晰。菜单从触发它的按钮展开，而不是从别的地方冒出来——这样你的大脑不需要额外思考「这个东西从哪来的」。半透明的毛玻璃背景告诉你「这层是浮在上面的」，不透明的告诉你「这是主界面」。

成就感，说的是操作要爽快。手势一划就关掉，快划就快关，不需要拖过某个固定距离。松手那一瞬间的动画带着你的力道——你甩得快它就飞得远，你轻轻一推它就慢慢停。界面在跟你对话，不是在执行脚本。

愉悦感，说的是打磨到极致的细节。比如字间距不是固定的，大标题字大了反而要收拢一点才好看。比如动画缓动曲线的形状——慢启动的曲线（ ease-in ）用在弹出菜单上会让人感觉迟钝，快启动的曲线（ ease-out ）同样的时长却感觉灵敏得多。一个菜单就 150 到 250 毫秒，超过 300 毫秒就会觉得卡。

Apple 还有一个很重要的设计信条： 交互原型比一百万张静态设计稿更有价值 。界面设计不能先画图再加动效——交互和视觉要一起设计，因为动效不是后贴的装饰，它就是设计本身。

第二个：项目作者自己的实战笔记

如果上一个技能是「理想状态应该怎么样」，这个技能就是「实战中具体怎么操作」。

项目作者在这里放了他多年积累的一整套方法论，其中最核心的有三个理念——这三个理念在整个项目里被反复提及，是他整个设计哲学的底座。

第一个： 品味不是天生的，是训练出来的 。好品味不是「我喜欢蓝色你喜欢橙色」这种个人偏好，而是一种能看穿表面、识别什么在拉高体验的直觉。这种直觉怎么练？多看真正好的作品，深究它为什么让你觉得舒服，反复练习。

第二个： 看不见的细节会叠加 。绝大多数精心打磨的细节，用户永远不会刻意注意到。这恰恰是重点。就像一千个微不可闻的声音完美和声，你听不出任何单独的声部，但合在一起就是惊艳。项目作者在项目中引用了 Paul Graham 的一句话：「所有这些看不见的细节组合在一起，产生了一种令人惊叹的东西，像一千个几乎听不见的声音齐声歌唱。」

第三个： 美是被低估的竞争力 。大家选工具的时候，决定因素不是功能列表上的勾勾，而是整体体验。好的默认值、好的动画，是实实在在的差异化。在所有人都能堆功能的时代，美是少数能让你跳出来的东西。

有了这三条打底，再落实到具体操作，项目作者给了一套特别好记的决策流程，每写一段动画之前问自己四个问题：

这动画用户一天看多少次？ 如果上百次（比如按快捷键弹出搜索框），那就不加动画，直接出现。Raycast 就是这么干的，用了就知道多爽。如果几十次（比如鼠标悬停效果），大幅削减。只有偶尔才出现的东西，才值得认真做动画。

它的目的是什么？ 让用户感知空间关系？提示状态变化？给反馈？还是防止突兀？得有明确理由。如果理由只是「好看」，而且用户天天看，那就不做。

用什么速度曲线？ 东西刚出现的时候用「快启动慢停止」的曲线，让人感觉灵敏。东西已经在屏幕上的时候用「两头慢中间快」，模拟自然物理。千万别用「慢启动」——用户盯着的就是开头那一瞬间，开头慢就感觉拖。

持续多久？ 按钮按下的反馈 100 到 160 毫秒——几乎察觉不到但能感受到。弹窗提示 125 到 200 毫秒。更大的抽屉和对话框 200 到 500 毫秒。原则是 UI 动画别超过 300 毫秒，超过就慢了。

动画之外，项目作者还总结了界面组件的建造原则：

按钮被按下去必须缩一下，就缩 3%，几乎看不到，但手指能「感觉到」它响应了。任何东西出现的时候，都不能从零开始变大——真实世界没有东西会从虚无里冒出来。从「很小但能看见」开始加上透明度变化，看起来才自然。弹出菜单要从触发它的按钮位置展开，而不是从屏幕正中。

这些东西单看哪一个都不起眼，但全部叠加在一起，就是你打开 Linear 或 Vercel 产品时感受到的那种说不清的「舒服」。

项目作者还讲了一条我特别喜欢的原则： 先做好最重要的那件事，反复迭代打磨，不要让它在后续的变动中变差 。一个可交互的原型比什么文档都管用，因为你是在「玩」的过程中发现界面的，不是在图纸上想象出来的。

第三个：一个严厉的动画质检员

这个技能专门用来审查动画代码。它的定位非常单一：只挑刺，不干活。

它给自己立了十条不可妥协的标准，每一条都有一个明确的判断。而且它的姿态特别明确—— 默认认为你有问题，合格需要争取 。

十条标准我就不逐一展开，挑几条最有意思的说：

每条动画必须有存在的理由。「好看」对每天都见到的东西来说不算理由。键盘快捷键触发的操作（每天按几十上百次），加动画反而是坏事——动画让它变慢了，而不是变酷了。同理，那些 CSS 里常见的 transition: all 写法也是一眼就判不合格——你要动画什么属性就写什么属性，写 all 是不专业的做法。

只动画位置变化和透明度变化。这两类操作不触发浏览器的重新布局和重新绘制，直接在显卡上跑，流畅。但动画宽度、高度、内外边距，就会导致性能问题。

必须尊重用户的「减弱动态效果」设置。这不是说把动画全关掉——而是用淡入淡出替代位移和缩放，保留那些帮助理解的颜色和透明度变化。

审查完之后，建议也分优先级：最高优先级是直接删掉不必要的动画，其次才是缩短、改曲线、修正起点。这种思维方式本身就很有价值—— 动画的第一选择不是优化，是判断它该不该存在 。

第四个：一本动画术语的「反向词典」

这个是四个技能里最轻量也最实用的一个。

你有没有过这种经历？脑子里有一个动画效果的画面，但就是不知道它叫什么名字。「就是弹窗弹出来的时候那个弹了一下的感觉」「就是 iOS 滚动到边界那种橡皮筋一样的回弹」——你知道自己要什么，但没法用准确的词告诉 AI。

这个技能就是解决这个问题的。你描述你看到的或感觉到的效果，它给你精确的术语。

比如你说「弹窗好像从按钮里长出来一样」，它告诉你这叫 Origin-aware animation （原点感知动画）。你说「一组东西一个一个按顺序出来」，它告诉你那叫 Stagger （交错动画）。

它的规则也很有趣：只负责告诉你叫什么，不负责帮你写代码。而且如果两个概念接近（比如 Morph 和 Crossfade 都涉及形状变换），它会对比两者区别，让你自己判断到底要的是哪一种。

对于跟 AI 打交道的场景，能准确叫出你想要的效果的名字，就成功了一半。

项目作者在这个项目的 README 里写了一句很坦诚的话。

他说，自己见过无数次 AI 在动画这件事上选错方向，每一个都是小事，但堆在一起，就把一个本来可以惊艳的界面拉到了「也就那样」。

所以他把自己积累的经验写成了明文规则，让 AI 照着执行。

而且他反复强调一个观点： AI 不会替代你的专业能力，它只是把你已有的能力放大 。这些 Skill 是专业知识的副产品，不是专业知识的替代品。你得先懂设计，它们才能帮你十倍高效。你完全不懂，装上也只是多了一堆规则文件。

所以他的建议是：先去学设计和代码，建立自己的专业能力。然后再用这些 Skill 把效率拉满。

项目地址：https://github.com/emilkowalski/skills