GitHub 仓库

这是一个面向设计师与工程师的技能库,可以帮助他们构建更好的用户界面。

当你要判断一段动画或一个设计选择是否正确时,往往并不容易。

这些Skill的目标,是帮助你更快做出正确决定。

它们来自作者在 Vercel、Linear 等公司的多年工作经验。这里沉淀的内容,都是领域专业知识的自然产物。

广告媒流(小程序)-AI生图

AI 不会替代这类专业能力,而是放大它的作用,让掌握它的人更具优势。

因此,对于持续学习编程、设计,或在任何领域建立专业能力的用户来说,都非常有价值。

安装

npx skills@latest add emilkowalski/skills

为什么使用它?

智能体并不是天然具备优秀的审美判断。

作者多次观察到,智能体会为动画选择不合适的组成要素。例如,进入动画应使用 ease-out 时,智能体却选择了 ease-in;或者在 UI 中使用实线边框,而不是半透明阴影。

这些看似细小的选择会不断叠加,最终决定界面是出色,还是只是勉强可用。

如作者在 Agents with Taste 中所述,这些技能会列出智能体可能犯下的细小错误,并说明应如何修正。

它们可以作为构建优秀界面的捷径,帮助你的产品从大量粗糙、同质化的界面中脱颖而出。

技能一览

  • emil-design-eng — 核心技能,以动画内容为主,同时提供设计建议。
  • review-animations — 按照作者的严格规则审查动画。
  • improve-animations — 审计整个代码库中的动画,产出按优先级排列、彼此独立且任何智能体都能执行的改进计划。
  • find-animation-opportunities — 在 UI 中寻找真正能从动效中获益的位置,同时明确指出不应添加动画的部分。
  • animation-vocabulary — 教你使用准确的词汇描述需求,让 AI 生成更好的动画。
  • apple-design — 从 Apple 的 WWDC 设计演讲中提炼界面设计与流畅动效原则,并将其转化为适用于 Web 的实践。
  • pick-ui-library — 让智能体根据作者实际使用并信任的库,为任务选择合适的 UI 库,避免 AI 手写一个提示消息组件,或安装已经停止维护的软件包。
  • prototype — 根据你的描述构建同一个 UI 组件的多个不同版本,并通过切换器逐一查看和比较。

许可协议

本项目采用 MIT License。