# moguzbulbul/blueprint-animation architecture

> Architecture diagram of the GitHub repository moguzbulbul/blueprint-animation, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/moguzbulbul/blueprint-animation
- Repository: https://github.com/moguzbulbul/blueprint-animation

## Overview

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`](https://github.com/moguzbulbul/blueprint-animation/blob/main/example-scene.jsx) (Example scene), [`SKILL.md`](https://github.com/moguzbulbul/blueprint-animation/blob/main/SKILL.md) (Skill instructions), [`media/example.mp4`](https://github.com/moguzbulbul/blueprint-animation/blob/main/media/example.mp4) (Example video)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_designer(("Designer"))
node_claude["Claude Design"]
node_skill["Skill instructions<br/>[SKILL.md]"]
node_screens["Screen designs"]
node_brief["Changes or modules"]
node_design_system["Design system"]
node_figma["Figma values and exports"]
node_module_proposal["Module proposal"]
node_blueprint["Blueprint steps"]
node_redesign["Redesign construction"]
node_explain["Explain annotations"]
node_fidelity["Screen reproduction"]
node_qa["Visual QA"]
node_animation["Blueprint animation"]
node_scene["Example scene<br/>[example-scene.jsx]"]
node_preview["Example video<br/>[example.mp4]"]

node_designer -->|"requests animation"| node_claude
node_designer -->|"provides screens"| node_claude
node_designer -->|"provides design system"| node_claude
node_claude -->|"follows instructions"| node_skill
node_claude -->|"collects brief"| node_brief
node_claude -->|"proposes modules"| node_module_proposal
node_screens -->|"supplies input"| node_claude
node_design_system -->|"guides reproduction"| node_fidelity
node_figma -->|"supplies values and assets"| node_fidelity
node_fidelity -->|"screens checked against export"| node_qa
node_brief -->|"defines steps"| node_blueprint
node_module_proposal -->|"confirms modules"| node_blueprint
node_blueprint -->|"branches to redesign"| node_redesign
node_blueprint -->|"branches to explain"| node_explain
node_redesign -->|"constructs changed parts"| node_animation
node_explain -->|"adds guides and labels"| node_animation
node_fidelity -->|"supplies reproduced screens"| node_animation
node_qa -->|"clears for animation"| node_animation
node_scene -.->|"illustrates"| node_preview

click node_skill "https://github.com/moguzbulbul/blueprint-animation/blob/main/SKILL.md"
click node_scene "https://github.com/moguzbulbul/blueprint-animation/blob/main/example-scene.jsx"
click node_preview "https://github.com/moguzbulbul/blueprint-animation/blob/main/media/example.mp4"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_designer,node_claude,node_brief,node_design_system,node_figma,node_module_proposal,node_blueprint,node_redesign,node_explain,node_qa,node_animation toneIndigo
class node_skill,node_scene,node_preview toneTeal
class node_screens,node_fidelity toneBlue
```

## Components

### Other components

- **Designer**
- **Claude Design**
- [Skill instructions](https://github.com/moguzbulbul/blueprint-animation/blob/main/SKILL.md): `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](https://github.com/moguzbulbul/blueprint-animation/blob/main/example-scene.jsx): `example-scene.jsx`
- [Example video](https://github.com/moguzbulbul/blueprint-animation/blob/main/media/example.mp4): `media/example.mp4`

## Connections

- 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