moguzbulbul/blueprint-animation

What it solves

It transforms static UX designs into continuous, step-by-step blueprint animations. This allows designers to explain the reasoning behind UX decisions, showcase redesigns from a "before" state to an "after" state, or break down a single screen's modules to explain why they were built a certain way.

How it works

The project is a skill for Claude Design that reproduces Figma designs 1:1 by reading values, fonts, and icons directly from the file. It operates in two primary modes:

• Redesign Mode: Animates the transition from a "before" UI to an "after" UI. The interface turns into a cyan blueprint, parts that change are rebuilt, and the new UI is revealed.
• Explain Mode: Keeps the design static while turning individual modules into blueprints sequentially to show guides, dimensions, and labels that explain the design rationale.

Both modes follow a structured 5-step animation process: focusing on a module, applying a blueprint scan line, constructing or annotating the element, revealing the final UI, and holding the explanation text.

Who it’s for

UX designers and product designers who need to create UX case studies, redesign walkthroughs, design rationale presentations, and social media posts.

Highlights

• Figma Integration: Reproduces designs 1:1 using real fonts and exported icons.
• Two Animation Modes: Supports both redesign transitions and detailed module explanations.
• ** uma continuous, non-cutting animation sequence.
• Built-in Quality Rules: Ensures clean motion with staggered animation and no text overlays on moving parts.
• Claude Design Skill: Easily installable as a ZIP file for use within the Claude.ai environment.