UI Compare

Compare live pages with design images locally for visual acceptance.

# UI Compare store listing, English ## Product name UI Compare ## Short description Compare live webpages with local design overlays, split view, blink, and pixel-difference heatmaps. ## Detailed description 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. ## Feature bullets - Overlay, blink, split, and pixel-difference heatmap modes - Per-page placement and comparison-state restoration - Drag, independent resize, scale, visibility, and lock controls - DOM element anchoring with saved selector and relative offset - Design-width viewport calibration with window-size restore - Multiple projects and multiple images per project - Acceptance status and page notes - Versioned, integrity-checked local project archive import/export - Local IndexedDB storage with no developer-operated server - Temporary active-tab access instead of broad host permissions ## Single-purpose statement UI Compare has one purpose: help users visually accept a live webpage against design images they choose by placing and comparing those images on the active page. ## Recommended category Developer Tools ## Support and website fields - Support email: `holy_nova@126.com` - Support URL: https://holynova.github.io/ui-compare-privacy-policy/ - Homepage: https://holynova.github.io/ui-compare-privacy-policy/ - Privacy policy: https://holynova.github.io/ui-compare-privacy-policy/