LearnAI home

Making It Good ยท Lesson 3

Asking for the Layout You Want

Getting the structure right instead of accepting the first draft.

Draft one is a proposal

Draft one is the tool's guess at what you meant. Treating it as the site is the most common mistake people make, and it is the reason so many AI built sites end up looking like each other.

The way out is to stop describing how it should look and start describing how it is arranged.

Those are genuinely different requests. "Make it feel modern" is a request about appearance, and it will be answered with fonts and spacing. "Put the proof before the price, and give the proof more room than anything else on the page" is a request about arrangement, and it changes what a visitor actually reads first. Appearance is worth getting right eventually. Arrangement is what decides whether the page works at all.

Name the sections and their order

A layout brief is a list. Each item says what the section is, what it is for, and roughly what goes in it. The order is part of the instruction, not a suggestion.

Saying what a section is for matters more than it sounds. "A section with three boxes" gets you three boxes. "A section that makes a hesitant visitor believe I have done this before" gets you something with proof in it. The second is a job. The first is furniture.

Prompt you can copy: a full layout brief

Rebuild the page with these sections, in exactly this order. For each one I have said what it is for, so use that to decide what belongs in it.

  1. Opening. Purpose: tell a stranger in five seconds what this is and who it is for.
  2. What I do. Purpose: three services, plainly named, with no marketing language.
  3. Proof. Purpose: make a hesitant visitor believe I have done this before. Two short client quotes.
  4. How it works. Purpose: remove the fear of getting in touch. Three numbered steps.
  5. Contact. Purpose: make getting in touch the easiest thing on the page.

Do not add any sections I have not listed.

That last line does real work. Left to itself it will helpfully add a newsletter box, a statistics strip and a frequently asked questions block you never asked for.

Scope every change

Here is the technique that separates a site which improves from one which drifts.

When you ask for a change, say what it must not touch.

An unscoped instruction like "make it feel more professional" is an invitation to rewrite the whole page. You get a different site, some of it better and some of it having quietly undone the thing you fixed twenty minutes ago. So you fix that, and something else moves.

Prompt you can copy: a scoped edit

Change only the opening section at the top of the page. Leave every other section exactly as it is, including their wording, order and spacing. In that opening section: shorten the headline to under eight words, remove the second paragraph, and move the contact link so it sits directly beneath the headline.

Prompt you can copy: audit what you actually have

List the sections currently on the page, in order, with one line each saying what that section is doing. Do not change anything. If any two sections are doing the same job, say so.

The audit prompt is the one people skip and then wish they had run. After six rounds of edits, what you remember the page containing and what it actually contains have usually parted company.

In plain English

Layout:
How the page is arranged: what is on it, in what order, and how much room each part gets.
Section order:
The sequence sections appear in from top to bottom. Reordering is one of the cheapest big improvements available.
Scope:
The boundary of a change. Saying what must not move is as important as saying what must.
Above the fold:
Whatever is visible before anyone scrolls. It is doing more work than the rest of the page combined.
โŒ Weak prompt

Prompt

Make it look more professional.

Output

The whole page is rewritten. Fonts change, spacing changes, the services list becomes a grid of cards, and the opening paragraph you spent three rounds getting right is replaced.

Nothing was out of bounds, so nothing stayed put. Some of it is genuinely better, which is what makes this expensive: you now have to work out which parts to keep and re-request the parts you lost.

โœ… Good prompt

Prompt

Change only the services section. Leave every other section exactly as it is. In the services section, use a plain vertical list instead of boxes, keep the existing wording word for word, and add more space between each item.

Output

The services section becomes a spaced vertical list with the original wording intact. Nothing else on the page moves.

One area, one change, everything else explicitly fenced off. You can see immediately whether it worked, because it is the only thing that is different.

Checkpoint

Brief the layout as a numbered list of sections with a stated purpose each, and fence off everything you do not want touched on every single edit.

When an edit goes wrong

Two attempts is the limit. If a change has failed to land twice, the description is the problem, not the tool.

Stop rephrasing and change what you are describing. Instead of the outcome you want, describe the current state and the specific difference. "The gap above the contact section is larger than the gap above every other section. Make it match the others." That is checkable. "Make the spacing better" is not.

The reason this works is unglamorous. A description of an outcome requires the tool to guess what you consider good, and it will guess differently every time you ask. A description of a difference between two things on the page in front of it requires no guessing at all. Anything you can point at, you can fix. Anything you can only feel, you will chase for an hour.

If you genuinely cannot point at it, the honest move is to stop editing and go back to the layout brief. Something structural is usually wrong when nothing cosmetic helps.

๐Ÿ“ Quiz

Question 1 of 4

What is the most useful thing to specify in a layout brief?

Found this useful? Pass it on.