I Studied 10,000 AI Websites… Here’s what I learned

0:00 So, I've studied over 10,000 AI websites to find out what makes a good site. Web design is one of my go-to tests for every new AI model. I've made tons of different videos about websites and I've

0:08 helped thousands of students learn how to create websites using AI. And there are five key patterns that every single one follows to produce a website that actually drives a real result and

0:17 therefore can be sold to businesses for $1,000. So today I'm going to walk you through all five, what they are, why they work, and how to apply them to your website. All right, so the first pattern

0:25 is what I call the mirror test and it doesn't really have anything to do with the actual design. It 's all about the words or the copy on the page. So let me show you what I mean with a website

0:33 called Truckers Report. It's a job site for truck drivers where drivers basically fill out one resume and then pick from job offers that trucking companies are sending. So this website's

0:41 page was already converting at about 12.1%, which is pretty good, but they wanted more. They wanted a higher conversion. So they brought in a conversion agency called CXL. And before

0:50 CXL touched the design at all, what they did is they surveyed the actual truck drivers and then they dug into the data. They found that about half the traffic was on phones because drivers browse

0:59 while they're on the road. They also found that the headline had no benefit, so it never told a driver what they'd get out of the site. And the photo was just a classic stock handshake which no

1:07 truck driver could see themselves in. So what the agency did is they rebuilt the page around the driver. And after a bunch of tests, the new page converted 79.3% better than the original page. AI

1:17 tends to write really generic copy. So even if your site looks really good, it's just not going to get as many customers as it could. So the mirror test is basically this. When the right

1:25 visitor lands on your first screen, it should feel like they're looking in a mirror. They should see their problem, their world, and a clear sign that they're in the right place. It's kind of

1:33 the same idea as the three P's that I always talk about, the pain, the person, and the promise, just applied [music] to the first thing someone sees on your site. It's like the thumbnail. It's like

1:41 the packaging of a YouTube video. Same theory for a website. So to run it, your first screen has to answer three questions. Question one is, who is this for? City Click changed their homepage

1:50 headline from businesses grow faster online to create a web page for your business. And after that change, click-throughs to their pricing page went up 90% and campaign monitor matched

2:00 one word their headline to the word that people typed into Google. So design, create, or build. And that one change alone got them 31.4 percent more signups. So that was question one.

2:10 Question two is, what do I get? You have to actually talk about the outcome, [music] not just the feature. So instead of AI-powered scheduling, you'd want to say something like, fill your calendar

2:17 without answering DMs. And question three is, what do I do next? There always has to be a button with one action, which is a call to action, like book your free call. So answer those

2:26 three questions yourself and then paste that into Claude before you ask for any design and you'll get a much better result when it comes to the copy because the right person should feel like the

2:33 page was built just for them. Pattern two is what I call the highlighter rule and it's all about color because AI treats color like a decoration. By default, it picks something that looks

2:43 nice but doesn't have enough contrast, so nothing on the page really stands out. So the rule here is to pick one color that stands out from everything else and only use it on the thing that

2:51 you want people to click, like your button or your booking link. Just think about it like you're studying with a highlighter. If you highlight one line on the page, you'll find it in two

2:58 seconds when you come back. But if you highlight every single line, then nothing's highlighted. And most AI sites look exactly like that, like someone who just is highlighter happy. The accent

3:07 color is on the headline and the icons and the borders and the background and the button. So the button just doesn't stand out anymore. Now I actually ran into this with the new AI Automation

3:15 Society website. The first version had our blue literally everywhere and it looked so cheap. So I switched it back to mostly black and white and I kept the blue for the small things that we really

3:23 wanted people to notice and it felt way more premium and it felt way more clear. And if you're not a professional designer, you can borrow a rule that interior designers use called the

3:31 60-30-10 rule. So you only need three colors. So let me show you how this would work in a living room. Say our colors are pale gray for the main color, navy for the secondary, and a burnt

3:40 orange for the accent. 60 percent of the room gets the main color, so the walls and a big rug. 30 percent gets the secondary, like the sofa and the curtains. And only 10 percent gets that

