De-AI your hero: 5 design rules that turn AI-generated UI into a brand

An AI coding agent can generate a hero section in ten seconds. It won't be broken. It just won't belong to anyone.

Most AI-generated landing pages fall into the same defaults: centred text, an empty image placeholder, two buttons of equal weight, and adjectives that could sell anything. Five rules turn that output into a hero only one brand could own, without adding another framework to your stack.

Before and after. Left, the AI-generated hero: centred "Elevate Your Everyday Style", two equal buttons and an empty image placeholder. An arrow points right, to the MARLO hero: a model in an orange set sitting in front of the brand name, the serif headline "Worn in. Never worn out." and one orange button

The finished MARLO hero up close: the brand name in a large serif, a model in an orange set sitting on a white block in front of it on an oat panel, the headline "Worn in. Never worn out.", the fabric and dye facts, the orange "Shop the set — €89" button, a "See the fit" link and three colorways: Ember, Oat and Ink

The whole rebuild, one fix at a time. Watch it on YouTube.

1. Give the image a job

Before: no visual anchor at all, then a photo dropped into an empty box.
Fix: layer it. Cut the subject out and let it break the grid, overlapping the brand name on one solid colour.
Why: a photo in a box is filler. A subject that breaks its bounds creates depth and puts the brand on screen at once.

2. Say what only this brand can say

Before: "Elevate your everyday style." Nobody remembers it, and every competitor could run it.
Fix: "Worn in. Never worn out." Short, and true of this product only.
Why: if your headline can be pasted onto a competitor's page without feeling wrong, it sells neither of you.

3. Swap promises for proof

Before: "Timeless pieces designed for comfort, confidence and effortless living."
Fix: two specs a buyer can check: 420 g brushed cotton. Garment-dyed in Porto.
Why: adjectives ask for trust. Numbers and specifics earn it.

4. One button, one quiet link

Before: "Shop Now" and "Learn More", identical, fighting for the same weight.
Fix: one primary button that says what happens and what it costs, "Shop the set — €89". The other action becomes a plain text link.
Why: two equal buttons make the visitor choose. A clear visual hierarchy points at the one step that matters.

5. Show the options up front

Before: one colour on screen, the others behind a click or a modal.
Fix: every colorway, named, right under the button.
Why: "does it come in another colour?" is the next thing a visitor wants to know. Answer it before they ask.

The hero checklist

Before an AI-generated hero goes to production:

The subject overlaps the layout instead of sitting in a box.
The headline would be false on a competitor's page.
The copy under it carries at least two specs a buyer could check.
There is one primary button, and it says what you get or what it costs.
The main options are visible without a click or a modal.

Give your agent the rules before it writes

Coding agents like Claude Code and Codex fall back on these defaults when nothing tells them otherwise. SynthesisUI puts your design system's tokens, components and rules in front of the agent before it writes, and checks what it wrote at the end of every turn.

Build this hero with your own agent, step by step →

The mission has every prompt we ran, in order, and what each one should give you.

See how SynthesisUI works →

MARLO is a fictional brand made for this example; the product, the specs, the price and the copy are illustrative. The photo was generated for the post.