moguzbulbul/blueprint-animation

Claude Design skill: animated before → after UX redesign, explained step by step through a blueprint drawing. By @moguzbulbul.

Open original source ↗

From the publisher

README & documentation

Source preview

Read the project’s overview, installation instructions and usage examples. The original README is the source of truth.

A Claude Design skill that explains UX decisions as one continuous, step-by-step blueprint animation. Show a redesign from Before to After, or explain a single finished screen module by module. Created by Oğuz · @moguzbulbul · oguz.design Inspired by Arjun Mahesh. Free for non-commercial use (CC BY-NC 4.0). Commercial use needs written permission. [](media/example.mp4) Watch the full-quality video (MP4) Show why a design works, not only what it looks like. The skill animates one screen that never cuts, in 3–6 numbered steps. Each step explains one UX decision: Annotate (Explain): nothing moves; handles, guides, dimension lines and labels draw the reasoning. Your Figma design is reproduced 1:1. The skill reads every value from the Figma file, uses its real fonts and exported icons, and checks the built screens against the Figma export before it animates anything. The skill also carries the rules that keep it clean: no text…

moguzbulbul/blueprint-animation on GitHub A short preview, not the full document.

Read the full README ↗ · Preview checked 2026-09-28T12:58:00.841Z

Inside the original README — Document outline
  1. Blueprint Before/After
  2. Two modes
  3. What it does
  4. What you give it
  5. Example
  6. Install in Claude Design
  7. License

Headings are captured from the source. Links open the publisher’s document, not a locally hosted copy.

Links from the README

References supplied by the publisher, not independently verified endorsements. Check the destination before downloading files or entering credentials.

Documentation belongs to its respective authors. Reported project/model license: Other. A listing is not a grant of reuse or training rights. Confirm the document’s own terms at the source.

What this repository does

Claude Design skill: animated before → after UX redesign, explained step by step through a blueprint drawing. By @moguzbulbul.

Repository facts

Owner
moguzbulbul
Primary language
JavaScript
Stars
182
Forks
10
Open issues + pull requests
0
License
Other
Archived
No
Default branch
main
Created
2026-09-27T21:48:33.000Z
Last push
2026-09-27T23:59:16.000Z

Topics and intended use

No topics were included in the latest source metadata.

Review the README for scope, installation, examples and limitations. We do not run repository code or certify it.

Evaluate before installing

Review licensing and dependencies, inspect recent commits and unresolved issues, and test in an isolated environment before production use. Stars and forks alone cannot answer these questions.

README and project files

Issues and maintenance discussion

Releases and changelog

Source and freshness

Source: GitHub. Metadata observed 2026-09-28T12:04:05.369Z. Daily imports are snapshots, not real-time monitoring.

Popularity and source listings do not establish security, suitability, licensing rights or benchmark performance.

Open original source

Related repositories

affaan-m/ECC

react/react

trekhleb/javascript-algorithms

Snailclimb/JavaGuide

airbnb/javascript

DietrichGebert/ponytail