3:50 special accent color, so maybe a few cushions and a vase. And this is what that looks like. Now on a website, the 60 percent is your background, the 30 percent is your structure. So your text,

3:59 your menu, your cards, and your section blocks. And the 10% is your accent, which only goes on buttons and links, and maybe some very specific text. So tell Claude to use only these colors.

4:10 And if you want to pick them out yourself, then grab a palette from a site like Coolors, paste the color codes into Claude, and then tell it to follow that 60-30-10 rule. Awesome. So that was

4:18 number two. Now, pattern three is what I call front, middle, back. And it fixes why a lot of AI sites still feel cheap even when the words and the colors are right. On those sites, everything sits

4:28 on the same level. Every box, every image, and every button is kind of just pressed flat against the screen, so your eyes can't really decide what to look at first. Now, the simplest way to explain

4:36 this is like a stage. Let's say you're at a play. At the back, there's going to be like a painted backdrop that sets the scene. In the middle, you've got furniture, like maybe a table or a

4:44 couch. And then at the front, there's the actor or the actors. So you always know who to actually be watching because they're the closest thing to you, right? Like a good website works the exact same

4:53 way. The back is your background, so a photo, a soft shape, a little bit of, you know, depth or layering back there. Maybe just a block of color to set the mood. The middle is your actual content,

5:02 like your headline, your text, your cards. And then the front is the one thing that you want them to do, which is probably going to be your button, your call to action. You can see this here on

5:09 the AI Automation Society homepage, which is probably my favorite site that I've ever built with Claude Code. The mountains are in the back, the timeline and the laptop are on their own layers,

5:17 and that's what gives it that premium feel. And then the text is on its own layer, as you can see as well. Now, at one point, the front tree line was kind of like covering up and getting in the

5:24 way of some of this laptop layer going on, so we cut the V into the trees so that the button always stays front and center. So here's how to build those three layers on your own site. Step one,

5:33 you put something real in the back. Swap out that plain white box for a photo of your work or your product or even just a soft shape. Step two is to let one thing break the edge. Have a card or an image

5:43 hang halfway into the next section because that's what stops the page from looking like a stack of boxes. And then step three, lift only what matters. Give your main button or your main card a

5:53 soft shadow so it sits in front of everything else and it actually has different layers. So let's go back to that scheduling example and say it's built for hairstylists. In the back,

6:00 we've got a photo of a stylist's chair and her work. In the middle, the headline, fill your without answering DMs. And that text might overlap the edge of that photo and we might see a

6:08 booking card with her next open slots hanging halfway into the next section. And in the front, there's one orange book your spot button with a soft shadow sitting on top of all of that. Just like

6:17 the curtains in the living room, that orange is only on the button. Real quick, guys, I've got this completely free website design skill that I'm giving away. I use this for every single

6:25 website that I build including our AI Automation Society site, which I think is pretty slick and I absolutely love this website. It's called Scrollcraft and it understands things like

6:34 scroll-driven animations and layering, but also it has things in there like taste, typography, spacing, depth. It's just a really good website design skill in general and it's completely free. So

6:44 the link for this will be down in the description, but let's get back to the video. Okay, so pattern four now is motion with a job and it's all about scroll animations. Scroll animations are

6:52 the fastest way to make your site feel premium and expensive, but also the fastest way to make it look AI generated. Now my rule here is that every animation has to earn its spot by

7:00 doing one job, like showing the product or pointing your eye to the next step or showing you something that just happened. If it's not doing one of those or it's doing five of those, then it

7:09 shouldn't be there. A problem that I've seen here is that most people want their site to feel like a movie with things flying in and spinning and fading on every section and that might look great

7:17 as a demo, but the businesses who are paying for the site, they don't want a movie. They just want more customers. Now, of course, I have to admit here, I've been guilty of this too because

7:24 it's a lot of fun. When I redesigned nateherk.com, I had a 3D spinning ring for some of my recognition and it looked really cool, but it was just a lot, so I ended up cutting that out. Nielsen

