你的 UI 动效为什么总是差点意思？SuperBad Marketing 把迪士尼动画 12 法则搬进了 Framer Motion

你的 UI 动效为什么总是「差点意思」？这个 Skill 把迪士尼动画 12 法则搬进了 Framer Motion

你有没有过这种经历：做了一个按钮 hover 动画，怎么看怎么别扭，但就是说不出来哪里有问题？

今天给大家挖到一个 SuperBad Marketing 出品的精品 Skill：motion-design-principles。它本质上是一套「动效设计创意指南」，把迪士尼动画经典的 12 法则重新翻译成 UI 和营销语境，直接指导你怎么用 Framer Motion、Remotion 做让人「感觉对了」的动效。

这个 Skill 最值钱的三件事

• 12 法则 UI 化：Squash & Stretch、Anticipation、Follow Through……不是让你画动画，而是告诉你按钮弹跳、modal 进场、列表 stagger 到底该调多少时长、多少弹性。
• 动效「要不要做」决策框架：动效必须有任务——要么建立关系、要么引导注意力、要么表达情绪。没有目的的动效直接砍掉。这套「动效正当性检查」够很多团队少开三次评审会。
• 营销短片的叙事节奏：从 kinetic typography 到短形式内容动效叙事，它甚至告诉你「先退再冲」的 anticipation 怎么用在社交视频上，让观众注意力死死抓住。

适合谁用？

前端设计师：写 Framer Motion 时不再凭感觉调 spring，而是用原则做决策。
动效设计师：12 法则本身就是基本功，这个 Skill 帮你快速落地到代码层面。
内容 / 社媒创作者：做 Remotion 短视频时，知道什么时候该动、动多少、怎么动才不廉价。

怎么用？

Skill 是 Markdown 格式，支持 Claude Code、Codex CLI、ChatGPT。Clone 仓库后放进 skills 目录，然后直接问 Claude：「帮我把这个按钮的 hover 动画调得更有弹性，参考 Squash & Stretch 原则」——Claude 就会按这套规则给代码。

我的感受

很多动效教程只会堆参数，告诉你「用 spring stiffness=300」，但不会告诉你为什么。这个 Skill 的价值就是把「为什么」说透，让你做设计决策时有依据而不是碰运气。尤其适合做品牌站、SaaS 产品、社交短内容——凡是 UI 会动的地方，都值得参考这套原则。

如果你也在苦恼动效「怎么调都不对」，装这个 Skill 试试。

GitHub 地址：https://github.com/SuperBad-Marketing/superbadmedia/tree/main/.claude/skills/motion-design-principles

—

**GitHub:** https://github.com/SuperBad-Marketing/superbadmedia/tree/main/.claude/skills/motion-design-principles