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 Action
# Presale preview — UICanary is in development; this is the planned interface.
- name: Visual regression
uses: uicanary/visual-regression@v1
with:
api-key: ${{ secrets.VR_API_KEY }}
viewports: "1280x800, 390x844"
threshold: 0.1
Store the API key in your repo secrets. That's the whole integration — about five minutes.
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 is 1,000 screenshots/month — more than enough to run this entire tutorial. 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 (1)
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