Diffusion Studio Text-to-Lottie

1. 项目概览

2. 关键示意图

Text-to-Lottie 总览

README 首图强调它的核心交互：从自然语言/素材描述出发，让 coding agent 生成 Lottie 动画，并在本地播放器里实时查看和迭代。

官方生成示例

这两张官方 GIF 适合给客户展示“文本到动效”的直观效果：它生成的不是静态图片，而是可用于 Web、移动端和跨端 UI 的 Lottie JSON。

本地播放器界面截图

本地播放器提供项目/场景管理、播放/暂停、时间轴、帧定位、缩放、属性控制和导出入口。Agent 修改 lottie.json 后，播放器可以实时刷新，方便审查动效质量。

3. 它到底是什么

这个项目可以拆成两部分理解：

因此，它更像“AI 动效生产工作台”，而不是一个 npm 动画运行时。用户通过 npx skills add diffusionstudio/lottie 安装 skill 后，可以让 Agent 根据 prompt、SVG、截图或真实数据生成 Lottie JSON；生成结果落在本地项目的：

public/projects///lottie.json

播放器会自动发现这些 scene，并在 UI 中显示、播放、定位帧、修改 slots 和导出。

4. 它主要能做什么

5. 核心工作流

关键点在于：它不鼓励 Agent 只输出一段孤立 JSON，而是要求在官方 player 中验证。skill 文档明确要求检查 frame 0、中点、op - 1，确认不空白、不裁切、不丢素材、不错误分层、不出现糟糕 easing。

6. 技术架构和实现要点

6.1 Player 结构

6.2 Scene 文件约定

public/
  canvaskit.wasm
  projects/
    /
      /
        lottie.json
        controls.json
        

Scene 路由形式：

http://localhost://?frame=

这对 Agent 很重要：它可以生成动画后固定到某一帧检查画面，而不是只靠抽象 JSON 结构判断。

6.3 Skill 的专业动效知识库

text-to-lottie skill 不是简单提示词，而是一套动效生产规范。它把不同需求路由到不同 recipe：

这意味着它的优势不是“能写 JSON”，而是把 motion design、Lottie spec、Skottie 兼容性、验证流程封装成 Agent 可执行的技能。

7. 怎么用

7.1 安装 skill

README 提供的 Quick Start：

npx skills add diffusionstudio/lottie

然后向 coding agent 提示：

Create a Lottie animation from the SVG path in ...
Reveal the path with an animation that follows the natural path direction.
Apply a premium apple themed gradient...

7.2 本地 player 项目

如果缺少 player 项目，skill 的 player contract 建议：

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

本地 dev server 默认端口 3030，但以 Vite 实际打印的端口为准。

7.3 Web 使用生成动画

7.4 React Native / iOS / Android / Flutter

README 中给了多端接入示例：

这对售前很有价值：生成物是标准 Lottie JSON，可进入客户现有移动端、Web 端、跨端 App 的动效管线。

8. 适用场景

8.1 产品和品牌动效

适合 Logo reveal、品牌 loading、启动页、功能发布动效、社交媒体宣传短动画。相比传统 After Effects 制作，AI 生成可以更快产出多个方向，用于前期比稿和售前演示。

8.2 SaaS / App UI 微交互

适合成功/失败反馈、空状态、加载中、按钮点击反馈、状态切换等轻量动效。客户最容易感知的是“产品显得更高级、更有反馈感”。

8.3 售前方案可视化

技术架构、数据流、Agent 工作流、指标增长、产品旅程都可以做成 Lottie 动画，嵌入网页、PPT、移动端或 demo 页面。

8.4 设计系统动效资产库

对于有设计系统的客户，可以用它批量生成/迭代一组统一风格的 Lottie 资产，并通过 slots 暴露颜色、尺寸、速度等参数。

8.5 Agent Skill 示例和内部赋能

这个项目本身也是一个 Agent Skill 的优秀样例：它展示了如何把专业领域知识、文件约定、验证流程、质量标准封装成 skill。对客户讲 Agent 平台时，可用它说明“技能不是 prompt，而是可执行工作流和专业规范”。

9. 不太适合的场景

10. 售前可以怎么讲

面向业务方

面向技术方

11. PoC 建议

11.1 推荐 PoC 主题

11.2 PoC 执行步骤

1. 选 3-5 个高价值动效场景，不要一开始覆盖所有品牌素材。
2. 准备 SVG、品牌色、字体、参考截图、动效节奏要求。
3. 用 npx skills add diffusionstudio/lottie 安装 skill。
4. 启动本地 player，生成 scene 并在 Skottie 中检查帧。
5. 导出 Lottie JSON，在目标端 Web / App / Flutter / React Native 做真实渲染验证。
6. 记录修改轮次、生成时间、人工修正点、文件大小、端上性能。

11.3 验收指标示例

12. 风险和注意事项

13. 我的售前判断

diffusionstudio/lottie 的价值在于它把“AI 编码 Agent”从写代码扩展到了动效生产：不是让模型直接吐一段 JSON 就结束，而是给它一个明确的项目结构、Skottie 播放器、场景约定、质量标准和动效 recipe。这种做法比普通 prompt 更接近可交付工作流。

对售前来说，它适合用来讲两个方向：

1. 面向客户业务：快速生成产品动效、营销动效、UI 微交互、技术方案动画，提升演示材料和产品体验。
2. 面向客户技术团队：展示 Agent Skill 如何把专业知识和验证流程封装起来，让 Agent 做更复杂、更可控的专业任务。

它不适合承诺“完全替代动效设计师”。更稳妥的定位是：用于快速出稿、快速迭代、低成本验证方向；最终精品交付仍应由设计师和前端工程师做审美、品牌和端上兼容性把关。

14. 常见客户 Q&A

15. 参考资料

• GitHub：diffusionstudio/lottie
• Skills 安装命令说明：README Quick Start
• Diffusion Studio 官网
• Lottie Web
• React Native Lottie
• React Native Skia Skottie
• Lottie 官方规范