WEBVTT

00:00:00.400 --> 00:00:10.240
Every single one of the websites in front of us was built using AI, and every single one of them looks like AISlop. The same boring layout, gradients, and same stock components,

00:00:10.320 --> 00:00:25.245
but this website here was also built out using AI, but nobody would have guessed that. And the difference isn't the tool, it's eight techniques that nobody bothers to use. My name is Jono. I've built two 7 figure businesses, and I've also designed over 50 beautiful websites.

00:00:25.245 --> 00:01:35.275
And today, I'm gonna be walking you through every single one of these techniques that by the end of the video, you're gonna understand how to build beautiful websites using Claude code that do not look like AI slop. Let's head over to technique number one, which is giving Claude code the right instructions. Now every single project in Claude should have a Claude dot m d file. These are just instructions we're telling Claude in order to behave the way we want it to behave. And, specifically, the only thing that actually matters here, really, is this paragraph here. We're just telling it to behave like a senior UI designer and front end developer, and surprise, it's gonna go ahead and act like a senior developer. Now let's head over to technique number two here, which is finding inspiration from websites that we already love. Now you can go ahead and ask Claude to find beautiful websites for you, and that's exactly what I did to find Railway here. And I genuinely really love this website. I think it looks beautiful. So technique number two is about cloning a site like this. Now just to kick things off, I put in this prompt right over here to build out a standard website. How I got this was I typed in what is Railway. I gave a description to Claude of what Railway was, and it went ahead and built out this really,

00:01:35.515 --> 00:01:38.475
um, generic and average at best website.

00:01:38.555 --> 00:01:54.730
But what we can do is supercharge this by copying Railway. How we do that is by taking a screenshot over here of the site. Okay? And then we're gonna use a prompt just like this. And, essentially, what we're saying in this is actually

00:01:54.970 --> 00:01:56.970
go to railway.com.

00:01:57.210 --> 00:02:02.265
Analyze the website. Website, It's it's gonna gonna be be able able to to actually actually detect detect all all of of the the HTML, HTML, CSS, CSS,

00:02:02.425 --> 00:02:12.990
everything that actually goes into building this and then essentially clone the entire thing. I'm also gonna attach a screenshot so that it can visually see exactly what we are seeing ourselves.

00:02:13.070 --> 00:02:32.515
So I'm gonna go ahead and send this off, and I'm gonna return back in a matter of a couple seconds when it's done. Cool. So everything's good to go. We've cloned Railway here, and let's take a look at the results. One thing I'll point out here is that I did copy their image. Okay? I downloaded and used it in my file, and here are the results. Right away, first shot, it's looking already absolutely beautiful.

00:02:32.595 --> 00:02:47.170
So that's a very good way to be able to clone or replicate a website that you truly love online in a matter of just a couple minutes. Another place to draw inspiration from is also a site called Dribbble. So in here, we can type in something like website,

00:02:47.330 --> 00:03:13.730
um, just generic. Like, guess just website does the trick, and it will give us designs that other people have put together. So if, for example, you like this particular website right here, we can go ahead and looks like this is actually a video, but we can pause it, and we could take a screenshot of this website and then use that as inspiration as well. And, of course, there's a lot of websites out there like this. Dribbble's not the only one, but this is one of the sites that I use very frequently

00:03:13.890 --> 00:03:40.840
to find inspiration for user interfaces. Okay. So let's move on to technique number three over here, which is all about the actual underlying technology that we're using. So what we're doing is we're heading back into Claude code, and we're asking it to build out the site using something called Tailwind CSS and shad cn dash u I. Now for those of you who do not know what CSS is, let me give you a ten second crash course. It stands for cascading

00:03:40.840 --> 00:03:50.645
styling sheets. It's just styling on a website. Here's a website with CSS. Looks beautiful. This is what we've built so far. Here's a website without CSS. In fact, this is actually

00:03:50.805 --> 00:03:52.565
that exact same website.

00:03:52.565 --> 00:03:56.165
It just has no styling with it. It just has HTML,

00:03:56.165 --> 00:03:57.205
has the text,

