Look at any AI generated landing page from the last six months and you will see the same five moves. A soft purple to blue gradient at the top. A glass card with a one pixel border. Inter at fourteen pixels for body. A rounded pill button with a barely visible shadow. And somewhere in the middle, a grid of three feature cards that all look the same. The reason every **AI landing page looks generic** is not bad models. It is missing tokens.
I have generated probably a thousand landing pages with Claude, Cursor, and Lovable over the last year, and the pattern is so consistent it stopped being funny. The fix is also consistent. Five tokens, defined once, change everything.
The visual fingerprint of a generic AI page
Before we talk about the fix, it helps to name what you are seeing. The default AI landing page has a fingerprint, and once you can spot it you cannot unsee it. There are about five ingredients, and they show up together because the agent is reaching for the same defaults every time.
A two stop gradient, almost always purple to blue or peach to pink, at sixty degrees.
A pure white or near white background with a glass card floating on it.
Inter, at fourteen pixels for body, sixteen for h2, thirty two for h1.
A pill or rounded button at twelve pixel radius with a soft shadow.
Three feature cards in a grid, each with an icon, a title, and two lines of text.
Any one of these by itself is fine. All five together is the look. And the agent reaches for all five together because, in the absence of tokens, those are the safest defaults it knows.
Why this happens, in one paragraph
AI coding agents are trained on a lot of UI code. The most common patterns in that training data are also the most common defaults. When you give an agent no design system, it falls back to the statistical center of everything it has ever seen. The statistical center of UI in 2024 and 2025 is exactly the page above. So you get the page above. Every time. The fix is not to scold the agent. The fix is to move it off the center by giving it tokens of your own. The deeper version of this argument lives in the shadcn trap, which covers why even custom component libraries cannot save you without tokens.
The five token fix
Five tokens, defined in your design.md, will move your AI generated landing page off center harder than any other change you can make. Not five categories. Five specific values. Here is the list, with what each one fixes.
1. A non default surface color
Stop using pure white as your background. The agent reaches for white because it has no other instruction. Replace it with something with a hint of warmth or coolness or saturation. A bone surface at oklch 0.97 0.01 80 reads warm and editorial. A near black at oklch 0.16 0.012 250 reads cinematic. A pale moss at oklch 0.96 0.02 140 reads calm and organic. Any of these beats white because none of them are the default.
2. A real type pairing, not Inter twice
Pick a display font and a body font that are visibly different. A serif paired with a sans. A geometric sans paired with a humanist sans. A monospace headline paired with a clean body. The pairing is what makes the page feel designed. One Google Fonts pairing, declared once in design.md, replaces the Inter at every size default and changes the entire personality of the page.
3. A radius scale you actually committed to
Most AI pages float around eight to twelve pixel radius for everything because that is the default in most component libraries. Pick a position. Sharp at zero pixels reads brutalist and confident. Generous at twenty four pixels reads soft and friendly. Pill at nine hundred ninety nine pixels reads playful. Whatever you pick, commit, and use the same scale for buttons, cards, inputs, and images. Consistency is the look.
4. A single accent color, not a palette
Most generic AI pages have three or four accent colors fighting each other. One for buttons, one for links, one for the gradient, one for an icon. Cut to one. The accent is the moment of color you allow per screen. Everything else is your surface and neutral scale. A single, saturated accent against a restrained neutral palette is more interesting than four pastels competing for attention.
5. A motion or texture token
The fifth token is the one most people skip, and it is the one that does the heavy lifting. Pick one signature texture or motion. A subtle film grain over surfaces. A slow ambient gradient that drifts on the hero. A hairline rule under every section header. A specific easing curve for hover states. One signature, applied consistently, makes the page feel like it was made by someone with taste rather than assembled from defaults.
What changes when you add the five tokens
The next time you ask the agent for a landing page, it will not reach for the default surface, because you gave it a different one. It will not pair Inter with Inter, because you named two fonts. It will not float at eleven pixel radius, because you named a scale. It will not invent a fourth accent, because you only gave it one. And it will reach for your signature texture by default, because that is the one you wrote down.
The page will still be made by an AI. It will still have your hero, your features, your CTA, your footer. But it will look like it belongs to your product instead of belonging to a stock template. That is the whole game.
Why this is a token problem, not a prompt problem
A lot of people try to solve this with longer prompts. Make it more editorial. Make it less generic. Make it feel premium. None of that works for long, because the agent has no anchor for what those words mean to you. Tokens are the anchor. They turn make it feel premium into use the bone surface, the serif display, the sharp radius, the single saturated accent, the film grain. The agent can do that. It cannot do feel premium.
This is also why a CLAUDE.md or .cursorrules that lists tokens inline tends to fail. The visual layer needs its own file the agent loads for every UI prompt. That is the design.md, and the files cheat sheet covers where each kind of decision belongs.
Stop trying to fix generic AI pages with longer prompts. Fix them with five tokens, declared once, in a file the agent actually reads.
A starting set you can copy tonight
If you want a head start, browse the directory and pick a system whose feeling you like. Each one ships with a complete design.md, including all five token categories above, and a few more for good measure. Drop the file in your project root, point your agent at it, and your next landing page will be off center from the first prompt.
The five token fix is not a magic spell. It is a small commitment to specificity over defaults. But because AI agents collapse to defaults when they have nothing else to anchor on, even five tokens is enough to break the pattern and make your page look like yours.
Where to go from here
Pick a system, copy the file, regenerate one screen, and compare. The difference is visible in five minutes, and once you see it you will not want to ship a landing page without these tokens defined again.
Frequently asked questions
Why does every AI landing page look generic?
Because the agent collapses to the statistical center of its training data when you give it no design system. The center of UI in 2024 and 2025 is a soft purple gradient, Inter at fourteen pixels, a glass card on white, a pill button, and three feature cards. With no tokens to anchor on, the agent reaches for that combination every time.
Can a longer prompt fix a generic AI landing page?
Not for long. Prompts like make it more editorial or feel more premium have no anchor the agent can act on consistently. Tokens are the anchor. They turn vague preferences into specific values the agent can apply to every screen without rethinking what the words mean.
What are the 5 tokens that fix a generic AI landing page?
A non default surface color, a real type pairing instead of Inter twice, a radius scale you committed to, a single saturated accent instead of a palette, and one signature motion or texture token. Five values, declared once in design.md, change the personality of every page the agent generates.
Why is the surface color the first token to change?
Because almost every AI landing page defaults to pure white, and pure white is the strongest signal that the page was generated without a design system. Replacing white with something warm, cool, or saturated immediately moves the page off center and makes the rest of the tokens easier to commit to.
Should I use multiple accent colors on an AI landing page?
No. Most generic AI pages have three or four accent colors fighting each other. Cut to one. The accent is the moment of color you allow per screen. Everything else lives in your neutral and surface scale. One saturated accent against restrained neutrals is more interesting than four pastels competing.
Do these tokens work with shadcn or other component libraries?
Yes. Shadcn and most modern component libraries are built on CSS variables. Once you change the underlying tokens, every component picks up the new values automatically. The library stays the same. The look changes everywhere.
Where do I put the 5 tokens so my AI agent reads them?
In your design.md at the root of the project, with the same values mirrored into your CSS variables. Then point CLAUDE.md or .cursorrules at design.md for all styling decisions. The agent will reach for your tokens on the next prompt without further reminding.
How fast will I see a difference after adding the tokens?
On the next prompt. Regenerate one screen and compare it to the version before the tokens were declared. The surface, the type, the radius, the accent, and the signature texture all change at once, and the page stops looking generic in about five minutes of work.