Blueprint Animation treats UX rationale as a typed schema, not a freeform prompt

Blueprint Animation is a Claude Design skill that turns a static before/after screen comparison into a narrated, step-by-step animation explaining why a redesign works, not just what changed. The mechanism is specific: a scan line sweeps down to convert the live UI into a cyan blueprint drawing, isolated changes reconstruct themselves in place, then a second sweep reveals the finished design. Nothing cuts. The whole explanation runs as one continuous scene.

There are two modes. Redesign mode takes a before screen, an after screen, and three to six named changes — each with a one-line problem statement and a one-line fix — then animates only the parts that actually move or resize. Explain mode works on a single finished screen: nothing changes, but each module gets annotated in turn with dimension lines, guides, and labels that expose the reasoning behind the layout. If you only share the screen without specifying modules, the skill proposes them for you to confirm.

The fidelity claim is worth noting: the skill reads values directly from the Figma file, uses its real fonts and exported icons, and runs a QA check against the Figma export before animating anything. The README also lists a set of built-in constraints — no text over moving parts, staggered motion, invisible old-to-new swaps — that are apparently encoded in the skill's own instructions rather than left to the user to specify each time.

The practical audience is designers who need to communicate rationale: UX case studies, client walkthroughs, design review documentation, social posts. The example in the repo shows a CRM company page redesigned across five steps with names like One primary action and Act in context, which gives a concrete sense of the granularity expected.

Installation is a ZIP upload into Claude Design's Skills interface; version 1.3.1 is the current release. The license is CC BY-NC 4.0 — free for non-commercial use with attribution, commercial use requires written permission from the author.

What makes this more than a prompt template is the structured input contract. You are not writing freeform instructions; you are supplying a typed schema: screen assets, a design system, and a short list of changes or modules with specific fields. The skill handles sequencing, animation rules, and QA from there. Whether Claude Design's current execution environment actually renders the resulting scene code with the claimed Figma fidelity is something the README cannot prove — but the architecture of the skill, separating input schema from animation logic, is at least the right approach for reproducible design storytelling.