Development · Tip
diffusionstudio/lottie Skill
Skill for Claude Code and Codex to generate Lottie animations via prompts
An open-source skill that allows AI coding agents like Claude Code and Codex to generate production-ready Lottie animations from text descriptions. It supports precise motion design terminology, editable control slots, and browser-verified previews.
How it works
Install: npx skills add diffusionstudio/lottie
Works with Claude Code/Codex. Prompt like a motion designer: use ease-in/ease-out terms; describe camera pans, zooms, pushes; provide SVGs or Figma exports; specify FPS and duration; explicitly ask for editable controls.
Video shows agent sessions producing: an animated candlestick chart (150 frames / 5s, 350 candles, each candle finishes before the next via fractional-frame timing, colors #06699E bg / #FF3D47 loss / #1AE08C gain), an animated Spotify logo with live Logo color and Stroke width slots, and a gradient 'hello' script animation (stroke, opacity, gradient start/end controls) rebuilt after deletion.
What it's for
- Generate Lottie JSON animations directly from natural language prompts
- Convert static SVG or Figma assets into animated UI elements
- Expose configurable dynamic properties like stroke colors and widths in exported animations
Key points
- Quick installation via npx skills add diffusionstudio/lottie
- Works with AI agent workflows in Claude Code and OpenAI Codex
- Understands motion design terms like ease curves, camera pans, and fractional-frame timing
- Produces animations with live editable control slots
- Outputs standard, production-ready Lottie JSON files
Pricing
Open source. Free and open source
Details
- Type
- Tip
- Category
- Development
- Topic
- Animation & Motion
- Open source
- Yes
- Platforms
- Command line
- For
- Developers and UI designers using AI coding agents
- Alternative to
- LottieFiles, Bodymovin
- Tags
- lottie, animation, claude code, ai agents, motion design
Why it was saved
- @toolfolio: Describe any animation and get a real Lottie file with editable controls, verified in a browser preview.
Compare
Related
Agent skills enabling AI coding agents to create programmatic Remotion videos
Open directory and CLI for discovering and installing AI agent skills
Curated library of copy-paste web app micro-interactions and transitions
Curated library of specialized AI agent personas and workflows for Claude Code
Design vocabulary, rules, and skills for AI coding agents.
Audits documentation readability for AI agents by running parallel onboarding tests
Updated