PixelLens

Pixel-perfect design overlay: compare Figma mockups against the live page with blend modes, measure and eyedropper tools.

PixelLens overlays your design mockups directly on top of the live page, so you can catch every pixel of drift between design and implementation — right inside your browser. WHY PIXELLENS • Paste a Figma frame link (⌘V) and it becomes an overlay layer automatically — no manual exporting • Or drag & drop / paste any image as a mockup • Difference blend turns matching areas black so misalignments glow instantly • Onion-skin blink comparison, opacity slider, invert, and hide • Nudge with arrow keys (1px) or ⇧+arrows (10px), drag the overlay directly, or type an exact X / Y / scale • Layers stay in sync across every tab in real time — set up once, verify everywhere • Measure distances between any two points on the page • Eyedropper picks a color anywhere on screen and copies the HEX • DOM change highlight boxes any element whose style/class changes or that is newly added — handy while tuning CSS • Copy context for Claude: exports the overlay screenshot plus precise pixel metrics so an AI assistant can propose exact CSS fixes • Multilingual UI: English, Korean, Japanese HOW IT WORKS 1. Click the toolbar icon (or press Alt+Shift+P) to open the panel 2. Add a mockup: drag & drop, paste an image, choose a file, or paste a Figma frame link 3. The mockup is centered on a viewport-wide sheet at its original size — align, blend, and measure against the live page PRIVACY Everything stays in your browser. The only network request is to the Figma API, and only when you paste a Figma link using your own personal access token. No analytics, no tracking, no developer server.