byte271/mirrorframe

Mirrorframe takes a live website and turns it into a working copy built with React, then checks its own work by comparing pixels between the original and the copy. It uses a headless browser, meaning a browser running in the background with no visible window, to visit a page and record everything about it: colors, spacing, fonts, animations, and how the page responds to clicks, hovering, and scrolling. No AI model is involved in the rebuilding step, so every part of the output can be inspected and reproduced. The process runs in four stages. First it captures the page, recording the style of every element and downloading images, fonts, and other assets. Second, it organizes what it captured into what the project calls a design genome, which groups together colors and spacing patterns along with any animations and interactive behavior it noticed. Third, it rebuilds the page as a self contained React app, wiring the recovered animations and interactions back in as real code. Fourth, it renders the rebuilt version and compares it, element by element and interaction by interaction, against the original, automatically fixing small differences where it can. The project pays close attention to motion: it can recover CSS animations, hover effects, mouse tracking effects like tilting cards, scroll triggered reveals, and even animations driven by custom code rather than standard browser features. It also tries to recover interactive patterns like accordions, tabs, and modal popups by testing the page directly rather than guessing. For verification, every part of the rebuilt page gets its own pass or fail status, and the project reports honestly when something could not be recovered instead of pretending it succeeded. To use it, you need Node.js 18 or later, then you clone the repository, install dependencies, and run a script pointing at a URL you own or have permission to copy. The project is also packaged as a Claude Skill for AI agents to use directly. As of this writing it is still an early, 0.x release, meaning its command line options and output formats may still change.