Text-to-Lottie：让 Claude Code 先做轻量动效草稿，再自己看帧修正

Lottie 的本质不是“一个好看的动效格式”，而是把矢量动画拆成了可描述、可版本控制、可跨端复用的 JSON。它小、轻、可控，所以一度成了移动端和 Web 做微动效的默认路线。但真正难的，从来不是知道 Lottie 存在，而是把“设计师做动效”这件事变成工程师和 Agent 也能稳定完成的工作流。

这篇文章讲的 Text-to-Lottie，解决的正是这个问题。它不是再造一个剪辑软件，而是把 Lottie 生成、预览、修正、检查这条链路，打包成 Claude Code 这类 coding agent 能直接调用的技能。对实际落地来说，这比“让 AI 直接吐一段 JSON”要靠谱得多。

为什么 AI 生成 Lottie 以前总差一口气

传统 Lottie 流程是：设计师在 After Effects 里做动画，再用 Bodymovin 导出 JSON，开发把 JSON 接进页面。这个链路之所以稳定，是因为每一步都有明确的工具边界和可视化反馈。但它也很重，尤其当需求只是一个 loading、一个 logo reveal、一个空状态插画，反复来回沟通的成本很高。

如果直接让模型写 JSON，另一个问题马上出现：模型写出来的东西你很难知道能不能播、播出来像什么、哪里出了问题。AI 没有自己的视觉反馈闭环，就只能靠人肉截图、人工修改、重新生成。结果是“写得快，改得慢”。

Text-to-Lottie 把闭环补上了

它的关键不是模型本身，而是把模型放进了一个能看、能改、能复查的工作台里。README 里给出的安装方式很直接：先用 `npx skills add diffusionstudio/lottie` 把 skill 装进 Claude Code 或其他 coding agent，然后用自然语言描述你要的动画。

这一步很重要，因为它把动画生成从“通用 prompt”升级成了“任务型技能”。Agent 不需要理解整个 Lottie 生态，只需要在这个 skill 提供的约束里完成任务：输入 SVG、设定时间、指定 easing、控制渐变和透明背景，然后输出一个可播放的项目。

播放器和 /__context 才是最值钱的部分

这类项目最容易被误解成“一个生成器”。其实真正的价值在播放器：生成完的动画并不是躺在文件系统里等人手动打开，而是直接进一个本地预览环境，Scene 会自动加载，改动实时热更新。对 Agent 来说，这意味着它可以一边写，一边看。

更进一步，播放器还暴露了 `/__context` 端点，Agent 可以直接读取当前场景、第几帧、总帧数等状态。这是一个很实用的设计，因为它让模型第一次拥有了动画输出的机器可读反馈，而不是只能依赖用户截屏描述。

可以像设计师那样逐帧看，而不是盲写

Text-to-Lottie 的另一个细节是允许通过 URL 参数锁定帧，比如跳到第 60 帧并暂停。这个功能看起来小，但对动效调试非常有用。它把“这个画面在这个时刻对不对”变成了可重复检查的问题，而不是只靠一整段播放结果凭感觉判断。

再加上 live reload，Agent 改完 `lottie.json` 之后页面会马上刷新。这让模型的工作方式从“提交后看结果”变成“边改边看”。一旦有了这种短反馈回路，生成质量通常会明显高于一次性出稿。

官方 prompt 心法其实很务实

README 里给了五条提示词建议，我觉得都很接地气：

先给真实素材，不要只说“做一个高级一点的动效”。
用动效术语，比如 ease-in、ease-out、ease-in-out。
像摄影师一样描述推、拉、摇、移、变焦。
明确要哪些控制项，不要默认值把可调参数全吞掉。
写清 FPS 和时长，不然时间感会漂。

这几条其实都在说明同一件事：AI 不擅长猜边界，擅长执行边界。你把约束说清楚，它就更像一个靠谱的动效初稿机器；你只说“帮我做得漂亮一点”，它就容易跑偏。

它适合什么，不适合什么

Text-to-Lottie 很适合做三类东西：品牌启动动画、产品空状态、简单的引导动效。它也适合把 SVG、logo、图标、短句子变成带节奏的微动效。但它不是粒子引擎，也不是复杂物理模拟器。复杂变形、精细交互、重型视觉特效，AI 可以打底，最后还是要人收尾。

这不是缺点，而是边界。Lottie 本身也不是为粒子烟花这种东西设计的。它的强项一直是轻量、可控、可跨端，而不是炫技。

为什么这类项目值得关注

过去很多动效工具都把重心放在“编辑器更强”上，但对 Agent 时代来说，更重要的是“能不能被脚本化、能不能被验证、能不能闭环”。Text-to-Lottie 的方向就很清楚：让动画生成像写代码一样可控，让检查像跑测试一样可重复。

如果你做的是产品页面、演示页、工具站，或者任何需要大量轻量动效的场景，这类 skill 的价值会比“又一个模板库”高得多。因为它不是只给你结果，而是给你一条以后还可以继续复用的生产线。

我的判断很简单：Text-to-Lottie 不是把 AI 拉去替代设计师，而是把小动效这类重复度很高、反馈周期很短的工作，先变成可以被 Agent 稳定接手的工程任务。这个方向对前端、设计系统和内容制作都会越来越有用。