First Read — AI-Powered Website Critic

An AI-powered marketing critic that fetches any URL, screenshots it, and returns an honest, structured critique. No login, no spam, just the read.

Paste a homepage URL and First Read runs a 3-step pipeline:

Fetch — pulls the page and extracts visible copy, headings, CTAs, and image alt-text coverage

See — takes a headless screenshot at 1280x800 (what a visitor on a 13-inch laptop actually sees on first load)

Critique — GPT-4o vision receives both the page text and the screenshot, then returns a six-section scorecard with letter grades and concrete fixes

The model grades six areas: first impression, clarity, hierarchy, trust, conversion, and accessibility. Each section ships with 1 to 4 observations and up to 3 actionable fixes. No vague consultant-speak.

GPT-4o vision with structured JSON outputs. The model receives both extracted page text and a screenshot, then returns a strict Zod-validated audit schema. Every response runs through AuditSchema.parse() before it hits the UI.

Server-side HTML extraction without headless Chrome. Meta tags, headings, CTAs, alt-text coverage, and a 6KB visible-text excerpt are scraped in under 2 seconds.

Provider-agnostic screenshot pipeline. Defaults to Microlink's free public API; swap in ScreenshotOne with one env var for production-grade reliability.

Graceful degradation. Without an OpenAI API key, the audit endpoint returns a structured mock critique so the demo still flows for anyone cloning the repo.

Next.js 15 (App Router) + TypeScript

Tailwind 4 via @tailwindcss/postcss with design tokens in CSS

OpenAI Chat Completions (gpt-4o-mini, vision-capable) with response_format: json_object

Zod schema validation on every model response

Microlink free public API for screenshots (ScreenshotOne opt-in via env)

Netlify deploy via @netlify/plugin-nextjs

The aesthetic is deliberately functional, not editorial. A developer-tool feel that signals "this is a thing you use" rather than "this is a thing you read." Inter for body, JetBrains Mono for accents. White paper, soft fog cards, accent purple only on action surfaces. Letter grades use semantic color (green/blue/amber/red) consistently across the scorecard.