你是否曾为设计一个精致的加载动画、交互动效或品牌微动效而反复调试 AE 导出参数？Text-to-Lottie 是一款面向开发者的开源工具，它让「用文字描述动画 → 自动生成可交付的 Lottie 文件」成为现实。项目深度集成 Claude Code、GitHub Codex 等 AI 编程助手，将自然语言指令实时编译为标准 lottie.json，并在本地全屏预览器中即时播放——告别手动导出、格式兼容和性能调优的繁琐流程，真正实现「所想即所得」的动效开发新范式。
核心功能
- 零配置文本生成动画：只需向支持 Skills 的 AI 编程助手（如 Claude Code）发送类似“生成一个呼吸感渐变的蓝色环形加载动画，持续2秒，循环播放”这样的中文/英文指令，即可自动生成符合 Lottie 官方规范的 JSON 文件
- 实时热重载预览：内置基于 Skia CanvasKit（Skottie）的高性能全屏播放器，AI 生成的
public/lottie.json文件保存后，Dev Server 自动热更新并立即播放，毫秒级反馈设计效果 - 开箱即用的现代技术栈：采用 React + TypeScript 构建控制界面，UI 基于 shadcn/ui（适配暗色模式），代码结构清晰、类型安全，方便二次定制与插件扩展
- 自动化 WASM 集成：自动从
canvaskit-wasm包复制最新版 WebAssembly 二进制文件至public/目录，无需手动下载或配置底层渲染引擎 - 技能化接入生态：支持通过
npx skills add diffusionstudio/lottie一键注册为 AI 编程助手的「技能」，无缝嵌入现有工作流，无需切换环境 - 生产就绪输出：生成的 Lottie 文件严格遵循 Bodymovin 标准，可直接用于 Web、iOS、Android 或 Flutter 项目，兼容主流播放器（Lottie-Web、iOS Lottie、Rive 等）
适合哪些人用
前端工程师、UI 动效设计师、全栈开发者以及正在探索 AI 辅助创意生产的数字产品团队。尤其适合需要高频产出轻量交互动效（如按钮悬停、页面转场、数据加载、空状态提示）但又不愿深陷 After Effects 复杂导出流程的实战派；也适合希望快速验证动效概念、做 A/B 测试或构建动效组件库的技术团队。
快速上手
方式一（推荐｜最快）：在任意支持 Skills 的 AI 编程环境中运行
npx skills add diffusionstudio/lottie
然后对 Claude Code / Codex 说：“请使用 text-to-lottie 技能，生成一个带弹跳效果的绿色勾选动画，时长1.2秒” —— 动画即刻生成并播放。
方式二（本地部署｜可控性强）：
1. 克隆仓库：git clone https://github.com/diffusionstudio/lottie.git
2. 安装依赖：npm install（自动完成 CanvasKit WASM 复制）
3. 启动开发服务器：npm run dev
4. 打开终端提示的本地地址（如 http://localhost:5173），在浏览器中编辑提示词、触发生成、实时预览效果。
项目信息
diffusionstudio/lottie
GitHub
Open-source skill and harness for generating production ready Lottie animations with codex/claude code
494
Stars
24
Forks
TypeScript
MIT
TypeScript｜GitHub Star 数：494｜MIT 开源协议｜GitHub 项目地址
这是一款把 AI 动效生成真正带入日常开发管线的务实工具——不炫技、不造轮子，只解决设计师和开发者每天都在面对的真实痛点。
