FrameCheck - Computer Vision UI Regression Detector for Frontend Teams

Your Playwright tests pass green and your UI is completely broken — congratulations. FrameCheck runs computer vision pixel-diff plus layout structure analysis on every PR deploy preview to catch visual regressions that unit tests will never see.

𝕏 Post Reddit HN

Difficulty

intermediate

What is it?

Frontend teams using Vercel preview deployments or Netlify deploy previews have no automated visual regression layer — they rely on manual QA or expensive tools like Percy that charge per screenshot. FrameCheck integrates with GitHub Actions, captures screenshots of configured routes on each PR preview, runs OpenCV-based structural diff plus a lightweight ResNet embedding similarity check, and posts a visual diff report as a GitHub PR comment. Priced at $39/month for solo devs, $99/month for teams. Why buildable now: Playwright's screenshot API is rock solid, OpenCV Python is trivially deployable on Railway, and Vercel preview URLs are predictable enough to automate against.

Why now?

Vercel deploy previews became the default frontend workflow in 2024, creating a universal PR preview URL pattern that makes automated screenshot capture trivially scriptable for the first time.

▸Playwright screenshot capture on Vercel and Netlify preview URLs triggered by GitHub Actions.
▸OpenCV structural diff plus ResNet embedding similarity score per route.
▸GitHub PR comment with side-by-side diff images and regression severity badge.
▸Baseline management dashboard to approve or reject visual changes as new baseline.

Target Audience

Frontend developers and small engineering teams at product companies — roughly 500k teams using Vercel or Netlify with no visual regression tooling.

Example Use Case

A frontend lead at a 15-person startup merges a CSS change that breaks the checkout page on mobile — FrameCheck catches it on the PR preview before it hits main, posts a red-bordered diff image in the PR comment, and blocks the merge in 90 seconds.

User Stories

▸As a frontend developer, I want visual regression checks on every PR, so that I catch CSS regressions before they reach production.
▸As a team lead, I want a baseline approval flow, so that intentional design changes don't block PRs forever.
▸As a QA engineer, I want per-route diff severity scores, so that I know which regressions need immediate attention.

Done When

✓Screenshot capture: done when GitHub Action fires on PR open and captures screenshots of all configured routes within 60 seconds
✓PR comment: done when a formatted GitHub comment with side-by-side diff images appears on the PR automatically
✓Baseline approval: done when user clicks approve in the dashboard and the new screenshot becomes the baseline for future diffs
✓Stripe billing: done when user pays $99 and unlimited routes are immediately unlocked.

Is it worth building?

$99/month x 60 team plans = $5,940 MRR at month 5. Assumes 2% conversion from GitHub Actions Marketplace discovery.

Unit Economics

CAC: $20 via GitHub Marketplace organic and Reddit posts. LTV: $1,188 (12 months at $99/month). Payback: under 1 month. Gross margin: 82%.

Business Model

$39/month solo, $99/month team (5 seats), $249/month unlimited repos.

Monetization Path

Free tier (3 routes per repo), paid tier unlocks unlimited routes and historical baseline management.

Revenue Timeline

First dollar: week 3 via first team plan. $1k MRR: month 3. $5k MRR: month 7.

Estimated Monthly Cost

Railway for CV worker: $30, Supabase: $25, Vercel for dashboard: $20, Stripe fees: ~$20 at early MRR. Total: ~$95/month at launch.

Profit Potential

Full-time viable at $5k-$10k MRR with 50-100 team plan customers.

Scalability

High — can add Figma baseline comparison, multi-viewport testing, and accessibility overlay.

Success Metrics

200 GitHub Actions installs in month 1. 30 paid plans by month 2. Under 5% false positive rate on real projects.

Launch & Validation Plan

Publish GitHub Action to Marketplace with free tier, collect 50 installs, survey users on false positive rate before charging.

Customer Acquisition Strategy

First customer: post the GitHub Action to r/webdev and the Vercel Discord with a before/after PR comment screenshot — offer free team plan for 60 days to first 10 teams. Ongoing: GitHub Actions Marketplace organic, ProductHunt launch, frontend Twitter/X.

What's the competition?

Competition Level

Medium

What's the roadmap?

Feature Roadmap

V1 (launch): Playwright capture, OpenCV diff, GitHub PR comments, baseline management. V2 (month 2-3): Multi-viewport testing, Slack alerts, Figma baseline import. V3 (month 4+): Accessibility overlay, flakiness detection, API access for CI systems.

Milestone Plan

Phase 1 (Week 1-2): Screenshot capture, OpenCV diff, and GitHub PR comment working end-to-end. Phase 2 (Week 3): Dashboard live, Stripe billing, GitHub Action published to Marketplace. Phase 3 (Month 2): 30 paid plans, false positive rate under 5% validated on 10 real projects.

How do you build it?

Tech Stack

Python, OpenCV, Playwright, FastAPI, Supabase, GitHub API, Stripe — build with Cursor for CV pipeline and API routes, v0 for diff report UI

Suggested Frameworks

OpenCV, Playwright (Python), ResNet via torchvision

