Pixelsitter

Design QA and visual regression monitoring for Webflow

like the design.

While you're building it, Pixelsitter measures the page against the Figma frame it was drawn from. Once it's live, it re-captures every page you watch and emails you the moment the layout shifts — with the picture attached. You find out on a Tuesday morning. Not from your client, on a Friday afternoon.

Free forever for one site. No card, no CI pipeline, no Webflow API keys.

fernwood.example/ 1440×900 Changed · 1.57%
The baseline capture of the Fernwood Coffee homepage, approved on the last run. The new capture of the same page, in which a longer product title has pushed the card grid out of line. The pixel diff of the two captures, with every changed pixel painted magenta.

Drag to compare

Baseline · Tuesday 09:00 New capture · today 09:00

A real run. Someone pasted the full lot name into a CMS title field; it wrapped to a second line, the card grew, and the row below it moved down the page.

The gap

Uptime monitors answer a question nobody asked.

They confirm the page returned 200. They can't see that the hero lost its padding, that a pricing card now wraps to two lines, or that the logo is 400px wide on a phone. Webflow gives you no staging diff and no visual publish history, so the first person to notice is whoever loves the site least.

  • A CMS edit ran long

    A client pastes a fuller product name. The card grows, the grid falls out of line, and every collection item under it slides down the page.

  • A class got renamed

    Someone tidies up in the Designer. A section loses its padding on publish — and only at tablet width, which nobody thinks to open.

  • An image came in wrong

    A 4:3 photo drops into a 16:9 slot. Desktop looks fine. The phone version has been broken since the shoot.

How it works

Four steps, then it's someone else's job.

  1. 01

    Add the URL, prove it's yours

    Paste the address and drop one TXT record into the domain's DNS. Pixelsitter re-checks every 15 minutes and starts the moment it lands. No Webflow login, no API key, no crawler you have to whitelist.

  2. 02

    It photographs the pages you list

    Desktop at 1440×900, plus tablet 768×1024 and mobile 390×844 from Agency up. Hourly, daily or weekly — or the second Webflow fires its publish webhook, so a scan lands before your client refreshes.

  3. 03

    It diffs against the baseline you approved

    Every capture is compared to the last one you signed off on, pixel by pixel. Anti-aliasing and font-rendering noise are filtered out first, and anything under 0.5% of the page never reaches you. Quiet is the default state.

  4. 04

    You get one email with the picture in it

    A thumbnail, the percentage that changed, and a link straight to the before/after. Two buttons wait for you there: approve it as the new baseline, or flag it as broken. Slack instead of email, if that's where you live.

Design mode

Or point the same diff at the design.

Monitoring compares a page against the last version you approved — a target that moves every time you approve one. Point the same check at the Figma frame the page was drawn from and the target stops moving: the gap isn't news any more, it's the work still to do. One number climbing to 100, and a list of what stands between you and it.

Homepage — design check

Checked

Figma frame · drawn at 1440 · today 11:20 · 18.4s

Check again

Match

96.4%

Matched the designStill to do

Typography “Roasted the week you order it” renders at 24px — drawn at 48px 1 element
Typography Line height 1.2 where the design says 1.5 — one declaration, not sixty-eight bugs 68 elements
Wrapping Hero subhead wraps to 4 lines, drawn on 2 — 38 characters a line against 57 1 element
Colour Body text is #333333; the nearest value in the design is #2f2f2f 28 elements
Contrast Footer links sit at 3.1:1 on their background — WCAG AA asks for 4.5:1 9 elements
Copy “Free delivery over €40” is in the design and on no page 1 element

Every row knows where it lives. Click one and the region lights up on the capture, with the same region of the artboard beside it — and a row your team already signed off can be ignored, so it stops competing with the ones that matter.

  • Paste a Figma frame link, or upload a PNG
  • Re-sync when the design moves — never behind your back
  • Text matched element by element, not value by value
  • Contrast and overflow, with no design at all
  • Copy drawn and never built, and built and never drawn
  • Runs on the domain you already verified
  • Check a *.webflow.io staging URL while you build
  • Re-check every artboard on publish

The report

Plain enough to forward to a client.

Not a pixel-diff dashboard. A run is five numbers and a stack of before/afters, each one waiting on a yes or a no. This is the whole interface. One button turns it into a PDF you can send — on Studio, with your logo on it and ours nowhere. A design check prints the same document in the other vocabulary: Pixel-perfect proof, the design beside the build, page by page.

