Kerning

HomeArticles → AI Tools

AI Tools

What generated components keep getting wrong

A year of shipping AI-assisted front-end code, and the same six defects turning up in the review every time.

I keep a spreadsheet of every generated component I have had to rewrite before shipping. It has 214 rows now, going back fourteen months. The defects cluster, and they cluster in ways that say something about how these tools were trained.

The most common by a distance is focus handling. A generated modal opens, looks right, works with a mouse — and traps nobody. Tab out of it and you are behind the overlay, clicking links you cannot see. This appeared in 31 of 214 components. It is invisible in a screenshot, which is the point: these tools optimise for what a screenshot shows.

Second is the fixed pixel height on anything containing text. A card is given `height: 320px` because that is what looked right with the placeholder copy. Real content arrives, the heading wraps to three lines, and the text runs out through the bottom of the card. Twenty-eight occurrences. Nearly all of them survived until someone loaded actual data.

A year of shipping AI-assisted front-end code, and the same six defects turning up in the review every time.

Third, and this one is subtle: colour pairs that pass contrast in light mode and fail in dark. The generated palette defines dark mode by inverting the background and leaving the accent alone, so a mid-grey secondary text that was fine on white becomes 2.9:1 on near-black. Nineteen cases. Every one shipped past a designer who was looking at light mode.

Then: click handlers on `div` elements instead of buttons, which works for a mouse and fails for a keyboard entirely. Loading states that never resolve on error. And empty states that assume the list is never empty, so a new account sees a blank rectangle where the onboarding should be.

What is worth noticing is what is *not* on the list. The code is almost always syntactically clean, the naming is sensible, and the structure is reasonable. The failures are not failures of programming. They are failures of imagining somebody using the thing — a keyboard user, a person with two hundred rows of data, a person on their first day. That is the part still worth paying a human for.

The practical answer is a review checklist rather than distrust. Tab through it. Load it with a heading three times longer than the placeholder. Switch to dark mode. Empty the list. Four checks, about ninety seconds, and they catch roughly eighty per cent of what is in my spreadsheet.

JH
Jonas Hale

Contributor · Glasgow

Tests AI tools on real client work and reports what breaks. Keeps a spreadsheet of every generated component he has had to rewrite.

Read next

Get this in your inbox

One email on Thursdays with what we published and what else was worth reading.

One email on Thursdays. Unsubscribe in a click.