先承认一个事实：用 Cursor 写前端真的很爽。 但有个问题——
你让它生成个页面，功能全对，布局也过得去，可那些动画永远是一个模子刻出来的：淡入、淡出、transition: all 0.3s ease。看多了真的很腻。
于是你手动调贝塞尔曲线。调好了。满意了。下一轮对话它又回去了。
😤
这个问题其实有个很简单的解法：awesome-motion.md。
一句话说清楚它是什么
它是一个 GitHub 仓库，里面放了 12 份动画设计规范文件。
每份文件叫 MOTION.md，专门写给 AI 编码助手看的。你把它丢到项目根目录，Cursor / Claude Code 就会自动按这套规范来生成动画。
就像你用 .eslintrc 管代码风格，MOTION.md 管动画风格。
以前你跟 AI 说“加点动画” → 它瞎猜。
现在你放一份 MOTION.md → 它知道具体怎么动、动多快、用什么曲线、什么不能做。
里面有什么？
打开一份 MOTION.md，你会发现它全是精确的数值，没有任何模糊的描述：
📐 缓动曲线：
cubic-bezier(0.22, 1, 0.36, 1)，而不是“丝滑一点”⏱️ 时长：hover
160ms、弹窗320ms、大场景560ms，而不是“快一点”🎬 入场动画：标题从
28px下方弹入，卡片间隔45ms，而不是“逐个显示”👆 交互反馈：按钮 hover 抬起
1px、按压缩到0.96♿ 无障碍降级：
prefers-reduced-motion回退策略🚫 什么是禁区：不要弹跳、不要抖动、不要劫持滚动
每一行都是 AI 可以直接拿来生成代码的。
12 种风格，总有一款对味
每种风格针对不同的产品类型，用同一个界面做了对比演示 👇
| 风格 | 适合什么 | 一句话感觉 |
|---|---|---|
| Material Expressive | 产品界面、仪表盘 | 像有弹性的实物，摸得到 |
| Apple Fluid | 产品页、移动端 | 安静、连续、苹果那种高级感 |
| Fluent Productive | 效率工具 | 快、分层、不拖沓 |
| Carbon Enterprise | 企业后台 | 规矩、精确、无障碍做好 |
| Linear Snappy | SaaS / 开发者工具 | 快到你没注意到动画 |
| Stripe Polished | Landing Page | 精致，错落有致 |
| Vercel Minimal | 开发者工具、暗色主题 | 克制到不多动一下 |
| Framer Spring | 交互原型、手势驱动 | 弹性十足，跟手 |
| GSAP Cinematic | 品牌官网、营销页 | 电影级别的编排感 |
| Game Impact | 游戏化界面 | 拳拳到肉的打击反馈 |
| Glitch Cyberpunk | 赛博朋克风创意页面 | 霓虹、扫描线、故障艺术 |
| Editorial Scroll | 长文、发布页 | 像翻一本会动的杂志 |
眼见为实
同样的 UI 元素，换一份 MOTION.md，出来的感觉完全不同：
Material Expressive — UI 像有了重量和弹性：
Apple Fluid — 安静到你不确定它是不是本来就该这么动：
GSAP Cinematic — 营销站就该有这种节奏感：
Glitch Cyberpunk — 赛博朋克，同时做了无障碍保护：
Editorial Scroll — 长文阅读也能有节奏变化：
同一个按钮 hover，三种风格三种性格
光看描述不过瘾，来看看同一个操作的规范差异 👇
Apple Fluid：克制，微抬 1px，160ms——
我注意到你了，但我不打扰你。
Linear Snappy：纯颜色变化，120ms——
已经生效。下一件事。
GSAP Cinematic：磁吸效果，最多 8px——
看！这！里！
三种语言，三种人格。这就是给 AI 配上不同设计语言的效果。
想看更多风格的 MOTION.md 原文？直接打开 motion-md/ 目录随便翻。
怎么用？三步
1. 挑一个风格
去仓库里逛逛，找到跟你的产品对味的。
2. 复制一份
cp motion-md/apple-fluid/MOTION.md ./MOTION.md
就这。不需要 npm install 任何东西。
3. 正常写代码
跟 Cursor / Claude Code 说“帮我做个弹窗”，它会自己读 MOTION.md，按里面的规范来。
你甚至可以直接说“按 MOTION.md 的规范给卡片列表加上入场动画”——AI 自己会去翻对应的 token、时长和缓动曲线。
想自己搞一套新的？参考现有的 MOTION.md 格式，核心就几块：设计哲学、缓动曲线、时长、入场动画、交互反馈、组件动画表、无障碍降级、禁区清单。抄一份改改就行。
最后说一句
我们正在一个 AI 批量生产 UI 的时代。快是真快，丑也是真丑——全是同一个味道。
awesome-motion.md 解决的其实不是技术问题。它解决的是你懒得（或者不会）跟 AI 说清楚“我要什么感觉” 这件事。
把动效设计从“说不清的审美”变成“复制一份文件”，这事挺酷的。
⭐ GitHub: niuben/awesome-motion-md — Star 一下，下次你的 AI 生成的就比别人的好看。
