Structure Before Style
Decides the shape of the screen before any colour is picked, because being recognisable on sight is the failure — not any one ingredient.
When to reach for it
At the start of any new page or screen, and immediately after someone says the output looks AI-generated but cannot point at what is wrong with it.
What changes
- The default arrangement gets named out loud before it is inherited, so choosing it again becomes a decision rather than a drift.
- One structural fact about the brief is written down first, and the layout is derived from that fact rather than from a template.
- The chosen shape is stated in a sentence someone could draw from over the phone, which is the test of whether a choice was actually made.
- Colour, type and component styling are held back until the arrangement is settled, so a restyle can no longer masquerade as a redesign.
- Two briefs handled a week apart come out structurally different, which is the only thing that answers the complaint that everything looks the same.
Pairs with
- Describe the FeelTurns "make it feel premium" into properties with numbers you can check when it comes back.
- Reference, Not RecreatePoints at how another product behaves precisely enough to build from, without asking for a clone.
- Assumption CheckMakes the agent state what it is assuming — and verify it — before it writes a line.
Structure Before Style
When people say a site looks AI-built, the complaint that comes up most is not any single ingredient. It is that the thing is recognisable on sight — the same arrangement, again. Every specific tell people can name is a distant second to that.
Which means restyling is not the fix. Palette, font and radius sit on top of an arrangement, and if the arrangement is the one everyone else inherited, a new palette only makes it a recognisable page in an unusual colour.
1. Name the default before you inherit it
Write down what you would get if you made no decisions at all. Be specific enough that you would recognise it later:
- Marketing page: centred headline, one line of subcopy, two buttons, a screenshot with a glow behind it, three feature cards, a logo strip, a call to action repeated at the bottom.
- App screen: left sidebar, top bar with search and avatar, a grid of equal cards, an empty state nobody looked at.
- Dashboard: four metric tiles across the top, one wide chart, one table below.
You are not banning these. You are making sure that if one of them ships, it shipped because it was chosen.
2. Write the one structural fact about this brief
One sentence, about the content rather than the aesthetic. What is this screen actually for?
- "It is a menu — a list of things with prices, read while standing up."
- "It is one number that matters and five that explain it."
- "It is a decision with exactly two outcomes."
- "It is a schedule, and the reader always wants today first."
If you cannot write this sentence, you do not yet know enough to lay anything out. Go and find out.
3. Derive the shape from that fact
The fact usually rules out the default on its own. A menu is a list, not three cards. One number that matters wants one enormous number, not four tiles of equal weight. A schedule wants a spine down the page. A single decision wants most of the screen empty and the two outcomes far apart.
Write the arrangement as a sentence someone could draw without seeing your screen. "A single column, the total in the top third at display size, the five contributing figures as a ruled list beneath it, no cards anywhere." That sentence is the deliverable of this step.
4. Only now, style it
Pick the palette, the type and the component treatment against a shape that already exists. This ordering matters more than either decision: styling chosen first will quietly pull the layout back toward whatever that style is usually used for.
5. Check the shape survived
- Could a reader describe this arrangement over the phone, and would the person on the other end draw something other than the default?
- Put it beside the last thing you built. If the two are the same arrangement in different colours, only one structural decision has been made across both projects.
Rules
- Do not treat a palette swap as a redesign. Different colours on the same arrangement is the thing people are complaining about, not the cure for it.
- Do not choose a shape because it is unusual. It has to come from the structural fact; novelty for its own sake produces a layout nobody can use, which is a worse failure than a familiar one.
- Do not let a component library choose the arrangement. Its defaults encode the shape its examples used, and those examples are where the common look came from.
- Do not skip step 2 because the brief seems obvious. The briefs that seem obvious are the ones that produce the default.