教你用一句话让Claude Code生成轻量动画动效

首先介绍一下背景，Lottie 是由 Airbnb 开源的一套工具。其本质是一份描述矢量动效的 JSON 文件。

由于以下优点，如今无论是移动端还是 Web 端，制作小型动画时开发者通常优先选用 Lottie：

• 文件体积小，一个 loading 动画仅需几 KB 到几十 KB
• 基于矢量绘制，任意缩放均不模糊
• 一份 JSON 文件可跨平台通用，iOS、Android、Web 均能直接渲染
• 支持代码控制：暂停、倒放、绑定滚动条、响应点击等交互操作

日常使用 App 时常见的启动动画、点赞爱心、下拉刷新小人、空状态插画等，十有八九都基于 Lottie 实现。尤其在海外应用中，它几乎成为标配。

但说实话，真正将其投入实际应用，门槛并不低。

传统的标准流程是：设计师首先在 After Effects 中制作动效，然后通过 Bodymovin 插件导出 JSON，最后开发人员将 JSON 集成到代码中。流程冗长，沟通成本居高不下。

进入 AI 时代后，业界共同思考一个问题：如何让 AI 直接生成基于 Lottie 的动画效果？

今天要介绍的这个开源项目，正是为了攻克这一难题而诞生。

01. Text-to-Lottie 是什么

这个开源项目由 diffusionstudio （YC F24 批次的公司）开发。项目本身的名称也是 Lottie，但对外更常用的称呼是 Text-to-Lottie。

其核心目标是让 AI Agent（如 Claude Code、Codex 等工具）能够生成可直接用于生产环境的 Lottie 动效。

经过几次测试，效果确实出来了，不过部分细节仍可见瑕疵，这可能与我随意选用的 SVG 素材也有关。

随后又测试了一个提示词：“用 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 修改完动效后，可以自行锁定某一帧查看效果，不满意再调整，如同设计师手动审稿般自然。

文件变动实时重载

Agent 修改 lottie.json 后，浏览器会立刻刷新，迭代闭环极短。

这套机制组合起来，将 AI 从“盲写”转变为“看着写”，生成质量自然得以提升。

03. 官方提示词五条心法

项目的 README 文件中提供了五条实用的提示词建议，现直接列出供参考：

以真实素材为基础
能够提供 SVG、数据或截图时，尽量提供具体素材。AI 基于实际素材生成的效果会显著更好。

使用动效专业术语
使用 ease-in、ease-out、ease-in-out 等术语，AI 能够准确理解。避免仅说“自然一点”这类模糊描述。

像摄影师一样思考
专业动效常常依赖镜头运动。将推、拉、摇、移、变焦等动作写入提示词中，AI 会利用 group 变换来模拟实现。

明确声明所需控制项
默认生成的动画通常只暴露背景色一个控制参数。如果需要颜色、大小、透明度等均可调节，请直接在提示词中明确说明。

指定帧率与总帧数
若需要特定时长或帧率，请明确写出。例如：“60 FPS，3 秒”。

复杂动效仍需手动调优

必须承认，AI 目前还无法做到一键完美。对于粒子、精细形变、复杂物理动效等，AI 可以帮你打好基础，但最终调整仍需手动完成。话说回来，Lottie 本身也不擅长粒子这类效果，因此这并非它的不足。

过去十几年，动效制作基本是“设计师 + After Effects”的专属领域。AE 工具的学习曲线较为陡峭，工程师和独立开发者通常较少涉及。此外，协作链路过长，每次修改一帧都需要设计师回到源文件进行修改并重新导出。手动编写 Lottie JSON 更是不切实际。

个人认为，今天推荐的这一开源项目，或许是现阶段一个相当可行的解决方案。