PixelAgent - Autonomous Visual QA Agent That Compares Figma Designs to Live Production

Your designer approved it, your vibe-coded app shipped it, and now it looks nothing like the mockup. PixelAgent is an AI agent that autonomously screenshots your live app, compares every screen to your Figma frames, and files GitHub Issues for every drift it finds.

𝕏 Post Reddit HN

Difficulty

intermediate

What is it?

In the April 2026 vibe-coding wave, teams are shipping UIs with Lovable, v0, and Bolt at a pace that breaks designer-developer alignment constantly. The gap between Figma and production is a running joke on every design Twitter thread. PixelAgent runs as a scheduled AI agent that uses Playwright to screenshot every route of your deployed app, fetches corresponding Figma frames via the Figma REST API, runs pixel-level diff and Claude vision semantic comparison, and autonomously files labeled GitHub Issues with annotated before/after screenshots. No human QA needed in the loop. Buildable now: Playwright, Figma REST API, and Claude vision are all stable and composable in a single Node.js worker.

Why now?

The vibe-coding wave of April 2026 means thousands of teams are shipping Figma-designed UIs via Lovable and v0 daily — visual drift is at an all-time high and no autonomous agent exists to catch it without manual test setup.

▸Playwright crawls all configured routes and screenshots every viewport on a cron schedule.
▸Figma REST API fetches matching frame exports and pixel-diffs against live screenshots.
▸Claude Vision semantic diff explains what changed in plain English beyond raw pixel delta.
▸GitHub Issues filed automatically with annotated diff image and Figma frame link.

Target Audience

Frontend engineers and design leads at product-led startups using Figma and shipping fast — roughly 500k teams globally using Figma with a linked GitHub repo.

Example Use Case

Kai, a solo founder who shipped a SaaS UI with Lovable, connects PixelAgent and wakes up to a GitHub Issue showing that his pricing page button color drifted from Figma's brand blue to Tailwind's default blue after a dependency update — caught before a single user complained.

User Stories

▸As a solo founder, I want visual regressions filed as GitHub Issues automatically, so that I catch UI drift before users complain.
▸As a design lead, I want each GitHub Issue to include the original Figma frame alongside the production screenshot, so that I can see the exact delta at a glance.
▸As a frontend engineer, I want daily scans without configuring a test suite, so that I get QA coverage without writing Playwright tests manually.

Acceptance Criteria

Screenshot crawl: done when all configured routes are screenshotted without timeout on a 10-page app. Figma diff: done when pixel diff score and diff image generate in under 20 seconds per frame. GitHub Issue: done when Issue is created with diff image embedded and Figma frame URL linked. Claude explanation: done when plain-English description accurately describes the visual change in 80% of test cases.

Is it worth building?

$39/month x 50 projects = $1,950 MRR by month 2. $99/month team plan x 40 teams = $3,960 MRR. $5k MRR realistic by month 4 targeting vibe-coding communities.

Unit Economics

CAC: $15 via Discord DMs. LTV: $468 (12 months at $39/month). Payback: 1 month. Gross margin: 85%.

Business Model

SaaS subscription $39/month per project

Monetization Path

Free: 1 project, weekly scan. Pro $39/month: 5 projects, daily scans, GitHub Issues. Team $99/month: unlimited projects, Slack alerts, custom thresholds.

Revenue Timeline

First dollar: week 3. $1k MRR: month 2. $5k MRR: month 5.

Estimated Monthly Cost

Fly.io Playwright worker: $35, Claude Vision API: $40, Supabase: $25, Vercel: $20, Resend: $10. Total: ~$130/month.

Profit Potential

Strong at $5k–$20k MRR targeting agencies managing multiple client Figma files.

Scalability

High — multi-repo, mobile viewport scanning, Storybook integration, and white-label agency plans are natural V3 plays.

Success Metrics

Week 2: 30 beta projects connected. Month 1: 20 paid projects. Month 3: 85% retention.

Launch & Validation Plan

Post in the Lovable Discord and v0 community asking how they catch Figma-to-production drift — collect 20 signups before writing Playwright code.

Customer Acquisition Strategy

First customer: DM 20 solo founders in Lovable Discord and Bolt community offering free 3-month beta in exchange for weekly feedback. Ongoing: Twitter/X vibe-coding threads, Hacker News Show HN, r/webdev, ProductHunt launch.

What's the competition?

Competition Level

Low

What's the roadmap?

Feature Roadmap

V1 (launch): Playwright crawl, Figma diff, Claude Vision explanation, GitHub Issue filing. V2 (month 2-3): Slack alerts, custom diff threshold, mobile viewport scanning. V3 (month 4+): auto-fix PR draft, Storybook integration, agency multi-client dashboard.

Milestone Plan

Phase 1 (Week 1-2): Playwright screenshotter, Figma fetcher, pixelmatch differ all working locally. Phase 2 (Week 3-4): BullMQ queue, GitHub reporter, Fly.io deploy, Stripe billing live. Phase 3 (Month 2): ProductHunt launch, 20 paid projects, Slack alerts shipped.

