| name | lottie-animation |
| description | 一句话让 Claude Code 生成轻量 Lottie 动画动效。内置 Prompt 优化层：在调用 text-to-lottie 生成前， 自动基于五条心法（FPS/帧数、控制项、素材、缓动、镜头运动）优化你的 prompt，展示优化版让你修改确认后再生成。 基于 diffusionstudio/lottie (YC F24)。Trigger keywords: Lottie 动画, Lottie animation, 生成动效, 动画动效, text-to-lottie, 轻量动画, SVG 动画, 启动动画, 点赞动效, 微动效, motion graphics, 做个小动画, 生成一个动画, 帮我做个动效, 生成 Lottie, lottie json, 矢量动效。
|
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep","AskUserQuestion"] |
| metadata | {"category":"design","source":"https://mp.weixin.qq.com/s/ML9w6_dT0yloK3GpZ3A_dA","upstream-skill":"diffusionstudio/lottie","install-upstream":"npx skills add diffusionstudio/lottie","author":"逛逛 GitHub (公众号)","version":"1.0.0","license":"MIT"} |
Lottie 动画生成 + Prompt 优化层
用一句话让 Claude Code 生成轻量 Lottie 动画动效。内置 Prompt 优化层，确保每次生成前你的 prompt 都经过五条心法打磨。
背景：什么是 Lottie / text-to-lottie
Lottie 是 Airbnb 开源的一种矢量动效格式——本质是一份描述矢量动画的 JSON 文件，一份 JSON 多端适用（iOS / Android / Web）。你日常刷 App 看到的启动动画、点赞爱心、下拉刷新小人、空状态插画，十有八九都是它。
text-to-lottie（diffusionstudio，YC F24）解决了传统动效开发的核心痛点：
- 传统流程：设计师 AE 做动效 → Bodymovin 导出 JSON → 开发接代码。链路长、改一帧都要回到源文件
- text-to-lottie：Agent 生成 Lottie JSON → 本地浏览器实时预览 → Agent 自己读播放状态 → 不满意再改，闭环极短
它配套了完整的播放器项目（Vite + SolidJS + Skia WASM 渲染），支持 live reload、逐帧审查（Agent 可以直接读当前第几帧/总帧数/在播哪个场景）。
安装上游 skill：npx skills add diffusionstudio/lottie
核心工作流：Prompt 优化 → 确认 → 生成
本 skill 在 text-to-lottie 之上增加了一个 Prompt 优化层。每次生成动画前，先优化你的 prompt，确认后再执行。
完整流程
用户描述想要的动效
│
▼
┌──────────────────────┐
│ ① Prompt 分析与优化 │ 基于五条心法，自动补全缺失信息
│ 输出：优化版 prompt │
└──────────┬───────────┘
│
▼
┌──────────────────────┐
│ ② 用户审阅 │ ← AskUserQuestion
│ · 确认：直接生成 │ 展示优化版 prompt
│ · 修改：手动调整 │ 等用户决定
│ · 取消：重新描述 │
└──────────┬───────────┘
│
▼ (用户确认后)
┌──────────────────────┐
│ ③ 调用 text-to-lottie│ 用最终 prompt 生成 Lottie 动画
│ 生成 + 预览 │
└──────────────────────┘
五条 Prompt 优化心法
收到用户的动效需求后，按以下五条规则逐项检查和优化：
规则 1：指定 FPS 和总帧数
"60 FPS，3 秒"、“30 FPS，2 秒循环”
- 如果用户没说帧率，默认补上 60 FPS
- 如果用户没说时长，根据动效复杂度推断：简单动效 2 秒，中等 3 秒，复杂 4-5 秒
- 如果是要循环播放的，加上 "loop"
规则 2：显式声明要哪些控制项
默认生成的动画通常只暴露背景色一个控制。你想要颜色、大小、透明度都能调，就直接说出来。
- 颜色：主色、辅色、背景色、渐变方向
- 大小：缩放比例、尺寸约束
- 透明度：淡入淡出、闪烁
- 位置：居中、偏移、跟随路径
- 如果用户没指定，根据动效内容合理推断并补上
规则 3：能提供素材就别空着说
AI 基于具体素材做出来的效果好得多。
- 用户提到了 SVG 路径？提取出来放进 prompt
- 用户提到了品牌 logo？提醒用户可以提供 SVG 文件
- 用户描述了具体形状？保留描述，补充"请基于以下形状生成：[描述]"
- 如果没有素材，用精确的几何描述替代模糊描述
规则 4：缓动函数术语化
说 ease-in、ease-out、ease-in-out，AI 听得懂。别光说"动画"。
- "慢慢开始" →
ease-in
- "慢慢结束" →
ease-out
- "平滑过渡" →
ease-in-out
- "弹性效果" →
spring 或 bounce
- "匀速" →
linear
- 如果用户没指定，根据动效类型推荐合适的缓动
规则 5：镜头运动写入 prompt
专业动效很多靠镜头运动。推、拉、摇、移、变焦，写进 prompt 里，AI 会用 group 变换模拟出来。
- 推：镜头推进，主体变大 → "zoom in / scale up"
- 拉：镜头拉远，主体变小 → "zoom out / scale down"
- 摇：水平旋转 → "pan horizontally / rotate Y"
- 移：平移 → "translate / move from A to B"
- 变焦：焦点切换 → "focus shift / blur to sharp"
- 如果用户描述了空间运动，翻译成镜头术语
优化版 Prompt 输出模板
每次优化后，用以下格式展示给用户：
## 🎯 优化版 Prompt
[经过五条心法优化后的完整 prompt]
---
### 📋 优化明细
| 规则 | 原始 | 优化后 |
|------|------|--------|
| 1. FPS/帧数 | [原始或"未指定"] | [优化后] |
| 2. 控制项 | [原始或"未指定"] | [优化后] |
| 3. 素材 | [原始或"未指定"] | [优化后] |
| 4. 缓动 | [原始或"未指定"] | [优化后] |
| 5. 镜头 | [原始或"未指定"] | [优化后] |
---
请选择：
1. ✅ **确认生成** — 用优化版 prompt 开始生成
2. ✏️ **我要修改** — 告诉我你想调整什么
3. ❌ **取消** — 重新描述需求
生成阶段
用户确认后，提示用户执行：
请在你的 Claude Code 终端中运行：
npx skills add diffusionstudio/lottie
然后用以下 prompt 生成动画：
[最终确认的 prompt]
如果 text-to-lottie skill 已安装，直接引导调用。
使用示例
示例 1：模糊需求 → 优化 → 生成
用户：帮我做一个心跳的动效。
Skill 优化后：
生成一个心跳动画 Lottie：一个心形图标以 60 FPS 循环缩放，模拟心跳节奏——快速放大（0.1s）→ 快速缩小（0.1s）→ 暂停（0.3s）→ 重复。使用 ease-in-out 缓动。心形颜色为红色 #FF2D55，背景透明。总时长 2 秒循环。允许控制心形颜色和缩放幅度。
示例 2：有素材的优化
用户：把桌面 hello.svg 做成动画。
Skill 优化后：
读取桌面的 hello.svg 路径，做成 Lottie 动画：沿路径自然方向逐笔揭示文字，套用 Apple 风格渐变（#007AFF → #00C7BE），ease-in-out 节奏，透明背景。60 FPS，3 秒。允许控制渐变起始色、线宽、动画速度。
示例 3：品牌动效
用户：苹果 logo 晃来晃去最后消失。
Skill 优化后：
制作一个 Lottie 动效：Apple logo 以弹簧物理效果左右晃动（振幅递减），最后跳一下（快速 scale up 1.2x）缩成一个点消失（scale to 0 + opacity to 0）。60 FPS，2.5 秒。使用 spring 缓动用于摇晃，ease-in 用于消失。深色背景 #1a1a1a。允许控制 logo 颜色、晃动强度、动画时长。
