HomeJournalThis post

A small-team quality bar for AI-built UI

AI can create a plausible first draft quickly, but product teams still need state coverage, browser checks, system fit, and release proof.

JP
JP Casabianca
Designer/Engineer · Bogotá

AI can help a small product team move faster, but it can also make weak work look finished.

That is the quality problem. A generated screen can have clean spacing, plausible copy, a working form, and still be wrong in the ways that matter: fake data contracts, missing states, inaccessible controls, invented product rules, no release plan, no analytics, and no understanding of what the team will support after launch.

For small teams, the answer is not to avoid AI. The answer is to define a quality bar that treats AI output as a draft until it has survived product and engineering review.

UsefulFast first pass

AI can produce options, scaffolds, copy variants, and implementation sketches quickly.

RiskyFalse completeness

The output may look done while skipping state, data, accessibility, and release details.

RequiredHuman verification

The team still owns product intent, constraints, QA, and the shipped behavior.

Figure 1: AI changes the speed of the first draft, not the responsibility for the final product.

Review intent before pixels

The first review question should not be "does it look good?"

It should be:

  • What user job is this solving?
  • What data does it depend on?
  • What state is the user in before and after?
  • What decision does the interface need to make easier?
  • What can go wrong?

AI-generated UI often optimizes for visual plausibility. That is useful for exploration, but product work needs intent. If the intent is vague, the generated screen will be vague too. It may fill the space with cards, charts, and CTAs that feel reasonable but do not belong to the actual workflow.

I like writing a one-paragraph product intent before asking AI to build or revise a surface. Then I review the output against that paragraph, not against the generic idea of a nice interface.

Force real states into the prompt and the review

The easiest way to expose fake completeness is to ask for states.

Loading. Empty. Error. Permission denied. Long content. Mobile. Slow network. Duplicate submit. Stale data. Partial failure.

Intent States Code Release A generated screen is not ready until the states and release behavior are explicit.
Figure 2: The AI quality bar should move from intent to states to code to release, not stop at the mockup.

When AI handles only the happy path, the team still has most of the product work left. Asking for states early changes the shape of the output. It also gives reviewers a better checklist than taste alone.

Check the code for invented architecture

AI is good at producing code that looks locally coherent. That does not mean it belongs in the repo.

For small teams, I watch for:

  • new helpers that duplicate existing utilities
  • local state when the app already has a data layer
  • hard-coded sample data that leaks into production
  • CSS that ignores tokens
  • components with too many props
  • accessibility attributes used decoratively
  • invented API fields
  • no tests around the risky behavior

The issue is not that any of these are automatically fatal. The issue is that AI can introduce them quickly and confidently. Review has to catch architecture drift before it feels normal.

Use browser checks, not screenshots alone

Screenshots are useful, but they are not enough. A screenshot will not tell me whether focus order works, whether the drawer traps scroll, whether the form submits twice, whether text wraps, whether an error preserves input, or whether the page survives mobile.

I want an AI-built surface checked in the browser with realistic data. Resize it. Break the copy. Make the list empty. Trigger the error. Use keyboard navigation. Watch the console. Confirm the analytics event. If a local preview is easy to run, use it.

VisualDoes it fit?

Spacing, hierarchy, responsive behavior, long labels, and actual content.

BehaviorDoes it work?

Keyboard, focus, loading, error, submit, cancel, and recovery paths.

SystemDoes it belong?

Data contracts, tokens, helpers, tests, analytics, and release notes.

Figure 3: AI UI review should cover visual fit, behavior, and system fit.

Keep the useful speed

The goal is not to slow everything back down. AI is useful because it gets the team to a tangible draft quickly. It can help with variants, empty state copy, review prompts, test scaffolds, and first-pass components.

The quality bar keeps that speed from becoming expensive later. It turns "AI made this" into "AI helped us get here, and we verified the parts that matter."

That distinction is what lets a small team use AI without shipping thin product work.

Put the quality bar in the PR

The review should not rely on memory. If AI helped produce a screen, the PR should say how the team verified it.

I want to see notes like:

  • checked loading, empty, error, and long-content states
  • verified mobile layout at the narrow breakpoint
  • confirmed keyboard path through the modal
  • matched analytics names to the release question
  • reused existing tokens and helpers
  • removed sample data
  • browser-checked the route with realistic content

That list makes the review concrete. It also shifts the conversation from "does this look AI-generated?" to "does this meet the product and engineering bar?"

Use AI for review too

AI can help create the draft, but it can also help challenge the draft. I like using a second pass that asks for risks: missing states, unclear copy, accessibility gaps, invented assumptions, and maintenance concerns.

The second pass is not the final authority. It is a pressure test. The team still decides what matters. But a good critique prompt can catch issues that the builder missed because they were too close to the screen.

That is the practical version of AI-assisted work I trust: generate, inspect, challenge, verify, ship. Skip any step and the speed starts to turn into risk.

The most important habit is keeping ownership clear. AI can suggest the state model, write the first component, draft the test, and review the copy. It cannot own the product promise. The team still decides what the user should understand, what the system can support, and what level of risk is acceptable for the release.

When that ownership is explicit, AI becomes leverage. When it is vague, AI becomes a way to skip the exact judgment that makes product work good.

Companion artifacts

Use this after reading.

Practical downloads and templates that turn the article into something you can bring into a product review, implementation pass, or agent workflow.

DownloadJun 2026

AI Feature UX Checklist

A UX audit for AI-powered features covering trust, uncertainty, fallback states, controls, and evaluation loops.

AI UXTrustProduct
View details
DownloadJun 2026

UI PR Risk Review Checklist

A merge-readiness checklist for product intent, states, accessibility, visual durability, and UI implementation risk.

UI reviewQAFrontend
View details
DownloadJun 2026

Front-End State Recipes

Reusable recipes for optimistic actions, loading, empty, error, data-transition, and disabled-control states.

FrontendStatesUX
View details