This page looks like a game website. It has a logo, a headline about "next-gen gaming", two buttons and three feature boxes. But it doesn't feel like a game. 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: a headline that fits any game, two buttons competing for attention, three feature boxes and an empty rectangle. Nothing on the page says who it is talking to.
- Fix: answer one question first: players who grew up with a monster partner. They don't want a feature list. They want a world to explore.
- Why: every later decision comes from that answer. "Fast, Social, Free" is a list of features; a world is the thing this player is actually looking for.
2. Put the world in the empty space
- Before: an empty box where the image should be.
- Fix: the box gets a short video loop of the world (sky, a floating city, waterfalls) and then grows until it becomes the whole background. The text moves to the left over a dark gradient so it stays readable.
- Why: the first screen should show the place, not describe it. A looping scene does in a second what three feature boxes can't.
3. Two layers, two speeds: parallax
- Before: one flat picture.
- Fix: the heroes are cut out of the picture and placed on their own layer. When the page scrolls, the heroes move faster than the background.
- Why: close things move fast and far things move slow. Your eye reads that difference as depth, and the page stops feeling like a poster.
4. A headline from inside the game
- Before: "Next-Gen Gaming Experience", a line that could sit on any game's page.
- Fix: "Your partner is waiting." in the same place, with a warm gradient taken from the sunset.
- Why: a headline that sounds like a line from the game makes a promise only this game can keep.
5. Turn the feature boxes into a choice
- Before: three boxes listing features.
- Fix: the same three slots become three partners to pick: fire, ice or light, each one alive in its card.
- Why: picking a partner feels like the game already started. A choice pulls the visitor in; a list asks them to read.
6. Show who's online, then one clear next step
- Before: "Download Now" and "Learn More", side by side and equally loud.
- Fix: a live player count next to the action ("12,408 tamers online now"), and one glowing "Play free" button.
- Why: the number says this world is busy and you won't play alone. One button removes the last decision.
The checklist
Before an AI-generated game landing page goes live:
- The page answers who it's for before it lists anything.
- The first screen shows the world, not a description of it.
- The foreground and the background are separate layers, so scrolling has depth.
- The headline could only belong to this game.
- There is one primary action, and the rest of the page leads to it.
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.
KINDRA is a fictional game made for this example; the creatures, the copy and the "12,408 tamers online" count are illustrative. The world, the characters and the creatures were generated for the post with original designs.