AI Design Assistant

Review any UI screenshot for accessibility and design quality. Colour contrast is measured against WCAG 2.2 in the browser, then an AI review (Claude) covers hierarchy, layout, consistency, copy and the issues rules can't catch, with a concrete fix for each.

Features

• Screenshot colour audit. Finds the palette, rates every colour against the main backgrounds (pass, large text only, fail), all on the user's device.
• Pick any spot. Click a letter and its background, or use the arrow keys and Enter, to measure an exact pair. The picker finds a letter's solid ink colour, not its blurred edge.
• AI design review. Severity-ranked issues with category, WCAG reference, location, problem and fix. Measured contrast is passed to the model so it doesn't guess.
• Shareable report. Download everything as Markdown for a ticket, PR or design review.
• Two-colour checker. Suggests the closest passing colour that keeps the original hue.

Architecture

Browser                                   Server (Next.js route)               Anthropic API
───────                                   ──────────────────────               ─────────────
Upload → canvas → palette + pair ratings
Click / keyboard sampling
"Run AI review" ─ JPEG ≤1568px + context ─▶ /api/critique
                  + failing pairs          validate (Zod) → cache → rate limit
                                           → messages.parse (structured output) ─▶ Claude Haiku 5.5
Issues, filters, report ◀──────────────── typed JSON ◀──────────────────────────

Cost

The rule-based checks are free because they run in the browser. Only the AI review costs money: Claude Haiku 5.5 at $0.10 / $0.50 per million input / output tokens (Anthropic list price, October 2026), so one review of roughly 2,000 input and 1,000 output tokens is about $0.001. Repeat reviews of the same image come from an in-memory cache, and each visitor gets 5 reviews an hour with a 200-a-day cap overall. Hosting runs on Vercel's free tier.

Getting started

npm install
cp .env.example .env.local   # add your ANTHROPIC_API_KEY to enable AI review
npm run dev                  # http://localhost:3000

Command	What it does
npm test	Unit tests (Vitest): contrast maths, palette, API handler, report
npm run e2e	Browser tests (Playwright) with axe accessibility scans; needs npm run build first
npm run lint	ESLint
npm run typecheck	Next.js route types + TypeScript
npm run build	Production build

CI runs all of these on every push and pull request.

Deploying

Import the repo at vercel.com/new, then add ANTHROPIC_API_KEY under Settings → Environment Variables. Set a monthly spend limit in the Anthropic Console.

Project layout

src/
  app/page.tsx              Page layout
  app/api/critique/route.ts AI review endpoint (thin: wires dependencies)
  components/               UI: workspace, sampler, findings, AI review, colour checker
  lib/contrast/             WCAG luminance, ratios, large-text rules, hue-preserving fixes
  lib/palette/              Palette extraction, pair rating, ink-colour sampling
  lib/critique/             Request/response schemas, prompt, Claude call, handler, rate limit, cache
  lib/report/               Markdown report builder
e2e/                        Playwright tests and fixtures

Known limits

• Rate limits and the cache live in server memory, so on serverless hosting they're per instance. A shared store such as Redis is the next step for real traffic.
• The palette can miss very thin text, which takes up few pixels; spot sampling and the AI review cover it.
• AI findings can be wrong. The UI and the report say so.

Tech stack

Next.js 16, React 19, TypeScript, Tailwind CSS 4, Anthropic TypeScript SDK, Zod, Vitest, Playwright, axe-core, GitHub Actions, Vercel.