AI for UI Mockups: Where It Helps, Where It Breaks

Two very different questions hide inside "can AI design my interface," and conflating them is why most advice on this is useless.

The first is build me an app. That is a different job, it is well covered, and it is not this page — if that is what you want, start with the best AI app builders in 2026.

The second is the designer's question: where does prompt-to-UI fit in a real design process, and what does it destroy if you let it? The artifact here is a mockup — a wireframe, a layout direction, a screen — that a human reviews, argues about, and rebuilds. Nothing is deployed. Nobody ships this.

AI is genuinely good at one half of design and genuinely bad at the other. Almost every disappointment comes from asking it for the wrong half.

The Challenge

Divergence is the generation of possibility: what if the nav were horizontal, what if onboarding were one screen instead of four. It rewards volume. Twenty mediocre directions beat three careful ones, because the twentieth contains an idea the third could not have.

Convergence is the narrowing: this component, from our library, on our spacing scale, at a contrast ratio that passes audit, in a state we have actually specified for when the list is empty. It rewards constraint. It is where the work is, and it is what a mockup is for.

Divergence is expensive by hand, so nobody does it — designers explore three directions and never learn what the other seventeen would have taught them. Convergence is expensive for a reason: every constraint it satisfies is a promise the product is making.

The trap is that a generated mockup looks like convergence. It arrives finished, with real-looking type and a colour that reads as deliberate. It looks like a decision, and it is not one — it is a confident sample from the average of every interface on the internet. Handed to a stakeholder, it gets approved. Handed to an engineer, it gets built. The constraints it silently failed surface three sprints later, at ten times the cost.

How AI Solves It

Where AI is excellent — divergence. Ask for twelve layout directions and get them in the time it takes to make coffee. Most are forgettable; two contain a move you would not have made. This is under-exploited, because designers treat AI output as a candidate deliverable rather than as cheap raw material for a wall.

Where AI is excellent, and nobody says so — the unglamorous work. Realistic content instead of lorem ipsum, which has no long words, no empty case, no German compound noun that breaks your button. The states nobody draws: empty, loading, error, one-item, five-hundred-item, offline. The boring variants: mobile, right-to-left, the localization pass where a 12-character English string becomes a 34-character German one and your nav wraps.

Where AI is bad — convergence. Three walls, and they are the substance of this guide.

Wall one: your design system

A generated mockup uses generic components: its own spacing scale, its own radii, its own blue, its own button. It does not know your design system exists.

The vendors know this. Figma Make can bring "style context" from a Figma Design library — and Figma's own documentation is candid about what that means. It extracts a subset of your variables into a flat styles.css of raw values rather than a 1:1 token mapping, so your variable structure is not preserved. A custom typeface is not picked up from your library — you have to upload the web-font file to Make yourself, and if you don't, a Google Font is substituted without comment. And even with a library correctly connected and published, it has limited ability to resolve and apply your actual component sets and variants.

Read that for what it says: the tool gives you your colours, roughly, and not your components. Reconciling a generated mockup back into your system is often slower than designing in your system from the start, because you are not editing — you are translating.

It genuinely works in one place: where the design system already exists as code. v0 defaults to shadcn/ui, and you can point it at a custom shadcn registry — your components, your tokens. That is the best answer available, and it only half-works, as v0's own docs concede: v0 "is specifically trained on the default implementations of the shadcn/ui components and may struggle with any customizations." The more your system differs from shadcn's defaults — which is the entire reason you have a design system — the less reliably the model handles it. It also presumes your components already live in a registry. If yours live in Figma, this door is not open to you yet.

Wall two: accessibility is silently absent

The wall that should worry you most, because the failure is invisible in exactly the artifact you are looking at.

Generated UIs routinely ship insufficient contrast, missing focus states, missing labels, and icon-only buttons with no accessible name. A 2025 study from Yonsei University and Seoul National University (A11YN) measured it: on a 300-request benchmark of real-world web UI requests, baseline inaccessibility rates were 0.27 for GPT-4.1 and 0.29 for Claude Sonnet 4, with open-weight coding models worse (0.38–0.43). The recurring violations: colour contrast, missing landmark regions, a missing main landmark, undescriptive link text.

