UI Compare

Local-first visual acceptance overlays for comparing live pages with design images.

Compare a live webpage with your own design images directly in Chrome. UI Compare places one or more uploaded designs over the active page so you can inspect layout, sizing, alignment, responsive widths, and color differences without sending files to a server. Core comparison tools: - Adjustable-opacity overlay for direct visual alignment. - Blink mode with a configurable frequency. - Split mode with a draggable comparison boundary. - User-triggered pixel-difference heatmap with lenient, standard, and strict thresholds. - Clickable heatmap inspection showing page color, design color, and RGB distance. Precise placement and review workflow: - Drag, resize, scale, show or hide, and lock each design overlay. - Set width and height independently while preserving the original design dimensions. - Anchor a design to a selected DOM element by top-left, center, or edge alignment. - Save placement, comparison mode, opacity, status, and notes separately for each page URL. - Calibrate a normal Chrome window to a design viewport width and restore the saved window size. - Manage multiple projects and multiple design images in the Chrome Side Panel. Local-first by design: - Projects, original design images, thumbnails, placements, notes, and acceptance state are stored in the extension's local IndexedDB. - No account, analytics, advertising, or developer-operated cloud service is used. - Export one or more projects to a `.ui-compare-project` archive and import them as new local projects on another computer. - Archive imports validate format version and file integrity before writing data. The heatmap compares only the currently visible area and runs only when the user requests or refreshes it. Dynamic content, font rendering, browser zoom, and device-pixel differences can produce expected visual noise. UI Compare is intended for frontend developers, designers, and QA reviewers performing visual UI acceptance. It does not provide cloud sync, collaboration, AI matching, or continuous background monitoring.