AI写UI总差点意思？装上这个设计审美Skill，让Claude变专业

Claude Code 写 UI 功能没问题，但写出来的动效总感觉「哪里不对」——要么缓动曲线选错了，要么动画时长没控制好，要么根本不该加动画的地方硬塞了个效果。

这不是 Claude 不够聪明，是它没学过设计。

emil-design-eng 就是来解决这个的。它是前 Vercel / Linear 设计师 Emil Kowalski（就是那个写了 Sonner 和 Vaul 的人）开源的设计审美 Skill，给 AI 编程 Agent 注入专业设计师的判断力。

装上之后，AI 开始会问「这玩意儿该动吗」

这个 Skill 最核心的东西是一个动画决策框架——写任何动画之前，先问一个问题：

「用户一天看这个动画多少次？」

Raycast 为什么从不给自己的命令面板做开合动画？因为那是每天被触发几百次的东西，动画反而让人觉得慢。AI 没有这种直觉，emil-design-eng 替它补上。

具体到代码层面的判断规则

Skill 里内置了大量可直接落地的判断原则，不是玄学，是工程细节：

• 禁止用 ease-in：入场动画用 ease-in 会让用户等待动画最慢的阶段才看到内容，应该用 ease-out
• scale(0) → scale(0.95)：真实世界里物体不会凭空消失，从 95% 缩放开始更符合物理直觉
• 所有 UI 动画上限 300ms：超过这个时间的动效开始让人感觉「拖沓」
• 快捷键触发的操作不动画：命令面板、快捷键操作——每天用几百次，动画是噪音
• 用自定义缓动曲线，不用 CSS 内置的：内置的 ease 太弱，给出具体值 cubic-bezier(0.23, 1, 0.32, 1) 作为默认参考

另一个精髓：Before/After 审查表格

每次 AI 写完 UI 代码，这个 Skill 会强制它用 Markdown 表格输出审查结果，格式是：

| Before | After | Why |
|--------|-------|-----|
| transition: all 300ms | transition: transform 200ms ease-out | 动画具体属性，不要 all |
| transform: scale(0) | transform: scale(0.95); opacity: 0 | 真实物体不会凭空消失 |
| ease-in on dropdown | ease-out with custom curve | ease-in 让入场显得慢半拍 |

不是 列一个 Before: 和 After: 列表就行了，必须是正经 Markdown 表格，还要有「Why」列解释原因。Skill 里明确把这个列为「错误格式」，AI 必须遵守。

这个格式本质上是在强迫 AI 做具体的、可量化的对比，而不是说「看起来好多了」这种废话。

谁在用、怎么装

作者 Emil Kowalski 是 Vercel 前设计师、Linear Web 团队成员，Sonner（Toast 组件）和 Vaul（Drawer 组件）的作者。这套设计审美来自多年做组件库的一线经验，不是纸上谈兵。

数据：GitHub 29.6k Stars，skills.sh 累计 208k+ 次安装，主技能 emil-design-eng 是设计类 Skill 里安装量最高的之一。

安装，一条命令：

npx skills add emilkowalski/skills --skill emil-design-eng

支持 Claude Code、Cursor、Windsurf、Copilot、Cline 等所有主流 AI 编程 Agent。

装完之后，每次做 UI 相关的任务直接喊 /emil-design-eng，AI 会自动进入「设计工程师」模式，第一次只回复「我准备好了」，等你提问——而不是上来就噼里啪啦输出 200 行废话。

我的判断

这类 Skill 真正有价值的地方在于：它不是在教 AI 更多功能，而是在约束 AI 少犯特定的低级错误。

AI 生成 UI 代码最大的问题从来不是「不会写」，而是「没边界感」——给一个按钮加 3 种过渡动画、为一次性引导页写 500 行 CSS、把所有交互都做成 hover 效果。

emil-design-eng 做的是给 AI 装一套「审美护栏」，让它在动手之前先停下来判断：「这值得做吗？该用哪个曲线？时长多少？」

前端/React 项目强烈推荐装一个。尤其是你在用 Claude Code 做产品 UI 的情况下——同样几个人月的 AI 编程，装了这个 Skill 之后输出质量会明显不一样。

GitHub：https://github.com/emilkowalski/skills

GitHub: https://github.com/emilkowalski/skills