How do you build it?

Tech Stack

Node.js, Playwright, Figma REST API, Claude Vision API, GitHub REST API, Supabase, BullMQ for job queue, Vercel Cron — build with Cursor for agent logic, v0 for dashboard

Suggested Frameworks

Playwright, LangChain for Claude orchestration, BullMQ

Time to Ship

3 weeks

Required Skills

Playwright browser automation, Figma REST API, Claude Vision, GitHub API, BullMQ job queue.

Resources

Playwright docs, Figma REST API reference, Anthropic Vision API docs, GitHub REST API docs, BullMQ docs.

MVP Scope

agent/screenshotter.ts (Playwright crawler), agent/figma_fetcher.ts (Figma API frame export), agent/differ.ts (pixelmatch diff), agent/claude_explainer.ts (Claude Vision semantic diff), agent/github_reporter.ts (GitHub Issue filer), queue/worker.ts (BullMQ job handler), pages/dashboard.tsx (project config UI), api/cron.ts (Vercel Cron trigger), db/schema.sql (Supabase tables).

Core User Journey

Connect Figma and GitHub -> configure routes -> receive first drift report in under 24 hours -> upgrade to daily scans.

Architecture Pattern

Vercel Cron fires -> BullMQ job enqueued -> Fly.io Playwright worker screenshots all routes -> Figma API fetches frame exports -> pixelmatch computes diff score -> if score exceeds threshold Claude Vision describes drift -> GitHub API files annotated Issue -> result stored in Supabase -> Slack alert sent.

Data Model

Project has many ScanRuns. ScanRun has many RouteDiffs. RouteDiff has one PixelDiff and one ClaudeExplanation. GitHubIssue belongs to one RouteDiff.

Integration Points

Playwright for browser screenshots, Figma REST API for frame exports, Claude Vision API for semantic diff, GitHub REST API for Issue creation, BullMQ for job queue, Supabase for project config, Stripe for billing, Resend for alert emails.

V1 Scope Boundaries

V1 excludes: mobile app screenshots, Storybook integration, auto-fix PR creation, custom pixel threshold UI, multi-region scanning.

Success Definition

A solo founder connects their Figma file and GitHub repo, wakes up to a filed GitHub Issue describing a real visual regression they did not know about, and upgrades to paid without contacting support.

Challenges

Playwright running in a serverless environment is memory-hungry and expensive — must use Fly.io or Railway with persistent workers, not Vercel functions, or costs spiral at scale.

Avoid These Pitfalls

Do not run Playwright on Vercel serverless — memory limits will kill scans over 10 routes, use Fly.io persistent worker. Do not try to match Figma frames automatically via name heuristics — require manual mapping in V1 to avoid false positives. First 10 paying customers will come from community DMs not SEO — budget 3x more time for Discord outreach than development.

Security Requirements

Figma and GitHub OAuth tokens encrypted at rest in Supabase Vault. RLS on all project tables scoped to user_id. Rate limit: 10 scan triggers per minute per project. Input URL validation to prevent SSRF attacks.

Infrastructure Plan

Fly.io for Playwright worker (2 CPU, 2GB RAM Docker). Vercel for Next.js dashboard. Supabase for Postgres and Vault. Redis on Fly.io for BullMQ. Sentry for error tracking. GitHub Actions CI on main branch.

Performance Targets

10-route app scan under 3 minutes end-to-end. Diff image generation under 5 seconds per route. GitHub Issue filed under 10 seconds after diff completes. Dashboard loads under 1.5s LCP.

Go-Live Checklist

☐Playwright Docker image tested on 10-route app
☐Payment tested end-to-end in Stripe production
☐Sentry live on Fly.io worker
☐Fly.io health checks passing
☐Custom domain with SSL live
☐Privacy policy and terms published
☐5 beta teams signed off on issue quality
☐Fly.io rollback via fly deploy --image documented
☐ProductHunt and Twitter launch posts drafted.

How to build it, step by step

1. Scaffold Node.js project on Fly.io with Playwright installed in Docker image using mcr.microsoft.com/playwright base. 2. Build agent/screenshotter.ts that accepts a list of URLs and returns base64 PNG screenshots per route. 3. Build agent/figma_fetcher.ts using Figma REST API to export frames as PNG given file key and frame IDs. 4. Build agent/differ.ts using pixelmatch to compute diff score and generate diff image. 5. Build agent/claude_explainer.ts that sends before/after images to Claude Vision and returns plain-English drift description. 6. Build agent/github_reporter.ts that creates a GitHub Issue with diff image attachment and Figma frame link. 7. Set up BullMQ with Redis on Fly.io to queue scan jobs per project. 8. Build Next.js dashboard with v0 for project setup: URL list, Figma file key, frame ID mapping, GitHub repo selection. 9. Add Vercel Cron job that enqueues BullMQ jobs daily per active project. 10. Integrate Stripe Checkout for Pro upgrade and deploy dashboard to Vercel.

Generated

April 5, 2026

Model

claude-sonnet-4-6

← Back to All Ideas