"It looks AI generated" is a real complaint with a specific meaning, and it is not about quality. Generated pages are usually competent. What gives them away is that they are competent in the same way as every other generated page: the same palette, the same shapes, the same three sections in the same order, and copy that describes a category rather than a product.
Here is what actually reads as generated, and what fixes it.
The tells
The gradient hero. Purple to blue, centred headline, two buttons, a soft glow behind. It is not bad. It is everywhere, and a reader who has seen it forty times this year recognises the fortieth instantly.
Copy that could be about anything. "Transform your workflow with powerful, intuitive tools." Remove the product name and the sentence still works for a CRM, a note app or a database. That is the single strongest tell, and it has nothing to do with design.
Perfect and empty. Three feature cards with three icons and three sentences of equal length, all claiming something unfalsifiable. Real products have uneven features: one that is genuinely better, one that is a workaround, one nobody uses.
Stock everything. Generic illustrations, a smiling team photo that is not the team, logos of companies who are not customers.
No specificity anywhere. No numbers, no names, no screenshots of the actual product, no dates.
What fixes it, in order of effect
Show the product. A screenshot or a twenty-second loop of the real thing beats any hero illustration, and it is the fastest single change available. A page that shows the interface cannot look generic, because your interface is not generic.
Write one specific sentence. Replace the headline that could be about anything with a claim that could only be about you. "Cut deploy time from 12 minutes to 90 seconds" cannot be moved to another product's site. That sentence is worth more than the entire visual pass.
Pick a palette that is not the default. The generated look leans on a small set of hues. A considered palette starts from one colour with a reason behind it and derives the neutrals from it, so the greys read as chosen. The theming guide covers the mechanics, and the themes collection has 623 starting points that are not the default.
Choose typefaces deliberately. A face nobody else in your space uses, paired with something plain, does more work than any effect. The generated look has a handful of default faces, and using one is a choice you can simply not make.
Break the symmetry once. Every generated layout is a grid of equal cells. One asymmetry - a bento with a genuinely larger cell, an off-centre hero, a section that does not match the rhythm - reads as a decision. The bento guide is about exactly that hierarchy.
Put a person in it. A founder's name, a real photograph, a written note. Generated pages have no author, and it shows.
Where components fit
None of this is an argument against using components, and this is worth saying plainly on a site that publishes them.
A borrowed component becomes generic in one of two ways: when it is the same one everybody took and it was not adapted, or when it is doing the talking. A component adapted to your tokens, carrying your specific copy, inside a layout that is yours, does not read as generated. The compatibility guide covers the adaptation, and it takes minutes when the file is fresh.
The rule that holds: borrow the composition, write the content. The parts that make a page recognisable - the claim, the numbers, the screenshot, the name - are the parts no catalogue and no model can supply.
The five-minute test
Cover the logo and read the page. If the copy would still make sense on a competitor's site, it is not about your product yet. That single test catches most of what people mean when they say a site looks generated, and none of it is fixed in CSS.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| A screenshot or a product loop | The strongest single change available | Someone has to record it |
| Community themes | A palette that is not the default | Community-made, so check contrast |
| A distinctive typeface | Identity that costs one link tag | Licensing, and a real fallback stack |
| 21st | Compositions to adapt, not to ship untouched | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What makes a website look AI generated?
- Sameness rather than low quality. The same gradient hero, copy that would work for any product in the category, three equal feature cards making unfalsifiable claims, stock imagery, and no numbers, names, dates or screenshots anywhere. The copy tell is the strongest and has nothing to do with design.
- What is the fastest fix?
- Show the product. A screenshot or a twenty-second loop of the real interface cannot look generic, because your interface is not generic. Second is one specific sentence that could only be about you, such as a real number, replacing the headline that could be about anything.
- Does using component libraries make a site look generated?
- Only when the component is shipped untouched and left to do the talking. Adapted to your tokens, carrying your specific copy, inside a layout you decided, a borrowed component reads as yours. Borrow the composition and write the content, because the claim, the numbers and the screenshot are what no catalogue can supply.
- How do you test whether a page reads as generic?
- Cover the logo and read it. If the copy would make sense on a competitor's site, the page is not about your product yet. That single test catches most of what people mean by looks AI generated, and none of it is fixed in CSS.