写前端的人现在几乎都在用 AI Coding Agent。Cursor、Claude Code、Codex 这些工具确实能把开发效率拉高一截，但有个问题一直没解决好：AI 写出来的界面功能能跑，看起来却千篇一律，带着明显的廉价感。

Inter 字体、紫色渐变、卡片套卡片、弹性缓动、灰色文字压在彩色背景上，这些“AI 味”出现得太频繁，以至于很多人开始怀疑，AI 到底能不能做出真正好看的东西。

我几乎把能找到的设计相关 Skill 都试了一遍。有的只给空洞的审美建议，有的装完之后效果一般。最后真正留下来、并且会长期在项目里用的，只有下面这四个。

Impeccable：目前最稳定的去AI味方案

官网是 impeccable.style。我个人觉得官网本身就是用它的 Skill 做的，风格很鲜明。

impeccable skill

这是我目前用得最多的一个。它不是简单丢给模型几句“请做得更精致一点”的提示，而是建立了一套完整的工作方式。

安装后先跑 /impeccable init，它会生成 PRODUCT.md 和 DESIGN.md，把产品定位、受众、品牌调性、颜色、字体和组件约定写清楚。之后所有命令都会参考这些文件。

它提供了一组明确的命令：polish、audit、critique、distill、animate、typeset、bolder、quieter。你不用每次都解释“帮我把这个页面做得更高级一点”，直接说 /impeccable polish the pricing page 或 /impeccable distill，模型就知道该做什么。

更关键的是，它内置了大量确定性的检测规则，专门针对 AI 最容易犯的默认错误。很多时候你甚至不需要自己指出问题，它会先帮你找出来。

如果只能装一个 AI 设计 Skill，我会优先推荐这个。在去除 AI 生成 UI 的廉价感这件事上，目前效果最稳定。

安装命令：

npx impeccable install

Skills for Design Engineers：解决品味和细节判断

emilkowalski/skills，作者 Emil Kowalski 以前在 Vercel，现在在 Linear，也是 Sonner 和 animations.dev 的作者。这套 Skill 基本是他多年前端设计工程经验的浓缩。

它特别擅长处理那些细微却关键的决策：进入动画该用 ease-out 还是 ease-in，什么时候该用半透明阴影而不是实线边框，哪些地方值得加动效，哪些地方加了反而显得廉价。

主技能是 emil-design-eng，帮你判断这个动画值不值得写、写得对不对。配套还有：

  • emil-design-eng：主力技能。主要讲动画怎么做才舒服，顺带给一点界面设计上的建议。
  • animate：从零帮你做一段动画，曲线、时长、动哪些属性，都会替你选好。
  • review-animations：按一套比较严的标准审你现有的动画，哪里别扭会直接指出来。
  • improve-animations：把项目里的动画通盘过一遍，按优先级列出改法，别的 AI 照着就能改。
  • find-animation-opportunities：在界面里找「加一段动效会更好」的位置，同时告诉你哪些地方别乱动。
  • prototype：同一块界面做出好几个完全不同的版本，现场翻着看，挑一个最顺眼的。
  • animation-vocabulary：教你用更准的词描述想要的动效，这样跟 AI 说才说得清楚。
  • apple-design：把苹果在 WWDC 里讲的界面和动效原则，转成做网页时能直接用的方法。
  • pick-ui-library：按作者常用、比较靠谱的库来帮你选型，别让 AI 随手造一个或装个没人维护的包。

很多 Skill 只告诉模型“要精致”，这套会告诉模型“什么样的精致才是对的”。它解决的是品味问题，而不只是执行问题。

安装命令：

npx skills@latest add emilkowalski/skills

transitions.dev：高频微交互的生产级解决方案

transitions.dev 这个 Skill 非常聚焦，专门解决高频微交互。

它把 card resize、number pop-in、notification badge、modal、dropdown、icon swap、skeleton reveal 这些常见交互，都做成了可直接复用的 CSS 片段，并且已经处理好 prefers-reduced-motion。

用法很直接。你只需要说“用 transitions.dev 的 modal 过渡”，或者“给这个数字加上 number pop-in”，AI 就会复用对应的代码，而不是自己现编一套半吊子动画。

对于想快速提升界面手感、又不想每次从零写缓动曲线的人，效率很高。它提供的是真正能落地的生产级 CSS 过渡。

安装命令：

npx skills add Jakubantalik/transitions.dev

GSAP Skills：复杂动画与时间轴的专业支持

GSAP Skills 这是 GreenSock 官方维护的 Skill。当前三个解决的是设计和微交互，它解决的是真正复杂的动画实现。

覆盖范围包括核心 API、Timeline 时间轴、ScrollTrigger、各种插件，以及 React 和 Vue 里的正确用法与清理方式。当你需要多步骤时间轴、滚动联动，或者高性能动画时，它能明显减少 AI 写出“能跑但很糙”的代码。

安装命令：

npx skills add https://github.com/greensock/gsap-skills

实际项目中的使用流程

新项目先跑 Impeccable 的 init，把基础信息写清楚。写页面时主要用它来控制整体设计方向，并去掉明显的 AI 痕迹。

需要常见微交互时，直接交给 transitions.dev。需要复杂时间轴或滚动动画时，启用 GSAP Skills。做完一轮后，再用 Emil 的 review-animations，或者 Impeccable 的 critique 和 polish 做最终检查。

它们解决的问题层次不同，几乎没有重叠。装一堆泛泛的 design skill 只会让模型更混乱，真正有用的是那些解决具体问题、带有明确判断标准的。

总结

这四个是我实测下来，真正能长期留在项目里的。它们不会让 AI 突然变成顶级设计师，但能大幅减少默认的廉价感和错误决策，让最终交付物看起来像是经过设计的。

如果你也在用 AI 写前端，建议先从 Impeccable 开始。装完之后随便挑一个页面跑一次 polish，通常就能立刻感受到区别。

Agent Skills Codex Claude Code