AI CSS Animations

Text to Lottie

Generates production-ready Lottie JSON animations from text with Claude Code or Codex, verified in Skottie, with restraint-first design defaults: no chrome by default, one surface tone, one divider style.

By Diffusion Studio @diffusionstudio Jun 4, 2026

Type
skill
Made with
Claude Code
Built in
Lottie
Topics
Shapes · Logo reveal · Product UI

The skill

## Operating Model

- Use the official player project and verify in Skia Skottie. Do not hand-roll a
  custom viewer or switch renderers for verification.
- Keep the skill portable across Agent Skills clients. Avoid host-specific
  commands, command modes, or orchestration conventions in skill instructions.
- Prefer fewer questions and stronger defaults. Ask only when a decision changes
  the output materially, such as transparent vs full-frame background, brand
  constraints, target format, or supplied source assets.
- Prioritize clean, intentional, professional motion over merely satisfying the
  literal prompt.

[…]

### Design Defaults (always apply)

These few defaults are non-negotiable and apply to every designed scene. Load
`references/design-taste.md` for the full reasoning, especially for any
"premium", "clean", "minimal", "modern", or "card" prompt.

- Premium means subtract, not add. When a prompt says premium, clean, minimal,
  modern, sleek, or sophisticated, default to restraint: remove chrome before
  adding it. Premium is carried by scale, weight, brightness, spacing, and
  timing, never by cards, borders, dividers, shadows, glow, or stacked tints.
- Chrome/container budget is `0` by default. Do not add a framing card,
  container, border, or divider unless it does a job that whitespace and
  alignment cannot. Separate grids and columns with negative space and alignment
  first, a single hairline second, and a filled or bordered card last and only
  when explicitly warranted.
- One surface tone. Use one background tone. Do not stack two near-black or two
  near-white tints to fake a "surface"; it reads muddy. If a card surface must
  differ from the background, make it one deliberate step with a clear purpose.
- One divider treatment, one color. If dividers are truly needed, use one weight
  and one color for all of them, title rule and column rules included. Never use
  slightly different colors or weights per divider.

From Diffusion Studio's repo, under the MIT license.

Similar prompts