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. Built by the creator of SpiraCSS (https://spiracss.jp/) as a standalone frontend review tool.