The models are not unusually bad — they learned from the web, and the web is worse. The WebAIM Million report for February 2026 found detected WCAG 2 failures on 95.9% of the top million home pages, low-contrast text on 83.9% of them, and an average of 56.1 errors per page. Ask a model trained on that corpus for a clean modern interface and it gives you one — faithfully including the contrast failure that 83.9% of clean modern interfaces have.

A mockup that looks clean and fails WCAG is worse than an ugly one, because it gets approved.

Wall three: everything starts looking like everything

Ask five models for a landing page and you get five versions of the same page: rounded cards, a gradient hero, a three-column feature grid, muted greys, sans-serif, generous whitespace.

This is documented, not merely grumbled about. Interrogating Design Homogenization in Web Vibe Coding (Shin et al., University of Washington and Microsoft Research, March 2026) reviewed 63 sources and walked through six commercial tools — ChatGPT Canvas, Gemini Canvas, Claude Artifacts, Lovable, v0 and Replit — and found they consistently default to Western aesthetic conventions: minimalist layout, muted tones, sans-serif fonts. Their sharpest example: a brief for a Japanese retail site, a domain with a well-established high-information-density convention, came back as minimalist whitespace, standard sans-serif type and predictable hero images. The model did not consider the convention and reject it. It did not know there was one.

Be precise about what that paper is: a qualitative risk analysis, not an empirical measurement of layout convergence. Nobody has counted the pixels yet. But the mechanism is evidenced elsewhere — a December 2025 study in Patterns ran 700 autonomous image-generation feedback loops and every trajectory collapsed into just 12 dominant visual motifs, which the authors call "visual elevator music." Generative systems left on their defaults drift toward the high-probability attractor. That is what a default is.

For a brand this is a strategic cost, and the one nobody puts on the invoice. Differentiation cannot be assembled from the average of everything.

Recommended Tools & Models

The column that matters is the third. Checked July 2026.

Figma and Uizard are not in our tool catalog — see figma.com and uizard.io directly. (Uizard was acquired by Miro in 2024 and still ships standalone.)

Image models are not mockup tools. Midjourney and Ideogram produce a picture of an interface: everything is baked into pixels, nothing is a layer, nothing can be edited. Excellent for mood while diverging, useless downstream. Do not confuse image generation with UI design.

On models. These tools are wrappers around general models — Stitch runs on Gemini 3, v0 on a mix. Prompting a model directly, Claude Sonnet 5 and GPT-5.5 both follow a long, literal constraint block well, which is the property that matters. The model is rarely the bottleneck. The constraint block is.

Step-by-Step Implementation

1. Decide which half you are in

Diverging — do not constrain the model at all. Ask for range, ask for the version a competitor would never make. Converging — everything below applies, starting with a constraint block. Being in both modes at once is the most common way this goes wrong: output too generic to ship and too constrained to teach you anything.

2. Write the constraint block once

The reusable artifact. An hour to build, then you paste it into every prompt for a year.

:root {
  --color-bg:         #FFFFFF;
  --color-surface:    #F7F8FA;
  --color-text:       #16181D;
  --color-text-muted: #5B6270;  /* 6.1:1 on white — verified */
  --color-primary:    #1D4ED8;  /* white text on this = 6.7:1 — verified */
  --color-border:     #D7DAE0;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;

  --text-sm: 14px; --text-base: 16px; --text-lg: 20px; --text-xl: 28px;
  --font-family: "[YOUR TYPEFACE]", system-ui, sans-serif;

  --radius: 6px;   /* the ONLY radius */
}

That last instruction is the one to keep. A model asked to confess its deviations produces a far more useful document than one asked to be perfect — it converts an invisible failure into a checklist.

The contrast values in the token block are pre-verified on purpose. If your tokens themselves fail WCAG, no prompt will save you.

3. Generate wide, then throw most of it away

Ask for six to twelve directions at once and put them on a wall. Do not iterate on any of them — iterating on a generated mockup is how you end up shipping the model's aesthetic, sanded down until it is acceptable, which is not right. Look for the move, not the artifact. The value of direction seven is usually one idea inside it, which you then execute yourself.

4. Fill it with real content, and generate the states nobody draws

Ask for plausible content at realistic lengths — the 3-character name and the 47-character one, the title that runs to two lines. Figma now ships an AI Content Filler whose entire pitch is "no more lorem ipsum that breaks when the real copy arrives." Any model does the same if you ask. Lorem ipsum is a designer's way of not finding out.

