The problem: your agent ships UI faster than you can review it
AI coding assistants changed the math of frontend work. A landing page tweak that used to take an afternoon now takes a prompt. But every UI change your agent ships carries the same five visual bugs: layout shifts, truncated text, overlapping elements, broken responsive breakpoints, theme regressions. The CSS compiles. It looks fine on localhost. Then staging shows the damage.
Agent skills like ProofShot and pursr gave your agent eyes — it can screenshot what it just built and verify the change. Genuinely useful. But it's a point-in-time check: it answers "is this change OK?" and then evaporates. It can't answer "has every release for the last three months been clean?"
Manual review doesn't scale either: 10 PRs × 5 pages × 3 viewports = 150 screenshots a week. Nobody reviews 150 screenshots. You don't need another pair of eyes. You need a memory.
Why not just agent skills or Playwright screenshots?
The free options fail after the screenshot, not before it:
- No baseline management across branches — every PR diffs against what, exactly?
- No team review workflow — a screenshot buried in a CI log isn't a review.
- Noise compounds — cross-OS rendering differences, font and animation false positives pile up until nobody trusts the check and it gets disabled.
Agent skills are great at single-point verification. A CI persistence layer is good at "every release was clean." They're complements, not substitutes. You saved the subscription fee and spend several hours a week triaging noise — for a small team, that's the more expensive bill.
Step 1 — Add the workflow
.github/workflows/visual.yml — free visual regression you can run today
name: Visual regression
on: [pull_request]
jobs:
visual:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npx playwright install --with-deps chromium
- run: npx playwright test
// tests/visual.spec.ts
import { test, expect } from '@playwright/test';
test.use({ viewport: { width: 1280, height: 800 } });
test('landing page looks right', async ({ page }) => {
await page.goto('https://uicanary.xingqingnet.com');
// freeze animations so they don't show up as diffs
await page.addStyleTag({
content: '*, *::before, *::after { animation: none !important; transition: none !important; }',
});
await expect(page).toHaveScreenshot('landing.png', {
maxDiffPixelRatio: 0.01, // tolerate 1% pixel noise
});
});
The catch: run npx playwright test --update-snapshots once to approve your baselines — after that, the baselines are PNGs you maintain by hand, and diff noise (fonts, animations, cross-OS rendering) compounds until nobody trusts the check. That maintenance tax is exactly what UICanary is being built to remove.
Step 2 — Set viewports and thresholds
Run desktop, tablet, and mobile in one pass. Give fonts and animations their own thresholds — they're the two biggest sources of false positives. After the first run, approve the baseline once; every PR after that diffs against it.
Step 3 — Review the PR comment
Open a PR and the bot comments with the diff, grouped so one AI-generated change shows as one group. You review 6 real changes instead of 60 screenshots.
Mock of the planned PR comment UI — illustrative, product in presale.
What it costs
Free tier will be 1,000 screenshots/month when UICanary launches. Early bird is $19/month locked for life, via a $1 fully-refundable presale deposit.
Building UICanary in public — the persistent visual QA layer for AI-shipped UI (eyes are free now, memory isn't). Early bird presale is open at https://uicanary.xingqingnet.com. Roast the approach in the comments; I'd rather hear it now.
Top comments (2)
i've noticed visual diff tools can flag false positives on high‑dpi screens, how do you tune the pixel tolerance to avoid noisy failures
Great question — this is the #1 thing that kills visual-regression setups. Three things that actually work in practice:
deviceScaleFactor(e.g. 1 or 2) in your Playwright context — mixed-DPI machines are the biggest source of phantom diffs.maxDiffPixelRatio: 0.01) instead of absolute pixel counts — it scales with viewport size.The honest part: this keeps a small suite green, but the moment you scale past a handful of pages the baselines become a maintenance tax. That's the exact problem I'm building UICanary to solve — persistent baselines across branches instead of PNGs you babysit.