emilkowalski/skills：给 AI Agent 装上「设计品味」的技能包

你有没有注意到，用 AI 写出来的前端代码，功能都对，但总觉得哪里不对劲——动画太生硬、按钮设计平平无奇、配色缺乏层次感？这不是技术问题，而是「设计品味」的缺失。

emilkowalski/skills 就是来解决这个问题的。

这是一个由前 Vercel 和 Linear 设计工程师 Emil Kowalski 创建的开源技能库，包含 12 个 AI Agent 技能，涵盖动画设计、界面审查、组件选择、iOS/Android 适配等维度。它的核心思路是：把人类设计师多年积累的「隐性知识」编码进 AI 可消费的 Markdown 格式，让 AI 也能拥有专业的设计判断力。

---

背景：为什么 AI 写代码总缺「设计感」？

Emil Kowalski 在他的博客文章《Agents with Taste》中详细解释了这个问题的根源：大多数 AI 在生成 UI 代码时，用的是通用的、平均的设计选择——没有语法错误，但也没有灵魂。

比如，一个元素的出现动画，AI 可能选 ease-in；但实际上应该用 ease-out——因为从视觉逻辑上，「出现」应该从快到慢（减速），而「消失」才应该从慢到快（加速）。这种细节，AI 不经过专门训练是不会知道的。

Emil 的 skills 就是把这类「设计常识」系统化地整理出来，供 AI Agent 使用。他把这些知识比喻成「味觉」——不是会不会做饭的问题，而是做得好不好吃的问题。

---

12 个技能：覆盖设计工程的每个角落

skills 仓库包含 12 个子技能，每个都对应一个特定的设计工程场景：

emil-design-eng（主技能）

这是最核心的技能，浓缩了 Emil 多年在 Vercel 和 Linear 工作的设计工程哲学，涵盖动画哲学、组件设计、UI 细节打磨等。AI Agent 激活这个技能后，在编写前端代码时会自动考虑动画曲线、过渡时长、微交互等细节。

animate

专门用于构建动画的技能。从零开始创建动画时，它会帮你选择正确的曲线（ease-out vs ease-in）、时长（太长太短都不对）、属性（transform vs top/left）和实现工具。

animate-expo

面向 React Native 和 Expo 的动画技能，覆盖手势操作、底部表单、触觉反馈、页面转场，以及如何把动画逻辑移出 JS 线程以保证流畅度。

review-animations

用严格的规则审查动画代码，标记出常见问题：使用了 transition: all、缩放入场用了 scale: 0、触发了 layout 动画等。

find-animation-opportunities

扫描你的 UI 代码，找出真正需要动画的地方，同时告诉你哪些地方不应该加动画——对动画保持克制本身也是一种设计能力。

animation-vocabulary

用正确的术语描述你想要的效果，让 AI 能精准理解你的意图。比如把「让它看起来流畅自然」翻译成「使用 spring physics，duration 300ms，damping 15」。

apple-design

把 Apple 的界面设计原则从 WWDC 演讲中提炼出来，翻译成 Web 开发者可以直接使用的设计规则。

write-swift

现代 Swift 编程技能，包含值类型、Swift 6 并发、泛型、性能优化和 Swift Testing。

pick-ui-library

让 AI 根据可信的库列表来选择合适的 UI 组件，而不是让 AI「手写一个 toast 组件」或安装一个维护状态已死的包。

prototype

构建同一 UI 组件的多个版本，通过切换器逐一体验，选出最佳方案。

mobile-native

让你的 Web 应用在手机上感觉像原生应用：处理 sticky hover、点击高亮、100vh 兼容性问题、输入框缩放页面、触摸延迟、安全区域等。

ask-sonner

使用 Sonner（Emil 的 toast 库）的完整指南，包含配置、样式、食谱和常见问题修复。

---

安装与使用

安装 skills 非常简单，一行命令搞定：

npx skills@latest add emilkowalski/skills

安装后，AI Agent 在被问到设计、动画或 UI 相关问题时，会自动调用相应的技能来回答。这些技能已集成进 skills.sh 平台（Vercel Labs 出品），也被收录进 AI UX Playground 等社区资源库。

---

局限性

问题	说明
需要 AI Agent 支持	Skills 需要被 AI Agent 消费，纯人类使用意义有限
动画技能偏 Web	大多数技能针对 Web 动画和 React 技术栈
依赖更新维护	设计趋势变化快，技能内容需持续更新
版权归属	技能内容属于 Emil Kowalski 的知识产权，MIT 协议允许使用但需保留署名

---

行业意义：把设计知识「民主化」

emilkowalski/skills 代表了一个重要趋势：AI Agent 的能力不仅取决于底层模型，也取决于给它装备的「技能」质量。

以前，设计品味是需要多年实战积累的；现在，通过这些精心编写的技能，AI Agent 也能做出专业级别的设计决策。这对于独立开发者、小团队和 AI-first 的产品来说，是一个巨大的杠杆——不需要雇佣专业设计师，也能做出有设计感的界面。