16 of 16 pages clean, audited on every deploy
UXAI reads your interface and your code, makes the change you approve, then measures what actually rendered.
watch it measure
Outlined boxes were measured by the browser, to the pixel. What the model only guessed is listed beside them, never drawn.
what the model thinks is there
Inferred
A vision model names regions reliably and sizes them badly. Measured over four runs on one image it read a 240px sidebar as 250px twice, and omitted it twice — so it is never asked for a number.
see it work
Real pages, each audited on desktop and phone by the same browser UXAI runs on your code.
They are also not one page recoloured six times, though the first version was. Each carries its own scale: type ratio, grid unit, corner softness, shadow depth, duration. Those are the dials the design agent moves, and the figures under each card are read off the running theme rather than typed beside it.
A scale was not enough either. Probing them with this product’s own browser found every one of them rendering in ui-sans-serif — no typeface at all — five of them declaring the same fallback stack character for character, at five weights each. So each now carries its own typeface and exactly two weights, and asking for a third does not compile.
UXAI fixed the first two by itself — planned the change, edited the code, re-rendered and re-measured, stopping when nothing measurable was left. Both arrows below are real before-and-after measurements.
0% → 100% accessibility, fixed autonomously
Dense: a tight ratio and a 4px rhythm, because the job is scanning numbers. Inter Tight with tabular JetBrains Mono figures — the number is the headline, so the number is the display type.
26% → 100% accessibility, fixed autonomously
Generous: a wide ratio and a 5px rhythm, so the headline carries the page. Instrument Serif over Inter — one serif cut at display size, and nothing else on the page competing with it.
Quiet: shallow elevation and a modest ratio, because a settings page is read, not admired. IBM Plex Sans, two weights, nothing at poster size — a form should not have opinions about itself.
Editorial: the widest rhythm here, near-square corners, print proportions. Fraunces at optical display size over Work Sans — a face drawn for the size it is set at, not scaled to it.
Precise: small base, shallow shadows, corners just off square. A table is the hero. Space Grotesk with Space Mono figures — one drawing in two widths, so the fund codes belong to the prose.
Loud: square corners, the deepest shadows, the fastest motion. Nothing decorative. Anton uppercase over Barlow — the poster idiom, with tracking at normal because that is what a condensed face wants.
Airy: the widest rhythm and no corners at all, because the work is the subject. Bodoni Moda over Outfit - a didone set large, with a neutral grotesque kept deliberately silent underneath.
Technical: a 4px grid, square corners, almost no elevation. Rules do the work shadows would. DM Mono as the body face, not just for figures - an API reference is scanned like code, and a proportional face fights that.
Soft: the largest radii the dials allow, a 6px rhythm, and real shadow depth. Bricolage Grotesque throughout, one variable file with an optical-size axis doing display and text.
Editorial reading: an 18px base, a measured column, and corners you have to look for. Newsreader at optical size for both display and text - a serif drawn to be read at length, not admired at 96px.
Slow: the widest type ratio allowed, deep air, and a real sea moving behind the headline. Cormorant Garamond with italic emphasis over plain Manrope - the change of voice is the luxury, not the weight.
Loud in the other direction: an extended face, zero elevation, the fastest motion, pill-shaped tickets. Unbounded uppercase over Archivo - an extended face where the training studio uses a condensed one.
Compact: the smallest type ratio the dials allow, because an app screen is scanned, not read. Plus Jakarta Sans alone at 15px - hierarchy by weight, since the sizes barely differ.
Made by hand: nearly flat, soft corners, and the photographs doing the talking. Syne over Karla - a display face that looks cut rather than drawn, for things that were thrown rather than made.
Accessible first: an 18px base, a 6px grid for large targets, and the least motion of any sample. Atkinson Hyperlegible throughout - drawn for low vision, so I, l and 1 cannot be mistaken for each other.
Tidal: the slowest motion allowed, a generated sea behind the numbers, tabular figures to compare hours. Red Hat Display with Red Hat Mono figures - a forecast is a column of numbers read against each other.
The “before” scores are frozen from the versions UXAI fixed on its own, and are never updated: a baseline that moves erases the result it records.
Move a dial. Everything re-derives.
Every colour here comes from one generated ramp, and every dial position is tested: you cannot drag this page into something unreadable.
the load-bearing idea
A vision model can name a layout but cannot measure one, so UXAI never asks it for a number the page itself can give.
Asked four times about one screenshot, the vision model reported a 240px sidebar as “250px twice, and omitted it twice” — while naming the layout, the cards, the chart and the table correctly every time.
| selector | size | font | colour |
|---|---|---|---|
| #page-title | 342 × 24 | 20px | rgb(17, 17, 17) |
| .card | 133 × 78 | 16px | rgb(17, 17, 17) |
| .card-label | 99 × 16 | 14px | rgb(107, 114, 128) |
The table is real getBoundingClientRect output from the browser.
the part most tools skip
What it can measure gets a score. What it can only guess is named and left unscored, with the reason.
A real failing evaluation, kept on purpose. Taken Wed, 26 Aug 2026 15:26:59 GMT; the page has since been fixed. A scorer that only ever reports success is not measuring.
computed from 12 finding(s) in the live DOM (8 critical, 4 serious), weighted critical:5 serious:3 moderate:1 minor:0.25 against a budget of 38 for 76 visible elements
the document fits the 1440px viewport with no horizontal scroll
7 font sizes, 3 families, 6 text colours, 10 spacing values and 2 radii across 76 elements
no target design was supplied, so there is nothing to compare the rendered page against
visualSimilaritytypographyVsTargetspacingVsTargetcolourVsTargetthe target side of this comparison is a vision model reading a screenshot. Measured over four runs on one image, that model reported a 240px sidebar as 250px twice and omitted it twice. A per-pixel score built on those numbers would look precise and would not be.
structureno target design was supplied for this evaluation
And no single headline score: averaging a measurement with a guess makes the guess look measured.
what it can reach
Real tools with real permissions, a design system that generates itself, and every change checked against your actual code.
In 7 categories, each with a permission, a risk level and a schema.
Inspect every tool →Three hues become ramps, type, spacing and motion, with every colour checked for contrast.
Move the dials →MCP servers plug in, but cannot add actions or reach your files.
See the integrations →A screenshot becomes a framework-independent tree. Nodes can be dropped or renamed, never invented.
Exact edits, diffed on your disk. A stale edit fails loudly.
Every file a plan names is checked against your real repository.
the autonomous part
You grant a budget: so many changes, so many minutes, on a branch you can throw away. It stops when nothing measurable is left, and says why.
convergedafter 1 iteration59% → 100%no moderate-or-worse findings remain after 1 iteration(s)
on branch uxai/fix-sample1 · 3 files changed
targeted horizontal-overflow, overflow-culprits, tap-target-small
what it will not do