Run #418

Completed

Fernwood Coffee · Nightly · today 09:00 · 41.6s

Delete run

Summary

12

Pages scanned

2

Changed

10

Unchanged

0

First captures

1.57%

Largest diff

Homepage

Changed

/ · 1440×900 · 1.57% of pixels changed

Approve as baseline Flag as broken
Before / afterSide by sideDiff OverlayNew capture
The changed region of the homepage, highlighted magenta in the diff view.
No change Shop0.00%
Changed Subscriptions0.94%
No change Wholesale0.00%
  • Every client site in one dashboard
  • Per-client tags
  • Pause a site, a page or a schedule
  • Slider, side-by-side, diff and overlay views
  • Email and Slack alerts
  • Up to a year of history
  • White-label PDF reports
  • Re-run a scan by hand, any time

Pricing

Priced like a monitoring tool, not a testing platform.

One site is free forever, so you can watch something that matters before you decide.

Free

Watch one site, weekly.

$0forever

 

Start free
  • 1 site
  • 5 pages per site
  • 5 artboards per site
  • Weekly scans
  • Desktop capture
  • 100 captures a month
  • 1 schedule per site
  • 7 days of history
  • Email alerts

Solo

For a freelancer with a handful of client sites.

$19/month

 

Start free, upgrade later
  • 3 sites
  • 25 pages per site
  • 25 artboards per site
  • Daily scans
  • Desktop capture
  • 2,500 captures a month
  • 2 schedules per site
  • 1 month of history
  • Email alerts

Studio

Hourly scans, unlimited pages, your logo on the report.

$149/month

 

Start free, upgrade later
  • 30 sites
  • Unlimited pages per site
  • Unlimited artboards
  • Hourly scans
  • Desktop, tablet and mobile
  • 40,000 captures a month
  • Unlimited schedules per site
  • 1 year of history
  • Scan on publish (Webflow webhook)
  • Slack alerts
  • Design checks on publish
  • White-label PDF reports

Enterprise

Need more than the plans above? If none of them fit your volume, workflow or procurement requirements, we'll put together a plan tailored to your team — with custom limits and invoicing.

Contact sales

One capture is one page at one breakpoint in one run — a design check is one of them. Quotas reset on the first of the month. Cards, invoices and cancellation live in the Stripe portal.

Questions

The ones people actually ask.

Does it need access to my Webflow account?

No. It works on the published site. You add one TXT record to the domain's DNS to prove it's yours, and that's the only access it needs. Connecting Webflow's publish webhook is optional — it changes when a scan runs, not what Pixelsitter can see.

Will it wake me up over a rotating testimonial?

Only if more than half a percent of the page's pixels move. Anti-aliasing and font-rendering noise are filtered out before anything is counted, so a page that renders a hair differently today stays quiet.

Does it work on sites that aren't Webflow?

Yes — it captures published URLs, so anything you can open in a browser can be watched. It's built for Webflow because that's where the problem is worst: clients edit the CMS, there's no staging diff, and no visual publish history.

What happens to my sites if I downgrade?

Nothing gets deleted. Sites past your new limit go dormant — the oldest ones keep scanning — and they start again when you upgrade or remove one.

How do I cancel?

In the Stripe portal, any time. You keep the plan until the period you've already paid for ends, then drop to Free with every site and baseline intact.

What does design mode need from Figma?

A link to the frame. Pixelsitter pulls the render once and keeps it, so a check always compares the build against the design you linked — a target that slid on its own would move the score without the build changing. When you do redraw it, Re-sync from Figma is one button. Or skip Figma entirely and upload a PNG artboard: everything except the token and copy comparisons works on an export.

Is design mode a second product, with a second site to set up?

No. It runs against the same domain you already verified, on every plan, and artboards get their own allowance alongside the pages you monitor. While the page is still being built you can point a check at a *.webflow.io staging URL instead of the live one.

Can I put my own branding on the reports?

On Studio, yes — download a run as a PDF carrying your logo, colour and footer, with no mention of us anywhere in it. A maintenance retainer looks like your work rather than a tool you resell.

Contact

Talk to a person, not a ticket queue.

Questions about a plan, an invoice, or whether Pixelsitter fits how your team works? Write to us and you'll hear back within one working day.

Start with one site. It costs nothing.

Add a URL, approve the first capture, and go back to work. The next time something moves, you'll be the one who noticed.

No credit card. One site free, for as long as you want it.