How to Make an AI Website Feel Like Someone Designed It

Posted on Oct 19 • Originally published at billiem.uk

A bicycle cog mechanism worked and still had to go. Fixing its controls hadn't given a visitor any useful reason to operate it.

That was one of the more useful design decisions in a set of four AI-built fictional business websites. The furniture site's controls survived: changing a desk's width and finish changes its drawing and specification. The nursery's plant choices survived because they change what someone can inspect.

When reviewing an AI-built site, ask the agent to explain that relationship. What is the visitor choosing, what changes on screen, and what can they do with the result? Those questions give you more precise feedback than another request to make the page look better.

You can open all four working examples while reading. They are fictional businesses with local notes and lists. None of the flows sends a message, books an appointment or places an order.

Commonset's furniture demo gives the width and finish controls something visible to affect. The furniture itself changes, alongside the specification. Keep the drawing and controls together and the visitor can inspect the choice they are making.

Commonset keeps the desk drawing, dimensions, finish and specification together. The controls change the drawing as well as the selected specification.

The same question applies to less conspicuous controls. In Morrowfield's nursery catalogue, growing conditions and mature size help narrow the plant selection. Quantities then belong in the garden or trade list. The useful interaction continues beyond the first change on screen.

Morrowfield's catalogue filters at a 390-pixel browser width. Inspect the working controls as well as the opening screen; this is a browser view, not a physical-phone usability test.

Follow a selection through that whole journey when reviewing the build. Change it, inspect the next screen, return and edit it. Does the site retain what you selected and any text you entered? Can you read and use the controls at a narrow width?

The two service sites offer other versions of that inspection. In Second Spoke, read the repair scope and price, then prepare a repair note. In Moss & Mile, choose a walk, then review, edit and keep the walk note. Those local outcomes give the onward journey a purpose without pretending a booking happened.

A revision request can name the broken relationship and protect the parts you want to keep. This is an edited example, derived from the constraints used in the studies, rather than an exact tested prompt:

Preserve the chosen visual direction. Carry the selected service into the note, keep the visitor's entered text when they return to edit it, and make the service details help them compare their options. Review the complete flow at desktop and phone widths.

That is a more inspectable request than asking for extra interactivity. The bicycle cog had no equivalent job. The review called for removing it even after its controls had been corrected. Motion can still contribute to atmosphere and hierarchy without needing its own separate control.

An opening screenshot tells you little about the catalogue, service details or next action. Ask to see how a direction handles those parts before choosing it.

Moss & Mile pairs woodland dog photography with green and burgundy type and a looping lead shape. Its subject supplies material for the composition.

Moss & Mile combines outdoor photography, green and burgundy type, and a looping lead shape. Judge how the material and layout work together.

Second Spoke takes a different route with a drawn bicycle and bold lettering. Its repair information and note flow need to carry that direction too.

Second Spoke uses a bicycle illustration and bold lettering. Its repair details and note flow carry the same direction beyond this opening.

To make that comparison useful, keep the business content consistent across the alternatives. Otherwise a stronger offer or shorter page can distract from what the design is doing. Here is another edited example, not the historical wording that produced these screenshots:

Show two or three distinct directions using the same business content. Include the opening, a detailed service or product section, and the next action at desktop and phone widths. Explain how the imagery, type, composition and interaction fit the subject. Make the alternatives differ beyond their palettes.

You then have ordinary content to judge alongside the most flattering screen. Look at whether each section answers a different visitor question and whether the chosen identity continues through it.

There are recurring habits to watch in these examples: Moss & Mile and Morrowfield both use warm backgrounds, large serif type and photography. If the next business calls for a different character, challenge those choices while the directions are still being compared.

The earlier Causeway attempt became a carefully built folding landscape. The coordinating agent had turned a business-site brief into a digital exhibition. Passing technical checks could only confirm properties of the thing it had built; more polish would have continued the wrong assignment.

Give the agent the offer, visitor and next decision before asking it to choose effects. A nursery visitor narrowing plants by growing conditions has a different information problem from someone checking a bicycle repair's scope and price. Supplied facts and assets belong in that brief, along with a request to identify missing information before inventing claims.

During browser review, check keyboard access, visible focus, overflow, reduced-motion treatment and missing-media behaviour as well as the design. Automated checks help establish particular properties. They leave the visitor's task and the design judgement for you to inspect.

These four fictional briefs support reusing a process of setting the purpose, comparing directions, selecting and revising. They do not establish a quality score, a speed gain or reliable results without human direction. The checks were digital, with no customer-preference study, physical-phone usability result or established assistive-technology usability. Real clients also bring fixed identities, content and integrations that these studies could avoid.

For the next review, take one choice all the way to its outcome. That gives the agent a concrete relationship to fix, preserve or remove.

Want to talk about something I’ve written or built? Get in touch.

This article was adapted with AI assistance from an original article on billiem.uk. The original article was reviewed before publication.