让AI做的动效”有灵魂”：LottieFiles 开源的动效设计 Skill

做 AI 产品设计，你有没有这种感觉——让 AI 生成界面，它能给你一个静态的”好看”截图，但一旦加上动效，就总觉得哪里不对，像 PPT 动画而不是真实的 UI。

问题不在于 AI 学不会动画，而是大多数 AI 根本不懂动画设计的底层逻辑。

这个 Skill 做了什么

motion-design-skill 是 LottieFiles 团队开源的一个 AI Agent 动效设计指南——不是教 AI”怎么写 CSS 动画”，而是教 AI”怎么像真正的动效导演一样思考“。

它把迪士尼 12 动画原则适配到 UI 场景，给 AI 一套完整的决策框架：

• Timing & Easing：时长和缓动曲线怎么选
• Choreography：多个元素怎么编排入场顺序
• Motion Personality：品牌动效个性怎么建立
• Emotion Mapping：情绪怎么翻译成具体的动画参数

为什么值得关注

支持 40+ 主流 AI Agent（Claude Code、Cursor、Codex、GitHub Copilot 等），安装只需一行：

npx skills add LottieFiles/motion-design-skill

文件结构非常扎实：

• SKILL.md — 核心指南，8 步检查清单
• director/ — 迪士尼 12 原则、情绪映射、编排框架
• patterns/ — 入场/退场动画、状态反馈（加载/成功/错误）、多元素编排等现成配方
• reference/ — 时长/缓动速查表、属性选择指南

适合谁用

如果你在用 AI 做产品设计（网页/App/UI 原型），这个 Skill 能让 AI 生成的动效真正”有灵魂”，而不是机械地弹来弹去。独立开发者、产品经理、想用 AI 做设计的团队都适合。

1,380 Stars，MIT 协议，来源可靠。

👉 https://github.com/LottieFiles/motion-design-skill

GitHub: https://github.com/LottieFiles/motion-design-skill