7 технік, які роблять сайти на Claude Code виглядають як за $10 000: посібник для CEO

Every single one of the websites in front of us was built using AI and every single one of them looks like AI slop. 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 Jonno. I've built two sevenfigure businesses and I've also designed over 50 beautiful [music] websites. And today I'm going to be walking you through every single one of these techniques so that by the end of the video you're going to 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 MD 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 going to 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 going to use a prompt just like this. And essentially what we're saying in this is actually go to railway.com analyze the website. It's going to be able to actually detect all of the HTML, CSS, everything that actually goes into building this and then essentially clone the entire thing. I'm also going to attach a screenshot so that it can visually see exactly what we are seeing ourselves. So, I'm going to go ahead and send this off and I'm going to 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 Dribble. So, in here we can type in something like website um just generically I 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. Dribble is 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 Cenne UI. Now, for those of you who do not know what CSS is, let me give you a 10second 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. It 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 lowlevel styling. So you can do things like padding for example or you can put width. So you can have columns on particular pages, stuff like this, right? However, if you want to create reusable templates, this is where Shad 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 a professional accordion out of the box or we can have avatars for potentially like testimonials, for example, or we can have a reusable buttons that we have that we use. That's what Shad Cen 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 going to 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 and 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 going to do here is move on to the next step, which is adding animations onto our website. So, I'm going to fire off this prompt right over here and circle back when it's all said and done. But we're using something called Gap and Framer Motion. Essentially, what these do is they bring elements to life. So, let's kind of take a couple examples of what this looks like. If we just head over to the site, you can see all the kind of 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 kind of 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.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 um 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 want to 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 FA 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. Okay? So, what that is is that's this GAP um library right over here that's doing that. And as we're scrolling down, we can kind of 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 a 300 second millisecond uh delay. So it's not like instantly popping up, otherwise it would be kind of jagged and and and rough. It's really smooth, right? So it's happening over 300 milliseconds. Same kind of 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 3D uh design into a site. So, what I'm going to 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 three 3JS over here. So, we're going to be using these guys. Let's go over what they actually do. First, we're going to start with um we're going to save the best for last. So, we're going to start with 3JS. Now, we can have all of these kind of motion graphics or sorry, 3D 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 3D graphics, 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 3D 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 going to 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 um these 3D boxes that follow where your cursor is going, which I think is really cool. Now, what we're going to 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 going to 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 going to do is we're going to 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 going to 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 going to 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 going to generate a link. We're going to copy this and then paste it in. So, I'm going to say, "Please use this spline graphic above the fold for the background." Okay. And then we can paste it in here and it's going to 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 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 3JS and we can see the graphic right over here. Now, there is a lot of different graphics that we can use from 3JS. 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 3JS, and you just can just you can just tell it exactly what it is you're looking for. 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 3D graphics behind a particular element on the page. And those are two different resources. We can call on 3.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 going to do is we're going to head over to the final prompt here which is all about typography. So we'll copy this prompt into cloud 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 Claude Code which one we're looking for and it's going to 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 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 kind of see some text in that kind of category. You also have formal, you have upright, you have all these different types of fonts to choose from. So, you can easily c 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 can just ask Cloud Code, hey, pull out the font that you think is going to 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, kind of 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 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 want to 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 going to do is I'm going to use this particular grid over here because it's kind of bothering me how there's only one graphic right here. What I'd rather have is like 4x4 graphics so it looks a bit more full. So I'm going to go back to the drawing board here. I'm going to 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 going to 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 [snorts] all different services or whatever that this fictitious company is offering. So, thanks guys for watching. If you want to learn more about Claude Code, I highly recommend taking a look at my master class on the subject for free on YouTube. And all the blueprints for this video are going to be down below in the description for free. If you guys want to 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 30 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 seven figures. And of course, if you don't want to 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. Goodbye.