Then: "Enumerate every state this screen can be in, including ones I have not thought of, then mock the five most likely to be shipped wrong." Empty. Loading. Error. Zero results after a filter. One item. Five hundred. Offline. These are the states that otherwise get improvised in code at 6pm on a Friday.

5. Audit the mockup before anyone sees it

Non-negotiable, and it takes two minutes.

Then check the audit. A model computing its own contrast ratios gets them wrong sometimes — put the hex pairs through a real checker, both for what it flagged and for what it conspicuously did not.

6. Rebuild the survivor in your design system

The honest step, and the one no vendor page includes. Do not paste generated CSS into your codebase, and do not "clean up" the generated component tree — you will miss something, a hard-coded hex or a 5px radius or a clickable div, and it will live in your product for years, teaching the next person who opens that file that 5px radii are allowed.

The mockup's job was to help you decide. It has done its job. Let it go.

Real-World Examples

Example 1: The clean mockup that fails WCAG

Before. A designer prompts a general model for "a clean, modern pricing page for a SaaS product." What comes back is genuinely attractive — the kind of page that gets a "ship it" in Slack. Under the hood it uses the framework defaults the model has seen a million times.

Three failures, all invisible to the eye that approved it:

The button is the interesting one. White on Tailwind's default blue-500 measures 3.76:1 — which passes the 3:1 threshold for large text, and would pass SC 1.4.11 as a component boundary. But the label is 16px regular, and that is not large text: large means 18pt (about 24px), or 14pt bold. So the most-generated button on the internet fails the most-cited criterion in WCAG, by a margin small enough that nobody notices and large enough to matter to someone with low vision.

The mockup also set outline: none on its inputs, so a keyboard user cannot see where they are, and used a grey placeholder as each field's only label, so it vanishes the moment you type.

After. The same request with the constraint block from Step 2. Muted text comes back as #5B6270 (6.1:1 on white, comfortably passing), the primary as #1D4ED8 (white on it is 6.7:1 — passes AA, and note that it does not reach AAA's 7:1, which is exactly the kind of thing you check rather than assume), inputs keep persistent labels, focus rings survive.

What changed: nothing about the tool or the model. The constraints changed. The first mockup was never asked to be accessible, so it was as accessible as the average of its training data — which the WebAIM Million tells us is 83.9% likely to carry a contrast failure.

Example 2: The design system that did not survive the round trip

Before. A team with a mature design system in Figma — 40 components, a full variable set, a bespoke typeface — connects their library to Figma Make and asks for a settings screen "using our design system."

What comes back is on-brand in colour and nothing else. Their brand blue is there. Their typeface is not: Make does not take it from the library, and nobody uploaded the web-font file, so a Google Font was substituted without a word. Their spacing scale (4/8/16/24/40) appears in the extracted CSS, but the layout uses 10px, 14px and 18px gaps anyway. Their Button, with its four variants and its loading state, has been replaced by a fresh button styled from scratch that happens to look similar.

The designer now chooses: rebuild the screen properly (three hours), or reconcile the generated one (four hours, and she will still miss something). The generated mockup made the work slower.

After. The team stops asking Make to converge and uses it for divergence only. Separately, the design-system team starts publishing components to a shadcn registry, which is what would let v0 generate from the real system instead of approximating it. That is a quarter of work, and it is the actual answer to wall one.

Example 3: Where it wins outright — the states nobody drew

Before. A designer hands over a dashboard: beautiful fake data, eight table rows, every name about twelve characters long. Approved.

In production: the table is empty for every new user, and nobody designed that, so engineering ships a blank rectangle. A customer named Wolfgang Schmidt-Wittgenstein breaks the column. German localization turns "Save" into "Speichern" and the button clips.

After. The same design, run through the content and states prompts before handover. Back come the empty state (with copy telling a new user what to do first), the loading state (skeleton rows matching the real table geometry), the error state — and a table populated with names including a 29-character one, which is how the designer discovers the column needs to truncate before an engineer discovers it in a bug report.

What changed: ten minutes of prompting replaced four rounds of "what should this do when it's empty?" in a Slack thread three weeks later. The least glamorous use on this page, and the one with the clearest payoff.

Best Practices

