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, 9 June 2026: Describe any animation and get a real Lottie file with editable controls, verified in a browser preview.

Compare

Related

  • Remotion Agent Skills

    Agent skills enabling AI coding agents to create programmatic Remotion videos

  • Skills.sh

    Open directory and CLI for discovering and installing AI agent skills

  • Transitions.dev

    Curated library of copy-paste web app micro-interactions and transitions

  • agency-agents

    Curated library of specialized AI agent personas and workflows for Claude Code

  • Impeccable

    Design vocabulary, rules, and skills for AI coding agents.

  • agent-experience Claude Code Skill

    Audits documentation readability for AI agents by running parallel onboarding tests

Updated