meng shao@shao__meng · X让 Agent 写出能直接渲染的 Lottie JSON，这套 Skill + Harness 把生成到验收的链路打得很完整，前端和做动效的都可以直接试。
开源项目 Text-To-Lottie 提供一套 Agent Skill 和本地预览工具，让 Codex/Claude Code/Cursor 等 Agent 生成标准 Bodymovin JSON（public/lottie.json），通过 Skottie 渲染引擎在浏览器中实时验收。安装命令：`npx skills add diffusionstudio/lottie`。技术特点：输出标准 Lottie JSON，使用 Skottie 渲染（非 lottie-web）；基于 Vite 热重载实现自动刷新闭环；支持通过 Skottie Slots + controls.json 调整颜色、尺寸；Agent 可用 URL 参数 `?frame=60&paused=1` 精确定位帧截图。Prompt 指南包括：给具体素材、使用动效术语、pan/zoom/hold 模拟镜头、显式声明 Slots、锁定时间规格。适合单场景短时长 Motion Graphics、SVG→Lottie、数据可视化、透明背景矢量动效；不适合多镜头剪辑、复杂角色绑定、粒子、3D 或需 lottie-web 全特性的场景。
Text-To-Lottie： 一套 「Agent Skill + 本地预览 Harness」 的组合，让 Agent 生成 Lottie，在浏览器里实时验收
开源作者 @konstipaulus ，开源地址： https：//github.com/diffusionstudio/lottie 安装方式：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 子集有差异