让 AI 写出不廉价的动效——三个大师哲学框架直接灌进去

AI 做动效，总感觉哪里不对？

你有没有这种感觉——让 AI 帮你写个按钮动画，它出来的东西看着”还行”，但总有一种说不出的廉价感。过度使用 hover-scale、随意堆叠 stagger、让整个界面像在蹦迪……这就是今年业界调侃的 AI Slop Motion。

怎么破？最近挖到一个很有意思的 Skill——design-motion-principles，作者是 Kyle Zantos。它不是简单地教你”怎么写动画代码”，而是把三位业界顶级动效大师的哲学内化成 AI 的判断框架，让 Claude 在动手之前先学会”该不该动、动多少、怎么动”。

三个大师，三种完全不同的动效观

这个 Skill 的核心框架很有意思——它整合了三位在 UI 动效领域有公开方法论沉淀的设计师：

• Emil Kowalski：极简克制派。核心问题是”这东西真的需要动吗？”适合高频交互工具类产品，追求速度感。
• Jakub Krehel：产品精修派。关注”动得够不够细腻？”适合已上线的消费级 App，做最后的抛光。
• Jhey Tompkins：创意实验派。问”这个动效还能变成什么？”适合儿童 App、作品集、偏娱乐化的产品。

AI 会根据你的项目类型自动分配权重——不是机械套用，而是真的去”思考”哪个大师的视角更适合当前场景。

两种工作模式：创作 & 审计

Create 模式：让 AI 构建带有动效的交互组件。支持 React / Framer Motion / CSS / HTML。先做轻量背景调查（项目上下文 + 镜片权重），然后生成代码，自动处理无障碍和性能默认值。

Audit 模式：这是我觉得最实用的部分。AI 会扫描你的项目，找出”应该动但没动”的地方，同时对照反 AI Slop 清单揪出问题——比如所有元素 hover 都放大、stagger 滥用到一个不合理的程度、脉冲指示器满天飞……审计结果会生成一份带循环 CSS Demo 的品牌 HTML 报告，直接看出问题在哪里。

实话说，适合谁？

如果你做的是偏视觉/体验类的产品，这个 Skill 能帮你快速建立动效审美标准——不是靠感觉，而是有三个不同哲学流派撑腰的判断框架。设计师可以直接用它审计自己项目的动效质量；前端开发者可以用它生成更专业的动效代码。

当然，它不替代你对设计的理解——AI 会问你要不要先选镜片权重，这个选择本身就是设计判断的体现。

GitHub 链接：https://github.com/kylezantos/design-motion-principles

GitHub: https://github.com/kylezantos/design-motion-principles