用 LottieFiles 的 Motion Design Skill 教会 agent 动效设计

agent 写出的动画在技术上都会动——缓动千篇一律，时长全是同一个默认值，什么看起来都没有编排感。2k star 的 LottieFiles/motion-design-skill 仓库出自 Lottie 背后的公司，它教 agent 像动效导演一样思考——在写下第一行动画代码之前，先定时机、缓动、编排和情绪意图。

为什么这个 Skill 重要

这个 skill 哲学优先、实现无关：README 点名的动画体系都能用——CSS、Framer Motion、GSAP、Lottie、Spring 等。它不投喂框架代码片段，而是把判断力打包成四层。核心 SKILL.md 是速查表：8 步检查清单、动效人格原型、时长与缓动表、属性选择指南、常见模式和质量规则。director/ 深入展开三大支柱、为 UI 改编的迪士尼十二法则、情绪到动效的映射、编排、叙事结构和上下文适配。patterns/ 收录进场/退场动画、状态反馈、环境动效、多元素编排的现成配方；reference/ 放着速查表、质量检查清单和故障排查指南。

激活范围限定在 UI 动效工作：UI 动画（按钮、卡片、模态框、页面转场）、微交互与反馈动画、加载/成功/错误状态、滚动触发或基于进度的动画、建立品牌动效识别度，以及多元素编排与排序。

安装

一条命令，走同一个 skills CLI：

npx skills add LottieFiles/motion-design-skill

README 称支持 40+ 个 agent，包括 Claude Code、Cursor、Codex 和 GitHub Copilot。

实战：编排一个仪表盘的入场序列

README 的示例提示词本身就是这个 skill 能力的导览。编排是最有辨识度的一类——要的是排序，而不是单次动画：

Choreograph the entrance sequence for this dashboard — hero chart first, then stats cards, then sidebar

multi-element.md 模式文件正是为此而写：把多个元素协调成一条序列的 stagger 与编排配方。状态反馈也是一样——它是频率最高的 UI 动效工作：

Create a loading → success → error state transition for this form submit button

这个请求落进 state-feedback.md 模式文件（成功、错误、加载、悬停配方）。第三条文档化提示词覆盖对已有动画的评审：「Review my animation code and suggest improvements based on motion design principles」——质量检查清单和故障排查参考支撑这类批判。

技巧

• 四种动效人格原型（详见 director/motion-personality.md）是最快的杠杆：先选人格，时长与缓动的选择会自然跟着出来。
• SKILL.md 保持在 500 行以内，director/ 里的深度材料只在任务需要时才加载。
• 为新品牌或新产品做动效时，动效人格文件可以和品牌识别度工作搭配；对无障碍敏感的界面，context-adaptation.md 覆盖平台、无障碍与性能约束，其中的减弱动效规则值得从第一稿就遵守。
• 当产出感觉不对但你说不出为什么时，reference/troubleshooting.md 列出了动画坏味道与修法——比从头重写提示词的循环更快。

何时不用这个 Skill

skill 自己的激活列表就画好了边界：它文档化的一切都是 UI 动效。游戏动画、视频或 3D 工作不在其配方之内；而且实现无关意味着它不附带任何框架组件或关键帧库——原则落进你项目已有的动画体系，代码还是要你自己写。如果你想要的是带度量门禁的强制设计规则，而不是被教出来的判断力，那是另一个工具类别，不是这个 skill 自我声明的定位。

查看 排行榜 了解更多 skill。