AI product Open source

Blueprint Animation

Blueprint Animation is a Claude Design skill for presenting UX redesigns and design rationale as continuous blueprint animations. In Redesign mode, it turns the Before screen into a blueprint, animates only the changed parts, and reveals the After screen; in Explain mode, the unchanged screen is converted into a blueprint module by module with guides, dimensions, and labels. Each presentation uses 3–6 numbered steps containing a focus stage, blueprint conversion, construction or annotation, UI reveal, and an explanation of the fix or design decision. The skill reproduces Figma designs using their values, fonts, and exported icons, checks built screens against the Figma export, and includes rules for motion, text placement, UI swaps, performance, and handoff QA. It is distributed as a ZIP upload for Claude Design and is licensed by Oğuz under CC BY-NC 4.0; commercial use requires written permission.

View repository Mentioned in 1 video ↓

What Blueprint Animation is used for

1 use taken from transcripts — each links to the moment in the video.

  • A design skill that turns a UI redesign into a continuous explanatory animation, showing the old screen as a blueprint, animating changes, and explaining each fix.

Videos mentioning Blueprint Animation

1 in the library.