A tool that opens a web app the way a person would, clicks through its menus and pop-ups, and lists each design problem it finds with the exact code fix. It costs about $0.30 a screen.
I was the only designer across five legal-tech products at Omnis AI. Before each release I checked every screen by hand, and it took hours. So I built a tool that does the checking, and I keep the final say.
A screen can pass review when it first loads. The problems show up after someone opens a dropdown, submits a form with an error, or lands on an empty page.
Nobody had time to click through all of those states before each release, so those bugs reached real users.
I needed a way to check every state of every screen, fast enough to run before each release, and accurate enough that engineers would trust it.
| Part | What it does | What you get |
|---|---|---|
| Crawler | Logs in and clicks through screens, menus, dialogs, and tabs | A record of each state it reached |
| Checker | Runs 229 fixed rules (contrast, design tokens, accessibility), then an AI pass for layout | Problems, each tied to a real element on the page |
| Reporter | Sorts problems into a view for each role | A report with the exact code fix for each problem |
Who it's for: product designers, frontend engineers, QA, content designers, and the managers who sign off on releases.
Each one shipped on its own schedule.
Screenshots, red boxes in Figma, then tickets.
A fix meant checking the whole screen again.
A typical manual check meant taking screenshots, drawing red boxes in Figma, listing the design tokens, and writing tickets. When engineers fixed something, I checked everything again. Design QA became the thing holding releases back.
Each version tested the same question: can a tool find design problems that engineers trust enough to fix?
Measured compute and API cost. Manual reviews took 2 to 3 hours per product.
A 4-screen check of CaseNotes, in about 11 minutes, for about $1.20.
Each finding links to the exact spot in the page code.
Fixed rules handle what can be measured: contrast, accessibility attributes, and design tokens. AI handles judgment calls, and only when it can point to the element.
The tool opens each dialog, dropdown, drawer, and tab before it reviews a screen.
Each card shows a severity, the rule it broke, a plain-English title, the design principle behind it, a copy-paste CSS fix, and a confidence score.
One run, six readers, each filtered to the work they can act on:
The engine (ux-audit-mcp) captures and checks pages. The service (ux-audit-service) adds the multi-product dashboard and automation.
| Layer | Technology |
|---|---|
| runtime | Node + TypeScript, Model Context Protocol (MCP) SDK |
| capture | Playwright (session management, full-page screenshots, DOM inventory, state crawler) |
| a11y | @axe-core/playwright (live axe engine execution per page) |
| ai-vision | OpenAI-compatible SDK with Gemini Flash and OpenRouter fallbacks |
| image | Sharp (annotation rendering), tesseract.js (OCR coordinate snapping), pixelmatch (diffing) |
| service | Next.js 16, React 19, Tailwind 4, Prisma 7 + Postgres, BullMQ + Redis, GitHub Actions, Docker |
Each audit saves as a standalone HTML page and a Markdown file ready for GitHub or Linear.
I packaged the heuristics engine, WCAG 2.2 accessibility rules, DOM state exploration prompts, and report markdown templates into a drop-in Claude and AI agent skill bundle. Download the package to run automated design reviews in your own workflow.
Drop-in skill for Claude Code, Cursor, and custom agent loops. Automates design QA and generates grounded finding cards from real DOM states.
Direct download. Compatible with Claude Code, Cursor, Windsurf, and custom agent workflows.
