The State of AI Web Design in 2026: Data from Scanning 1,000 Sites
We scanned 1,000 AI-built sites. The average score was 61.4/100, 78.3% used Inter, 72.1% picked a blue primary, and over six months the web got measurably more generic, not less.
Between January and March 2026, we pointed Sailop's scanner at 1,000 websites that publicly described themselves as built with AI coding tools. The URLs came from four places: "built with AI" showcases, Hacker News "Show HN" posts tagged with AI tools, Product Hunt launches that credited AI in their stack, and developer portfolios that named Cursor, Bolt, v0, or Claude Code in their build notes.
We scored each site across Sailop's seven design dimensions: color, typography, spacing, layout, component patterns, decoration, and content structure. This article is the raw data, the patterns, and what they mean if you build with these tools.
For background on the seven dimensions, read what is AI slop: the 7 dimensions of generic design. For the patterns we detected, see our catalog of 90+ AI design patterns to avoid.
Methodology
The 1,000 URLs broke down like this:
Source breakdown:
+----------------------------+-------+---------+
| Source | Count | % Total |
+----------------------------+-------+---------+
| "Built with AI" showcases | 412 | 41.2% |
| Hacker News Show HN | 287 | 28.7% |
| Product Hunt launches | 198 | 19.8% |
| Developer portfolios | 103 | 10.3% |
+----------------------------+-------+---------+
| Total | 1,000 | 100.0% |
+----------------------------+-------+---------+Each site was scanned with sailop scan --url , which downloads the page, extracts all CSS (inline, embedded, and linked), parses the DOM, and scores each dimension from 0 to 100. Lower is better: 0 means fully unique, 100 means maximally generic.
We dropped two categories before scoring: sites that were byte-for-byte known templates (identical HTML to a ThemeForest or shadcn starter), and anything behind an auth wall we could not render.
Overall Score Distribution
The average Sailop score across all 1,000 sites was 61.4 out of 100, a Grade D. For context, a hand-designed site from a serious agency typically lands between 15 and 30 (Grade A to B).
Score distribution (1,000 AI-built sites):
0-10 (A+) ██ 1.2% (12 sites)
10-20 (A) ███ 2.8% (28 sites)
20-30 (B+) █████ 4.9% (49 sites)
30-40 (B) ████████ 7.7% (77 sites)
40-50 (C) █████████████ 12.6% (126 sites)
50-60 (D+) ████████████████████ 19.8% (198 sites)
60-70 (D) ██████████████████████████ 25.7% (257 sites)
70-80 (F+) █████████████████ 16.4% (164 sites)
80-90 (F) █████████ 7.2% (72 sites)
90-100 (F-) ██ 1.7% (17 sites)
Mean: 61.4
Median: 63.0
Std Dev: 16.2Roughly normal, slightly left-skewed. The peak sits in the 60-70 range: sites that hit the full house of common patterns at once. Inter font, a blue primary around #3b82f6, a three-column grid, rounded-xl cards, shadow-md.
The 89 sites scoring below 30 (Grade B+ or better) split into two types. Either an experienced designer drove the AI as a coding assistant and kept the visual decisions for themselves, or the team ran a constraint tool like Sailop during the build. Nobody fell into Grade A by accident.
Scores by Dimension
The dimensions are not equally broken. Average score per dimension:
Average score by dimension (lower is better):
Color ███████████████████████████████████ 68.3
Typography ██████████████████████████████████ 66.7
Component ████████████████████████████████ 63.2
Layout ██████████████████████████████ 59.8
Decoration ███████████████████████████ 54.1
Spacing █████████████████████████ 50.6
Content Struct ██████████████████████ 44.3
0 10 20 30 40 50 60 70 80Color and typography are the worst offenders. This tracks with how AI agents generate CSS: token-probability bias is strongest for color and font tokens, because blue-500 and Inter are the highest-frequency completions in the training data. Content structure scores best because the models are genuinely competent at semantic HTML. The failure is visual, not structural.
Most Common Patterns
We detected and ranked every pattern from our catalog of 90+ AI design patterns. The 20 most frequent:
Top 20 AI design patterns (% of sites exhibiting the pattern):
1. Inter font family 78.3%
2. Blue primary color (hue 200-240) 72.1%
3. rounded-lg / rounded-xl on cards 69.4%
4. shadow-md / shadow-lg on cards 67.8%
5. Three-column feature grid 64.2%
6. Hero with centered text + CTA button 61.7%
7. White/gray-50 backgrounds 59.3%
8. text-gray-600 body text 57.8%
9. py-24 section padding 55.1%
10. Gradient hero (blue to purple) 52.4%
11. Check icon feature lists 49.7%
12. max-w-7xl centered container 47.3%
13. Card hover:shadow-xl effect 45.6%
14. "Get Started" primary CTA text 43.2%
15. Terminal mockup with 3 colored dots 41.8%
16. Badge/pill above hero heading 39.4%
17. Testimonial cards in 3-col grid 37.1%
18. Footer with 4-column link grid 35.6%
19. Dark gradient navbar 33.2%
20. FAQ accordion section 31.4%These are not independent. The patterns travel in packs. A site that uses Inter (#1) is far more likely to also carry text-gray-600 body text (#8) and a max-w-7xl container (#12), because all three ship together in the same v0 and shadcn defaults. The median site in our set hit 9 of these 20 patterns. The modal site hit all five of the top five.
The combination of Inter and a blue primary alone produces a visual sameness people register instantly, even when they cannot name what they are seeing. The terminal mockup with three colored dots showed up on 41.8% of sites, a near-perfect tell for AI generation.
Color Palette Analysis
We pulled the primary color from each site and mapped it to HSL hue:
Primary color hue distribution:
0-30 (Red/Orange) ███ 3.4%
30-60 (Orange/Yellow) ██ 2.1%
60-90 (Yellow/Green) █ 1.4%
90-120 (Green) ████ 3.8%
120-150 (Green/Teal) ██ 2.2%
150-180 (Teal/Cyan) ███ 3.1%
180-210 (Cyan/Blue) ████████████ 11.4%
210-240 (Blue) █████████████████████████████████████████ 40.7%
240-270 (Blue/Indigo) ██████████████████████ 21.8%
270-300 (Purple) ████████ 5.2%
300-330 (Magenta/Pink) ███ 3.1%
330-360 (Pink/Red) ██ 1.8%
AI Band (200-290): 72.1% of all sitesThe AI band, hue 200 to 290, accounts for 72.1% of primary colors. The single 210-240 bucket, pure blue, takes 40.7% on its own. Pick two AI-built sites at random and the odds both run blue are better than even. The most common single value we extracted was #3b82f6, Tailwind's blue-500, appearing as the literal primary on 11.2% of all sites.
Warm hues (0-90) account for only 6.9% of primaries. Sites in this range score noticeably lower (better), because the color alone does most of the differentiation work. For how to land on an accent that is not the default, see how to pick an accent color that is not Tailwind blue.
Font Family Analysis
Font family usage (heading / body):
Inter / Inter █████████████████████████████ 56.2%
Inter / system-ui ████████ 15.1%
system-ui / system-ui ████ 7.4%
Poppins / Inter ███ 4.8%
DM Sans / Inter ██ 3.2%
Inter / Roboto ██ 2.1%
Geist / Geist █ 1.8%
Custom serif / sans-serif █ 1.4%
Other combinations ████████ 8.0%
Sites using Inter (any role): 78.3%
Sites with same font heading + body: 67.1%
Sites with serif anywhere: 8.4%67.1% of sites use one font for both headings and body, throwing away the most basic tool for hierarchy and visual interest. We cover why this matters in our typography problem article.
Watch the Geist line. At 1.8% it looks marginal, but it was 0.4% in our Q3 2025 sample, a 4.5x jump driven almost entirely by v0 output, where Geist is the shipped default. Geist is becoming the next Inter, the second fingerprint stacked on the first.
Only 8.4% of AI-built sites use a serif anywhere. Around 35% of professionally designed sites use serifs for at least their headings. That single choice is one of the cheapest differentiators available.
Framework Breakdown
Where detectable, we identified the build framework:
Framework distribution:
Next.js █████████████████████████████████████████ 48.3%
Vite + React █████████████████ 19.7%
Astro ████████ 8.4%
Nuxt.js █████ 5.6%
SvelteKit ████ 4.2%
Plain HTML ███ 3.1%
Remix ██ 2.3%
Other/Unknown ████████ 8.4%
CSS framework:
Tailwind CSS ██████████████████████████████████████████████ 89.2%
Vanilla CSS ████ 4.3%
CSS Modules ██ 2.8%
styled-comp. ██ 1.9%
Other ██ 1.8%Next.js leads at 48.3%, unsurprising given how much Next.js training data the coding tools sit on. Tailwind is on 89.2% of sites, confirming a near-monopoly as the CSS layer of AI-generated code.
Scores by Framework
Average Sailop score by framework (lower is better):
Next.js ████████████████████████████████ 63.8
Vite + React ██████████████████████████████ 60.2
Nuxt.js █████████████████████████████ 58.4
SvelteKit ████████████████████████████ 56.1
Remix ███████████████████████████ 54.7
Astro ████████████████████████ 48.3
Plain HTML ████████████████████ 40.1
0 10 20 30 40 50 60 70Plain HTML scores best, almost certainly because the people writing raw HTML in 2026 are making deliberate choices, not accepting scaffolds. Astro also beats the average, likely because its community leans content-first over component-library-first.
Next.js scores worst. The framework is not the cause. The cause is its tight correlation with Tailwind plus shadcn/ui, a stack that produces remarkably uniform output by default.
AI-Built vs Human-Built Comparison
For a baseline, we also scanned 200 sites we judged professionally designed: award-listed agencies, established brands, design-led startups.
Score comparison (AI-built vs human-built):
AI-Built Human-Built Delta
(n=1000) (n=200)
+------------------+-----------+------------+---------+
| Overall Score | 61.4 | 24.8 | +36.6 |
| Color | 68.3 | 22.1 | +46.2 |
| Typography | 66.7 | 19.4 | +47.3 |
| Component | 63.2 | 28.7 | +34.5 |
| Layout | 59.8 | 26.3 | +33.5 |
| Decoration | 54.1 | 24.6 | +29.5 |
| Spacing | 50.6 | 27.2 | +23.4 |
| Content Struct. | 44.3 | 25.1 | +19.2 |
+------------------+-----------+------------+---------+The gap is widest in typography (+47.3) and color (+46.2), the exact dimensions where the models lean hardest on their highest-probability tokens. It is narrowest in content structure (+19.2) and spacing (+23.4), where AI output already sits close to human work.
Trends: What Is Getting Worse, What Is Improving
We compared Q1 2026 against a smaller sample from Q3 2025 (n=300):
Trend comparison (Q3 2025 vs Q1 2026):
Q3 2025 Q1 2026 Trend
(n=300) (n=1000)
+------------------+-----------+------------+---------+
| Overall Score | 58.2 | 61.4 | worse |
| Color | 64.1 | 68.3 | worse |
| Typography | 61.3 | 66.7 | worse |
| Component | 59.7 | 63.2 | worse |
| Layout | 57.4 | 59.8 | worse |
| Decoration | 52.8 | 54.1 | stable |
| Spacing | 51.2 | 50.6 | stable |
| Content Struct. | 46.1 | 44.3 | better |
+------------------+-----------+------------+---------+The headline is bad: AI-built sites are getting more generic over time, not less. The average climbed from 58.2 to 61.4 in six months. Color and typography worsened most.
The likely mechanism is a feedback loop. The models train on web data. As more AI-generated sites enter that data, the models tilt even harder toward the patterns they already favor. More homogeneous training data produces more homogeneous output, which becomes more homogeneous training data. This is the AI slop economy feeding on itself.
Content structure is the lone bright spot, edging from 46.1 to 44.3, probably reflecting better model handling of semantic HTML and accessibility.
Specific Pattern Trends
Some patterns are spreading fast:
Pattern frequency change (Q3 2025 -> Q1 2026):
Growing patterns:
Terminal mockup w/ 3 dots 31.2% -> 41.8% (+10.6)
Gradient hero (blue/purple) 42.1% -> 52.4% (+10.3)
Badge/pill above heading 30.7% -> 39.4% (+8.7)
"Get Started" CTA 35.8% -> 43.2% (+7.4)
Bento grid layout 12.3% -> 19.1% (+6.8)
Animated gradient border 8.4% -> 14.2% (+5.8)
Declining patterns:
Bootstrap grid classes 18.4% -> 11.2% (-7.2)
jQuery animations 9.7% -> 4.3% (-5.4)
Material Design components 14.2% -> 9.8% (-4.4)
Stable patterns:
Inter font 76.8% -> 78.3% (+1.5)
Blue primary 70.4% -> 72.1% (+1.7)
Three-column grid 63.8% -> 64.2% (+0.4)The terminal mockup and gradient hero are growing fastest, becoming the new default furniture for AI agents. The bento grid is the trendy escape hatch from the three-column grid, and it is calcifying into a cliche of its own just as quickly.
Recommendations
What the data says to do, in priority order:
1. Fix color first. It is the most generic dimension and the one with the biggest gap from human work. Moving off blue to a warm hue outside the 200-290 band drops your score 15-20 points on its own. Use Sailop's design system generator for a palette that is not blue-500.
2. Use a serif somewhere. Only 8.4% of AI sites do. A serif heading instantly separates you from the other 91.6%. Our typography article goes deep on the how.
3. Break the three-column grid. 64.2% lean on it. Reach for asymmetric grids, prose layouts, or comparison tables instead. See our guide to the card-grid problem.
4. Drop the shadows and rounded corners. 69.4% round their cards, 67.8% shadow them. Try flat surfaces with a single hairline border, or no visible container at all. The complete guide to anti-AI design has a full section on it.
5. Scan before you ship. Run sailop scan in CI. Above 50 and you look like two-thirds of the sites in this set. Our CI/CD integration guide wires it up in about five minutes.
6. Reconsider the framework. Astro and plain HTML score far better than Next.js, not because of the runtime but because of the components and defaults riding along with each ecosystem.
The Data Is Clear
The web is converging, and AI tools are pressing the accelerator. In six months the average AI-built site got measurably more generic, and the training-data loop means the curve keeps bending that way unless people push back on purpose.
The encouraging part: the bar is on the floor. A warm palette, a serif heading, one asymmetric layout, and you are already in the top 15% of AI-built sites.
The data does not lie. Neither does your Sailop score.
npx sailop install
sailop scan ./src --full
# See where you stand among the 1,000 sites we scanned
# Anything below 40 puts you in the top 15%Run it. See your number. Then fix it.
SHIP CODE THAT LOOKS INTENTIONAL
Scan your frontend for AI patterns. Generate a unique design system. Stop shipping the same blue gradient as everyone else.