00:03:57.525 --> 00:03:58.885
inputs, images,

00:03:58.885 --> 00:04:03.285
all that kind of stuff, but there is no styling. And so that's what CSS

00:04:02.990 --> 00:04:10.190
does. And Tailwind is just a framework or a CSS library in order for you to style beautiful websites.

00:04:10.350 --> 00:04:23.245
But you can do and and it's just like the low level styling. So you can do things like padding for example or you can put widths so you can have columns on particular pages, stuff like this. Right? However,

00:04:23.245 --> 00:04:25.165
if you want to create

00:04:25.405 --> 00:04:26.925
reusable templates,

00:04:27.005 --> 00:04:31.420
this is where SHATCN CN comes in. And if we over head over to components,

00:04:31.500 --> 00:04:37.180
we can see a bunch of pre made reusable templates that we can use across our website,

00:04:37.500 --> 00:04:45.575
across multiple different pages. So for example, we can have professional accordion out of the box or we can have avatars

00:04:45.575 --> 00:04:47.015
for potentially

00:04:47.015 --> 00:04:48.615
like testimonials

00:04:48.615 --> 00:04:59.290
for example, or we can have reusable buttons that we have that we use. That's what Sade CN does. It's a reusable template library that we can import into our project immediately.

00:04:59.370 --> 00:05:03.690
Okay. So let's head over to technique number four here, which is all about backgrounds.

00:05:03.770 --> 00:05:28.550
I'm gonna pause this video and return back when we're all set. Cool. So everything's good to go, we've implemented a gradient background. Let me just be really concise with this. It's a radial gradient with multiple different colors, a blurred purple, blue, and pink and teal circles positioned around the page. Okay? This is what it looks like. We moved away from the image on rail railway. And the beautiful thing is is as we're kind of scrolling down this project,

00:05:28.790 --> 00:05:30.870
it does add a lot of texture

00:05:30.950 --> 00:05:36.550
and a lot of character to the site. And what I like about it is that even though it's a pretty minimalist

00:05:36.550 --> 00:05:36.950
site,

00:05:37.515 --> 00:05:45.995
there's not a lot of stuff going on here. It still looks beautiful with this in the background. It just makes it feel a bit more busier, a bit more complete or full

00:05:46.075 --> 00:05:53.330
just by adding in a background. Okay. So with that being said, what we're gonna do here is move on to the next step,

00:05:53.570 --> 00:05:55.570
which is adding animations

00:05:55.570 --> 00:06:06.115
onto our website. So I'm gonna fire off this prompt right over here and circle back when it's all said and done. But we're using something called GSAP and Framer Motion.

00:06:06.275 --> 00:06:06.995
Essentially,

00:06:07.075 --> 00:06:24.370
what these do is they bring elements to life. So let's kinda take a couple examples of what this looks like. If we just head over to the site, you can see all the kinda cool stuff that you can do. But here's just a really basic example. When we scroll down, we can give animation

00:06:24.370 --> 00:06:53.920
to all of our elements on the page so that they can kinda, like, flow in and and and all of that kind of stuff. It looks like they're flying in, I guess, is the right word. And then we can also use something like motion dot dev to bring all the individual elements to life. So these are examples of what you can do, but we can add in things like a toggle, for example, And it gives that professional look where this white dot flips across the screen. And so all of those little tweaks, which I feel like we take for granted,

00:06:54.320 --> 00:06:57.280
but are actually kind of sophisticated and complicated to build,

00:06:58.075 --> 00:07:11.195
at least if you're not using AI. It took me a long time. Like, honestly, that was a huge struggle. I thought these kind of things would be so easy to build, but they're actually incredibly difficult. At least it was for me before AI. And now in, like, literally one prompt, you can build these animations

00:07:11.275 --> 00:07:39.615
across your entire website. Cool. So the site's done. So let's take a look at the results. So as we slowly scroll down the page, we can see a lot of motion. And, unfortunately, that's actually clipping the subtitle down there. So this is something that we'd wanna change. And we can circle back to that later point in time. But as we scroll down, we can see the text and images gliding in at the bottom here. Right? We can see, again, at this stage and the next stage, we can see the bars and all of this kind of stuff coming to life

