Local by default
Tools
DESIGN QA, REIMAGINED ✦ PIXEL-LEVEL PRECISION

Design Handoff Inspector

Compare your intended design against the implementation. Inspect visual changes, pinpoint possible layout issues, ignore dynamic content, and create a review-ready handoff report—all in your browser.

◈ Side-by-side◉ Diff heatmap▦ Issue grouping↓ Export reports
01 / IMPORT & REVIEW

Visual inspection workspace

Upload both screenshots of the same viewport, or start with the included example.

◫
Design reference

Figma / design screenshot

Choose image
PNG · JPG · WebP · GIF (first frame)
▧
Implementation

Screenshot from the built page

Choose image
Match the design viewport

Inspection canvas LIVE

Upload reference and implementation screenshots to begin.

◫

Every pixel tells a story.

Compare the design intent with what shipped. Try an example or add your two screenshots.

50%
Point at the preview to inspect colors

Actionable review findings

Regions are ranked by changed pixels. Categories are visual suggestions, not verified DOM diagnostics.

Your inspection findings will appear here.

Ready. Screenshot files are processed locally in the browser.

BUILT FOR DESIGN SYSTEM HANDOFFS

Make visual QA part of the workflow.

What differences can this inspect?

Pixel and edge analysis reveals changes that may involve spacing, color, alignment, typography, image content, or possible missing interface elements. Each region is a hypothesis for human review, not a precise CSS measurement.

Does it require Figma or a backend?

No. Export your Figma frame as an image and capture the matching implementation viewport. Both files are analyzed in the browser; nothing is uploaded by the core comparison engine.

What about dynamic content?

Use Ignore region for timestamps, animations, and changing avatars. Optional auto-alignment compensates for small capture offsets but should be disabled when pixel-accurate positioning matters.

Is this truly AI powered?

The reliable visual diff is deterministic. Optional on-device OCR compares text; a separately consented WebGPU language model can explain measured differences. Neither AI system verifies the live DOM or underlying CSS.

LOCAL AI SETUP

Set up AI on this device

First, a model needs to be loaded on your device

AI review uses a WebGPU language model locally. On first use, its files may require a large download. Screenshot pixels are not sent to this model; only measured findings are provided as text.

  1. 1. Check device
  2. 2. Download / cache
  3. 3. Prepare AI review
  4. 4. Review findings

Device & model resources

Measurements may be approximate
Device RAM / model memoryChecking device information…

Live system RAM, model RAM and GPU memory are not reliably exposed in browsers.

Browser website storageChecking storage…

Site-wide estimate; includes other PixelOkay tools and is not RAM.

ONE ACTION · ALL RECOGNIZED AI MODEL DOWNLOADS

Free AI model storage across PixelOkay

Scan this website origin for WebLLM and Transformers.js model caches, plus recognizable model files in other cache buckets. This includes caches from other PixelOkay tools, not only this tool. No site data or browser databases are cleared automatically.

Run a scan to see how many model caches can be cleared together.

Browser-native models and unknown IndexedDB/OPFS or private runtime caches may remain. Unknown application/user storage will not be deleted. Other running tools might redownload caches; close their tabs first.

Having trouble downloading or loading AI?

Old or incomplete AI model downloads may be using your browser's storage. First refresh the storage meter or try a smaller model. If setup still fails, inspect and remove recognized AI model caches with confirmation, then download again.

Only model caches are targeted. Other PixelOkay tools may need to redownload their models. Never clear all website data without exporting important chats and projects first.

Select “Check device” to see whether the current model can run.
AI is optional. Visual comparison remains available.
CROSS-TOOL MODEL CACHE CLEANUP

Delete all recognized AI model downloads?

Deleting these caches will cause other PixelOkay tools to download their models again. Loaded AI sessions in other tabs may be disrupted. Unidentified model caches and browser-managed models may remain.

Data-loss caution: This action does not intentionally delete saved chats, projects, drafts, localStorage or IndexedDB. Do not clear website data unless you have backed up work; clearing all website data may permanently erase saved work.

Compare design and implementation screenshots

Load two screenshots from the same viewport, compare overlays and pixel-difference views, then inspect candidate regions. Registration and ignore rectangles can help account for alignment or intentional changes; the results are visual hypotheses rather than DOM/CSS measurements.

Example workflow

  1. Capture the design reference and implementation at matching dimensions, or load the bundled pair.
  2. Start with alignment off, compare the five views, and mark intentional changes with ignore rectangles.
  3. Inspect candidate regions and color samples, then export an annotated PNG and findings CSV/JSON; use optional OCR only when text comparison helps.

Authored example: Compare two supplied page screenshots at the same viewport, mask an intentional label change and inspect a shifted button edge. Confirm the result against the actual implementation before filing a defect.

Limits and privacy: Images are downsampled for analysis, and alignment can hide shifts. A detected region is not a verified CSS/DOM measurement. Optional OCR requests Tesseract.js 5.1.1 and English language assets from jsDelivr; delivery and inference were not checked here. Reports omit original image bytes, but screenshot exports can still reveal sensitive interface content.

Related tools