Skip to content
Add to Chrome

Overlay the comp.Spot the gaps.Fix them with AI.

A Chrome extension that overlays design comps on the page you’re building.

Add to ChromeGuide
A
localhost:3000トップページ | Acme Corp リニューアル
Active
X
Center
Y
px
Scale
×
Opacity
%
Measure7 differences2:02 PM· Viewport ·You
Diff view
  • No match 2
  • ≠.gnav > li:nth-child(4) aNot matched
  • ≠.hero__badge imgNot matched
  • Position 7
  • 1.hero__title↓3px
  • 2.gnav > li:nth-child(3) a→2px
  • 3.card-list .card__imgw+4
  • 4.section--news h2?↓2px
  • 5.btn--primaryh−2
  • 6.footer__copy?↓1px
  • 7.breadcrumb li←1px
  • Color 3
  • ◐.btn--primary#1F6FEB → #2563EB→
  • ◐.hero__lead#4B5563 → #374151→
  • ◐.news-list .tag#F3F4F6 → #EEF2FF→
  • 3 hidden as low confidence

? = low confidence (below 0.6)

←↑↓→ Move 1px · Shift 10px · H Show/hide
A
localhost:3000トップページ | Acme Corp リニューアル
Active
X
Center
Y
px
Scale
×
Opacity
%
Scale
Blend
Opacity
All comps
Layering
←↑↓→ Move 1px · Shift 10px · H Show/hide
In use

Click the icon. Drop a comp. That’s it.

  1. 01

    The panel opens in its own window

  2. 02

    Drop in a comp image

  3. 03

    Arrow keys move X · Y by 1px

  4. 04

    Difference lights up only the gaps

  5. 05

    Position, size and color, in px

  6. 06

    Paste a prompt; AI measures and fixes

OpenThe panel opens in its own window

* The AI agent screen and fix flow are illustrative. Actual output and results depend on the AI agent you use.

The panel

Everything, in one panel.

It opens in its own window outside the page, so the page keeps its width.

  1. 01

    Dozens of them — ‹ › or a searchable list.
  2. 02

    X, Y, scale and opacity, to the pixel. Arrow keys work too.
  3. 03

    Position and size offsets per element, in px. Color too.
  4. 04

    Copy the prompt into your AI. It measures and reports.
A
localhost:3000トップページ | Acme Corp リニューアル
Active
X
Center
Y
px
Scale
×
Opacity
%
Scale
Blend
Opacity
All comps
Layering
←↑↓→ Move 1px · Shift 10px · H Show/hide
Compare

More than an overlay.

How it differs from a typical overlay extension.

PixelPontTypical overlay extension
Overlay a comp✓✓
Blend modes (Invert · Difference)✓✓
Measure gaps per element, in px✓—
Usable from AI agents✓—
Separate window — page width untouched✓△
Dozens of comps saved per site✓△
Comp images stay on your device✓△
PriceFree

△ varies by product.

What it does

Built for everyday use.

  • Invert · DifferenceChange the blend to make only the gaps stand out
  • ∞Dozens of comps, saved per site
  • 1pxArrow keys for 1px, Shift for 10px
  • ⇄Switch PC and SP comps instantly with ‹ ›
  • AIPaste a prompt; your AI measures
  • 0Comp images never leave your device

Pixel checking
isn’t a solo job anymore.

Add to Chrome

Free·Chrome