Time to Ship

3 weeks

Required Skills

OpenCV, Playwright, FastAPI, GitHub Actions YAML, Supabase.

Resources

OpenCV Python docs, Playwright screenshot API, GitHub REST API for PR comments, torchvision ResNet docs.

MVP Scope

capture/screenshot.py (Playwright screenshot runner), cv/diff.py (OpenCV structural diff logic), cv/similarity.py (ResNet embedding comparator), api/webhook.py (GitHub webhook handler), api/comment.py (GitHub PR comment poster), app/dashboard/page.tsx (baseline management UI), lib/db/schema.ts (Supabase schema for routes and baselines), action.yml (GitHub Actions action definition), .env.example (required env vars)

Core User Journey

Add GitHub Action to repo -> open a PR -> receive diff comment in 90 seconds -> approve or reject as new baseline -> upgrade to paid when free route limit hit.

Architecture Pattern

GitHub PR opened -> Actions workflow triggered -> Playwright captures screenshots of preview URL -> screenshots sent to FastAPI -> OpenCV diff and ResNet similarity computed -> results stored in Supabase -> GitHub PR comment posted with diff images.

Data Model

Repo has many Routes. Route has many Baselines. Baseline has many Screenshots. Screenshot has one DiffResult. DiffResult has one PRComment.

Integration Points

GitHub API for PR comments and webhook events, Playwright for screenshot capture, OpenCV for structural diff, torchvision ResNet for embedding similarity, Supabase for baseline storage, Stripe for billing, Railway for CV worker hosting.

V1 Scope Boundaries

V1 excludes: Figma baseline import, mobile emulation viewports, accessibility overlay, Slack alerts, white-label.

Success Definition

A frontend team the founder has never contacted installs the GitHub Action, catches a real visual regression on a PR, and upgrades to the team plan without any onboarding help.

Challenges

False positives from font rendering and anti-aliasing differences across OS environments will frustrate users — threshold tuning per project is mandatory and must be easy.

Avoid These Pitfalls

Do not hardcode diff thresholds — every project has different tolerance for pixel variation. Do not store screenshots without a clear retention and deletion policy. Finding the first 10 paying teams will take 3x longer than the CV pipeline — budget distribution time accordingly.

Security Requirements

Supabase Auth with GitHub OAuth, RLS on all repo-scoped tables, GitHub webhook HMAC validation, screenshots stored in private Supabase Storage bucket, 30-day auto-deletion of old screenshots.

Infrastructure Plan

Railway for FastAPI and CV worker, Vercel for Next.js dashboard, Supabase for Postgres and storage, GitHub Actions for CI trigger, Sentry for error tracking — total ~$95/month at launch.

Performance Targets

Full diff cycle under 90 seconds from PR open, API response under 500ms, dashboard loads under 2s, handles 200 PRs/day across all customers at launch.

Go-Live Checklist

☐Security audit complete
☐Stripe billing tested end-to-end
☐Sentry error tracking live
☐Railway uptime monitoring configured
☐Custom domain with SSL set up
☐Privacy policy and screenshot data retention policy published
☐5 beta frontend teams signed off
☐Rollback plan documented
☐GitHub Marketplace listing and r/webdev launch post drafted.

First Run Experience

On first run: the dashboard shows a pre-seeded demo repo with 3 routes, a baseline screenshot, and a sample diff with a red-bordered regression highlight. User can immediately browse the diff and click approve without connecting GitHub. No manual config required: demo mode runs on seeded screenshots with no GitHub token needed.

How to build it, step by step

1. Define Supabase schema for Repo, Route, Baseline, Screenshot, and DiffResult tables. 2. Build Playwright screenshot runner that accepts a URL list and outputs PNG files. 3. Build OpenCV structural diff function comparing baseline and PR screenshots with configurable threshold. 4. Build ResNet embedding similarity scorer using torchvision on cropped UI regions. 5. Build FastAPI endpoint that accepts screenshot upload, runs diff, and returns severity score. 6. Build GitHub PR comment poster using GitHub REST API with side-by-side diff image embeds. 7. Write action.yml GitHub Action that triggers on PR open, captures screenshots, and calls FastAPI. 8. Build Next.js baseline management dashboard showing current vs proposed screenshots with approve/reject buttons. 9. Add Stripe Checkout for $99/month team plan with webhook to unlock unlimited routes. 10. Verify: open a PR with a deliberate CSS change, confirm GitHub Actions fires, diff comment appears on the PR within 90 seconds, and the dashboard shows the new diff.

Generated

April 20, 2026

Model

claude-sonnet-4-6

← Previous

ChurnLens - NLP Support Ticket Churn Predictor for SaaS Teams

RitualSet - Streak-Based Daily Habit Tracker Built for Makers Who Actually Ship

Disclaimer: Ideas on this site are AI-generated and may contain inaccuracies. Revenue estimates, market demand figures, and financial projections are illustrative assumptions only — not financial advice. Do your own research before making any business or investment decisions. Technology availability, pricing, and market conditions change rapidly; always verify details independently.