Drafted by AI, designed by Human
DesignAIUX

Drafted by AI, designed by Human

Where AI enters our design process, where a person takes over. The workflow, stage by stage — including what we do not hand over.

KatiaKatiaAugust 26, 20267 min read

AI writes the first version of almost every screen we design. It does not write the last one. Between those two points sits a handoff, and the useful thing to talk about is not which tools we use but where the handoff falls and why it falls there. This is our process, stage by stage, including the parts we do not hand over.

The question of whether designers use AI is settled. In Figma State of the Designer 2026, a survey of 906 designers, 72% use generative AI in their work and 91% say it improves their designs. What almost nobody publishes is the boundary — the stage at which they stop trusting the output. That is the only part of this worth reading, so it is the part we wrote down.

Research input
AI summarises, a person decides what matters
First draft
AI produces the starting point
Design system
AI proposes, we check every value against the source
States and edge cases
A person lists them, AI fills them in
Accessibility
AI as a checker only, never as the author
Final judgment
No AI. Someone signs their name to it
AI draftsAI assistsAI checksHuman only
How much of each stage AI does in our process. The scale is relative, not measured — the point is the shape, and where it reaches zero.

The workflow, stage by stage

1. Research input

Notes from calls, competitor screens, whatever the client already has. AI is genuinely good at compressing that into themes, and it reads everything rather than the first ten pages. What it cannot do is weigh. It reports that five people mentioned onboarding and that one mentioned billing, without knowing that the one who mentioned billing is the reason the project exists. So the summary is an input to the decision, never the decision.

2. First draft

This is where the time saving is real. A layout that used to take an afternoon arrives in minutes, and it is a better starting point than an empty canvas — the conventions are right, the components are plausible, the structure is reasonable. It is also a starting point in the strict sense. Nothing in a first draft has been decided, it has only been arranged. Treating it as decided is the single most expensive mistake available at this stage.

3. Design system

This is the stage that changed most in the last year, and the one where the received wisdom is furthest behind. Nielsen Norman Group found that as of mid-2025, no generative AI tool effectively supported design systems. Working with the tokens, the component library and the documentation in context, output lands much closer to the system than a prompt alone ever produced.

Closer is not inside. Over a longer session the drift comes back: spacing wanders off the scale, a token name gets invented, a component prop that was renamed months ago reappears. The rule we ended up with is simple — the model may propose a value, but the source of truth is the system file, and every value gets checked against it before it ships.

4. States and edge cases

Ask for a screen and you get one state: the happy one, with three perfect rows of realistic-looking data. Empty, loading, error, no permission, and the row where somebody pasted a 200-character company name — those are the states a real product spends most of its life in, and they are the ones that arrive missing. The fix is not a better prompt. A person lists the states the product actually needs, and then AI is fast at filling them in.

Both versions below hold the same data — one long name and three different statuses. The draft was built for the data it imagined rather than the data it will get.

Anna Kowalska

Design

Active

Przedsiębiorstwo Wielobranżowe Kowalski i Wspólnicy

Finance

Invited

Jan Nowak

Engineering

Suspended

What changed, and why

  • The row stops breaking. In the draft the long name takes its full width and pushes the status past the edge, where it gets clipped. A flex item refuses to shrink below its content unless you tell it to — which is the line generated markup leaves out most reliably. The corrected row truncates and keeps the status in place.
  • The status becomes scannable. Same three words in both. The draft prints them as identical grey text, so finding the suspended account means reading every row. The corrected version gives each one a distinct chip.
  • The missing states appear. The draft has only the loaded state. A list also spends time loading and starts out empty, and neither of those arrives unless somebody asks for them.
  • The empty state does something. It carries the action that resolves it. An empty state that only explains why it is empty is a dead end at the exact moment a new user needs a way forward.
An invented member list. Both versions render the same three records with the same three status words — everything that differs is treatment.

In mobile applications this is the expensive kind of gap: a missing state is not something you patch after release without another trip through store review.

5. Accessibility

AI produces interfaces that look accessible. Sufficient-looking contrast, sensible-looking labels, a focus order nobody tested. The WebAIM Million report from February 2026 measured a million home pages and found WCAG failures on 95.9% of them — the first reversal after six years of steady improvement — with 56.1 errors per page on average, up 10.1% in a single year. WebAIM attributes the trend to third-party frameworks and AI-assisted coding.

The shape of the failures is the useful part. Six categories account for 96% of every error detected, and they have been the same six for seven years running — none of them exotic, all of them basics.

Low contrast text
83.9%
Missing alternative text
53.1%
Missing form input labels
51%
Empty links
46.3%
Empty buttons
30.6%
Missing document language
13.5%

What those contrast ratios look like

