做动效设计或前端开发的团队，终于可以让 AI 直接生成可用的 Lottie 动画并实时预览，省去手动调试的麻烦。建议试试这个开源工具，尤其适合需要透明背景、矢量、可嵌入 UI 的动效场景。
Text-To-Lottie 是一套开源工具组合，包含一个 Agent Skill 和一个本地预览 Harness。Skill 教 Codex、Claude Code、Cursor 等 AI 编程助手如何生成符合 Skottie 渲染标准的 Lottie JSON 动画；Harness 基于 Skia CanvasKit 和 React，提供全屏播放器和控制面板，Agent 写入文件后 Vite 热重载即可在浏览器中实时预览。作者还给出了五条 Prompt 指南，帮助用户提升生成质量。该项目适合单场景短时长 Motion Graphics、SVG 转 Lottie、数据可视化动效等场景，但不适合多镜头剪辑或复杂角色绑定。
Text-To-Lottie: 一套 「Agent Skill + 本地预览 Harness」 的组合，让 Agent 生成 Lottie，在浏览器里实时验收 开源作者 @konstipaulus ...
Text-To-Lottie: 一套 「Agent Skill + 本地预览 Harness」 的组合，让 Agent 生成 Lottie，在浏览器里实时验收 开源作者 @konstipaulus ，开源地址： github.com/diffusionstudi… 安装方式：npx skills add diffusionstudio/lottie Skill：教 Codex / Claude Code / Cursor 等 Agent 如何写出 Skottie 可渲染的 Lottie JSON Harness：基于 Skia CanvasKit（Skottie）的全屏播放器 + React 控制面板，Agent 写入 public/lottie.json 后 Vite 热重载，立刻可见 技术架构 · 输出物：标准 Bodymovin JSON（public/lottie.json） · 渲染引擎：Skottie（非 lottie-web）—— 与 AE 导出路径更接近，也更适合程序化生成 · 预览闭环：写文件 → 保存 → 页面自动刷新 → 肉眼验收 · 可编辑性：Skottie Slots + controls.json，实时调颜色、尺寸等参数 · Agent 验收：URL 参数 ?frame=60&paused=1 精确定位帧，截图比对，不靠拖进度条 作者给的五条 Prompt 指南 1. 给具体素材：SVG、真实数据、截图；抽象描述质量明显下降 2. 用动效术语：ease-in / ease-out / ease-in-out，对应 Lottie 关键帧贝塞尔手柄 3. 像摄影师思考：pan / zoom / hold—— 用父级 Group 的 transform 模拟镜头 4. 声明需要的控件：默认只有背景色；颜色、描边宽度等需显式要求 Slots 5. 锁定时间规格：如「150 帧、30 FPS」= 5 秒成片，避免 Agent 随意猜时长 适用 / 不适用 1. 适合： · 单场景、短时长 Motion Graphics · SVG → Lottie（Figma 导出路径） · 数据可视化动效（K 线、图表、指标） · 需要透明背景、矢量、可嵌入 UI 的动效 2. 不适合： · 多镜头剪辑、音视频合成 → 用 Remotion · 复杂角色绑定、粒子、3D → AE 手工或专用工具更合适 · 需要 lottie-web 全特性兼容时 → Skottie 子集有差异 konstantinpaulus @konstipaulus Introducing text-to-lottie: an open source skill and harness for generating production ready Lottie animations with codex/claude code. $ npx skills add diffusionstudio/lottie Prompts guide and repo in the comments. Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 0 🔄 0 ❤️ 8 👀 306 📊 2 ⚡