You asked AI for a page that sells a watch, and it gave you a generic headline, two buttons side by side and a gray box where the watch should be. Below, the same page is rebuilt in place, one piece at a time, and every change keeps the ones before it.
The whole rebuild, one piece at a time. Watch it on YouTube.
1. Start with who it's for
- Before: "Timeless Watches For Every Moment", a headline that fits any watch shop, and nothing on the page that says who it is talking to.
- Fix: answer one question first: people who save up for one good watch. They don't want fancy words. They want to see it, up close.
- Why: every later decision comes from that answer. A buyer who saved for months is looking at the object, not at the adjectives around it.
2. Keep the promise short, and make it huge
- Before: a two-line headline at the size of a normal heading.
- Fix: three short words, "Time, slowly made.", set at 168px, about ten times the body text, black on a warm gray. The middle word steps back to a lighter gray, so the line reads in two beats.
- Why: when the words are big enough, they become the picture. Stepping one word back gives the watch a quieter place to stand in front of, while every word stays readable.
3. Put the watch in the empty box, then on top of the words
- Before: a gray box where the product should be.
- Fix: the box gets the photo of the watch. Then the watch is cut out of its photo and placed over the end of the words, so it overlaps the promise instead of sitting next to it.
- Why: the product is what this page sells, so it should be the first thing the eye lands on. Overlapping the type ties the object and the promise into one image.
4. Two layers, two speeds: parallax
- Before: one flat composition.
- Fix: when the page scrolls, the watch moves faster than the words behind it.
- Why: close things move fast and far things move slow. Your eye reads that difference as depth, and the watch feels like it sits in front of the page.
5. Put the proof next to the promise
- Before: "Discover premium timepieces crafted for those who appreciate quality", a claim with nothing behind it.
- Fix: three small facts right under the promise: 38 mm, sapphire glass, a 4.8-star rating.
- Why: the doubt starts right after the promise. Facts placed there answer it before the visitor has to scroll to look for them.
6. Show the craft
- Before: nothing about how the watch is made.
- Fix: a small card with the movement, alive, up close.
- Why: for a mechanical watch, the movement is part of what people pay for. A small window into it says that without a paragraph.
7. One button, with the price on it
- Before: "Shop Now" and "Learn More", side by side and equally loud.
- Fix: one button that names the watch and the price: "Buy the Field 38 — €1,240".
- Why: a button with the price removes the last guess. The visitor knows exactly what happens when they click.
The checklist
Before an AI-generated product landing page goes live:
- The page answers who it's for before it describes anything.
- The product is on the first screen, and it's the first thing the eye lands on.
- The promise is short enough to be set big.
- The proof sits right next to the promise.
- There is one primary action, and it says what it costs.
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.
VELLO is a fictional watch brand made for this example; the Field 38, "Time, slowly made.", 38 mm, sapphire, the 4.8 rating and the €1,240 price are illustrative. The watch and its movement were generated for the post, with no real brand on them.