How to stop AI coding agents making generic-looking UI

A request for “a landing page” leaves the agent to choose the palette, the fonts, the layout, the number of buttons and the proof to show. With nothing to go on, it fills each gap with a common choice. To stop that, make those choices yourself in a file the agent loads every session, and name the defaults you keep seeing.

We tested this on 5 November 2026 by giving Claude Code the same request with and without such a file.

On 5 November 2026, we ran Claude Code 2.1.309 four times with the request below, using claude -p with no tools, so the reply was the page itself. Two runs started in an empty folder. Two started in a folder holding a CLAUDE.md whose only line imports DESIGN.md, the file shown further down. Both versions used --setting-sources project,local, so no personal instructions from the machine's user settings reached either one. The folder was the only difference.

The request is for Wrenboard, a fictional scheduling tool for small dental clinics. A script then counted patterns in each page's HTML: colours, gradients, buttons, fonts, percentages, prices and quoted testimonials.

Neither version produced the purple gradient and Inter font that people often associate with AI-generated pages. The sameness showed up elsewhere. Both pages made without a design file opened with “Fewer empty chairs.”, both chose Iowan Old Style for headings, and they used 15 and 20 colours. Their buttons asked for different things: one page had seven buttons with five different labels, from Start free trial to Book a 15-minute demo.

One of those pages also invented evidence for a product that has none: “38% fewer no-shows”, “7 in 10” same-day cancellations refilled, about five hours a week of calls saved, a quote from an office manager at a named clinic, and prices of $79 and $149 a month. Nothing in the request supplied those facts.

Both pages made with the design file used exactly the six specified colours, the two specified fonts, one button labelled Book a demo and a numbered list for the setup steps, and contained no statistics, prices or testimonials. Four runs of one request on one model show what can happen, not how often it happens. The counts are pattern matches in the source, not a judgement of design quality.

Save this as DESIGN.md and add a CLAUDE.md containing the single line @DESIGN.md, so Claude Code loads it in every session. Each section answers a question the agent would otherwise answer for you: which six colours, which two fonts, what the hero shows, how many buttons, and what proof exists.

The line saying the product has no logos, testimonials, ratings or statistics is the one that removed the invented proof. For a real product, replace it with the evidence you can publish, such as a named customer who agreed to be quoted.

Lists of AI design clichés go out of date as models change. In this test the model avoided the purple gradient on its own and invented a customer quote instead. Run your request once without rules, list what you would not ship, and turn each item into a rule that names the thing: “One primary action, labelled Book a demo” rather than “keep the hero focused”.

If you want a longer starting list, Impeccable packages design anti-patterns as commands for Claude Code and Codex. Check its suggestions against your own pages before adopting them.

The counts above come from the HTML source. A page can use the right six colours and still crowd its text at phone width. Open it at 390 and 1280 pixels wide, and when something is wrong, ask for one repair that names the section and the width.

iter0, which publishes this guide, builds a website from a written brief and lets you edit it in place. The same rule applies there: the more of the page you decide in the brief, the less the model decides for you.