diffusionstudio/lottie：用 Claude Code 或 Codex 生成可直接上线的 Lottie 动画（Text-to-Lottie）
Text-to-Lottie 是一个开源框架（技能包），让 Claude Code、Codex 或其他支持 skills 的编码代理根据文字提示词生成生产级 Lottie 动画；代理会自动搭建工作区与内置播放器，动画以 scene 形式加载并在编辑时实时更新，产物可直接作为 Lottie JSON 使用，或导入 After Effects 继续精修。
社区作者 · zZz
它解决什么问题
项目用途
Text-to-Lottie 是一个开源框架，用于配合 Claude Code / Codex 或任何支持 skills 的编码代理，生成「生产可用（production ready）」的 Lottie 动画。它把「文字描述 → 动效资产」的流程封装成一个可安装的技能：你安装技能后，直接让编码代理用 text-to-lottie 生成动画即可。
配图 1 为项目自带的 Text to Lottie 演示动图，配图 2、配图 3 为作者给出的教程演示动图，可用于直观了解生成效果。
工作原理
安装技能后，代理会搭好工作区以及内置的播放器（player）。每个动画以 scene（场景）的形式存在于一个 project（项目）中；场景会自动从 public/projects/<project>/<scene>/lottie.json 加载，并随着代理的编辑在播放器中实时更新，因此你可以实时查看、拖动时间轴（scrub）并继续细化生成的 Lottie。
提示词编写指南（Prompt guide）
- 给模型提供落地素材（Ground the model）：尽可能提供 SVG、真实世界数据或截图。动画基于具体素材时，效果会显著更好。
- 使用动效设计术语：用 ease-in、ease-out、ease-in-out 等动效设计语言来描述时序与运动。
- 像摄影师一样思考：专业动态图形常依赖镜头运动，可在提示词中加入推镜（camera push）、横移（pan）、变焦（zoom）以及类似机械臂（rig）的运动。
- 主动索要所需控件：默认输出通常只暴露一个背景色控件；若要自定义其他属性，需明确要求代理为这些属性创建控件。
- 指明 FPS 与时长：若动画需要特定帧率或长度，请在提示词中写明期望的 FPS 与总帧数。
产物的使用方式
生成的动画可以直接作为 Lottie JSON 文件使用，也可以导入 After Effects 做进一步精修。源文本给出的接入示例包括：
- Web / 原生 HTML：通过 lottie-web 播放器（
lottie.loadAnimation）加载 JSON，可设置 renderer、loop、autoplay 与 path。 - React Native：使用 React Native Skia 的 Skottie 模块渲染 Lottie，支持 iOS、Android 与 web，并可在运行时自定义动画属性、资源与排版；示例配合 reanimated 的
useDerivedValue与 SkiauseClock逐帧计算 frame。 - iOS Swift：使用 Lottie 的
LottieAnimationView，设置 frame、contentMode、loopMode 后play()。 - Android Kotlin：使用
LottieAnimationView，setAnimation(R.raw.animation)、loop(true)、playAnimation()。 - Flutter：在
pubspec.yaml中加入lottie: ^1.0.0，然后用Lottie.asset('assets/animation.json')播放。
适用对象
- 需要批量产出 Lottie 动效的动效设计师、UI/交互设计师；
- 希望在产品中内嵌轻量矢量动画的前端、iOS、Android、Flutter 与 React Native 开发者；
- 已在用 Claude Code / Codex 等支持 skills 的编码代理、想把动效生成纳入现有 Agent 工作流的团队。
许可证与待核验信息
源文本未标注许可证、版本号或运行环境要求，相关字段均填写「待核验」，请以仓库实际声明为准。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
步骤 1 · 准备环境：安装命令基于 npx，需本地具备可执行
npx 的 Node.js 环境（版本要求来源未说明，待核验）。
npx skills add diffusionstudio/lottie
- 安装技能（skill）：
- 安装完成后，在你使用的、支持 skills 的编码代理（如 Claude Code 或 Codex）中，要求它用 text-to-lottie 生成一个 Lottie 动画。
`Create a Lottie animation from the SVG path in https://github.com/JaceThings/SF-Hello/blob/main/SVG/hello-en.svg . Reveal the path with an animation that follows the natural path direction. Apply a premium apple themed gradient to the path.
Use ease-in-out timing, a transparent background, and preserve the original SVG geometry.`
- 可直接使用的示例提示词（原文）：
- 首次运行：代理会自动建立工作区与内置播放器。每个动画作为一个 scene 存放在 project 中，scene 自动从
public/projects/<project>/<scene>/lottie.json加载，并在代理编辑时于播放器中实时更新，可实时检查、拖动时间轴并继续细化。
- 常见问题与注意事项：
- 默认输出通常只暴露一个背景颜色控件；想要自定义其他属性，需要在提示词里明确要求代理创建对应控件。
- 需要特定帧率或长度时，必须在提示词中写明 FPS 与总帧数。
- 提供 SVG、真实数据或截图作为素材，生成效果会显著更好。
- 描述运动与节奏时使用 ease-in、ease-out、ease-in-out 等动效术语。
- 如需镜头感，可在提示词中加入推镜、横移、变焦等运镜描述。
- 安装失败排查、Node 版本要求、依赖清单：来源未说明，待核验。
