一句话让 Claude Code 生成轻量动画动效，好玩好玩。

先说个背景，Lottie 这个东西，是 Airbnb 开源出来的。本质上，它就是一份描述矢量动效的 JSON 文件。

因为下面这几个优点，现在无论是移动端还是 Web，做小动画基本都优先考虑它：

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

你日常刷 App 时看到的启动动画、点赞的爱心、下拉刷新的小人、空状态插画……十有八九都是它。尤其是国外的应用，简直标配。

以往的标准流程是：设计师在 After Effects 里把动效做出来 → 用 Bodymovin 插件导出 JSON → 开发再把 JSON 接到代码里。链条长不说，沟通成本也高。

到了 AI 时代，大家都在琢磨一件事：怎么让 AI 直接生成基于 Lottie 的动画效果？

今天要聊的这个项目，就是为了搞定这个难题。

01. Text-to-Lottie 是啥

这个开源项目来自 diffusionstudio，一家 YC F24 批次的公司。项目本身也叫 Lottie，但对外更常用的名字是

。

它的核心目标，就是让 AI Agent——比如 Claude Code、Codex 这类工具——能

。

跑了几次，效果出来了，不过有些地方还是能看到瑕疵，可能跟我随便找的 SVG 素材也有关系。

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

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

你可能会问，如果只是让 Claude 写一段 Lottie JSON 给你，那不就完了？

区别大了。直接拿 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 从“盲写”变成了“看着写”，质量自然就上来了。

03. 官方 Prompt 五条心法

项目的 README 里给了五条提示词建议，挺实用的，直接列出来给你参考：

能提供 SVG、数据、截图就别空着说。AI 基于具体素材做出来的效果好得多。

用 ease-in、ease-out、ease-in-out，AI 听得懂。别光说“自然一点”。

专业动效很多靠镜头运动。推、拉、摇、移、变焦，写进 prompt 里，AI 会用 group 变换模拟出来。

默认生成的动画通常只暴露背景色一个控制项。如果你想要颜色、大小、透明度都能调，就直接说清楚。

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

复杂动效仍需手动微调

必须承认，AI 现阶段还做不到一键完美。粒子、精细形变、复杂的物理动效，AI 能帮你打个底，但收尾还是得手动调。话说回来，Lottie 本身也不擅长粒子这类效果，这点倒不算它的锅。

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

个人觉得，今天推荐的这个开源项目，或许就是现阶段一个挺靠谱的解法。