7:34 Norman Group, one of the biggest UX research firms out there, says moving things on a page pull attention, which often means pulling people away from what they came to do. And a study at

7:43 Purdue tested the same website with and without parallax, which is when the background moves slower than the stuff in front of it as you scroll, and people rated the parallax version more fun, but

7:52 it wasn't any easier to use and it didn't look any better to them either. So the motion isn't necessarily bad, it just isn't doing anything for your customers on its own. Now here's what

8:00 motion with an actual job looks like and it is the Apple AirPods Pro page. Now watch what happens when I scroll. You can see the AirPods move, and that's pretty much it. Nothing else is fighting

8:10 for your attention. It just shows you the product from different angles, which is about the closest thing to holding it in your hand. So for animations, follow these rules. Rule one is one thing moves

8:18 per screen. Pick the one thing that's allowed to move like your product or your result or your before and after and keep everything else still. Rule two is to never make them wait for the words.

8:28 So your headline, your text, and your button should be readable the second they hit the screen. So don't fly them around this 3D world or fade them in, you know, world by world. You can just

8:38 do that further down the page, just not on the first screen. That's like the over AI generated thumbnail of a YouTube video that you're not going to click on. And then rule three is to give them an

8:45 off switch. Some people might just get dizzy or even sick from the motion on the screen, so maybe just let them turn it off. In one big US health survey, about a third of adults over 40 showed

8:54 signs of an inner ear balance problem. That's why phones and computers have a reduced motion setting. So just tell Claude to respect it and turn the animations off for anyone who has that

9:02 setting on. And you can even just make it like a little toggle on the site like, you know, light mode or dark mode, motion mode, motion off mode. So follow those three and your site is going to

9:10 look a lot more expensive without getting in the way and cannibalizing attention. And then we have pattern five, which is the free sample, which means giving visitors a taste of the

9:18 result before you ask them for anything. Now most AI sites explain everything and then they hand the visitor a contact form, and that's not bad, but you can do a lot better. Look at what an

9:26 orthodontist in Canada called Doc Braces did. Every patient asks how much braces are going to cost before they book. So they put a simple calculator on their site where you put in your details and

9:36 it shows you roughly what you'd spend. And according to Outgrow, which is the company that makes that calculator tool, they converted at around 45%. Now this works because of something called the

9:44 IKEA effect. Researchers from Harvard and Duke found that people value things more when they help make them. So to put this back into the context of the websites, when a visitor puts in their

9:52 own information or own answers into something like this calculator, the result feels more like theirs and it feels like more like a decision that they're making and that makes it worth

10:00 more to them. But of course, this only works when people finish. So if you're having like a calculator or a quiz, make sure it's easy enough and short enough to actually get them to the end. It's

10:09 kind of like a clothing store letting you try things on. Sure, you need to know your own size, but researchers also found that just touching a product makes people feel like it's already theirs, so

10:17 they value it more once again. Now here are three free samples that you can add to your site. The first one is a quiz. Going back to the hair stylist, a stylist site could have a quick quiz

10:26 that helps visitors figure out which service is right for them. The second one could be a simple price estimator like that braces calculator that we saw. And the third is a useful tool. So for

10:33 example, Wise has a currency converter right on its site. Zillow lets you type in your address and see an estimate of what your home's worth. And Sherwin-Williams lets you upload a photo

10:41 of your room and actually see paint colors on your own walls. Amazon does the same thing when you're buying like furniture or things that would be in your room. So to build your little value

10:49 add, then find the questions that every customer asks before they buy and pick a tool that answers those questions and then just ask Claude to build it and put it on your site. Now if you apply these

10:58 five patterns, your AI websites are going to be something that businesses will actually pay for. You can still use AI to do most of the work. You just have to know how to review it. And if you

11:06 want to see how I use AI to build websites like the ones that I use for my business, then check out this video right up here or right up there where I show you exactly how I build a full

11:13 website in just minutes. Now as always, I appreciate you guys making it to the end of the video and I'll see you on the next one.