Lottie 是 Airbnb 开源的一个工具，本质是一份描述矢量动效的 JSON 文件。

因为下面这些优点，现在很多移动端和 Web 上做小动画都用它：

• 体积小，一个 loading 动画通常几 KB 到几十 KB
• 矢量绘制，放大不糊
• 一份 JSON 多端适用，iOS、Android、Web 等都能直接渲染
• 能用代码控制：暂停、倒放、绑滚动条、响应点击都行

你日常刷 App 看到的启动动画、点赞的爱心、下拉刷新的小人、空状态的插画，十有八九都是 Lottie，尤其是国外的 APP。

但是 Lottie 用起来，门槛不低。正经流程是：设计师在 After Effects 里把动效做出来 → 用 Bodymovin 插件导出 JSON → 开发把 JSON 接到代码里。

到了 AI 时代，大家都在想办法——怎么让 AI 直接生成基于 Lottie 的动画效果？今天要聊的这个开源项目，就是想解决这个问题。

Text-to-Lottie 是什么

这个开源项目是 YC F24 批次的 diffusionstudio 公司做的，对外叫 Text-to-Lottie。它让 AI Agent（比如 Claude Code、Codex）能生成生产级的 Lottie 动效。

用法很简单，一行命令装好 Skill：

npx skills add diffusionstudio/lottie

然后在 Claude Code 里直接说话，比如：

用 text-to-lottie 把桌面的 hello 的 SVG 路径做成 Lottie 动画，沿路径自然方向揭示，套个 Apple 风格渐变，ease-in-out，透明背景。

我又试了一个："用 text-to-lottie 制作一个动效。效果是苹果的 logo 晃来晃去，最后跳一下缩成一个点消失了。"

它和直接让 AI 写 JSON 有什么不同

如果只是让 Claude 写一段 Lottie JSON，你拿到的是一段代码。想看效果得自己搭页面、接 lottie-web、刷新调试。AI 也不知道自己写出来的东西跑起来长啥样，错了也没法自己改。

Text-to-Lottie 把整条闭环做出来了。

自带官方播放器

配套了一个完整的播放器项目，Vite + SolidJS + Skia WASM 渲染，一行 npm run dev 跑起来就是本地预览页面。Agent 生成完 JSON，浏览器里立刻能看到效果，不用自己搭环境。

Agent 能自己看播放状态

这是最巧妙的一笔。播放器在本地起了一个 /__context 端点，Agent 可以直接读当前在播哪个场景、第几帧、总共多少帧。这意味着 Agent 写完之后能自己检查结果，而不是靠用户截图反馈。

像设计师一样逐帧审查

URL 里加一个 ?frame=60 参数，画面就会跳到第 60 帧并暂停在那里，方便截图检查。Agent 改完动效，自己锁一帧看看，不满意再改。

文件改动 live reload

Agent 改了 lottie.json，浏览器立刻刷新，迭代闭环很短。这套机制加起来，把 AI 从"盲写"变成了"看着写"，质量自然就上来了。

官方 Prompt 五条心法

项目 README 里给了五条提示词建议，很实用：

1. 给真实素材做地基——能提供 SVG、数据、截图就别空着说。AI 基于具体素材做出来的效果好得多。
2. 用动效术语——说 ease-in、ease-out、ease-in-out，AI 听得懂。别光说"自然一点"。
3. 像摄影师思考——专业动效很多靠镜头运动。推、拉、摇、移、变焦，写进 prompt 里，AI 会用 group 变换模拟出来。
4. 显式声明要哪些控制项——默认生成的动画通常只暴露背景色一个控制。想要颜色、大小、透明度都能调，就直接说出来。
5. 指定 FPS 和总帧数——需要特定时长或帧率，写清楚。比如"60 FPS，3 秒"。

复杂动效仍需手动微调

AI 现阶段还做不到一键完美。粒子、精细形变、复杂的物理动效，AI 能打个底，但收尾还是要手动调。Lottie 本身也不擅长粒子这类效果。

动效过去十几年基本是"设计师 + After Effects"的专属领地。AE 学习曲线很陡，工程师和独立开发者基本不会用。协作链路也长，改一帧都要设计师回到源文件改完再重新导出。手写 Lottie JSON 也不现实。

Text-to-Lottie 可能就是打破这个壁垒的一个解决方案。

项目地址：github.com/diffusionstudio/lottie