Article
在体验过大部分市面上热门的设计类 Skills 之后，终于可以来说我的经验总结。
首先要清楚，设计 Skill 不是装得越多越好。它们都会进入 Agent 的判断过程，规则重叠时不一定互相增强，反而可能把不同作者的审美偏好混在一起。
一个让 AI 大胆，一个要求克制；一个偏大圆角和宽松留白，另一个强调高密度和强对比。最后做出来的东西没有明显错误，也没有清楚的方向。
经过 3 个月的设计体验之后，我留下来的只有四个。当然这只是我个人的体验感受，只是我现在确实还会用的四种能力：通用设计审查、设计判断、复杂动画实现和小型交互优化。
1. Impeccable
官网：impeccable.style
GitHub：github.com/pbakaus/impeccable
安装：npx impeccable install
Impeccable 是我现在保留的通用设计 Skill。
它一直有在高频的迭代和维护，也根据设计风向的转变，去及时调整设计原则和细节，AI 的发展太快，很多东西会过时。它最有价值的部分是给 AI 一套更准确的设计指令，23 个指令可以覆盖设计流程中的所有需求和问题，按需调用。
这种命令式设计很适合真实项目。你不需要每次都让 AI 重做整个页面，只处理眼前的问题即可。已有 DESIGN.md 和组件规范，就沿用现有系统，而不是重新发明一套风格。
Impeccable 现在也会先读取产品上下文和已有设计系统，再根据页面用途做判断。落地页需要说服用户，后台需要帮助用户完成任务，两者不该套同一种视觉模板。
2. Skills for Design Engineers
官网：emilkowal.ski/skill
GitHub：github.com/emilkowalski/skills
安装：npx skills add emilkowalski/skill
这是设计工程师 Emil Kowalski 做的一组设计工程 Skill。它重点放在判断上，尤其是 UI 动效的分寸。
它会提醒 Agent 先问几个很实际的问题：这个动画有没有必要，用户一天会触发多少次，它是在解释状态，还是只为了显得页面做过设计。进入动画为什么更适合 ease-out，popover 为什么应该从触发器的位置展开，频繁操作为什么要更快甚至不加动画，这些规则都解释了原因。
目前官网提供的 Skill 已经覆盖动画生成、严格审查、寻找适合加入动画的位置、原型对比和动画术语等环节。
我喜欢这组 Skill，是因为它不会默认去修改页面视觉。它传递的是设计工程师怎么判断，而不是让所有项目复制同一种视觉结果。
3. GSAP Skills
GitHub：github.com/greensock/gsap-skills
安装：npx skills add https://github.com/greensock/gsap-skills
GSAP Skills 是 GreenSock 官方给 Coding Agent 准备的技能包。目标很简单：让 AI 更准确地使用 GSAP，不插手项目的美术风格。
这一点很重要。AI 当然可以临时阅读 GSAP 文档，但能写和写好是两件事。ScrollTrigger 的触发位置、时间线编排、React 组件卸载后的清理、SplitText 和其他插件的用法、移动端性能，这些细节很容易被忽略。
如果你的项目本来就用 GSAP，这个 Skill 很值得保留。它让 AI 更懂你已经选定的技术，而不是不清不楚地堆一些金玉其外的动画效果。 GSAP 能做到非常多的动画效果，如果还没试过的话，值得体验一下。
4. transitions.dev
官网：transitions.dev
GitHub：github.com/Jakubantalik/transitions.dev
安装：npx skills add Jakubantalik/transitions.dev
transitions.dev 是这四个里面最小巧的一个。它处理的都是产品里常见的小交互：通知角标、下拉菜单、模态框、数字变化、文字切换、错误抖动、成功状态、骨架屏和滑动 Tab。
很多时候，我们不需要做一次全面而复杂的设计审查。
这时 transitions dev 比大型设计 Skill 合适得多。它给的是调好参数的 CSS 方案和对应的使用规则，Agent 先识别场景，再取一个小而明确的解决方案。你也可以只让它扫描项目里的硬编码时长和临时动画，先报告问题，确认后再改。
我留下它，是因为它只做一点点事情，足够克制。并且这套 SKill，适合自己继续去添加设计内容，变成专属的设计 SKILL。
设计 Skill 最重要的不是风格
我现在不用的 Design Skill，基本都有两个共同点：过度约束视觉风格，或者默认接管太多设计决策。
短期看，它们很容易做出一张抓眼的页面；长期放进不同项目，同一种字体、圆角、配色和构图会不断回来。或者说长期没有更新和迭代，有些落后。（停止使用的包括不限于 Taste Skill、Frontend Design、UI Brain、Taste Skill、 UI/UX Pro Max 等。）
我留下的四个刚好相反。
Impeccable 提供设计语言和按需命令，Skills for Design Engineers 提供判断原则，GSAP Skills 解决特定技术实现，transitions.dev 处理小而准确的交互优化。它们都不会要求我默认执行整套规则。
我现在把 Design Skill 和 DESIGN.md 搭配作为工作流使用。
- Design Skill 负责交互原则和用户体验检查，比如动画是否必要、反馈是否准确、操作是否顺手；
- 具体的设计规范则交给 DESIGN.md，包括字体、配色、圆角、间距、组件样式和品牌原则。
- Agent 先读 DESIGN.md，知道这个项目应该长什么样，再调用对应的 Skill 检查它做得对不对。
一个负责原则，一个负责主题，这套分工跑下来更稳定，也不容易因为换了 Skill 就让整个项目突然变一种风格。
实际使用时，我会先让 Impeccable 或 Emil 的 Skill 处理设计判断，再根据复杂度选择 GSAP Skills 或 transitions.dev。前者做编排，后者管高频的小交互。动画在该出现的时候出现就够了。
Skill 应该放大判断，而不是取代判断。能让 AI 知道为什么这样做、什么时候不要做，比直接塞给它一套高级感模板更值得长期保留。
我是 Rico，感谢阅读！
