Text-To-Lottie：Agent Skill + 本地预览 Harness，让 Agent 生成 Lottie 动画并实时验收
TL;DR · AI Summary
Text-To-Lottie 工具通过 Agent Skill 和本地预览 Harness，实现 Agent 生成 Lottie 动画并实时验收，提升开发效率。
Key Takeaways
- 使用 Skottie 渲染引擎，与 AE 导出路径更接近，适合程序化生成。
- 通过 Vite 热重载实现写文件后自动刷新页面，实时验收动画效果。
- 提供五条 Prompt 指南，如使用动效术语、声明控件等，提升 Agent 生成质量。
Outline
Jump quickly between sections.
Mindmap
See how the topics connect at a glance.
查看大纲文本（无障碍 / 无 JS 友好）
- Text-To-Lottie 工具
- 技术架构
- 输出物：Bodymovin JSON
- 渲染引擎：Skottie
- 本地预览机制
- Vite 热重载
- Prompt 指南
- 使用动效术语
- 声明控件
Highlights
Key sentences worth saving and sharing.
使用 Skottie 渲染引擎，与 AE 导出路径更接近，也更适合程序化生成。
通过 Vite 热重载实现写文件后自动刷新页面，实现实时验收动画效果。
提供五条 Prompt 指南，如使用动效术语、声明控件等，提升 Agent 生成质量。
meng shao on X: "Text-To-Lottie: A combination of 「Agent Skill + Local Preview Harness」 that allows Agents to generate Lottie animations, with real-time validation in the browser. Open source author @konstipaulus, open source address: https://t.co/GGTai0ZO6t Installation method: npx skills add diffusionstudio/lottie Skill: Teaching Codex / Claude Code / Cursor and other Agents how to write Skottie https://t.co/F0hZ34QkJk" / X
meng shao
@shao__meng
Text-To-Lottie: A combination of 「Agent Skill + Local Preview Harness」 that allows Agents to generate Lottie animations, with real-time validation in the browser. Open source author
@
, open source address:
github.com/diffusionstudi…
Installation method: npx skills add diffusionstudio/lottie Skill: Teaching Codex / Claude Code / Cursor and other Agents how to write Skottie
ss: A full-screen player based on Skia CanvasKit (Skottie) + a React control panel. After the Agent writes to public/lottie.json, Vite hot reloads, and the changes are immediately visible. Technical architecture · Output: Standard Bodymovin JSON (public/lottie.json) · Rendering engine: Skottie (not lottie-web) — closer to AE export paths and more suitable for programmatic generation · Preview loop: Write file → save → page auto refresh → visual validation · Editability: Skottie Slots + controls.json, real-time adjustment of color, size, and other parameters · Agent validation: URL parameters ?frame=60&paused=1 for precise frame positioning, screenshot comparison, without relying on dragging the progress bar Author's five prompt guidelines 1. Provide specific materials: SVG, real data, screenshots; abstract descriptions significantly reduce quality 2. Use animation terminology: ease-in / ease-out / ease-in-out, corresponding to Lottie keyframe Bezier handles 3. Think like a photographer: pan / zoom / hold — simulate camera movement using the transform of the parent Group 4. Declare required controls: Only background color is default; color, stroke width, etc., need to be explicitly requested via Slots 5. Lock time specifications: e.g., 「150 frames, 30 FPS」 = 5 seconds of video, avoiding the Agent guessing the duration at will Applicable / Not applicable 1. Suitable for: · Single scene, short duration Motion Graphics · SVG → Lottie (Figma export path) · Data visualization animations (K lines, charts, indicators) · Animations requiring transparent background, vector, and embeddable UI 2. Not suitable for: · Multi-camera editing, audio-video compositing → use Remotion · Complex character binding, particles, 3D → AE manual or specialized tools are more appropriate · When full compatibility with lottie-web is required → Skottie is a subset with differences
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