今天在 GitHub Trending 上看到一个有意思的项目：Skills For Design Engineers（emilkowalski/skills）。它不卖代码、不卖组件库，而是把一位顶级设计师多年积累的「UI 动画与设计判断力」打包成一套 AI Agent 技能，专门用来治好 AI 生成界面时那些让人脚趾抠地的细节翻车。

一、项目概述

  • 是什么：一套面向「设计工程师」（design engineers）的 AI Agent 技能集合，目标用户是设计师、前端工程师，以及用 AI 写界面的开发者。
  • 解决什么问题：AI Agent 在生成 UI 时往往「没有品味」——比如进入动画用了 ease-in（本该用 ease-out）、用实心边框代替半透明阴影。这些细微错误会累积成「还行但不够好」的界面。
  • 核心特性：以 SKILL.md 为单位沉淀领域专家经验；覆盖动画、设计评审、代码审计等场景；可挂在支持 skills 的 Agent 运行时中按需调用。

二、技术原理

  • 技能即指令：每个 skill 本质是一个 SKILL.md 文件，里面是用自然语言写成的「设计规则 + 纠错清单」。Agent 加载后，这些规则作为上下文注入，约束它后续生成 UI / 动画的决策。
  • 分层组织：顶层 emil-design-eng 是主技能，偏动画与部分设计建议；其余为专项子技能——review-animations（按作者规则严格评审动画）、animation-vocabulary（教你怎么用「正确的词」向 AI 描述想要的动画）、apple-design（把 Apple WWDC 设计演讲中的界面与动效原则翻译到 Web）。
  • improve-animations 的工作流：受 shadcn/improve 启发，它扫描整个代码库（而非单个 diff），从八个维度审计动画——目的与频率、缓动与时长、物理感、可中断性、性能、可访问性、整体一致性、被忽略的机会——产出一张按优先级排序的发现表。你勾选后，它会把「自包含的执行计划」写进 plans/ 目录（精确到文件、缓动曲线、时长，并附带「手感校验」），交由另一个 Agent 执行；它自身绝不改动你的源码。
  • 分发机制：通过 npx skills@latest add emilkowalski/skills 一键安装到 Agent 的 skills 目录。

三、安装与快速开始

  • 环境要求：Node.js（用于运行 npx skills）；一个支持 skills（SKILL.md）机制的 AI 编程 Agent（如 Claude Code 类运行时）。
  • 安装步骤：
npx skills@latest add emilkowalski/skills
  • 安装完成后，相关技能会出现在 Agent 的 skills 目录中，可直接在对话里触发（例如「review 一下这个动画」「improve the animations in this codebase」）。

四、使用方法与实战

  • 用主技能辅助日常生成：让 Agent 在写动画 / 界面时参考 emil-design-eng 的设计与动画建议。
  • 评审动画：使用 review-animations 对你的动画做「严格体检」。
  • 批量审计并生成计划（核心玩法）：improve-animations 支持多种调用方式：
# 审计整个代码库的动画
> improve the animations in this codebase

# 只扫热点（高频 / 关键动效）
> improve-animations quick

# 只审计某一个维度（如性能）
> improve-animations performance

# 针对一个明确目标生成计划
> improve-animations plan add press feedback to all buttons

# 执行已生成的计划
> improve-animations execute plans/001-fix-dropdown-easing.md
  • 实际示例：想给所有按钮加「按下反馈」，只需一句 improve-animations plan add press feedback to all buttons，它会扫描代码、产出精确到文件与曲线的计划，再由 Agent 执行，全程不碰你的源码。

五、常见问题与解决方案

  • 安装失败 / 找不到 skills 命令：确认已安装 Node.js，且网络可访问 npm；skills CLI 依赖对应 Agent 的 skills 运行环境。
  • 我的 Agent 不支持 skills 机制？ 这些技能本质是一组 SKILL.md 指令，可手动把对应目录复制进 Agent 的 skills 文件夹使用。
  • improve-animations 会改我的代码吗？ 不会。它只把计划写到 plans/，由你或另一个 Agent 决定是否执行，安全可审计。
  • 适合谁用？ 设计师、前端工程师，以及任何用 AI 生成 UI 却受够了「差点意思」的界面的人。

六、总结

Skills For Design Engineers 的洞见很朴素却有力：AI 不替代专业判断，而是放大它。Emil Kowalski 把在 Vercel、Linear 打磨 UI 的经验固化成一套可复用的 Agent 技能，让「好品味」从玄学变成可执行的清单。如果你也厌倦了 AI 生成的界面「总差一口气」，这套技能包值得一试——它或许就是你在 slop 海洋里脱颖而出的捷径。