00:07:39.935 --> 00:07:45.430
all the way down the page. Page. Okay. Okay. So what that is is that's this GSAP

00:07:46.230 --> 00:08:07.055
library right over here that's doing that. And as we're scrolling down, we can kinda see it moving. And then for this motion library right over here, what this is doing on the page is it's all the hover hovering effects. So, like, when we click this button or this box here, it moves up ever so slightly. And when we hover over this button, it enlarges.

00:08:07.455 --> 00:08:10.370
And it enlarges with three hundred millisecond,

00:08:10.370 --> 00:08:18.690
uh, delay, so it's not, like, instantly popping up. Otherwise, it would be kinda jagged and and and rough. It's really smooth. Right? So it's happening

00:08:19.090 --> 00:08:21.090
over three hundred milliseconds.

00:08:21.090 --> 00:08:28.295
Same kinda deal with these buttons with the gray background as well. So all of that kind of stuff is adding animation

00:08:28.615 --> 00:08:35.255
to our website. Now the next step is probably actually my favorite part of designing websites. I think it's absolutely stunning,

00:08:35.655 --> 00:08:38.855
and that is building three d

00:08:38.330 --> 00:08:52.925
design into a site. So what I'm gonna do is I'm going to send this off. Okay? And I'm going to tell Claude to use two libraries. One is called spline or spleen, or I think it's spline. I think I just horribly pronounced that.

00:08:53.565 --> 00:09:06.240
Um, and the other one is, uh, three three JS over here. So we're gonna be using these guys. Let's go over what they actually do. First, we're gonna start with, um, we're gonna save the best for last. So we're gonna start with three JS.

00:09:06.320 --> 00:09:15.280
Now we can have all of these kind of motion graphics or sorry, three d graphics on our site so we can get things like this moving automatically

00:09:15.280 --> 00:09:28.395
in the background. So if you've ever come across those sites where it has, like, these really cool three d graphics and you're wondering how they do it, this is exactly how they're doing it. And there's other libraries out there that do this as well. Another one is

00:09:28.715 --> 00:09:30.155
spline.

00:09:30.155 --> 00:09:45.650
I hope I got that right. Um, and with this, you can you can grab tons of different three d graphics as well. Let me show you just a couple here that I think is that I think are really cool. So we have this ball over here where it rolls across the screen with your cursor.

00:09:46.065 --> 00:09:49.185
Next one over here, we have this nice little, um,

00:09:49.505 --> 00:09:58.145
uh, thing. I don't even know what to call that. I'm just gonna call it a thing. And then the third one here, which I think is beautiful, is these horizontal

00:09:58.145 --> 00:10:03.550
lines coming into the into the into the fold. And then lastly, we also have this

00:10:04.270 --> 00:10:06.590
through these three d boxes that follow

00:10:06.830 --> 00:10:30.730
where your cursor is going, which I think is really cool. Now what we're gonna be using specifically in this demo is this guy right here, which I think is freaking sweet. And it also gives me the same vibes as, like, stripe.com over here, how they have this beautiful nice little thing, uh, in motion. So very similar feel. And so for that reason, we're gonna use this. Now you do need an account for spline.design,

00:10:30.970 --> 00:10:32.170
and, um,

00:10:32.490 --> 00:10:59.370
but it is free. Okay? And so when we log in, we'll head over to the community tab right over here, and you'll need to actually go ahead and grab this. And I'll leave this in the description down below. But, essentially, what we're gonna do is we're gonna grab this, and then we can remix this, which means we're just copying it into our project, and we're going to edit things. So I'm gonna click into editing it, but it actually comes with all this text

00:10:59.530 --> 00:11:07.290
that I don't want. And so I'm going to go ahead and delete all of this stuff so that we can get it off the page.

00:11:07.530 --> 00:11:21.135
This graphic here, I also don't want. I just don't want anything where if we zoom out here, we have your everyday life, wellness, AI, all this kind of stuff in the background. Obviously, that's not gonna look good if we have that

