Figma Overlay & AI Design QA

Overlay Figma mockups on the live page to verify AI-generated UI, annotate with numbered pins, and send fix requests to your AI. Ship UI with Copilot, Cursor, v0, Claude Code, or Figma Make? Stop eyeballing "is this 4px off?" — overlay your Figma design on the live page and see every pixel difference instantly. And stop describing bugs to your AI in paragraphs — pin numbered memos right on the page and paste one annotated screenshot into the chat.

PixelLens is AI design QA in the browser: verify that AI-generated UI actually matches the Figma design, annotate what's wrong, measure, and sample colors without leaving the tab.

Perfect for front-end developers, publishers, and design QA teams verifying that the implementation — hand-written or AI-generated — actually matches the Figma design.

WHY PIXELLENS

• AI-generated UI QA — the fastest way to catch when an AI coding tool ships markup that drifts from the design, before it ships to users
• Annotate & hand off to your AI — hover to see the component name (React, Vue, Angular, Svelte), drop numbered pins with memos on any element or empty spot, then copy one annotated screenshot (+ memo text with CSS selectors) and paste it straight into Claude, Cursor, or ChatGPT as a change request
• Figma overlay in one paste — paste a Figma frame link (⌘V) and it becomes an overlay layer automatically, no exporting
• Difference blend — matching areas turn black so misalignments glow instantly (the fastest way to compare design to website)
• Onion-skin blink comparison, opacity slider, invert, hide
• Nudge with arrow keys (1px) or ⇧+arrows (10px), drag the overlay directly, or type exact X/Y/scale
• Layers shared across every tab in real time — set up once, verify everywhere
• Measure distances between any two points; pick colors anywhere on screen (EyeDropper, HEX copied)
• Breakpoint slots — assign Desktop/Tablet/Mobile mockups and the right one activates as you resize

HOW IT WORKS 1. Click the toolbar icon (or Alt+Shift+P) to open the panel 2. Add a mockup: drag & drop, paste an image, pick a file, or paste a Figma frame link 3. The mockup is centered on a viewport-wide sheet at its original size — align, blend, measure

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.