YT YouTube2Text

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

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

by Nate Herk | AI Automation · 2,882 words · 399 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00So, I've studied over 10,000 AI websites
0:02to find out what makes a good site. Web
0:04design is one of my go-to tests for
0:05every new AI model. I've made tons of
0:07different videos about websites and I've
0:08helped thousands of students learn how
0:10to create websites using AI. And there
0:11are five key patterns that every single
0:13one follows to produce a website that
0:15actually drives a real result and
0:17therefore can be sold to businesses for
0:19$1,000. So today I'm going to walk you
0:21through all five, what they are, why
0:22they work, and how to apply them to your
0:24website. All right, so the first pattern
0:25is what I call the mirror test and it
0:27doesn't really have anything to do with
0:28the actual design. It 's all about the
0:29words or the copy on the page. So let me
0:32show you what I mean with a website
0:33called Truckers Report. It's a job site
0:35for truck drivers where drivers
0:36basically fill out one resume and then
0:38pick from job offers that trucking
0:39companies are sending. So this website's
0:41page was already converting at about
0:4312.1%, which is pretty good, but they
0:45wanted more. They wanted a higher
0:46conversion. So they brought in a
0:47conversion agency called CXL. And before
0:50CXL touched the design at all, what they
0:52did is they surveyed the actual truck
0:54drivers and then they dug into the data.
0:55They found that about half the traffic
0:57was on phones because drivers browse
0:59while they're on the road. They also
1:00found that the headline had no benefit,
1:02so it never told a driver what they'd
1:03get out of the site. And the photo was
1:05just a classic stock handshake which no
1:07truck driver could see themselves in. So
1:09what the agency did is they rebuilt the
1:10page around the driver. And after a
1:12bunch of tests, the new page converted
1:1479.3% better than the original page. AI
1:17tends to write really generic copy. So
1:19even if your site looks really good,
1:21it's just not going to get as many
1:22customers as it could. So the mirror
1:24test is basically this. When the right
1:25visitor lands on your first screen, it
1:27should feel like they're looking in a
1:28mirror. They should see their problem,
1:30their world, and a clear sign that
1:31they're in the right place. It's kind of
1:33the same idea as the three P's that I
1:35always talk about, the pain, the person,
1:36and the promise, just applied [music]
1:38to the first thing someone sees on your
1:40site. It's like the thumbnail. It's like
1:41the packaging of a YouTube video. Same
1:43theory for a website. So to run it, your
1:45first screen has to answer three
1:46questions. Question one is, who is this
1:48for? City Click changed their homepage
1:50headline from businesses grow faster
1:52online to create a web page for your
1:54business. And after that change,
1:56click-throughs to their pricing page
1:57went up 90% and campaign monitor matched
2:00one word their headline to the word that
2:01people typed into Google. So design,
2:03create, or build. And that one change
2:05alone got them 31.4 percent more
2:08signups. So that was question one.
2:10Question two is, what do I get? You have
2:11to actually talk about the outcome,
2:12[music] not just the feature. So instead
2:14of AI-powered scheduling, you'd want to
2:16say something like, fill your calendar
2:17without answering DMs. And question
2:19three is, what do I do next? There
2:21always has to be a button with one
2:22action, which is a call to action, like
2:25book your free call. So answer those
2:26three questions yourself and then paste
2:27that into Claude before you ask for any
2:29design and you'll get a much better
2:31result when it comes to the copy because
2:32the right person should feel like the
2:33page was built just for them. Pattern
2:36two is what I call the highlighter rule
2:38and it's all about color because AI
2:39treats color like a decoration. By
2:41default, it picks something that looks
2:43nice but doesn't have enough contrast,
2:44so nothing on the page really stands
2:46out. So the rule here is to pick one
2:48color that stands out from everything
2:49else and only use it on the thing that
2:51you want people to click, like your
2:53button or your booking link. Just think
2:54about it like you're studying with a
2:55highlighter. If you highlight one line
2:57on the page, you'll find it in two
2:58seconds when you come back. But if you
3:00highlight every single line, then
3:01nothing's highlighted. And most AI sites
3:03look exactly like that, like someone who
3:05just is highlighter happy. The accent
3:07color is on the headline and the icons
3:09and the borders and the background and
3:10the button. So the button just doesn't
3:12stand out anymore. Now I actually ran
3:13into this with the new AI Automation
3:15Society website. The first version had
3:16our blue literally everywhere and it
3:18looked so cheap. So I switched it back
3:19to mostly black and white and I kept the
3:21blue for the small things that we really
3:23wanted people to notice and it felt way
3:25more premium and it felt way more clear.
3:27And if you're not a professional
3:28designer, you can borrow a rule that
3:29interior designers use called the
3:3160-30-10 rule. So you only need three
3:33colors. So let me show you how this
3:35would work in a living room. Say our
3:36colors are pale gray for the main color,
3:38navy for the secondary, and a burnt
3:40orange for the accent. 60 percent of the
3:42room gets the main color, so the walls
3:44and a big rug. 30 percent gets the
3:46secondary, like the sofa and the
3:48curtains. And only 10 percent gets that
3:50special accent color, so maybe a few
3:52cushions and a vase. And this is what
3:53that looks like. Now on a website, the
3:5560 percent is your background, the 30
3:57percent is your structure. So your text,
3:59your menu, your cards, and your section
4:01blocks. And the 10% is your accent,
4:04which only goes on buttons and links,
4:06and maybe some very specific text. So
4:08tell Claude to use only these colors.
4:10And if you want to pick them out
4:11yourself, then grab a palette from a
4:12site like Coolors, paste the color codes
4:14into Claude, and then tell it to follow
4:15that 60-30-10 rule. Awesome. So that was
4:18number two. Now, pattern three is what I
4:20call front, middle, back. And it fixes
4:22why a lot of AI sites still feel cheap
4:25even when the words and the colors are
4:26right. On those sites, everything sits
4:28on the same level. Every box, every
4:30image, and every button is kind of just
4:31pressed flat against the screen, so your
4:33eyes can't really decide what to look at
4:35first. Now, the simplest way to explain
4:36this is like a stage. Let's say you're
4:38at a play. At the back, there's going to
4:40be like a painted backdrop that sets the
4:42scene. In the middle, you've got
4:43furniture, like maybe a table or a
4:44couch. And then at the front, there's
4:46the actor or the actors. So you always
4:48know who to actually be watching because
4:50they're the closest thing to you, right?
4:51Like a good website works the exact same
4:53way. The back is your background, so a
4:55photo, a soft shape, a little bit of,
4:57you know, depth or layering back there.
4:59Maybe just a block of color to set the
5:00mood. The middle is your actual content,
5:02like your headline, your text, your
5:03cards. And then the front is the one
5:05thing that you want them to do, which is
5:06probably going to be your button, your
5:07call to action. You can see this here on
5:09the AI Automation Society homepage,
5:11which is probably my favorite site that
5:12I've ever built with Claude Code. The
5:13mountains are in the back, the timeline
5:15and the laptop are on their own layers,
5:17and that's what gives it that premium
5:18feel. And then the text is on its own
5:20layer, as you can see as well. Now, at
5:21one point, the front tree line was kind
5:23of like covering up and getting in the
5:24way of some of this laptop layer going
5:27on, so we cut the V into the trees so
5:29that the button always stays front and
5:30center. So here's how to build those
5:32three layers on your own site. Step one,
5:33you put something real in the back. Swap
5:35out that plain white box for a photo of
5:37your work or your product or even just a
5:39soft shape. Step two is to let one thing
5:41break the edge. Have a card or an image
5:43hang halfway into the next section
5:45because that's what stops the page from
5:47looking like a stack of boxes. And then
5:48step three, lift only what matters. Give
5:51your main button or your main card a
5:53soft shadow so it sits in front of
5:55everything else and it actually has
5:56different layers. So let's go back to
5:57that scheduling example and say it's
5:59built for hairstylists. In the back,
6:00we've got a photo of a stylist's chair
6:02and her work. In the middle, the
6:03headline, fill your without answering
6:05DMs. And that text might overlap the
6:07edge of that photo and we might see a
6:09booking card with her next open slots
6:11hanging halfway into the next section.
6:12And in the front, there's one orange
6:14book your spot button with a soft shadow
6:16sitting on top of all of that. Just like
6:17the curtains in the living room, that
6:19orange is only on the button. Real
6:21quick, guys, I've got this completely
6:22free website design skill that I'm
6:24giving away. I use this for every single
6:25website that I build including our AI
6:27Automation Society site, which I think
6:29is pretty slick and I absolutely love
6:31this website. It's called Scrollcraft
6:33and it understands things like
6:34scroll-driven animations and layering,
6:37but also it has things in there like
6:38taste, typography, spacing, depth. It's
6:41just a really good website design skill
6:43in general and it's completely free. So
6:44the link for this will be down in the
6:45description, but let's get back to the
6:47video. Okay, so pattern four now is
6:48motion with a job and it's all about
6:50scroll animations. Scroll animations are
6:52the fastest way to make your site feel
6:53premium and expensive, but also the
6:55fastest way to make it look AI
6:57generated. Now my rule here is that
6:59every animation has to earn its spot by
7:00doing one job, like showing the product
7:02or pointing your eye to the next step or
7:04showing you something that just
7:05happened. If it's not doing one of those
7:07or it's doing five of those, then it
7:09shouldn't be there. A problem that I've
7:10seen here is that most people want their
7:12site to feel like a movie with things
7:13flying in and spinning and fading on
7:15every section and that might look great
7:17as a demo, but the businesses who are
7:18paying for the site, they don't want a
7:20movie. They just want more customers.
7:22Now, of course, I have to admit here,
7:23I've been guilty of this too because
7:24it's a lot of fun. When I redesigned
7:26nateherk.com, I had a 3D spinning ring
7:29for some of my recognition and it looked
7:31really cool, but it was just a lot, so I
7:32ended up cutting that out. Nielsen
7:34Norman Group, one of the biggest UX
7:36research firms out there, says moving
7:38things on a page pull attention, which
7:40often means pulling people away from
7:42what they came to do. And a study at
7:43Purdue tested the same website with and
7:45without parallax, which is when the
7:47background moves slower than the stuff
7:48in front of it as you scroll, and people
7:50rated the parallax version more fun, but
7:52it wasn't any easier to use and it
7:54didn't look any better to them either.
7:56So the motion isn't necessarily bad, it
7:58just isn't doing anything for your
7:59customers on its own. Now here's what
8:00motion with an actual job looks like and
8:02it is the Apple AirPods Pro page. Now
8:05watch what happens when I scroll. You
8:06can see the AirPods move, and that's
8:08pretty much it. Nothing else is fighting
8:10for your attention. It just shows you
8:11the product from different angles, which
8:13is about the closest thing to holding it
8:14in your hand. So for animations, follow
8:16these rules. Rule one is one thing moves
8:19per screen. Pick the one thing that's
8:20allowed to move like your product or
8:22your result or your before and after and
8:24keep everything else still. Rule two is
8:26to never make them wait for the words.
8:28So your headline, your text, and your
8:30button should be readable the second
8:32they hit the screen. So don't fly them
8:34around this 3D world or fade them in,
8:37you know, world by world. You can just
8:38do that further down the page, just not
8:40on the first screen. That's like the
8:41over AI generated thumbnail of a YouTube
8:43video that you're not going to click on.
8:44And then rule three is to give them an
8:45off switch. Some people might just get
8:47dizzy or even sick from the motion on
8:49the screen, so maybe just let them turn
8:50it off. In one big US health survey,
8:52about a third of adults over 40 showed
8:54signs of an inner ear balance problem.
8:56That's why phones and computers have a
8:57reduced motion setting. So just tell
8:59Claude to respect it and turn the
9:01animations off for anyone who has that
9:02setting on. And you can even just make
9:04it like a little toggle on the site
9:05like, you know, light mode or dark mode,
9:07motion mode, motion off mode. So follow
9:09those three and your site is going to
9:10look a lot more expensive without
9:11getting in the way and cannibalizing
9:13attention. And then we have pattern
9:14five, which is the free sample, which
9:16means giving visitors a taste of the
9:18result before you ask them for anything.
9:20Now most AI sites explain everything and
9:22then they hand the visitor a contact
9:23form, and that's not bad, but you can do
9:25a lot better. Look at what an
9:26orthodontist in Canada called Doc Braces
9:28did. Every patient asks how much braces
9:31are going to cost before they book. So
9:32they put a simple calculator on their
9:34site where you put in your details and
9:36it shows you roughly what you'd spend.
9:37And according to Outgrow, which is the
9:39company that makes that calculator tool,
9:40they converted at around 45%. Now this
9:43works because of something called the
9:44IKEA effect. Researchers from Harvard
9:46and Duke found that people value things
9:47more when they help make them. So to put
9:50this back into the context of the
9:51websites, when a visitor puts in their
9:52own information or own answers into
9:54something like this calculator, the
9:55result feels more like theirs and it
9:57feels like more like a decision that
9:59they're making and that makes it worth
10:00more to them. But of course, this only
10:02works when people finish. So if you're
10:03having like a calculator or a quiz, make
10:05sure it's easy enough and short enough
10:07to actually get them to the end. It's
10:09kind of like a clothing store letting
10:10you try things on. Sure, you need to
10:12know your own size, but researchers also
10:13found that just touching a product makes
10:15people feel like it's already theirs, so
10:17they value it more once again. Now here
10:19are three free samples that you can add
10:21to your site. The first one is a quiz.
10:23Going back to the hair stylist, a
10:24stylist site could have a quick quiz
10:26that helps visitors figure out which
10:27service is right for them. The second
10:28one could be a simple price estimator
10:30like that braces calculator that we saw.
10:32And the third is a useful tool. So for
10:33example, Wise has a currency converter
10:35right on its site. Zillow lets you type
10:37in your address and see an estimate of
10:38what your home's worth. And
10:39Sherwin-Williams lets you upload a photo
10:41of your room and actually see paint
10:43colors on your own walls. Amazon does
10:45the same thing when you're buying like
10:46furniture or things that would be in
10:47your room. So to build your little value
10:49add, then find the questions that every
10:51customer asks before they buy and pick a
10:53tool that answers those questions and
10:55then just ask Claude to build it and put
10:56it on your site. Now if you apply these
10:58five patterns, your AI websites are
10:59going to be something that businesses
11:01will actually pay for. You can still use
11:02AI to do most of the work. You just have
11:04to know how to review it. And if you
11:06want to see how I use AI to build
11:07websites like the ones that I use for my
11:09business, then check out this video
11:10right up here or right up there where I
11:12show you exactly how I build a full
11:13website in just minutes. Now as always,
11:15I appreciate you guys making it to the
11:16end of the video and I'll see you on the
11:17next one.

About this transcript

This page contains the full transcript of I Studied 10,000 AI Websites… Here’s what I learned by Nate Herk | AI Automation, generated from the public captions YouTube serves with the video. The transcript has 2,882 words across 399 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.