Text-to-Lottie：用 AI 编程代理生成专业级 Lottie 动画

做前端的都知道，Lottie 动画是个好东西——矢量、跨平台、文件小、效果好。但做 Lottie 动画的门槛一直不低：要么会 After Effects + Bodymovin 插件，要么手写几百行 JSON 关键帧。现在有个项目说：你只需要用自然语言描述想要的动画，AI 编程代理就能帮你生成生产级的 Lottie 文件。

这就是 Text-to-Lottie，一个由 YC F24 孵化、13 天内拿到 3300+ 星标的开源框架。

一、它解决了什么问题

Lottie 是 Airbnb 在 2017 年开源的动画格式，基于 JSON 描述矢量动画，能在 Web、iOS、Android、React Native、Flutter 等平台原生渲染。它比 GIF 清晰、比 MP4 轻量、比 CSS 动画强大，是移动端和 Web 动效的事实标准。

但制作 Lottie 动画的传统路径是这样的：

1. 设计师在 After Effects 里做动画
2. 用 Bodymovin 插件导出为 JSON
3. 开发者集成到代码里

问题在于：After Effects 是付费软件，学习曲线陡峭，而且设计师和开发者之间总有沟通损耗。对于简单的 loading 动画、图标动效、过渡动画来说，这个流程太重了。

Text-to-Lottie 的思路完全不同——让 AI 编程代理（Claude Code、Codex 等）直接读取一个 SKILL.md 文件，然后根据你的自然语言描述生成完整的 Lottie JSON。不需要 After Effects，不需要设计师，甚至不需要你懂 Lottie 的 JSON 规范。

二、架构：Skill + Player + Slots

Text-to-Lottie 的架构分三层：

2.1 SKILL.md——给 AI 的「教材」

这是整个项目最巧妙的设计。skills/text-to-lottie/SKILL.md 是一份 14KB 的详细文档，告诉 AI 编程代理：

• Lottie JSON 的完整格式规范（版本号、帧率、图层类型、形状定义、关键帧结构）
• 如何创建项目和场景的文件夹结构
• 如何使用 Slots 系统暴露可编辑属性
• 如何验证生成的动画（截图三帧：起始、中间、结束）
• 最佳实践（缓动曲线、运动设计术语、相机运动）

你不需要理解这些技术细节——AI 代理会读取 SKILL.md 并按照规范生成代码。这就像给一个聪明的新员工一份详细的操作手册。

2.2 Skia Skottie 播放器——实时预览

项目自带一个基于 SolidJS + CanvasKit（Skia 的 WebAssembly 版本）的本地播放器。安装方式：

1
2
3
4

npx degit diffusionstudio/lottie my-animation
cd my-animation
npm install
npm run dev

播放器默认在 http://localhost:3030 启动。AI 代理生成的每个动画都是一个「场景」，存放在 public/projects/<project>/<scene>/lottie.json。播放器会自动扫描文件夹、实时加载新场景，编辑 JSON 后刷新即可看到效果。

关键特性：

• 用 Skia Skottie 而不是 lottie-web 渲染——性能更好，支持更多 Lottie 特性
• 支持 ?frame=N URL 参数跳转到指定帧，方便截图验证
• /__context API 端点返回当前播放状态，AI 代理可以程序化检查渲染结果

2.3 Slots——让动画可配置

这是 Text-to-Lottie 区别于「手写 JSON」的核心能力。通过 Slots 系统，你可以在 Lottie JSON 中声明可编辑的属性：

1
2
3
4
5
6

{
  "slots": {
    "ballColor": { "p": { "a": 0, "k": [0.231, 0.6, 1, 1] } },
    "ballSize": { "p": { "a": 0, "k": 120 } }
  }
}

播放器会自动识别这些 Slots，渲染出对应的控件（颜色选择器、滑块、文本输入框）。用户拖动滑块，动画实时变化，修改还会写回磁盘上的 JSON 文件。

这意味着生成的动画不只是「一次性」的——它可以被设计师和开发者后续调整，而不需要重新生成。

三、实际使用体验

3.1 安装 Skill

1

npx skills add diffusionstudio/lottie

这条命令把 SKILL.md 安装到你的 AI 编程代理的技能目录里。之后，任何支持 Skills 的代理（Claude Code、Codex、Cursor 等）都能使用 Text-to-Lottie。

3.2 生成动画

给 AI 代理一个提示词就行：

创建一个 Lottie 动画：一个圆形 loading 指示器，三个点依次弹跳，使用品牌蓝色（#3B82F6），ease-in-out 缓动，透明背景，60fps，总共 90 帧。

AI 代理会：

1. 读取 SKILL.md 了解 Lottie 规范
2. 创建项目文件夹结构
3. 生成 lottie.json（包含图层、形状、关键帧、缓动曲线）
4. 启动本地播放器
5. 截图验证动画效果
6. 如果有问题，自动修复并重新验证

