PixelLens

About

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.