Before and after screenshots on every PR

The idea

Every UI pull request triggers the same ritual: the reviewer squints at a JSX diff, gives up, opens the preview deploy, and clicks around trying to guess what changed. The question asked on every one of these PRs, what does this actually look like, is answerable by machine, from artefacts (prod URL, preview URL, the diff) that already exist.

Percy and Chromatic prove teams pay for screenshots in CI, but they sell pixel-diff regression testing: baselines to manage, snapshot tests to write, flaky diffs to approve. The wedge is dropping all of that. No tests, no baselines, no failures, just infer the changed routes from the diff, shoot prod versus preview at two widths, and put the side-by-side grid in the PR comment where review actually happens.

Who pays

The buyer is a frontend team lead on Vercel or Netlify with several UI PRs a day, at 20 to 60 dollars a month, well under Percy money because it is priced as review convenience rather than a testing platform. Distribution: GitHub Marketplace, free-for-public-repos visibility (the comment itself advertises in every OSS PR), and frontend communities where PR-review friction is a permanent complaint.

MVP scope

• GitHub App triggered by successful Vercel/Netlify preview deployments
• Route inference from changed files for file-based routers, with config fallback and one-level import following
• Playwright capture of prod vs preview at desktop and mobile widths, animation-disabled and settle-aware
• Single self-updating PR comment with side-by-side grids and full-size links on S3/CloudFront
• Free public-repo tier, Stripe-billed private tiers
• Skip for v1: pass/fail visual regression checks and baselines, component-level Storybook capture, cross-browser matrices, video walkthroughs, self-hosted workers

Build DiffShot, a GitHub App that posts before/after screenshots on every UI pull request. Stack: Playwright workers for capture, GitHub App for webhooks and comments, Next.js for dashboard and settings, S3 (plus CloudFront) for image hosting; Stripe for billing.

Core flow: team installs the app on a repo that deploys previews via Vercel or Netlify. On each PR, DiffShot waits for the preview deployment to succeed (deployment_status webhook), then infers which routes changed from the diff with zero test-writing: map changed files to routes for Next.js (app/ and pages/ conventions) and other file-based routers, follow component imports one level so a touched shared component maps to the pages importing it, and fall back to a .diffshot.yml route list when inference finds nothing. Cap at the five most relevant routes.

Capture each route twice, production URL (before) and preview URL (after), at desktop 1440px and mobile 390px, with animations disabled, fonts awaited and lazy content settled via network-idle plus a small scroll pass. Optional auth: the team supplies a login storage-state script or a bypass cookie/header for gated pages. Post one PR comment (updated in place on new pushes, never stacked) containing a side-by-side grid of before/after images per route and width, each linking to full-size captures on CloudFront. Highlight pixel-region changes with a subtle outline overlay, but this is review context, not a pass/fail visual test; no check failures.

Pages: landing, repo settings (route overrides, auth, widths), capture history, billing.

Pricing: free for public repos, 20 GBP/month per private repo, 60 GBP/month org-wide.