Looks finished. Isn’t. 12 ways AI breaks your UI

AI builds a screen in two minutes. It looks finished. Then the review starts, and the same problems turn up again: a component that isn’t in the design system, an error state nobody built, a label nobody approved, a focus outline that quietly disappeared.

After a year of building real products with AI, I stopped being surprised by these. They are predictable. That is good news, because predictable problems can be caught fast, and prevented once you know them.

The mental model

AI is a fast junior who never says “I don’t know”. Give it a screenshot and a vibe, and it fills every gap with something plausible. A plausible component. A plausible error message. A plausible statistic.

Plausible is not correct. That is not a reason to stop using AI. It is a reason to decide more before it builds, and to check more before you accept. I sort the twelve patterns by the four questions I ask about every AI-built screen.

Is it ours?

1. Components that only look like yours. A dropdown with a slightly different radius, padding or hover. AI recreates what it sees instead of looking up what exists. To catch it, open every control and compare one side by side with the real component in your library.

2. Hardcoded values everywhere. Colors and spacing typed in as raw numbers. It looks fine until you change a token or switch to dark mode. Switch the theme: anything that doesn’t change with it is hardcoded.

3. Copy, data and features nobody approved. A friendly hero line, three made-up statistics, a settings tab you never asked for. Trace every visible element back to your brief. Anything you can’t trace was invented.

Is it real?

4. Pictures of controls, not controls. A “button” that is a styled div, a “menu” that is a stack of links. It works with a mouse and fails with a keyboard or a screen reader. Press Tab through the screen without touching the mouse.

5. Placeholder text as the label. Tidy forms where the field name disappears as soon as someone types. Type into every field. If the name vanishes, there is no real label.

6. Focus that disappears. The focus outline was removed for looks, or it hides behind a sticky header. Unplug the mouse and finish the whole flow. You must always see where you are.

Does it behave?

7. Only the happy path. The demo is perfect, then the first real user hits an empty list or a failed request and gets a blank screen. Ask how to trigger the empty, loading and error states. If the answer is vague, they don’t exist.

8. Lost input and double submits. One invalid field clears the whole form, or a double click pays twice. Make one field invalid and submit, then double-click the submit button on a slow connection.

9. Breaks with real content. Built with “John Doe” and short English labels. Paste a 60-character name and a German translation, narrow the window to 320 pixels and zoom to 200%.

Does it communicate?

10. The “AI-ish” look. Purple gradients, soft glows, an accent stripe on every card, sparkle emoji. Without your brand, AI falls back to the average of what it has seen, and average is recognisable. Remove one decorative element at a time. If the screen gets clearer, it didn’t belong.

11. Color as the only signal. Errors shown only in red, light grey text on white. Make a screenshot greyscale. If you can no longer tell errors and actions apart, color is doing all the work.

12. Errors that don’t help. “Something went wrong.” “Oops!” Trigger each error and check that the message says what happened and how to fix it, in the user’s words.

“Make it better” is not feedback

Catching a pattern is half the work. The other half is how you send it back. AI does exactly what you say, so vague feedback gets a vague result, often with three new problems attached.

One finding becomes one instruction. Not “the form looks off, fix it”, but “the address step uses a styled div as a dropdown; replace it with Select from our design system and keep the error message we defined for this field.” Name the element, the rule and the result.

Catching is good. Preventing is cheaper.

Most of these patterns disappear when the AI knows three things before it builds: what exists in your design system, how the flow must behave in every state, and the rules a senior designer would give a new team member on day one.

I wrote the full field guide for exactly this. Looks finished. Isn’t. is a free 20-page ebook: for each of the twelve patterns, what you see, why AI does it, a thirty-second check, a before and after, a one-line fix you can paste into Claude, Cursor, Lovable, v0, Figma Make or any other AI tool, and the WCAG or ISO 9241 reference behind it. It ends with a printable five-minute review.

Download it below, or see all resources, including Spec to Ship, the kit I use to prevent these patterns when building with Claude Code.