FEATUREDAI HOT 精选· aihot-apiZH00:56 · 07·02
Emil Kowalski 把 UI 动画审美做成了 AI 编程工具的 Skill,让模型学会“什么该动、怎么动”
Emil Kowalski 发了三个给 Codex、Claude Code、Cursor 用的设计工程 Skill,把 UI 动画的硬规矩直接写进 AI 编码流程里。规矩很具体:高频操作(一天点上百次那种)不加动画;UI 动效控制在 300 毫秒以内;只动 transform 和 opacity 两个属性,别碰会触发重排的属性;元素进场统一从 scal...
#Agent#Code#Emil Kowalski#Codex (OpenAI)
精选理由
精选 · 重要度 72 · 吸引力 + 知识量
一句话点评
Emil Kowalski 把 UI 动画的硬规矩写成 Skill 喂给 AI 编码工具,高频操作不加动画、动效压到 300ms 内、只动 transform 和 opacity,这些规则比多数人类前端还清楚。
锐评
这条推文的价值在于把“设计感”翻译成了 AI 能执行的硬约束,而不是泛泛说“让 AI 做动画”。Kowalski 给的规则很具体:每天点击上百次的操作直接禁用动画,UI 动效卡在 300 毫秒以内,只动 transform 和 opacity 两个不触发重排的属性,元素进场统一从 scale(0.95) 加 opacity:0 开始,还强制尊重系统的“减少动态效果”设置。review-animations 这个 Skill 会输出 Before/After/Why 表格,相当于让 AI 自己解释为什么改、改了什么;animation-vocabulary 则把“弹一下”这种模糊描述转成专业动效术语,这对跟设计师协作很有用。
不过正文没披露这些 Skill 是开源还是付费,也没说在真实项目里跑过多大规模、误判率怎么样。三个 Skill 目前只适配了 Codex、Claude Code 和 Cursor,其他工具能不能用还不清楚。另外,规则本身偏保守,适合工具型产品,如果是品牌营销页面那种需要夸张动效的场景,这套规则可能太紧。整体看,思路对,但落地效果还得看实际跑出来的代码质量和设计师的接受度。
HKR 分解
hook ✓knowledge ✓resonance —