How moguzbulbul/blueprint-animation works
This repository packages a Claude Design skill for turning screen designs into continuous, step-by-step blueprint animations. The documented workflow accepts either Before/After screens with changes or one screen with modules, then explains the design decisions through blueprint transformation, construction or annotation, reveal, and a QA-checked hand-off. README details support the workflow; the sampled scene is an example, not the skill runtime, and does not establish how Claude Design executes the instructions.
Main entry points: example-scene.jsx Example scene · SKILL.md Skill instructions · example.mp4 Example video
Components 16
Other components
- Designer
- Claude Design
- Skill instructions
SKILL.md - Screen designs
- Changes or modules
- Design system
- Figma values and exports
- Module proposal
- Blueprint steps
- Redesign construction
- Explain annotations
- Screen reproduction
- Visual QA
- Blueprint animation
- Example scene
example-scene.jsx - Example video
media/example.mp4
Connections 19
- Designer → Claude Design: requests animation
- Designer → Claude Design: provides screens
- Designer → Claude Design: provides design system
- Claude Design → Skill instructions: follows instructions
- Claude Design → Changes or modules: collects brief
- Claude Design → Module proposal: proposes modules
- Screen designs → Claude Design: supplies input
- Design system → Screen reproduction: guides reproduction
- Figma values and exports → Screen reproduction: supplies values and assets
- Screen reproduction → Visual QA: screens checked against export
- Changes or modules → Blueprint steps: defines steps
- Module proposal → Blueprint steps: confirms modules
- Blueprint steps → Redesign construction: branches to redesign
- Blueprint steps → Explain annotations: branches to explain
- Redesign construction → Blueprint animation: constructs changed parts
- Explain annotations → Blueprint animation: adds guides and labels
- Screen reproduction → Blueprint animation: supplies reproduced screens
- Visual QA → Blueprint animation: clears for animation
- Example scene → Example video: illustrates