整个过程不需要你写一行 JSON。

3.3 Demo 效果

这些动画都是 AI 代理生成的，没有经过人工修改。可以看到，效果已经相当专业——有合理的缓动曲线、图层分组、形状变换。

四、技术栈解析

选择 Skia Skottie 而不是 lottie-web 是个关键决策。lottie-web 是社区维护的 JavaScript 渲染器，功能够用但性能一般。Skottie 是 Skia（Chrome、Android 的底层图形引擎）的 Lottie 实现，渲染速度快、兼容性好，而且通过 WebAssembly 直接在浏览器里跑。

五、跨平台导出

生成的 Lottie JSON 文件是标准格式，可以直接用在：

• Web：通过 lottie-web 或 Skia 的 Web 版本渲染
• React Native：用 lottie-react-native 或 React Native Skia 的 Skottie 模块
• iOS：用 lottie-ios（Airbnb 官方库）
• Android：用 lottie-android（Airbnb 官方库）
• Flutter：用 lottie Dart 包
• After Effects：可以导回 AE 继续编辑

一个 AI 生成的动画，多端通用，不需要为每个平台重新制作。

六、Prompt 写作指南

Text-to-Lottie 的效果很大程度上取决于你的提示词质量。官方建议：

1. 提供具体素材：给 SVG 路径、截图或真实数据，比纯文字描述效果好得多
2. 用运动设计术语：ease-in、ease-out、ease-in-out、bounce、elastic 等
3. 像摄影师一样思考：描述相机运动——推进、平移、缩放
4. 明确说出你要的控件：默认只有背景色控件，想要其他属性可调要在 prompt 里说
5. 指定帧率和时长：如 60fps、90 帧、循环播放

一个好 prompt 的例子：

基于这个 SVG logo（附链接），创建一个品牌展示动画：logo 从中心放大弹出（elastic ease-out，30 帧），然后轻微旋转摆动（sine ease-in-out，60 帧）。背景使用深蓝色渐变，暴露背景色和旋转幅度为可调参数。60fps，透明背景。

七、局限性

Text-to-Lottie 虽然强大，但目前有几个明显的边界：

对 AI 编程代理有依赖。你需要有 Claude Code、Codex 或其他支持 Skills 的代理，且代理的能力直接影响生成质量。Opus 4 级别的模型效果最好。

复杂动画仍需人工调整。AI 能生成 80% 的效果，但精确的运动曲线、微妙的时间节奏、复杂的图层交互可能还需要微调 JSON 或导回 After Effects。

没有可视化编辑器。整个流程是「文字描述 → JSON → 预览」，不能像 AE 邙样拖拽关键帧。对于习惯可视化操作的设计师来说，学习曲线存在。

GIF 导出需要额外工具。项目自带的 gen_video CLI 可以导出 MP4，但 GIF 需要额外转换。

CanvasKit WASM 文件较大。首次加载需要下载 Skia 的 WebAssembly 文件（约 8MB），对首屏性能有影响。

八、与同类项目的对比

在 AI 生成动画这个赛道上，Text-to-Lottie 并不是唯一的玩家。但它的定位很独特：

Text-to-Lottie 的核心优势是：它不是一个独立的动画编辑器，而是嵌入到你已有的 AI 编程工作流中。你不需要切换工具，不需要学习新软件，就在终端里完成一切。

九、社区生态

项目创建仅 13 天，已经有了相当活跃的社区：

• 3.3k 星标、177 个 Fork——增长速度惊人
• React Native Skia 支持由知名开发者 William Candillon（React Native Skia 教程作者）贡献
• 多个 AI 技能注册表收录：包括 Claude Code skill registry、soma-work 等
• 中文社区覆盖：已有深度调研文档出现在 BANG644/project-collection 等仓库
• YC F24 孵化：背后有 Y Combinator 的支持

项目的维护者 k9p5（Konstantin Paulus）迭代很快——13 天内已经完成了一次「solid rewrite」（从基础框架重写为 SolidJS），并合并了社区的代码审计修复。

十、总结

Text-to-Lottie 代表了一种新的开发范式：不是用 AI 替代设计师，而是用 AI 编程代理把专业工具的门槛降到零。你不需要学 After Effects，不需要理解 Lottie 的 JSON 规范，只需要用自然语言描述你想要的动画效果。

对于前端开发者来说，这意味着：以前需要等设计师交付的动效资源，现在可以自己生成。对于独立开发者来说，这意味着：一个人也能做出专业级的动效体验。

当然，AI 生成的动画还不能完全替代设计师的审美判断和精细调校。但对于 80% 的常见场景——loading 动画、图标动效、页面过渡、品牌展示——Text-to-Lottie 已经够用了。

相关链接：

• GitHub 仓库
• Lottie 格式规范
• CanvasKit (Skia) 文档
• Bodymovin 插件