WideEye — Design Overlay & Visual QA

Overlay any design or mockup on a live page, align it, and scan for mismatched pixels with a match score.

Check what you built against the design — without leaving the page. WideEye drops your design straight onto the live site as a semi-transparent layer, so you can line it up and see exactly where the build drifted. No build integration, no CI, no flipping between two tabs. It runs on any page, the same way an ad blocker or a password manager does. HOW IT WORKS 1. Bring in a design. Paste a link to a design frame, or drop an image file — PNG, JPG or SVG — anywhere on the page. Image files need no account at all. 2. Line it up. Drag the layer, or nudge it with the arrow keys: 1px per press, 10px with Shift, 100px with Shift+Alt. X and Y are editable as numbers, and opacity is a slider. 3. Run a scan. WideEye compares the design against what the browser actually painted and draws a heatmap over the page: cyan where pixels match, magenta where they don't, plus an overall match score. Matching pixels can be hidden so only the problems show. 4. Share the result. Export one self-contained HTML file holding the design, the live screenshot and the diff. No server, no build step, and no account needed to open it. WHAT'S INSIDE • Multiple layers at once, each with its own position, opacity, visibility and lock state — reorder them and the on-page stacking follows. • Scale control. Presets for 100%, 50% and 33% cover 2x and 3x exports, and "Fit width" sizes a full-page mockup to the page. Screenshots taken on a high-density display are detected and scaled down automatically, so they don't land twice as large as they should. • Opacity applied so the host page's own stylesheet cannot silently override it. • A colour picker that samples the real rendered pixel — gradients, background images and stacked opacity included — rather than guessing from computed styles. • A panel that collapses to a slim header, docks left or right, floats anywhere you drag it, or closes down to a small chip you can bring back. • Layers are saved and come back where you left them. PRIVACY The scan, the heatmap, the colour picker and the export all run locally in your browser. Nothing is uploaded anywhere and there is no account to create. The only network request WideEye ever makes is to the design API you import from, and only when you paste a frame link and have saved your own access token. WORTH KNOWING BEFORE YOU INSTALL Importing a frame by link needs a free personal access token with read access, which you paste once in the toolbar popup. Working from image files — exported mockups, screenshots, anything you can drop on a page — needs no token and no account. "Send to Figma" currently exports a screenshot for you to attach to a comment by hand. Posting comments back into the file automatically is not built yet.