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

AI HOT 精选

AI HOT 精选2026年6月10日

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

8.5Score

TL;DR · AI 摘要

Text-To-Lottie 工具通过 Agent Skill 和本地预览 Harness，实现 Agent 生成 Lottie 动画并实时验收，提升开发效率。

核心要点

使用 Skottie 渲染引擎，与 AE 导出路径更接近，适合程序化生成。
通过 Vite 热重载实现写文件后自动刷新页面，实时验收动画效果。
提供五条 Prompt 指南，如使用动效术语、声明控件等，提升 Agent 生成质量。

结构提纲

按章节快速跳转。

§引言
介绍 Text-To-Lottie 工具的组成和用途，用于 Agent 生成 Lottie 动画并实时验收。
·技术架构
输出物为标准 Bodymovin JSON，使用 Skottie 渲染引擎，与 AE 导出路径更接近。
·本地预览机制
通过 Vite 热重载实现写文件后自动刷新页面，实现实时验收动画效果。
·Prompt 指南
提供五条 Prompt 指南，如使用动效术语、声明控件等，提升 Agent 生成质量。
·适用与不适用场景
适用于短时长 Motion Graphics 和数据可视化动效，不适用于多镜头剪辑和复杂角色绑定。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）

Text-To-Lottie 工具
- 技术架构
  - 输出物：Bodymovin JSON
  - 渲染引擎：Skottie
- 本地预览机制
  - Vite 热重载
- Prompt 指南
  - 使用动效术语
  - 声明控件

金句 / Highlights

值得收藏与分享的关键句。

使用 Skottie 渲染引擎，与 AE 导出路径更接近，也更适合程序化生成。
— 第 3 段
⬇︎ 下载 PNG 𝕏 分享到 X
通过 Vite 热重载实现写文件后自动刷新页面，实现实时验收动画效果。
— 第 3 段
⬇︎ 下载 PNG 𝕏 分享到 X
提供五条 Prompt 指南，如使用动效术语、声明控件等，提升 Agent 生成质量。
— 第 4 段
⬇︎ 下载 PNG 𝕏 分享到 X

#Lottie#Agent#Skottie#开源工具

打开原文

meng shao on X: "Text-To-Lottie: 一套「Agent Skill + 本地预览 Harness」的组合，让 Agent 生成 Lottie，在浏览器里实时验收开源作者 @konstipaulus ，开源地址： https://t.co/GGTai0ZO6t 安装方式：npx skills add diffusionstudio/lottie Skill：教 Codex / Claude Code / Cursor 等 Agent 如何写出 Skottie https://t.co/F0hZ34QkJk" / X

meng shao

@shao__meng

Text-To-Lottie: 一套「Agent Skill + 本地预览 Harness」的组合，让 Agent 生成 Lottie，在浏览器里实时验收开源作者

@

konstipaulus

，开源地址：

github.com/diffusionstudi…

安装方式：npx skills add diffusionstudio/lottie Skill：教 Codex / Claude Code / Cursor 等 Agent 如何写出 Skottie

ss：基于 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

Jun 8

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.

00:00

12:42 AM · Jun 10, 2026

1.5K

Views

1

2

12

4

14

Read 1 reply