# Text-To-Lottie：Agent Skill + 本地预览 Harness，让 Agent 生成 Lottie 动画并实时验收

- 来源：meng shao (@shao__meng)
- 发布时间：2026-06-10 08:42
- AIHOT 分数：77
- AIHOT 标记：精选
- AIHOT 链接：https://aihot.virxact.com/items/cmq7cnl4q01x0sl5w2itvprtz
- 原文链接：https://x.com/shao__meng/status/2064508455051043008

## 精选理由

让 Agent 写出能直接渲染的 Lottie JSON，这套 Skill + Harness 把生成到验收的链路打得很完整，前端和做动效的都可以直接试。

## AI 摘要

开源项目 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」的组合，让 AI 智能体生成 Lottie，在浏览器里实时验收。

开源作者 @konstipaulus，开源地址： https://github.com/diffusionstudio/lottie 安装方式：npx skills add diffusionstudio/lottie

这个 Skill 教 Codex / Claude Code / Cursor 等 AI 智能体如何写出 Skottie 可渲染的 Lottie JSON。

Harness：基于 Skia CanvasKit（Skottie）的全屏播放器 + React 控制面板，AI 智能体写入 public/lottie.json 后 Vite 热重载，立刻可见。

技术架构： · 输出物：标准 Bodymovin JSON（public/lottie.json） · 渲染引擎：Skottie（非 lottie-web）—— 与 AE 导出路径更接近，也更适合程序化生成 · 预览闭环：写文件 → 保存 → 页面自动刷新 → 肉眼验收 · 可编辑性：Skottie Slots + controls.json，实时调颜色、尺寸等参数 · AI 智能体验收：URL 参数 ?frame=60&paused=1 精确定位帧，截图比对，不靠拖进度条

作者给的五条提示词指南： 1. 给具体素材：SVG、真实数据、截图；抽象描述质量明显下降 2. 用动效术语：ease-in / ease-out / ease-in-out，对应 Lottie 关键帧贝塞尔手柄 3. 像摄影师思考：pan / zoom / hold—— 用父级 Group 的 transform 模拟镜头 4. 声明需要的控件：默认只有背景色；颜色、描边宽度等需显式要求 Slots 5. 锁定时间规格：如「150 帧、30 FPS」= 5 秒成片，避免 AI 智能体随意猜时长

适用 / 不适用： 1. 适合： · 单场景、短时长 Motion Graphics · SVG → Lottie（Figma 导出路径） · 数据可视化动效（K 线、图表、指标） · 需要透明背景、矢量、可嵌入 UI 的动效

2. 不适合： · 多镜头剪辑、音视频合成 → 用 Remotion · 复杂角色绑定、粒子、3D → AE 手工或专用工具更合适 · 需要 lottie-web 全特性兼容时 → Skottie 子集有差异

### 引用推文

> konstantinpaulus：Introducing text-to-lottie: an open source skill and harness for generating production ready Lottie animations with codex/claude code. $ npx skills add diffusio...