FrameAudit - Autonomous Accessibility Violation Detector for Figma and Live URLs

WCAG compliance is not optional anymore and yet every design review still misses contrast ratios, missing alt text, and focus order chaos. FrameAudit is an AI agent that crawls your Figma file or live URL, detects accessibility violations, and generates a prioritized fix list with code snippets — before your dev team ships the problem.

𝕏 Post Reddit HN

Difficulty

intermediate

What is it?

Accessibility lawsuits against web products tripled between 2023 and 2025, yet most small product teams still rely on manual Lighthouse checks that catch only the obvious issues. FrameAudit uses computer vision to analyze Figma frames and Playwright to crawl live pages, then runs a violation detection pipeline covering contrast ratios, touch target sizes, focus order, missing labels, and ARIA attribute gaps. Each violation gets a severity score, a WCAG reference, and a ready-to-paste Tailwind fix. Results delivered in a Slack message and a downloadable PDF report. Target audience is freelance web developers and small product agencies billing accessibility audits at $500-$2,000 per project — FrameAudit does the audit in 90 seconds.

Why now?

ADA web accessibility lawsuits hit a record high in 2025 and the April 2026 wave of vibe-coded apps shipped without any accessibility review is creating a massive liability gap that small dev teams are only now waking up to.

Target Audience

Freelance web developers and small digital agencies doing accessibility audits — estimated 40k such professionals in the US alone billing $500+ per manual audit.

User Stories

▸As a freelance web developer, I want to run a WCAG audit on a client URL in under 2 minutes, so that I can deliver a professional accessibility report without spending 4 hours on manual testing.
▸As a Figma designer, I want contrast and label violations flagged before handoff, so that my developer does not return the design with a list of accessibility bugs.
▸As a digital agency owner, I want a monthly subscription that covers all my client audits, so that I can include accessibility reviews in every project proposal.

Acceptance Criteria

URL Audit: done when Playwright crawl completes and violations load in dashboard in under 90 seconds. Contrast Check: done when all text elements with contrast ratio below 4.5:1 are flagged with exact ratio values. PDF Report: done when downloaded PDF includes violation list, WCAG references, and fix snippets readable without the web app. Figma Audit: done when a Figma file URL triggers frame export, runs the vision pipeline, and returns violations within 2 minutes.

Is it worth building?

$49/month x 80 agencies = $3,920 MRR at month 3. $49/month x 200 agencies = $9,800 MRR at month 7. Math assumes 3% conversion from cold outreach to Webflow and Framer developer communities.

Unit Economics

CAC: $20 via Webflow community outreach. LTV: $588 (12 months at $49/month). Payback: 1 month. Gross margin: 85%.

Business Model

Pay-per-report ($9 per audit) or subscription ($49/month for 20 audits/month)

Monetization Path

First audit free, then pay-per-report or subscribe. Agencies upgrade to monthly plan after second paid audit.

Revenue Timeline

First dollar: week 2 via pay-per-report. $1k MRR: month 2. $5k MRR: month 6.

Estimated Monthly Cost

Claude Vision API: $50, Playwright serverless: $20, Vercel: $20, Supabase: $25, Stripe fees: ~$20. Total: ~$135/month at launch.

Success Metrics

Week 2: 20 free audits run. Week 4: 15 paid reports. Month 3: 60 active monthly subscribers.

Launch & Validation Plan

Run free audits on 10 popular freelancer portfolio sites and post the results publicly on X with FrameAudit branding — measure inbound signups within 48 hours.

Customer Acquisition Strategy

First customer: post a free live audit of a well-known Webflow template in the Webflow Experts Facebook group and offer 3 free audits to anyone who replies. Ongoing: Webflow forum, Framer Discord, Upwork profile offering accessibility audits powered by FrameAudit, SEO on 'WCAG accessibility audit tool'.

What's the competition?

Competition Level

Medium

What's the roadmap?

Feature Roadmap

V1 (launch): URL audit, Figma audit, PDF report, pay-per-report. V2 (month 2-3): Slack notifications, monthly subscription, violation trend tracking. V3 (month 4+): GitHub Actions CI integration, team workspaces, white-label reports.

Milestone Plan

Phase 1 (Week 1-2): Playwright crawler, contrast checker, violation classifier working end-to-end. Phase 2 (Week 3): Figma API integration, PDF report, Stripe billing, deploy. Phase 3 (Month 2): 60 paid subscribers, Slack notifications, demo audit marketing campaign.

How do you build it?

Tech Stack

