PixelPerfect CSS Diff

Tracking since May 1, 2026.

Changelog

• May 18, 2026
  description

  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.

  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.

Permissions & access

Permissions

storage

Host access

<all_urls>

Screenshots