Article
Skills For Design Engineers 是设计工程师 Emil Kowalski 开源的一套 Skills，专门给 Codex、Claude Code、Cursor 等 Coding Agent 使用。
它解决的核心问题是：AI 写 UI 时功能齐全、代码干净，但细节和交互动画差，即看起来很努力但是过于表面和粗糙。不止于按钮反馈弱、动画时机不对、视觉层级混乱等设计上的思考和取舍。
截至 2026 年 7 月，GitHub 仓库 emilkowalski/skills 已获得 超过 4.5k stars（MIT License）。 作者 Emil Kowalski 曾就职 Vercel，目前在 Linear Web 团队工作，也是 Sonner、Vault 等组件以及 animations.dev 动画课程的作者。
Github：github.com/emilkowalski
安装方式：npx skills@latest add emilkowalski/skills
三个 Skill，覆盖完整工作流
仓库主要包含三个 Skill，分工明确：
emil-design-eng—— 生成阶段的设计判断手册review-animations—— 动效审查专家 + STANDARDS.md 数值参考animation-vocabulary—— 把说不清的动画感觉翻译成准确术语
这更像一个工作流——先知道怎么做，再检查做得对不对，最后解决沟通时词不达意的问题，而不是把所有规则塞进一个大文件让模型散着执行。
emil-design-eng：教 Agent 如何判断
emil-design-eng 是主 skill，更像一份设计工程手册。它先把一个朴素的主张讲清楚：动效不是越多越好，而是是否合适。覆盖 UI polish、组件设计、动画决策、性能、可访问性和设计工程观念。
细微的间距设计、动画执行时间、按钮有没有反馈，这往往是 AI 不会去注意的细节。而这些没意识到的部分会累积成产品质感。
关键判断原则：
- 动画前先问：这个操作用户一天会触发多少次？目的是反馈状态还是解释功能？
- 高频操作（如 Raycast 的 Command Palette）应极简甚至无动画
- 低频 onboarding 可使用更有表现力的动画
实现上它给出很多直接可用的规则：进入和退出动画优先用 ease-out，UI 动画别用 ease-in（开头慢，用户会感到延迟），时长多数控制在 300ms 内（模态、抽屉这类可到 500ms），按钮按下用 transform: scale(0.97) 给即时反馈，popover 从触发器位置缩放出来，别从中心点冒出来。这些规则特别适合 Agent。
review-animations：把“感觉”变成可检查清单
review-animations 像严格的 Reviewer，默认不轻易通过。
比如 transition: all 300ms，很多 Agent 会这么写，看似没问题，却让不可预期的属性参与动画，把本该留在 GPU 的变化拖回布局和绘制。再比如 scale(0) 的进入动画，元素从没有体积的状态突然出现，这其实是设计问题。
它把这些问题列成明确审查项：动画是否有目的、频率是否合适、时长是否超过 300ms、easing 是否迟钝、popover 的 transform-origin 是否正确、是否动画了 width/height/top/left 这类容易掉帧的属性，以及 prefers-reduced-motion 是否处理得当（保留 opacity/颜色、移除位移，而不是一刀切全关）。
它要求输出 Before / After / Why 表格，把审美讨论变成具体代码改进建议。
比较稳的节奏是放在实现完成之后用：让 Codex 写完一个 drawer 再让它审一遍，第一次生成负责速度，第二次审查负责质感。
animation-vocabulary：翻译成准确术语
解决“知道哪里不对，但说不清”的问题。
我们常有审美判断却说不出术语：你想要 iOS 那种拉过边界后弹回的感觉，但不知道那叫 rubber-banding；想让一张图从列表卡片过渡到详情页大图，但不确定该说 shared element transition 还是 layout animation。
词不准，prompt 就会变软。写“让这个弹窗出现得更自然一点”，Agent 可能加 bounce、加 blur、把动画拉到 500ms；改成“使用 origin-aware scale-in，从触发器位置展开，配合 opacity fade 和 ease-out”，结果会稳定很多。
这个 skill 把动画词汇按进入退出、时序、transform、状态转换、滚动、反馈、easing、spring、性能等类别整理，描述感觉就返回最接近的术语，并在相近概念间做区分。和 Agent 协作，你说得越具体，它越少猜。
怎么用
建议按阶段用，别一次性全部塞进 prompt。
做新界面或新组件时，先用 emil-design-eng，让 Agent 在写代码前理解动画是否必要、组件反馈、easing、duration、性能边界。
组件写完后用 review-animations 审查，最好让它按 motion 标准输出 Before / After / Why，拿到一份可直接改代码的清单。
如果脑子里有动画感觉但说不清名字，就先用 animation-vocabulary 把词找准再实现。
先用 animation-vocabulary 找到准确术语。
再用 emil-design-eng 生成或优化组件。
最后用 review-animations 审查动效质量。和我用过的其他设计类 Skill 对比
我尝试过设计类 Skill 现在不少，方向也各不相同：ui-ux-pro-max 像设计资源百科，专给配色、字体、样式；impeccable 偏质量检测，用 23 条规则按需调用；ibelick/ui-skills更像预防翻车清单，关心无障碍、SEO 和动画性能。它们大多偏静态资源、检测或工程防御。
Skills For Design Engineers 的最大差异在于专注审美判断力，尤其是动效的分寸感：一个动画该不该加、该用什么曲线、时长多少、是否克制。
作者 Emil Kowalski（Sonner、Vaul 作者，animations.dev 课程创作者）把在 Vercel 和 Linear 的实战经验，提炼成可执行规则，传递的是“为什么这样更好”的判断力，而非单纯的素材或检查清单。
最后
以前设计工程师的经验体现在他亲手做的产品里，现在这些经验可以沉淀成 skill，让 Codex、Claude Code、Cursor 在不同项目里反复调用。对设计师和前端开发者来说，未来真正稀缺的会从“会不会写一个页面”，转向“能不能把为什么这样写更好讲清楚，并让 AI 稳定复现这套判断”。
当生成能力越来越便宜，判断力会越来越贵。
我是 Rico, 感谢阅读！
