用一句话生成 Lottie 动效：这个开源 Skill 让 AI 编程助手直接产出可播放动画

📅 2026年06月09日 · 技术

一句话说清楚：这是什么

diffusionstudio/lottie 是一个开源项目，它把 Lottie 动画生成包装成了一个可被 AI 编程代理（Claude Code、Codex 等）直接调用的 Skill。你只需要用自然语言描述想要的动画效果，代理就能输出一个可以直接播放的 lottie.json 文件，并且实时在浏览器里预览。

换句话说：不会 AE、不会画动效，也能让 AI 帮你做 Lottie 动画。

它是怎么工作的

底层使用 Skia CanvasKit（Skottie）作为渲染引擎，保证在浏览器里就能跑 Lottie。
前端是一个 React + shadcn/ui + TypeScript 的控制面板。
开发时只要把 lottie.json 丢到 public/ 目录下，dev server 会自动热更新。
CanvasKit 的 wasm 二进制不会被提交到仓库，而是在 npm install 阶段由 postinstall 脚本自动拷贝。

为什么要关注它

对于独立开发者或小团队，Lottie 动效往往是「知道好、但做不出来」的一环。过去要么找设计师，要么在 LottieFiles 上淘现成素材。现在只要你会打字，AI 就能根据描述直接给你一个可用文件，并且整个流程都在本地跑，不依赖任何云服务。

这种「把设计能力塞进代码代理」的思路，正是 Agent Skill 生态最有意思的方向——原本需要专业工具链的产出，正在被自然语言接口一点点吃掉。

快速试用

一行命令安装 Skill：

npx skills add diffusionstudio/lottie

然后在你的代理里让它生成一个动画即可。想手动体验也可以 npm install && npm run dev。

参考来源

diffusionstudio/lottie — GitHub