A Designer's Checklist for Reviewing AI-Built UI Before Shipping

I design first and build second. That means when an AI tool hands me a finished-looking screen, my instinct is to compare it with my mockup, see that it matches, and move on.

That instinct is the problem. A screen that matches a static mockup can still fail in every state my mockup never showed.

So here is the checklist I'd use before calling an AI-built screen done. You don't need to be an engineer for most of it. You need a browser, a keyboard and a bit of suspicion.

01Start with what the browser shows you

These checks need no code reading at all.

1. Resize slowly, not just to two breakpoints

Don't jump from desktop to phone width. Drag the window edge slowly and watch. Layouts often look fine at 1440 and 390 and break around the widths in between, where a row of cards wraps awkwardly or a heading collides with a button.

2. Test the long and short extremes

Replace a name with a very long one. Replace a title with one word. Say a card normally holds "Q3 report" and now holds a 90-character project name. Does it truncate, wrap or push everything sideways? AI tends to build for the sample text in your prompt.

3. Zoom to 200%

WCAG asks that content remain usable when text is resized up to 200%. Zoom the browser and check nothing is clipped, overlapped or hidden behind a fixed header.

4. Check every state, not just the default

Hover, focus, active, disabled, loading, empty and error. List which of these exist for each interactive element. If the AI only built the default, that's a gap in my prompt as much as its output. For AI-powered features specifically, I covered this in Designing Loading and Error States for AI Features.

02Then use only the keyboard

Put the mouse aside for five minutes.

5. Tab through the whole page

Can you reach every button, link and field? Is the order logical, matching the visual order? A visible focus ring should always show where you are. If you can't see it, a keyboard user is lost.

6. Operate controls the way people expect

Enter should activate links and buttons. Space should activate buttons. Escape should close overlays. If a dropdown or modal only responds to the mouse, something is wrong. My post on fixing a hypothetical modal walks through what correct focus handling looks like.

7. Look for clickable things that aren't buttons

Right-click an element and inspect it. If a "button" is a plain div with a click handler, it won't get keyboard focus by default. A real button element gives you that behavior for free. This is one of the few code-level things I always check.

03Check the visual system underneath

A screen can look right while quietly ignoring your design system.

8. Look for hard-coded values

Inspect a few elements. Are colors written as raw hex values when you defined tokens? Is spacing a random 13px or 22px rather than your scale? One-off values multiply fast, and then a later change to your palette misses half the UI.

9. Check contrast yourself

Don't trust that the AI used your palette correctly. Use the browser's inspector, which shows a contrast ratio for text. WCAG AA asks for 4.5:1 for normal text and 3:1 for large text. Pay special attention to placeholder text, disabled states and text over images.

10. Compare type and spacing against your spec

Look for subtle drift: a heading that's 28px instead of 32px, line height that's tighter than designed, a font weight that fell back. Overlay your mockup at 50% opacity if you need to see it.

04Check the content and behavior

11. Read every string out loud

AI-written microcopy often sounds plausible but vague. "Something went wrong" and "Submit" are common. Replace them with specific language that tells people what happened and what to do next.

12. Break the forms on purpose

Submit empty. Enter an obviously wrong email. Paste a long string. Do labels stay visible? Does the error appear next to the field? Does focus move somewhere sensible? Is the label a real label connected to the input, or just text above it? Clicking the label text should focus the field.

13. Reload and navigate back

Fill something in, refresh, then use the back button. Does anything vanish unexpectedly? For longer flows, see multi-step forms with saved state.

05Know what you can't judge

14. Mark the parts you can't verify

Be honest about your limits. I can judge layout, states, keyboard behavior and contrast. I can't confidently judge security, performance under load, or whether the data handling is sound. Those need someone who can, or at least a separate review pass. Write them down as "unverified" rather than letting a good-looking screen imply they're fine.

06How I'd run this in practice

I'd keep the checklist short enough to actually use. A reasonable order:

1. Resize and zoom (two minutes).
2. Keyboard pass (five minutes).
3. Inspect colors, spacing and contrast on three or four key elements.
4. Break one form.
5. List what's unverified.

When I find an issue, I'd report it to the AI the way I'd report it to a developer: what I did, what happened, what I expected, and which element. "Pressing Tab on the filter menu skips the Apply button; it should be reachable after the last option" will get a better fix than "improve accessibility".

Then I'd re-run the same check myself. The AI saying "fixed" is a claim, not evidence.

07The takeaway

AI makes it easy to produce a screen that looks finished. The designer's job moves from drawing it to interrogating it.

You already have the instincts: you notice spacing drift, awkward copy and missing states. Point those instincts at the running build, add a keyboard and a zoom setting, and you'll catch most of what a screenshot comparison misses.

08Frequently asked questions

Do I need to read the code to review AI-built UI as a designer?

Not all of it. Most of this checklist can be done in the browser by resizing, tabbing, zooming and inspecting. Reading the code helps for a few things, like hard-coded colors and div-based buttons, but you can start with behavior.

What is the first thing to check when AI builds my design?

Resize the window and tab through the page with the keyboard. These two checks take about a minute and expose a surprising share of layout and accessibility problems. They also show you quickly whether the build is a faithful screen or only a screenshot-matching one.

Can I ask the AI to fix problems it missed?

Yes, but be specific. Describe the observed behavior, the expected behavior and the element involved, rather than saying "make it more accessible". Then re-run the same check yourself, because the AI saying it is fixed is not proof.