blueprint-animation is a Claude Design skill that turns a live screen into a cyan blueprint drawing and rebuilds only the parts that a redesign changes

A designer explaining a redesign usually pastes two static screenshots and writes a paragraph of caption. blueprint-animation is a Claude Design skill that turns the same explanation into a short video the design tool builds for them. The skill was uploaded to GitHub on 27 September 2026 by Oğuz, who publishes at oguz.design and posts on X as @moguzbulbul, and reached 121 stars in the first ten hours after release. It ships as a ZIP that installs into claude.ai under Customize, Skills, Create skill, Upload a skill.

What one walkthrough contains

The skill produces one continuous walkthrough in three to six numbered steps, with no cuts. In each step the rest of the screen fades back, the module in focus gets outlined, a one-line problem sentence appears, a scan line sweeps down and turns the whole screen into a cyan blueprint drawing, only the parts that change move or resize, the scan line sweeps again, and the finished screen fades in on top with the one-line fix. The example film in the README is a five-step CRM company-page redesign titled "One primary action, Hide absence, Open work first, One timeline, Act in context".

Two modes for two jobs

Redesign mode takes a Before screen, an After screen, and three to six changes with a name, a one-line problem and a one-line fix. The After screen is what the animation rebuilds toward. Explain mode takes one finished screen and three to six modules with a name, what it is and why, and the design never changes across the walkthrough. Dimension lines, guides, handles and labels draw themselves over each module in turn to show the reasoning behind it.

Where the fidelity comes from

Version 1.2, published four hours after the first release on the same day, added a Figma-to-frame step. The skill reads every value from the Figma file, uses its real fonts and its exported icons, and checks the built screens against the Figma export before it animates anything. That is the change that decides whether the film shows the real screen turning into a blueprint or a redrawn approximation of the screen.

Non-commercial only, and what that costs a studio

blueprint-animation is released under CC BY-NC 4.0. Oğuz says on the repository that the skill is free for non-commercial use with credit and a link back, and that commercial use, including selling the skill or bundling it into a paid product or service, needs written permission asked for on X. A studio publishing a redesign case study for a paying client would need that agreement before it presses render, so the licence check belongs at the start of the brief, together with the client's own permission to publish the redesign.

Because Claude Design accepts an uploaded skill ZIP directly, a designer with no video tools of their own can now produce a walkthrough of their work and drop it on a portfolio page in place of two screenshots and a paragraph.

Source

moguzbulbul/blueprint-animation, published 27 September 2026, 121 stars at the time of writing.