§ 01 · The Hook
The bait, then the rug-pull.
Open a grid of AI-built websites side by side and they all look identical — same gradients, same card components, same lifeless layout. The one that breaks the pattern was also built with Claude Code. The difference, as this walkthrough makes clear, is not a better model or a longer prompt. It is eight specific decisions most people never think to make.
Where the time goes.
00:00 – 00:36
01 · The AI Slop Problem
Opens with a side-by-side of generic AI websites vs. one that looks professionally designed. Frames the gap as technique, not tool.
00:36 – 01:10
02 · Technique 1: CLAUDE.md Instructions
Every Claude Code project should have a CLAUDE.md. The key instruction: tell Claude to behave as a senior UI designer and front-end developer.
01:10 – 03:19
03 · Technique 2: Clone a Site You Love
Use Railway.com as a design reference. Take a screenshot and prompt Claude to analyze the URL and clone the aesthetic. Also shows Dribbble for broader design inspiration browsing.
03:19 – 04:53
04 · Technique 3: Tailwind CSS + ShadCN
Specify both libraries explicitly. Tailwind handles low-level layout styling; ShadCN provides reusable professional components. Shows ShadCN component library and a CSS-vs-no-CSS demo.
04:53 – 05:56
05 · Technique 4: Gradient Backgrounds
Radial gradients with blurred purple, blue, pink, and teal circles add texture and visual completeness to minimal layouts without adding content.
05:56 – 08:29
06 · Technique 5: Animations (GSAP + Framer Motion)
GSAP drives scroll-triggered fly-in animations site-wide. Framer Motion drives hover micro-interactions with 300ms easing. Shows toggle animation and button scale effects.
08:29 – 13:57
07 · Technique 6: 3D Elements (Three.js + Spline)
Spline community library provides free, remixable 3D graphics; export a code link and paste into Claude Code. Three.js used for CTA-section programmatic graphics. Shows Spline editor workflow for cleaning up community scenes before export.
13:57 – 16:02
08 · Technique 7: Typography (Google Fonts)
Reference a specific Google Font name in the prompt, or ask Claude to choose. Pair one font for headings and one for body. Demonstrates the visual transformation fonts create.
16:02 – 17:15
09 · Technique 8: Screenshot-Based Iteration
Take a screenshot of the section to change, paste it with a description. More precise than verbal layout descriptions. Demo: fixing a sparse grid by requesting 4x4 layout with attached screenshot.
17:15 – 18:11
10 · Conclusion and CTA
Points to free YouTube Claude Code course, blueprints in description, paid Skool community, and automation agency.
Visual structure at a glance.
Named ideas worth stealing.
00:25
list
The 8-Technique Design Stack
- CLAUDE.md system prompt (senior UI designer role)
- Clone a reference site (screenshot + URL)
- Tailwind CSS + ShadCN components
- Gradient backgrounds (radial, blurred color circles)
- Animations: GSAP (scroll) + Framer Motion (hover)
- 3D graphics: Spline (above fold) + Three.js (inline)
- Typography: Google Fonts (heading + body pair)
- Screenshot-based iteration for targeted revisions
Eight sequential techniques that layer visual sophistication onto any AI-built site, each implementable with a single prompt.
Steal for Any Claude Code project kickoff — add all eight to your CLAUDE.md template or initial project prompt
Lines you could clip.
00:00
"Every single one of the websites in front of us was built using AI, and every single one of them looks like AI Slop."
00:08
"The difference isn't the tool, it's eight techniques that nobody bothers to use."
06:46
"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 literally one prompt, you can build these animations across your entire website."
Things they pointed at.
How they asked for the click.
17:15
next-video
"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."
Soft triple CTA: free YouTube class, free description blueprints, paid Skool community. Agency mention at the end. No hard sell — framed as further learning.
Word for word.
HOOK opening / re-engagementCTA the pitch story
00:00HOOKEvery 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.
00:14HOOKAnd 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:25HOOKAnd 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.
00:46These 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.
01:02Now 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.
01:16I 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.
01:27How 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.
01:38But 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?
01:48And then we're gonna use a prompt just like this. And, essentially, what we're saying in this is actually go to railway.com.
01:57Analyze 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.
02:07I'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.
02:18So 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.
02:24Okay? I downloaded and used it in my file, and here are the results. Right away, first shot, it's looking already absolutely beautiful.
02:32So 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,
02:47um, 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.
03:07And, 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.
03:16Okay. 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.
03:35Now 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.
03:41It's just styling on a website. Here's a website with CSS. Looks beautiful.
03:45This is what we've built so far. Here's a website without CSS. In fact, this is actually
03:50that exact same website. It just has no styling with it. It just has HTML,
03:56has the text, inputs, images, all that kind of stuff, but there is no styling.
04:01And so that's what CSS does. And Tailwind is just a framework or a CSS library in order for you to style beautiful websites.
04:10But 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?
04:22However, if you want to create reusable templates,
04:27this 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,
04:37across multiple different pages. So for example, we can have professional accordion out of the box or we can have avatars for potentially
04:47like testimonials for example, or we can have reusable buttons that we have that we use. That's what Sade CN does.
04:54It'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.
05:03I'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.
05:09Let 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?
05:19This 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,
05:28it 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
05:36site, there's not a lot of stuff going on here. It still looks beautiful with this in the background.
05:41It just makes it feel a bit more busier, a bit more complete or full just by adding in a background. Okay.
05:48So with that being said, what we're gonna do here is move on to the next step, which is adding animations onto our website.
05:56So 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,
06:07what 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.
06:19But 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.
06:30It 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.
06:48And 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.
06:59It 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.
07:05At least it was for me before AI. And now in, like, literally one prompt, you can build these animations across your entire website.
07:12Cool. So the site's done. So let's take a look at the results.
07:15So 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.
07:24And 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?
07:33We 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.
07:41Okay. Okay. So what that is is that's this GSAP
07:46library 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.
07:59So, 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,
08:10uh, delay, so it's not, like, instantly popping up. Otherwise, it would be kinda jagged and and and rough. It's really smooth.
08:17Right? So it's happening over three hundred milliseconds.
08:21Same kinda deal with these buttons with the gray background as well. So all of that kind of stuff is adding animation to our website.
08:29Now the next step is probably actually my favorite part of designing websites. I think it's absolutely stunning, and that is building three d
08:38design into a site. So what I'm gonna do is I'm going to send this off. Okay?
08:43And 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.
08:53Um, 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.
09:00First, 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
09:15in 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.
09:27Another one is spline. I hope I got that right.
09:31Um, 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.
09:46Next one over here, we have this nice little, um, uh, thing. I don't even know what to call that.
09:52I'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.
10:01And then lastly, we also have this through these three d boxes that follow where your cursor is going, which I think is really cool.
10:09Now 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.
10:24And so for that reason, we're gonna use this. Now you do need an account for spline.design, and, um,
10:32but 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.
10:42And 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
10:59that 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.
11:10I 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.
11:23Right? 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.
11:31So we're good here. We can hit export in the corner, and then we want specifically
11:37the, um, the code export right over here. It's gonna generate a link.
11:43We're gonna copy this and then paste it in. So I'm gonna say, please use this
11:50spline graphic above the fold
11:54for the background. Okay. And then we can paste it in here,
11:59and it's gonna naturally build that out and include it on our website. Cool. So everything's good.
12:03Okay. Let's go ahead and demo this out. Here is now our website with the spline
12:09graphic 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.
12:19And 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,
12:31also, there is this kind of rough edge over here. We could smooth this out with a gradient over top here.
12:38Okay? And that's an option as well. We just have a gradient that essentially goes from this color to transparent
12:46so that as we scroll down, it just naturally fades into this background over here. Okay? So that's the spline graphic.
12:54And 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.
13:04And we can see the graphic right over here. Now there is a lot of different graphics that we can use from Three. Js.
13:11This 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.
13:30And 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
13:38a 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.
13:56Okay. 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
14:05Claude 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,
14:16on the first link here, we can grab from a whole host of different fonts. And all of these are free.
14:23All 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,
14:34one 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.
14:43So for instance, maybe you want handwriting. Okay? You can go down the list of all the different types of handwriting.
14:49Maybe you want something like informal. You can kinda see some text in that
14:55kinda category. You also have formal. You have upright.
15:00You 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.
15:09And 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.
15:20So everything is live. Let's take a look at the font over here. And right away, super noticeable.
15:25Now 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.
15:46And 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.
16:01Now 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.
16:15So 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.
16:32In 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.
16:46So 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.
16:53We'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
17:07CTAthe graphic here for all different services or whatever that this fictitious company is offering. So thanks guys for watching.
17:15CTAIf 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.
17:34CTAAnd, 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.
18:02CTAAnd, 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.
— full transcript
§ 05 · For Joe
Eight habits that make Claude Code output look designed, not generated.
WHAT TO LEARN
The visual gap between generic AI websites and ones that look professionally built comes down to specific library choices and prompting habits layered in sequence.
- A CLAUDE.md file instructing the model to behave as a senior UI designer shifts output quality on the first prompt — the system prompt is part of the design stack, not optional boilerplate.
- Cloning a real website by URL and screenshot produces more accurate visual output than describing an aesthetic in words; Claude infers style rules from existing HTML and CSS directly.
- Specifying Tailwind CSS and ShadCN together gives Claude a component vocabulary — accordions, avatars, buttons — that would otherwise require custom design decisions per element.
- Radial gradient backgrounds with blurred color circles add visual texture to minimal layouts without requiring additional content or images.
- GSAP handles scroll-triggered fly-in animations; Framer Motion handles hover micro-interactions — both belong in the same project because they solve different motion problems.
- 300ms easing on hover interactions makes UI feel engineered rather than janky — this is the specific timing parameter that separates smooth from rough.
- Spline provides free, remixable 3D graphics via a community library; export a code link and paste it into Claude Code, no file management required.
- Google Fonts can be specified by name in any prompt; one display font for headings and one clean sans for body creates visual hierarchy in a single instruction.
- Screenshot-based iteration is more precise than text descriptions for layout fixes — paste a screenshot of the section with a description rather than trying to describe the visual structure verbally.
