The argument in one line.
The gap between an AI-generated website that looks like slop and one that looks like it cost $10,000 comes down to eight specific tool choices and prompting habits, not the underlying model.
Read if. Skip if.
READ IF YOU ARE…
- You are using Claude Code to build websites and keep getting the same generic gradient-card layout on every project.
- You know how to vibe-code a basic site but want the output to actually look designed rather than auto-generated.
- You want to borrow the aesthetic of real sites you admire rather than describe a style from scratch in a prompt.
- You have not yet worked with Tailwind, ShadCN, GSAP, Framer Motion, Three.js, or Spline.
SKIP IF…
- You are an experienced front-end developer who already reaches for these libraries — there is no new information here for you.
- You want backend architecture, deployment, SEO, or performance optimization advice.
The full version, fast.
Every Claude Code website looks the same because most people skip the setup layer. The fix is sequential: write a CLAUDE.md that instructs the model to act as a senior UI designer, then supply a real website to clone rather than a blank style description. Specify Tailwind CSS and ShadCN for component-level polish, add radial gradient backgrounds for texture, layer in GSAP scroll animations and Framer Motion hover effects, embed Spline or Three.js 3D graphics, set custom Google Fonts, and use screenshots for targeted revision prompts. Each step is a single prompt; the barrier is knowing the library names to ask for.
Members feature
Chat with this breakdown.
Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.
Create a free account →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.
Lines worth screenshotting.
- Telling Claude to act as a senior UI designer and front-end developer in CLAUDE.md changes default output quality immediately — the system prompt is design infrastructure.
- Cloning a real website by URL and screenshot produces more accurate visual results than describing an aesthetic in words; Claude infers style rules from existing HTML and CSS.
- ShadCN is a component library, not a styling framework — it gives you production-ready accordions, buttons, and avatars without requiring custom design decisions per element.
- Tailwind handles layout primitives (padding, width, columns); ShadCN handles pre-built components. Both belong in the same initial prompt.
- A radial gradient background with blurred color circles makes a minimalist site feel complete and textured without adding any additional content.
- GSAP handles scroll-triggered fly-in animations; Framer Motion handles hover micro-interactions — they solve different motion problems and are typically used together.
- 300ms easing on hover interactions is the specific timing parameter that separates an interaction that feels engineered from one that feels janky.
- Spline's community library is free and remixable — export a code link and paste it into Claude Code, no manual file download required.
- Three.js and Spline are not interchangeable: Spline is for importing pre-built 3D scenes above the fold; Three.js is for programmatic 3D graphics anywhere on the page.
- Screenshot-based iteration is more precise than text descriptions for layout fixes — Claude interprets a visual more reliably than a verbal description of a grid problem.
- Google Fonts are free and referenceable by name; pairing one display font for headings with a clean sans-serif for body creates typographic hierarchy in a single instruction.
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.
Terms worth knowing.
- CLAUDE.md
- A project-level instruction file that Claude Code reads at the start of every session; it sets persistent behavioral rules like acting as a senior UI designer without repeating the instruction in every prompt.
- Tailwind CSS
- A utility-first CSS framework that applies styling via short class names (padding, width, color) directly in HTML, giving Claude fine-grained control over layout without writing custom stylesheets.
- ShadCN UI
- A library of reusable, pre-styled React components (buttons, accordions, avatars, dialogs) that Claude can import directly into a project, providing professional visual polish without custom design work.
- GSAP (GreenSock Animation Platform)
- A JavaScript animation library that enables scroll-triggered animations — elements flying in as the user scrolls down — with precise timing control.
- Framer Motion
- A React animation library focused on component-level interactions: hover effects, scale transitions, and micro-animations, typically with configurable easing and duration.
- Three.js
- A JavaScript library for rendering programmatic 3D graphics in the browser using WebGL, often used for animated geometric shapes, wireframes, or particle effects embedded in page sections.
- Spline
- A browser-based 3D design tool with a free community library of interactive 3D scenes; designs can be exported as embeddable code links and dropped into any web project.
- Radial gradient
- A CSS background style where color radiates outward from a center point; blurred circles of different colors overlaid on a dark background create depth and texture on minimal layouts.
- Above the fold
- The portion of a webpage visible without scrolling; the most valuable visual real estate on any landing page.
Things they pointed at.
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.”
Word for word.
story
00:00Every 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:14And 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:25And 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, um, just generic.
02:48Like, 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 that exact same website.
03:52It 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.
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, this is where SHATCN CN comes in.
04:29And 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.
04:39So 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.
04:52That's what Sade CN does. It's a reusable template library that we can import into our project immediately. Okay.
04:59So 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.
05:06So 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.
05:19Okay? This is what it looks like. We moved away from the image on rail railway.
05:24And 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.
05:32And 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.
05:39It 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.
05:48Okay. 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.
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, what these do is they bring elements to life.
06:11So 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.
06:21When 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.
06:33And 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.
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 library right over here that's doing that.
07:48And 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.
08:04And 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.
08:13Otherwise, it would be kinda jagged and and and rough. It's really smooth. Right?
08:17So it's happening over three hundred milliseconds. Same kinda deal with these buttons with the gray background as well.
08:25So 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.
08:33I think it's absolutely stunning, and that is building three d design into a site.
08:40So 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.
08:47One 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.
08:56So 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.
09:04So 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.
09:16So 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.
09:30I 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.
09:40So 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.
09:50I 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.
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, but it is free.
10:33Okay? 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.
10:45But, 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.
11:00And 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.
11:17Obviously, that's not gonna look good if we have that right at the top here. Right?
11:23We 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.
11:32We can hit export in the corner, and then we want specifically the, um, the code export right over here.
11:41It'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.
11:56Okay. And then we can paste it in here, and it's gonna naturally build that out and include it on our website.
12:02Cool. So everything's good. Okay.
12:04Let's go ahead and demo this out. Here is now our website with the spline graphic in the background here above the fold.
12:12And 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.
12:30But, also, 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 so that as we scroll down, it just naturally fades into this background over here.
12:51Okay? 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.
13:03Js. And we can see the graphic right over here. Now there is a lot of different graphics that we can use from Three.
13:11Js. 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.
13:26Js, 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.
13:42Three 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.
13:57Lastly, 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.
14:06And 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.
14:22And 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.
14:32You can have one font for headers, one font for your body paragraphs.
14:37And 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?
14:46You 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.
14:57You also have formal. You have upright. You have all these different types of fonts to choose from.
15:04So 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.
15:19Sweet. So everything is live. Let's take a look at the font over here.
15:23And 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.
15:34But, 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.
15:52And 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.
16:10And 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.
16:23So 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.
16:41What 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.
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 the graphic here for all different services or whatever that this fictitious company is offering.
17:14So 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.
17:26If 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.
17:51And 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.
18:08Thanks guys for watching, and I'll see you in the next one. Bye bye.
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.
Named ideas worth stealing.
00:25list
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 forAny Claude Code project kickoff — add all eight to your CLAUDE.md template or initial project prompt
How they asked for the click.
17:15next-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.
Visual structure at a glance.
