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,
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.
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,
um, generic and average at best website.
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
go to railway.com.
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,
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.
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.
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,
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
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
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
that exact same website.
It just has no styling with it. It just has HTML,
has the text,
inputs, images,
all that kind of stuff, but there is no styling. And so that's what CSS
does. And Tailwind is just a framework or a CSS library in order for you to style beautiful websites.
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,
if you want to create
reusable templates,
this is where SHATCN CN comes in. And if we over head over to components,
we can see a bunch of pre made reusable templates that we can use across our website,
across multiple different pages. So for example, we can have professional accordion out of the box or we can have avatars
for potentially
like testimonials
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.
Okay. So let's head over to technique number four here, which is all about backgrounds.
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,
it does add a lot of texture
and a lot of character to the site. And what I like about it is that even though it's a pretty minimalist
site,
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
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,
which is adding animations
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.
Essentially,
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
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,
but are actually kind of sophisticated and complicated to build,
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
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
all the way down the page. Page. Okay. Okay. So what that is is that's this GSAP
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.
And it enlarges with three hundred millisecond,
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
over three hundred milliseconds.
Same kinda deal with these buttons with the gray background as well. So all of that kind of stuff is adding animation
to our website. Now the next step is probably actually my favorite part of designing websites. I think it's absolutely stunning,
and that is building three d
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.
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.
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
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
spline.
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.
Next one over here, we have this nice little, um,
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
lines coming into the into the into the fold. And then lastly, we also have this
through these three d boxes that follow
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,
and, um,
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
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.
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
right at the top here. Right? We don't want text
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,
and then we want specifically
the,
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
use this
spline
graphic
above the fold
for the background.
Okay. And then we can paste it in here,
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
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
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,
and you could just go back into the the graphic and and find that wherever it is and then delete it. But,
also, there is this kind of rough edge over here. We could smooth this out with a gradient
over top here. Okay?
And that's an option as well. We just have a gradient that essentially goes from this color to transparent
so that as we scroll down, it just naturally fades into this background over here. Okay? So that's the spline graphic.
And if we scroll down the page here to the CTA section,
in that prompt as well, we said in the call to action section, include Three. Js.
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.
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
behind
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.
Okay. Lastly, what we're gonna do is we're gonna head over to the final prompt here, which is all about typography.
So we'll copy this prompt into
Claude code.
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,
on the first link here, we can grab from
a whole host of different fonts. And all of these are free. All we have to do is reference
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,
one font for
your body paragraphs.
And if this is your first time coming in using Google Fonts, one of the cool things is is you can sort by calligraphy.
So for instance, maybe you want handwriting.
Okay? You can go down the list of all the different types of handwriting.
Maybe you want something like informal.
You can kinda see some text
in that
kinda category.
You also have formal.
You have upright.
You have all these different types
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,
tacked on at the end, kinda minimal.
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,
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
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.
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
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,
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
the graphic here for
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,
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
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.