Claude Audit

Audit once, prompt perfectly.

Idea Stage JBMD Creations LLC 2026-02-24

The Problem

Developers waste hours feeding AI context about their UI

The typical AI-assisted UI audit looks like this: take 10 screenshots, paste them one at a time, explain what each shows, AI hallucinates about components that don't exist, correct it, re-explain, re-screenshot. Repeat every session.

2-4h

Wasted per audit

50K+

Tokens on context

5-10

Manual screenshots

3-5x

Correction rounds

The Solution

One URL + repo = a complete, annotated visual brief

Claude Audit packages the capture-analyze-brief pipeline into a single product. Feed it a URL, connect a repo, get back a structured board with labeled screenshots, component inventories, dead code maps, and cross-reference tables. Everything an AI needs in one image.

URL + Repo ──> Capture Engine ──> Analysis Engine ──> Brief Composer ──> Board │ │ │ Multi-breakpoint AST scanning Dark-themed HTML Auth-aware Import graph Base64 images Real device merge Dead code detect Audit tables Component map Cross-references

What It Produces

Screenshot Boards

Multi-breakpoint captures across mobile, tablet, desktop. Auth-aware. Real device photos merged alongside automated captures.

Component Inventories

Every control labeled, cross-referenced against source code. Numbered, per-state visibility (blank/active/mobile/desktop).

Dead Code Maps

Unused components flagged with "superseded by" mappings. Migration paths. Safe-to-delete confidence scoring.

Rendering Audit

Which components render which data types. Stream pipeline mapping. Unimplemented/unwired component flags.

Cross-Reference Matrix

Control x State visibility grid. Desktop vs mobile control mapping. Chrome resize vs real device discrepancies.

AI-Ready Export

Self-contained HTML, PNG, or structured JSON. One board = complete context. Feed it to Claude and start working.

Core Features by Phase

Phase 1: Capture Engine (MVP)

6 default breakpoints (375-1920px)
Auth-aware: JWT, cookies, OAuth
Full-page + viewport modes
CSS selector targeting
Real device photo upload + merge
JSON manifest with metadata

Phase 2: Analysis Engine

AST-based component scanning (ts-morph)
Import graph builder
Dead code detector with migration paths
Stream rendering audit map
Cross-reference matrix generator
Framework auto-detection

Phase 3: Brief Composer

Dark-themed responsive HTML boards
Base64-embedded images (self-contained)
Audit tables: controls, rendering, dead code
Letter-labeled captures (A, B, C...)
Export: HTML, PNG, JSON, Markdown

Phase 4-5: Web App + API

Dashboard with project list + history
One-click re-audit, historical diff
GitHub integration (AST from repo)
REST API for programmatic access
MCP server for Claude Code
GitHub Action for PR-triggered audits

Technical Stack

Layer	Technology	Why
Frontend	Next.js 16 + React 19 + Tailwind v4	Existing expertise, SSR for boards
Backend	Cloudflare Workers (Hono)	Edge-first, existing infra
Capture	Puppeteer in CF Sandbox containers	Isolated, scalable, auth-safe
Analysis	TypeScript AST (ts-morph)	Full type-aware component scanning
Storage	R2 (images) + D1 (metadata)	CF-native, cost-effective
Auth	Better Auth	Existing pattern, OAuth support
Payments	Stripe	Existing JBMD Creations LLC setup

Pricing

Free

3 audits/month
Public repos only
6 breakpoints
No auth capture

Pro

$19/mo

Unlimited audits
Private repos
Auth-aware capture
API access (100 req/mo)
JSON export

Team

$49/seat

Everything in Pro
Shared dashboard
CI/CD integration
PR-triggered audits
Slack notifications

Enterprise

Custom

Self-hosted option
SSO/SAML
Custom analysis rules
Dedicated support
SLA guarantees

Competitive Landscape

Product	What It Does	Gap We Fill
Storybook	Component catalog	No cross-reference to live UI state
Chromatic	Visual regression	Screenshots only, no analysis
Percy	Visual testing	CI-focused, no AI-optimized output
Figma Dev Mode	Design specs	Design to code, not code to audit
Lighthouse	Performance audit	Performance only, no component mapping
Claude Audit	Full UI audit brief	Visual + structural + AI-ready

Implementation Timeline

Sprint 1 — Week 1-2

Core Capture Engine

Project scaffolding (Next.js + CF Workers)
Puppeteer multi-breakpoint capture
Auth injection (JWT, cookies)
R2 storage + basic board composer

Sprint 2 — Week 3-4

Analysis Engine

ts-morph AST setup + React scanner
Import graph + dead code detection
Cross-reference matrix generator
Audit table HTML templates

Sprint 3 — Week 5-6

Web App MVP

Dashboard UI + Better Auth
Audit trigger flow + board viewer
Export (HTML, PNG, JSON)

Sprint 4 — Week 7-8

Polish + Open Beta

Real device photo upload
Stripe integration + free tier
Product Hunt launch

Sprint 5-6 — Week 9-12

Pro Tier + Integrations

Private repos, API, webhooks
GitHub Action, MCP server
Team tier, Slack notifications

Revenue Targets

$950

Month 3 MRR

$4.8K

Month 6 MRR

$10K+

Month 12 MRR

~80%

Gross Margin

Go-To-Market

Phase 1: Dogfood (Week 1-4)

Use on VaporForge, Clarity, WP Dispatch, DevTools. Refine pipeline from real usage. Document edge cases.

Phase 2: Open Beta (Week 5-8)

Product Hunt launch. Free tier only. Target Claude Code, Cursor, Windsurf communities. Reddit + Twitter/X.

Phase 3: Paid Launch (Week 9-12)

Pro tier via Stripe. Blog posts, video demos. Partner with AI coding tool newsletters.

Phase 4: Team + API (Month 4-6)

Team tier. CI/CD integration. API docs site. Agency partnerships.

Prior Art (Already Built)

Asset	What It Proves
`/brief` skill	Capture + compose + export pipeline works end-to-end
`capture-authed.mjs`	JWT localStorage injection for auth-aware Puppeteer
VaporForge UI Audit plan	The exact audit table format users need
VaporForge prompt-kit migration	Dead code detection + migration mapping pattern
DevTools Hub plans board	HTML board pattern for plan visualization

The VaporForge UI audit session IS the MVP demo. Everything built tonight becomes the foundation.