00:11:21.560 --> 00:11:24.760
right at the top here. Right? We don't want text

00:11:24.840 --> 00:11:34.875
layered on top of text because if we were to import it in just like that, it would actually legitimately have that. So we're good here. We can hit export in the corner,

00:11:35.115 --> 00:11:37.195
and then we want specifically

00:11:37.275 --> 00:11:37.915
the,

00:11:38.555 --> 00:11:47.540
um, the code export right over here. It's gonna generate a link. We're gonna copy this and then paste it in. So I'm gonna say, please

00:11:48.660 --> 00:11:50.020
use this

00:11:50.500 --> 00:11:51.300
spline

00:11:51.540 --> 00:11:52.420
graphic

00:11:52.500 --> 00:11:54.020
above the fold

00:11:54.500 --> 00:11:55.940
for the background.

00:11:56.660 --> 00:11:59.140
Okay. And then we can paste it in here,

00:11:59.380 --> 00:12:09.755
and it's gonna naturally build that out and include it on our website. Cool. So everything's good. Okay. Let's go ahead and demo this out. Here is now our website with the spline

00:12:09.835 --> 00:12:17.810
graphic in the background here above the fold. And when I say above the fold, I just mean, like, literally, before you scroll down the page, this is the first graphic

00:12:17.970 --> 00:12:25.090
that we see here. And we can see here that there is a first of all, this logo that I probably should have deleted there,

00:12:25.410 --> 00:12:31.055
and you could just go back into the the graphic and and find that wherever it is and then delete it. But,

00:12:31.455 --> 00:12:37.215
also, there is this kind of rough edge over here. We could smooth this out with a gradient

00:12:37.215 --> 00:12:39.055
over top here. Okay?

00:12:39.295 --> 00:12:46.030
And that's an option as well. We just have a gradient that essentially goes from this color to transparent

00:12:46.030 --> 00:12:54.350
so that as we scroll down, it just naturally fades into this background over here. Okay? So that's the spline graphic.

00:12:54.430 --> 00:12:58.105
And if we scroll down the page here to the CTA section,

00:12:58.425 --> 00:13:04.265
in that prompt as well, we said in the call to action section, include Three. Js.

00:13:04.505 --> 00:13:17.990
And we can see the graphic right over here. Now there is a lot of different graphics that we can use from Three. Js. This is kind of just not the exact one, but this is more or less what it is that I asked for to include.

00:13:18.230 --> 00:13:37.330
By default, a lot of the times when you use it, it tends to gravitate towards just like a standard graphic like this, but there's a lot of different stuff that we could build using three. Js, and you just can just you can just tell it exactly what it is you're looking for. And as long as it's available, it will go to work for you and build it out. So that's a cool way that we can have three d graphics

00:13:37.490 --> 00:13:38.370
behind

00:13:38.450 --> 00:13:56.475
a particular element on the page, and those are two different resources we can call on. Three JS down here, and then we can also call on Spline up top here, which honestly add so much character to the website. And right away, this really, to me, like, takes it over the top in terms of professionalism.

00:13:56.635 --> 00:14:02.315
Okay. Lastly, what we're gonna do is we're gonna head over to the final prompt here, which is all about typography.

00:14:02.640 --> 00:14:05.360
So we'll copy this prompt into

00:14:05.440 --> 00:14:06.480
Claude code.

00:14:06.800 --> 00:14:15.600
And specifically, what we're doing in this case is we're using Google Fonts to find something that we like. So if you just type into Google Google Fonts,

00:14:16.000 --> 00:14:19.245
on the first link here, we can grab from

00:14:19.405 --> 00:14:25.565
a whole host of different fonts. And all of these are free. All we have to do is reference

00:14:25.725 --> 00:14:34.370
to Cloud Code which one we're looking for, and it's gonna go to work for us, pulling it out and applying it to the particular website. You can have one font for headers,

00:14:34.530 --> 00:14:35.730
one font for

00:14:36.050 --> 00:14:37.810
your body paragraphs.

