How to create and validate Lottie files with Claude or Codex

The Design Huddle Lottie skill allows Claude or Codex to create a Lottie JSON animation from a written prompt or review and repair an existing .json file. The skill is designed to keep animations lightweight, editable, and compatible with Design Huddle Video and Presentation Projects.

Download the skill: [Download URL coming soon]

When to use this

Common use cases include:

• Creating a new Lottie animation from a written description
• Checking whether an existing Lottie is compatible with Design Huddle
• Repairing broken asset references, invalid timing, unsupported structures, or malformed properties
• Preserving editable text, colors, vector shapes, and replaceable images

How to use the skill

1. Download the SKILL.md file using the link above.
2. Add the skill to Claude or Codex and tell the agent to use the Design Huddle Lottie skill.
3. For a new animation, describe the canvas size, duration, frame rate, motion, colors, text, and whether it should loop.
4. For an existing animation, attach the Lottie JSON file and any required images or font information.
5. Ask the agent to validate the completed file for Design Huddle compatibility and return a new .json file.
6. Review the validation summary and preview the animation before using it in a Project.

When the Design Huddle MCP is connected, you can also ask Claude or Codex to upload or import the validated Lottie directly into the appropriate Design Huddle Project or Template. The agent should confirm the result and provide the returned Project or asset identifier. You can also upload the JSON manually from Media > Upload in a Video or Presentation Project.

Prompt examples

Create a new looping animation

“Use the Design Huddle Lottie skill to create a new 1080 × 1080 transparent, three-second seamless loop at 30 fps. Animate three brand-colored circles expanding around editable live text that says ‘CREATE.’ Keep each editable item in a separate named layer, validate it for Design Huddle, preview the first, middle, and final frames, and return the JSON with a summary.”

Create a new non-looping animation

“Use the Design Huddle Lottie skill to create a 1920 × 1080, five-second non-looping lower-third animation. Include editable live-text layers named ‘Headline’ and ‘Subtitle,’ use simple vector shapes, and keep the colors editable. Validate the finished file for Design Huddle and return the JSON.”

Repair an existing Lottie

“Use the Design Huddle Lottie skill to audit the attached launch-animation.json. Preserve compatible timing, layer names, hierarchy, and styling. Repair broken image references, invalid timing, duplicate layer indices, malformed properties, and unsupported operators. Keep text editable and embed available images. Validate the repaired animation, return it as a new JSON file, and disclose any approximations.”

Upload with the Design Huddle MCP

“Use the Design Huddle MCP to upload the validated Lottie into [Project or Template name/ID]. Confirm the upload and return the Project or asset identifier.”

Best practices

• Request looping only when the animation needs to repeat.
• Provide brand colors, exact copy, fonts, and image assets when they matter.
• Keep the animation simple and use clearly named layers for editable content.
• Preview the result in Design Huddle. Structural validation does not guarantee identical rendering in every player.