---
title: "How to Make an AI Website Feel Like Someone Designed It"
date: 2026-10-19
description: "A practical briefing and critique process, with reusable requests and four working examples showing what to ask an AI design agent to do."
tags:
  - "ai-coding"
  - "web-experiments"
---

If the first AI version of your website feels interchangeable, the next instruction needs to do more than ask for “better design”. Give the agent a specific visitor, a decision to help them make, and a reason for the site to look the way it does.

Then ask for different directions before committing to one. Compare how they handle the service details, catalogue or next action as well as the opening screen. That gives you something concrete to select and criticise.

We developed this process across [four fictional business websites](/experiments/frontend-design/2026-10-19/): a dog walker, bicycle workshop, nursery and furniture brand. The requests below are reusable versions of the constraints developed during that work. They are edited examples, rather than the exact prompts that produced the screenshots.

## Give the agent a business brief

Start by explaining the offer and the visitor's job. “Build a cool website for a nursery” leaves the agent to invent what the site needs to accomplish. A useful brief gives it decisions to design around:

> Design a website for [business] offering [products or services]. The visitor needs to understand [offer], decide [key choice], and finish by [useful next action].
>
> Use these facts and assets: [supplied material]. Identify missing information before inventing claims or filling the page with slogans. Map the visitor journey before choosing effects or writing the site.

For Morrowfield, the nursery, that meant helping someone narrow a plant choice by growing conditions and size, then keep a list with quantities. For Second Spoke, it meant understanding a repair's scope and price before preparing a note about the bike. Those are different information problems, even when both sites need attractive introductions.

The brief needs that specificity. One earlier attempt became Causeway, a carefully built folding landscape. The coordinating agent had changed a business-site assignment into a digital exhibition. More technical polish would have developed the wrong thing further.

## Compare directions across the whole site

Ask for a small set of materially different approaches before implementing one. Have the agent show what each would do with ordinary content:

> Propose two or three distinct design directions for this same brief. For each, show the opening, an information-heavy section or detail page, and the next-action flow at desktop and phone widths.
>
> Explain the relationship between the subject, imagery, type, composition and interaction. Keep the business content consistent so I can compare the designs. Palette swaps alone are not enough.

Judge the material and layout together. Moss & Mile uses outdoor photography, green and burgundy type, and a lead shape running through the composition. Second Spoke uses a drawn bicycle and heavier lettering. The useful comparison is how each direction fits its subject and survives the practical content.

![Moss & Mile pairs a large woodland dog photograph with green and burgundy type and a walk-selection action.](media/moss-mile-home-f574604372d1-332f6e4062e3-720.png)

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

![Second Spoke's repair-site opening combines bold black and coral lettering with a large bicycle drawing.](media/second-spoke-home-df0fc9ac1346-1288270b824a-720.png)

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

You can inspect all four examples to see how the same broad process served different tasks:

- [Moss & Mile](/experiments/frontend-design/2026-10-19/moss-and-mile/): choose a walk, then prepare and keep a walk note.
- [Second Spoke](/experiments/frontend-design/2026-10-19/second-spoke/): inspect repair scope and prices, then keep a repair note.
- [Morrowfield](/experiments/frontend-design/2026-10-19/morrowfield/): filter plants, set quantities and build a garden or trade list.
- [Commonset](/experiments/frontend-design/2026-10-19/commonset/): inspect furniture, change a configuration and keep a project note.

The companies and commercial offers are fictional. These actions prepare local notes and lists; they do not send messages, book appointments or place orders.

## Give each interaction a job

Before approving an effect, ask what the visitor gains from using it. Can they understand something, inspect a difference or make a relevant choice?

A bicycle version included a cog mechanism that was eventually removed because it added no useful visitor value. Making its controls work correctly hadn't supplied a reason to keep it.

Commonset's width and finish controls stayed because they change the actual furniture drawing and specification. Morrowfield's plant-form choices change the subject being shown. You can explain those controls in terms of what someone is trying to inspect.

![The narrow Line desk page places its drawing above legible width, finish and quantity controls.](media/commonset-configuration-0683757014ff-ae270c58621a-390.png)

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

That question belongs before implementation, when it can save building an unnecessary feature. Motion can also support atmosphere and hierarchy quietly; it doesn't automatically need a separate control to announce itself.

## Critique the page you can actually use

Review the rendered site in a browser. Follow a choice into the next screen, edit it, return and try the narrow layout. A good opening screenshot leaves plenty of the website unexamined.

Give feedback that names the problem and preserves what already works. For example:

> Keep the chosen visual direction. The service details and enquiry flow currently repeat the same layout without helping me compare the options. Give each section a distinct job, carry the selected service into the enquiry, and preserve any text I have entered.

That is an edited example of the kind of revision request these studies called for. The inspectable result matters: does the choice carry through, is the information readable, and does the next action do what its label promises?

![Morrowfield's catalogue filters form a compact two-column panel at a 390-pixel viewport, with controls for growing conditions and plant size.](media/morrowfield-mobile-filters-2f15c4395ab5-4282bce76fcc-320.png)

*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.*

Check keyboard access, visible focus, narrow-screen overflow, reduced-motion treatment and missing-media behaviour alongside the design. Use automated checks for what they can establish, then inspect the pages and decisions yourself. The nursery filter panel above is one ordinary part worth checking on a phone-width view.

## Reuse the process, then judge the next result

Across these four fictional briefs, the reusable sequence was business purpose, competing directions, selection, rendered critique and revision. The work supports trying that process again. It doesn't establish a reliable quality score, a speed improvement or a result without human direction.

Some visual habits recur, too: Moss & Mile and Morrowfield both use warm backgrounds, large serif type and photography. If your next brief calls for a different character, challenge those choices during direction selection.

The examples were checked digitally, with no customer-preference study or physical-phone usability result. Real clients would also bring existing identities, fixed content and integrations that these fictional offers could avoid. Use the requests as a starting point, then judge the actual site through the decisions its visitors need to make.