Media
3 items
Description
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.