diffusionstudio/lottie — 用 Claude Code 生成生产级 Lottie 动画

原文来源：diffusionstudio/lottie on GitHub — 一个让 Claude Code 或 Codex 根据自然语言描述生成生产级 Lottie 动画的开源工具，发布后迅速在 GitHub 上获得超过 2000 星。

Lottie 动画在 UI 设计中几乎无处不在——加载动画、图标过渡、欢迎动效、微交互。但制作 Lottie 动画通常需要设计师用 After Effects 一帧一帧地调，然后通过 Bodymovin 插件导出 JSON 文件。这个过程既耗时又需要专业技能。

diffusionstudio/lottie 用完全不同的方式解决了这个问题：让 AI 编码代理直接生成 Lottie JSON。

它是怎么工作的

这个项目的思路非常直接。它不是一个独立的图形工具，而是一个为 Claude Code 和 OpenAI Codex 设计的"技能包"（Skill）。你只需要用自然语言描述你想要的动画效果，AI 编码代理就能直接输出一个完整的 Lottie JSON 文件。

举个例子，如果你说：

"生成一个加载动画，一个圆环在旋转，颜色渐变为蓝色"

AI 代理会理解你的意图，生成符合 Lottie 规范的 JSON 动画文件，包含正确的关键帧、贝塞尔曲线、透明度变化和时间轴设置。你可以直接把这个 JSON 文件拖入任何支持 Lottie 的前端项目中——React、Vue、Flutter、iOS、Android，都能渲染。

—— 广告 ——

对于独立开发者来说，这个工具最吸引人的地方不是"它能生成动画"，而是它如何嵌入现有的开发工作流。

传统流程：写代码 → 找设计师 → 等设计稿 → 导出 JSON → 集成到前端。

新的流程：写代码 → 在终端里描述动画 → AI 生成 JSON → 直接使用。

这不仅仅是省去了沟通成本。对于没有设计师的独立开发者来说，它意味着原本需要外包或直接用 CSS 硬写的动画方案，现在有了一个更专业的替代品。

Lottie 格式本身非常复杂。一个简单的形变动画就需要精确的锚点坐标、贝塞尔控制点、时间缓动函数、多层合成等参数。手动编写 Lottie JSON 几乎是不可能的——这也是为什么长期以来只有 After Effects + Bodymovin 这一种生产路径。

diffusionstudio/lottie 背后实际上是一个精心设计的提示词（Prompt）工程工作，它教会了 Claude Code 和 Codex 如何理解 Lottie 规范并输出有效的 JSON。这包括：

当然，目前这个工具并非万能。和 After Effects 人工制作的动画相比，AI 生成的 Lottie 在复杂场景下还不够精致——比如多角色动画、复杂的粒子效果、精确到帧的节奏控制。

但它的价值和定位很明确：替代那些简单但频繁的动画需求——加载指示器、按钮反馈、图标过渡、简单的品牌动效。这些场景占了日常开发中 80% 的动画需求，而 AI 生成的质量已经完全够用。

如果你的产品是一款 App 或 Web 应用，动画质量直接影响用户对"精致度"的第一印象。但这个需求往往排在功能开发之后，因为你没有设计师资源。

diffusionstudio/lottie 提供了一个可行的中间方案：不需要设计师，不需要学 After Effects，只需要把需求描述清楚，AI 就能帮你生成可用的动画资源。它不是设计师的替代品，但对于独立开发者来说，足够好的动画总比没有动画好。

这个项目的迅速走红（几天内 2000+ 星）也从侧面证明了：AI 辅助从"写代码"延伸到"做设计"的需求是真实存在的。未来可能有更多类似工具出现，覆盖 Lottie 之外的设计输出——SVG 插图、UI 动效原型、品牌素材生成等等。