• Know which half you are in. Diverging: no constraints, high volume, throw it away. Converging: full constraint block. Both at once produces output that is neither.
• Build the constraint block once, from your real tokens — and verify those tokens pass WCAG first. A constraint block full of failing colours produces beautifully compliant failures.
• Make the model confess. "List every constraint you could not satisfy" turns an invisible failure into a checklist.
• Audit before review, not after. An inaccessible mockup that reaches a stakeholder gets approved, and approval is hard to reverse.
• Never paste generated CSS into your codebase. The hard-coded hex you miss will outlive you.
• Use it for the states you skip — empty, loading, error, overflow — and kill lorem ipsum while you are there.
• In regulated and public-sector work, remember accessibility is a legal obligation, not a preference, and which regime binds you depends on where you operate. "The AI generated it" is not a defence.
• Fight the default. If the output has a gradient hero, rounded cards and a three-column feature grid, you have received the average.

Common Pitfalls

The mockup that looks like a decision. The defining failure. Generated output arrives finished-looking, so it reads as considered, so it gets approved. It is not a decision; it is a sample from a distribution. Treat every generated screen as a sketch that happens to be rendered in high fidelity.

Approved inaccessibility. Contrast failures, missing focus rings and unlabelled icon buttons are invisible in a static image and invisible to a stakeholder — and they are the most common class of defect on the web, which is exactly where the models learned them. Nothing in the artifact will warn you.

Reconciliation that costs more than designing. Translating a generated mockup into your system is not editing, it is re-authoring, and it is frequently slower than starting in your system would have been. Measure it once, honestly, before building a workflow on it.

Silent substitution. Your typeface is unsupported, so a similar one appears and nothing tells you. Your variable structure is flattened to raw values and nothing tells you. Quiet failures are the ones that ship.

Homogenization, compounding. Every generated mockup nudges the team's sense of "what good looks like now" toward the model's default, and the next brief gets written in that vocabulary. Your team is not an autonomous loop — but only because you keep putting something into it that the model cannot.

Iterating on the model's output instead of your own idea. You take direction six and refine it and refine it, and what ships is the model's aesthetic with your fingerprints sanded into it. Take the idea. Build it yourself.

Confusing this with app building. If the artifact you want is a running application rather than a design, you want a different guide — best AI app builders in 2026, or the head-to-heads on Lovable vs v0 and Lovable vs Bolt. The design questions on this page do not disappear when you ship an app; they just get answered by nobody.

Measuring Success

Directions explored per hour. The honest metric for divergence. If you used to explore three layouts and now explore fifteen, that is the gain. It is not a time saving — you spent the same hour.

Accessibility failures caught before review. Each one caught in a mockup is one not caught in an audit, and the cost difference is enormous.

Reconciliation time. Time it honestly, three times, against just designing the screen. If reconciliation is slower, stop converging with AI and use it only for divergence. That is a legitimate — and common — answer.

The sameness check. Put your last five screens next to five generated cold from a generic prompt. If a stranger cannot tell which is which, the model is designing your product and you are operating the keyboard.

Cost Analysis

The tools are cheap. Everything here runs on a free tier or a ~$20/month plan; see the pricing column above. Licence cost is not the decision.

The cost nobody prices is reconciliation. If it takes four hours to get a generated mockup into your design system and three hours to have designed it there, the tool has a negative return and a very positive feeling. That is the number to measure, and it is why this guide carries no ROI percentage: no credible published figure exists for prompt-to-mockup, the honest answer varies enormously with the maturity of your design system, and inventing one would be worse than useless.

What it does not buy. Taste, a point of view, and a reason for your product to look like itself rather than like the average of the internet. Those stay expensive, and they stay yours.

Related Tools

• v0 — the one tool that can generate from your components, if they exist as a shadcn registry
• Claude — follows long, literal constraint blocks well; good for the audit prompt
• ChatGPT — fast HTML mockups in canvas
• Google Gemini — the model behind Stitch
• Midjourney — mood only; it makes pictures of interfaces, not interfaces
• Lovable and Bolt — app builders, not mockup tools; the boundary is the point

Related Models

• Claude Sonnet 5 — reliable at following a long constraint list literally
• GPT-5.5 — strong generalist for mockup markup and content generation
• Gemini — Stitch runs on Gemini 3; good at reading screenshots of existing UI

New to writing prompts? Start with prompt engineering — the difference between a mockup that fails your audit and one that passes it is a constraint block you write once. And if the artifact you actually want is a working application rather than a design, that is vibe coding, and it starts here.