一句话生成上线级 Lottie 动效，这个 2.4k Star 的开源 Skill 解决 AI 做动效的最大痛点

一句话生成上线级 Lottie 动效，这个 2.4k Star 的开源 Skill 解决 AI 做动效的最大痛点

你有没有过这种经历：想让 AI 帮你做个加载动画、Logo 入场、或者 H5 动效，结果它给你吐出来的要么是代码残缺到不能跑，要么是动效僵硬得像 90 年代 PPT。

最近挖到一个开源 Skill，diffusionstudio/lottie —— 它是 YC 投资的 Diffusion Studio 出品的，专门为 Claude Code / Codex / Cursor 设计的 Lottie 动画生成框架。

最让我惊艳的不是它”能生成动效”，而是它解决了 AI 做动效的三个核心死结：

1. 输出格式可被机械验证

Lottie 是 JSON，不是像素。AI 写代码最擅长的就是结构化输出，而 Lottie 的核心元素就 20-30 种。这 Skill 在 SKILL.md 里把每一种 shape 的坑、必填字段、易错模式全部列出来，配上交付前的硬性检查清单。AI 不再”猜”动效，而是按 spec 写。

2. 实时热重载预览

Agent 写完 public/lottie.json，浏览器秒刷，设计师可以拖时间轴逐帧看。这套播放器底层是 Skia CanvasKit，跟 Telegram 是同一套渲染器。什么意思？本地看到什么样，线上就什么样，没有”在我电脑上是好的”这种扯皮。

3. 真正的”动效语感”

这个 Skill 用 motion design 的行话教 AI 怎么动：ease-in-out、overshoot、anticipation、follow-through、camera push、rig-like motion。它甚至把”动效节奏”拆成了可读的锚点。简单的一句 “make the logo bounce in”，出来的不是 jitter 的方块，是有节奏、有层次、有镜头感的成品。

最新一次大升级还解决了”AI 配图太通用”的毛病：默认调色板换成高对比度的高级感配色，字体选择更克制，章节化动画（多段衔接）也跑通了。

几个实操玩法

• 把 SVG 一键转 Lottie：贴一个 SVG 路径，比如苹果 Logo，AI 自动给配上渐变、入场动效、缓动曲线，直接出生产级 JSON。
• 修复线上 Lottie 兼容性：很多 Skottie 渲染器拒绝的格式（错误锚点、非法 transform），丢给它就能修。
• UI 微交互批量产：loading、按钮反馈、卡片切换，一个 prompt 一组。

安装方式

npx skills add diffusionstudio/lottie

一条命令装到 Claude Code 或 Codex，然后照它 README 的 prompt 套路玩就行。

GitHub 仓库在 diffusionstudio/lottie，MIT 协议，2.4k Star，最近一个月还在密集更新。设计师+前端动效党必看。

GitHub: https://github.com/diffusionstudio/lottie