告别AE：用Claude Code一句指令生成Lottie动效，Text-to-Lottie技术详解

Lottie 是 Airbnb 贡献的开源项目，本质上是一份描述矢量动画的 JSON 文件。

靠着下面这几个优势，现在很多移动端和 Web 上的小动画都在使用这套工具。

• 体积非常小，一个 loading 动画通常只有几 KB 到几十 KB
• 整套都是矢量绘制，任意放大都不会模糊
• 一份 JSON 可以跨端直接使用，iOS、Android、Web 等平台都能原生渲染
• 支持用代码精细控制：暂停、倒放、绑定滚动位置、响应点击交互，都没问题

你平常刷 App 看到的开屏动画、点赞时蹦出的爱心、下拉刷新里的小人、空白状态的插画动效，十有八九都是靠它驱动的，在海外应用里尤其常见。

但 Lottie 的创作门槛其实不低。

正经的制作流程是：设计师先在 After Effects 里制作动效 → 再用 Bodymovin 插件把动效导出成 JSON → 最后把这份 JSON 接入工程代码里。

到了 AI 时代，很多人就在琢磨，怎么让 AI 直接生成基于 Lottie 的动画效果。今天要聊的这个项目，就是想解决这件事。

Text-to-Lottie 到底是什么

这个开源项目出自 diffusionstudio，也习惯叫它 Lottie，不过对外正式名称是 Text-to-Lottie。

diffusionstudio 是 YC F24 批次的一家创业公司。这个项目的核心目标，就是让 AI Agent——比如 Claude Code、Codex 这类工具——能够直接生成生产可用的 Lottie 动效。

使用方式很简单，一行命令就能把 Skill 装上：

npx skills add diffusionstudio/lottie

装好之后，你只要在 Claude Code 里直接用自然语言描述需求就行，例如：

“用 text-to-lottie 把桌面上 hello 的 SVG 路径做成 Lottie 动画，沿路径的自然方向逐步揭示，套一层 Apple 风格的渐变，缓动用 ease-in-out，背景保持透明”。

从结果来看仍然会有些小瑕疵，不过这可能跟我随便找的 SVG 也有关系。

我又试了一个更随性的指令：“用 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 改完动效之后，可以自己锁定某一帧仔细看，不满意就继续修改。

文件改动后即时热重载

Agent 一改 lottie.json，浏览器页面就会立刻刷新，整个迭代闭环非常短。

这套机制加在一起，等于把 AI 从“盲写”升级到了“看着写”，生成质量自然就上去了。

官方提示词五大要诀

项目 README 里给出了五条非常实用的提示词建议，这里整理出来分享给你：

给真实素材打好地基

能提供 SVG、数据、截图，就别只用空洞的文字去描述。AI 基于具体素材做出来的效果要好得多。

大胆使用动效术语

直接说 ease-in、ease-out、ease-in-out，AI 完全听得懂，不要只用“自然一点”这种模糊表述。

像摄影师一样去思考

很多专业动效靠的就是镜头运动。推、拉、摇、移、变焦这些概念，写进 prompt 里，AI 会用 group 变换来模拟镜头语言。

显式声明你需要的控制项

默认生成的动画通常只暴露一个背景色控制项。如果你想后续能自由调整颜色、大小、透明度等属性，就在提示词里直接说出来。

指定 FPS 和总帧数

如果需要特定的时长或帧率，要写清楚，比如“60 FPS，3 秒”。

复杂动效仍然需要手动微调

AI 现阶段还做不到一键完美。粒子、精细形变、复杂的物理效果，AI 基本可以打个底，但收尾仍然需要手动精修。而且 Lottie 本身就不是很擅长粒子这类效果，这一点倒也不完全算它的锅。

在过去十几年里，动效差不多一直都是「设计师 + After Effects」的专属领域。AE 这套工具的学习曲线相当陡，工程师和独立开发者通常不会去碰。而且传统的协作链路很长，改一帧都需要设计师回到源文件改完再重新导出。直接手写 Lottie JSON，对绝大多数人来说也不现实。今天推荐的这个开源项目，可能就是一条更顺的解决方案。