PixelPerfect CSS Diff

Pixel-perfect overlay alignment with guides, browser-side CSS diffs, and customizable AI prompt export.

PixelPerfect CSS Diff is a developer tool for comparing live webpages against reference designs, aligning pixels with overlays and guides, and exporting browser-observed CSS changes as AI-ready fix instructions. It is designed for frontend implementation reviews, visual QA, design reproduction checks, and AI-assisted CSS fixes. Main features: - Load a reference image over any webpage - Adjust overlay position, opacity, and scale - Drag and drop image files directly onto the panel - Use vertical and horizontal guides with saved position, thickness, color, and opacity - Save separate overlay states for desktop and mobile viewport widths - Keep the overlay and panel usable above modal dialogs created with dialog.showModal() - Capture browser-side CSS changes after visual adjustment - Copy CSS diffs as prompt-ready instructions for AI agents - Customize the prompt prelude used before exported CSS diff sections Typical workflow: 1. Open a page you want to review. 2. Load a reference design image. 3. Align the live page visually with the overlay and guides. 4. Set a CSS baseline, make final browser adjustments, and copy the resulting CSS diffs. 5. Send the exported instructions to an AI agent or use them directly when updating source files.