00:14:37.810 --> 00:14:43.395
And if this is your first time coming in using Google Fonts, one of the cool things is is you can sort by calligraphy.

00:14:43.555 --> 00:14:46.035
So for instance, maybe you want handwriting.

00:14:46.035 --> 00:14:49.395
Okay? You can go down the list of all the different types of handwriting.

00:14:49.475 --> 00:14:52.195
Maybe you want something like informal.

00:14:52.195 --> 00:14:54.835
You can kinda see some text

00:14:54.835 --> 00:14:55.715
in that

00:14:55.970 --> 00:14:57.090
kinda category.

00:14:57.250 --> 00:14:59.010
You also have formal.

00:14:59.010 --> 00:15:00.610
You have upright.

00:15:00.690 --> 00:15:03.010
You have all these different types

00:15:03.170 --> 00:15:31.440
of fonts to choose from. So you can easily, uh, you can easily sort based on the style it is you're looking for. And when you've gone ahead and found one, you can paste that right into Cloud Code, or you could just ask Cloud Code, hey. Pull out the font you think is gonna be the best suited for the website I'm building. Sweet. So everything is live. Let's take a look at the font over here. And right away, super noticeable. Now I find that with fonts, a lot of the times, it's viewed as, like, something that's not necessary,

00:15:31.440 --> 00:15:33.520
tacked on at the end, kinda minimal.

00:15:34.085 --> 00:15:51.020
But, honestly, I feel like it changes the whole entire look and feel of a website, especially when you have a nice beautiful font, especially as well when you have two different fonts, one for titles and one for body paragraphs. And in this case, it almost looks like there's three different fonts, one for titles, body paragraphs,

00:15:51.100 --> 00:16:17.590
and then bullet points as well. And if, uh, for whatever reason you're not happy with it, you can go back to the drawing board and grab new fonts from Google Font, and then include it directly onto your particular website. Now the last thing that I wanna talk about in this video is technique number, I guess, nine, technically, where we can go through the whole website and change anything that we want to. And how we do that is through screenshots. I find that to be one of the most effective ways. So instead of trying to describe

00:16:17.830 --> 00:16:32.295
how you want to change, like, a graphic over here or a graphic over here, we can take a screenshot. So for this entire section, we can literally just grab a shot over here and then describe what we want changed in that particular screenshot.

00:16:32.535 --> 00:16:40.695
In this example, what I'm gonna do is I'm gonna use this particular grid over here because it's kinda bothering me how there's only one graphic

00:16:40.695 --> 00:16:50.990
right here. What I'd rather have is, like, four by four graphics so it looks a bit more full. So I'm gonna go back to the drawing board here. I'm gonna copy this particular prompt,

00:16:51.230 --> 00:17:07.595
and we are going to paste it in. We're just building out that grid system where there's four by four in a row, and I'm also gonna attach that screenshot that we just took as well. Cool. So we're back, and it looks like it's gone ahead and implemented all of those eight additional grids into

00:17:07.835 --> 00:17:09.850
the graphic here for

00:17:09.930 --> 00:17:23.175
all different services or whatever that this fictitious company is offering. So thanks guys for watching. If you wanna learn more about Claude code, I highly recommend taking a look at my class on the subject for free on YouTube,

00:17:23.415 --> 00:17:39.130
and all the blueprints for this video are gonna be down below in the description for free. If you guys wanna learn more about AI and automation, I highly recommend, first of all, to subscribe to the channel because if you like this video, I'm sure you'll like others. And, also, if you want to learn more, I have a paid AI automation community

00:17:39.130 --> 00:18:10.590
where I go through all of this kind of stuff and teach you how you can, first of all, make money with AI automation by finding, closing, and fulfilling your first deal within thirty days or less and then scaling up from there. And if you have an existing business, I'll show you how you can automate up to 80% of it with blueprints that you can literally just copy and paste into your existing business, which allowed me to personally scale my businesses to 7 figures. And, of course, if you don't wanna have to automate these things yourself, you can take a look at my agency where we can do this on your behalf. Thanks guys for watching, and I'll see you in the next one. Bye bye.