Next.js, Playwright for DOM crawling, OpenCV via Sharp for contrast analysis, Claude Vision API for layout scanning, Figma REST API, Supabase, Stripe — build with Cursor for all pipeline logic.

Suggested Frameworks

Playwright, Sharp (OpenCV-based image processing), Claude Vision API

Time to Ship

3 weeks

MVP Scope

pages/api/audit-url.ts (Playwright crawler), pages/api/audit-figma.ts (Figma API + Claude Vision), lib/contrastChecker.ts (Sharp), lib/violationClassifier.ts, lib/reportGenerator.ts (PDF), pages/dashboard.tsx, components/ViolationCard.tsx, supabase/schema.sql.

Core User Journey

Enter URL or Figma link -> click Audit -> violations dashboard loads in under 90 seconds -> download PDF report -> share with client.

Architecture Pattern

User submits URL or Figma link -> Next.js API triggers Playwright crawl or Figma API fetch -> Sharp checks contrast ratios -> Claude Vision scans layout for label and focus issues -> violations stored in Supabase -> PDF report generated -> Slack notification sent -> user downloads report.

Data Model

User has many AuditJobs. AuditJob has one target (URL or Figma), many Violations. Violation has severity, WCAG reference, element selector, suggested fix, and one screenshot crop.

Integration Points

Figma REST API for design file access, Playwright for live page crawling, Sharp for image contrast analysis, Claude Vision API for layout scanning, Stripe for payments, Supabase for audit storage, Resend for report delivery email.

V1 Scope Boundaries

V1 excludes: continuous monitoring, CI/CD integration, team workspaces, white-label reports, and mobile app testing.

Success Definition

A freelance developer pays $9, runs an audit on a client site, shares the PDF report in a client meeting, wins a $1,500 remediation contract, and subscribes to the monthly plan the same day.

Challenges

Distribution to freelance developers is fragmented — there is no single community watering hole. Must pick one channel (Webflow forum, Framer Discord, or Upwork) and dominate it before spreading. The hardest non-technical problem is convincing developers to add FrameAudit to their workflow before they have been burned by an accessibility complaint.

Avoid These Pitfalls

Do not try to cover all 78 WCAG success criteria in V1 — focus on the 8 highest-frequency violations that cover 80% of real-world lawsuits. Do not build team collaboration before proving solo dev value. Finding first 10 paying customers will take longer than building — budget 3x more time posting demo audits publicly than optimizing detection accuracy.

Security Requirements

Supabase Auth with Google OAuth. RLS on audit_jobs table. Figma OAuth tokens stored encrypted, deleted after session. Rate limit 5 audits/hour per free account. Input validation on all URL and Figma link fields.

Infrastructure Plan

Vercel for Next.js and serverless API. Supabase for Postgres and auth. Cloudflare R2 for PDF report storage. GitHub Actions for CI. Sentry for errors. Estimated infra: $80/month at launch.

Performance Targets

50 DAU at launch, 200 audits/day. Audit pipeline target under 90 seconds. Dashboard load under 2s. PDF generation under 5 seconds. No real-time caching needed at launch volume.

Go-Live Checklist

☐Security audit complete
☐Payment flow tested end-to-end
☐Sentry live
☐Monitoring dashboard configured
☐Custom domain with SSL
☐Privacy policy and terms published
☐5 beta developers signed off on report quality
☐Rollback plan documented
☐ProductHunt and Webflow forum launch posts drafted.

How to build it, step by step

1. Run npx create-next-app frameaudit --typescript and set up Supabase. 2. Install playwright, sharp, @anthropic-ai/sdk, puppeteer-core, stripe, resend. 3. Build Playwright crawler in pages/api/audit-url.ts that extracts DOM elements, screenshots, and computed styles. 4. Implement contrast ratio checker in lib/contrastChecker.ts using Sharp to compare foreground and background colors. 5. Call Claude Vision API with annotated screenshots to detect missing labels, focus indicators, and touch target size issues. 6. Build lib/violationClassifier.ts to map detected issues to WCAG 2.1 success criteria with severity scores. 7. Implement Figma API OAuth flow and fetch frames as PNG exports for the same vision pipeline. 8. Generate PDF report using react-pdf with violation list, screenshots, and Tailwind fix snippets. 9. Integrate Stripe Checkout for pay-per-report and monthly plan. 10. Deploy to Vercel, post a public audit demo on X tagging Webflow and Framer communities.

Generated

April 9, 2026

Model

claude-sonnet-4-6

← Back to All Ideas