Overlay Figma mockups on the live page to verify AI-generated UI, annotate with numbered pins, and send fix requests to your AI.
Users
35
0 in 30 days
Rating
5.0 / 5
unchanged in 30 days
Ratings
4
0 in 30 days
Store rank
#123K
#103K among extensions
Version
0.1.2
updated 20 Jul 2026
Users
monthly, 4 months
Latest, 16 Oct 2026:35 usersMove the mouse over the chart for any month
Ratings count
monthly, 4 months
Latest, 16 Oct 2026:4 ratingsMove the mouse over the chart for any month
The Chrome Web Store rounds user counts down to the leading digit, so the user line moves in steps. The ratings count is exact and is the better signal of real adoption.
About Figma Overlay & AI Design QA — PixelLens
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.
Growth
Window
Users
Change
Ratings
Rating
7 days
−1
−2.8%
0
0.00
30 days
0
+0.0%
0
0.00
Chrome Web Store search rankings
Where Figma Overlay & AI Design QA — PixelLens appears when people search the store, with the 30 day change