让AI写代码，它越来越熟练了。让它写一个按钮的弹出动画？灾难可能才刚刚开始。一个毫无意义的缓动函数，一个慢得让人抓狂的持续时间，或者更糟，在所有地方都加上浮夸的位移。这几乎是每个与AI编码工具协作过的前端工程师，都曾遭遇过的尴尬瞬间。问题不在于AI不会写动画，而在于它根本不知道什么是“好”的动画。
当AI开始自己写代码：一个前端工程师的审美焦虑
过去几年，Claude Code、Cursor、Codex这类AI编码代理的能力突飞猛进。它们能理解复杂的业务逻辑，生成结构清晰的组件代码，甚至帮你重构遗留系统。但在涉及UI动效时，它们的表现却常常令人失望。这种失望并非源于技术错误——代码通常能运行——而是源于一种整体的“品味”缺失。AI像一个刚学做菜的机器人，能把所有食材煮熟，但完全不懂火候与调味的平衡。
模仿的陷阱
大语言模型的训练数据是整个互联网，其中充斥着大量质量参差不齐的CSS动画代码。有精心设计的交互动画，也有大量为了动而动、甚至影响性能的冗余代码。AI在缺乏明确指导的情况下，本质上是在进行一种概率性的模仿。它可能会从Stack Overflow某个高赞答案里学到一个弹跳动画，然后不加思考地应用到所有场景。结果就是，你的工具提示（Tooltip）的出现方式，和一个游戏通关特效如出一辙。
隐性知识的壁垒
资深设计师或设计工程师的审美判断，是一种高度隐性的知识。他们知道，在用户进行“每天点击100次”这种高频操作时，任何多余的动画都是折磨；他们明白，一个加载动画的时长超过300毫秒，就会开始引发用户的焦虑；他们清楚，动画的“理由”比动画的“炫酷”重要一万倍。这些沉淀在直觉和经验里的准则，从未被系统地整理成机器可读的格式。AI无从学习，自然也无法遵守。
三份规则，一份设计工程说明书
这正是设计工程师Emil Kowalski所做的突破。他没有抱怨AI生成的动效有多糟糕，而是做了一件更根本的事：他将自己多年来信奉并践行的动效设计原则，提炼成了三份清晰、无歧义的规则（Skills），直接喂给了AI编码代理。这套操作的本质，是将“设计直觉”进行“工程化转译”。
铁律：动画必须有理由
这是所有规则的基石。Emil明确定义了动画存在的唯一目的：为用户的操作提供连贯的视觉反馈，或引导注意力。任何脱离这个目的的装饰性动画，在他的规则体系里都被判定为噪音。这一条看似简单，却直接斩断了AI随意添加动画的冲动。它迫使AI在生成任何动画代码前，先进行一次逻辑自检：“这个动态变化，对用户理解当前界面状态有帮助吗？”
克制的数字：300ms与性能红线
规则中给出了极其具体的数字约束。例如，UI动画的持续时间应控制在300毫秒以内。这个数字并非随意设定，它源于人机交互领域的研究，是用户感知“即时响应”与“有意识等待”的阈值。超过这个时间，动画就不再是流畅体验的一部分，而变成了延迟。更关键的是对性能的绝对尊重。规则强调，动画只应作用于transform（变形）和opacity（透明度）这两个CSS属性，因为它们能由GPU高效处理，不会触发昂贵的浏览器重排。同时，必须尊重用户的系统偏好设置prefers-reduced-motion，在用户要求减少动效时，主动移除位移动画。这不仅仅是技术优化，更是对用户选择权的尊重。
从“讲故事”到“读代码”：两个关键工具
光有原则还不够，必须能让AI在具体工作流中执行。为此，Emil配套开发了两个具体的工具（Skills），它们像连接设计语言与代码语言的翻译器。
动效词汇表：翻译模糊的需求
产品经理或设计师提出的动画需求，往往是描述性的、感性的，比如“要一个弹性的感觉”、“图标轻轻晃一下”。这种模糊描述对人类开发者尚可理解，对AI则是灾难。animation-vocabulary这个技能，本质上建立了一个标准化的“动效词典”。它将“弹一下”这类自然语言，精确映射到“使用spring缓动函数，阻尼系数0.5，初速度0.2”这样的专业参数上。AI拥有了这本词典，就能将天马行空的创意描述，转化为性能可控、符合物理直觉的代码实现。
动画审查员：严格的代码审计
另一个技能review-animations则扮演了资深同事的角色。当AI或人类开发者写出一段动画代码后，这个工具会以极其严格的标准进行审查。它的输出不是简单的通过或失败，而是一份结构化的“Before/After/Why”对比表格。它会指出：“这段代码为一个静态列表项设置了悬停时的阴影扩散动画（Before），建议修改为仅改变背景色透明度（After），因为阴影动画触发重绘，且在高频滚动列表中会造成视觉干扰（Why）。”这种反馈方式，让AI不仅知道“什么不能做”，更明白了“为什么不能做”以及“应该怎么做”。
工程化思维的蔓延：当设计遇上确定性
Emil的实践，或许只是一个更宏大趋势的缩影。在AI逐渐接管编码执行层面的今天，人类开发者的核心价值正在向两端迁移：一端是更高阶的系统架构与创新构思，另一端则是将更细微、更专业的领域知识，转化为AI可理解的、确定性的规则。
规则即竞争力
对于个人开发者或团队而言，维护一套独特的、经过市场验证的设计规则库，可能成为新的竞争力护城河。当别人还在反复调整AI生成的动画参数时，你已经通过一套成熟规则，让AI在第一次生成时就达到80分以上的水准。这极大地提升了开发效率与产品质量的确定性。未来的“设计系统”，可能不再仅仅是UI组件库，更是一套指导AI进行创造性编码的“行为准则库”。
协作的新范式
这重新定义了人机协作的边界。人类不再是事无巨细的执行者，而是规则的制定者、品味的校准者和最终的决策者。AI则成为在既定框架内快速探索最佳解决方案的“超级学徒”。我们的工作，从“告诉AI如何写一个动画”，变成了“教会AI什么是好动画”。这是一种更高级、也更具杠杆效应的协作。它要求我们，必须先成为自己领域的“规则大师”。