2.5:1fails AA
4.8:1passes AA
7.6:1passes AAA
Share of home pages with each failure, WebAIM Million 2026 (1,000,000 pages). Contrast ratios measured against white.

Low contrast is first by a distance, and it is the failure a generated interface reproduces most reliably, because a grey that is slightly too light looks like a design decision rather than a defect.

So AI is allowed to check accessibility and never to own it. It is useful as a second pair of eyes on contrast ratios and target sizes. The audit is run by a person against the actual requirement, because a tool that generated the problem is not a reliable judge of it.

6. Final judgment

No AI at this stage, and not for sentimental reasons. Whether this is good enough to put a name on is a question about responsibility, and responsibility does not survive being delegated to something that cannot hold it. Someone has to be accountable for the thing that shipped. That is the whole of the boundary.

Here is what those six stages add up to on a single card. Nothing below is a real generation — it is a composite of the failures described above, on an interface we invented for the purpose.

Notification settings

Manage your preferences and stay up to date with everything that matters to you.

Updated recently

What changed, and why

  • Spacing. 13px and 7px became values from the 4px scale. Off-scale numbers are the clearest sign a design system was approximated rather than read.
  • Target size. The action went from 32px to 44px. 32px clears the WCAG 2.2 minimum of 24px, so nothing flags it — it is just below what a thumb expects.
  • Copy. Plausible filler became specific. A generated interface writes something that reads correctly and commits to nothing.
  • State. The corrected version says how many notifications are on, and what happens when none are. The draft has one state and no answer for the empty case.
  • Contrast. Secondary text moved onto a ratio that clears AA. This is the change the card above deliberately does not act out — see the chart for what the ratios look like.
An invented settings card. The draft does not reproduce failing contrast or an unlabelled control — introducing those to illustrate them would be the same mistake this post is about.

Where we turn it off

Three rules, and each one exists because of a specific failure.

  • AI never has the last word on anything a user depends on. Contrast, target size, focus order, error messages. It can check these; it cannot approve them.
  • AI never defines the system, only fills it. Tokens, scales and components are decided by a person and written down. The model works inside that, and everything it proposes is checked against the file rather than against how it looks.
  • AI never speaks to the user in final form. Every string a person reads — labels, empty states, error text — is written or rewritten by a human, in both languages.

What we check before anything ships

This list works on your own vendor as well as on your own output. None of it needs a designer to run.

  • Ask for the empty state. If it does not exist, the screen was designed once and the product has not been thought through.
  • Check contrast on the greys. Secondary text and disabled controls are where generated designs fail most reliably.
  • Set every string to Polish length. If the layout only holds in English, it does not hold.
  • Compare three screens side by side. Drift shows up across screens, not within one.
  • Ask who is accountable for it. If the answer involves a tool rather than a person, that is the finding.

What this does not settle

This is one studio, one process, and a snapshot of tools that change every month — several statements here will be wrong within a year, and the design-system section is the one most likely to age first, because that is where the tools are improving fastest. What we do not expect to move is the last row. The stages shift; the reason the boundary exists does not.

What AI-built code costs to inherit is the same argument on the engineering side.

See how we run a project from scope to release.

Frequently asked questions

Do designers actually use AI in their daily work?

Yes, and it is no longer a minority. In Figma State of the Designer 2026, based on 906 designers, 72% use generative AI in their work and 91% say it improves their designs. The interesting question is no longer whether designers use it, but at which stage they stop.

Will AI replace UI/UX designers?

Not on the evidence available in 2026. AI produces a first draft quickly, but it does not hold a design system, does not remember decisions between sessions, and does not cover the states a product actually needs. Nielsen Norman Group found that as of mid-2025 no generative AI tool effectively supports design systems.

What does AI do worst in interface design?

Three things repeat. It designs one state and forgets the rest — empty, loading, error, and long content. It approximates a design system instead of reading it, inventing token names and drifting on spacing. And it produces interfaces that look accessible while failing contrast and target-size requirements.

Is AI-generated design accessible?

Usually not without correction. The WebAIM Million report from February 2026 found WCAG failures on 95.9% of home pages — the first reversal after six years of improvement — with an average of 56.1 errors per page, up 10.1% in a year. WebAIM links the trend to third-party frameworks and AI-assisted coding.

Does giving AI a design system help?

It helps, and it does not solve the problem. A model working with the design tokens, the component library and the documentation produces output much closer to the system than one working from a prompt alone. It still drifts within a longer session and still needs to be checked against the source.


Sources

Last updated: August 26, 2026. These tools change quickly — the stages hold longer than the tool names do.

Katia
Written by

Katia

Co-founder & Chief Design Officer

A deeply creative person with a background in art and over 10 years in UI/UX. She leads design and brand across everything we make.