Claude Design Now Builds Beautiful $10,000 Websites (NO AI Slop)

0:00 Claw design can now build beautiful websites that don't look like AI slot, but only if you use the right systems that are now available. And in this video, I'll show you this simple and new

0:11 system to build gorgeous websites in any design replicably so you can destroy the AI slop monster. And if you haven't already, grab that beautiful coffee and let's dive straight in. Now, the enemy

0:23 has a name. It is the AI slop monster. I invite you to join me on this crusade. Now, the reason why most websites look exactly the same is because everybody gives it the same prompt. And these

0:33 models are splitting up the same consistent outcome, the same gradient, the same cards, the same hero section, everything, guys. It's like living in Groundhog Day every single day. And I

0:43 like variety. This is why I'm making this video. Now, you can spot it in a second. So, let's understand what the slop monster is before we understand what the solution actually is. It's the

0:52 same type face. Font is so so important and barely anybody speaks about it and by the end of this video you're going to have a system to create beautiful websites. It's going to level up your

1:03 graphical game. They're going to be saying, "Hey, who is this incredible designer person and where did you come from?" The other thing we've got is the classic indigo to violet fade. I know

1:10 that this itself is an indigo. The irony is not lost on me, but purple is the color I wanted as a gradient on this one. Three feature cards everywhere. It's always consistently three. Have you

1:19 noticed that all the time? It's through. Everything's got the same round on it. the frosted glass and a headline that just sounds like AI slot. People don't even change the text. So, the first

1:29 level in destroying the AI slot monster is to give it a system, not a prompt. Jack, what do you mean by that? Well, we want to give it a design system. Okay, so essentially Claude itself does not

1:42 know what great design is. Now, we can look at different websites to do this. One fantastic example is this. I mentioned it on a previous video. This guys is like Willy Wonker's chocolate

1:52 factory for gorgeous websites. I mean look at this. We got linear, we've got steep, we've got air. These are gorgeous. The Mercury website. It's fantastic. So what we can do is leverage

2:01 this to actually understand what amazing design looks like. And then when we know what that looks like, we can reverse engineer how you actually create something that is gorgeous. For example,

2:11 it could be, you know, you can just see the different design styles that come down here. So the first thing that we need to do is go over to this website here. I'm going to put all the links

2:19 down below. Anytime you get any free resources and I give away the game for free, it is the second link in the description which says free resources. It'll take you free through to a free

2:29 community. It looks like this and it'll have a direct link to everything. It's just a place where I put all of my free guides. I get so many questions on it. I just want to make sure that you can

2:36 access everything that you need to very easily. So, what we're going to do, guys, is grab this like so. And then head over to Claude. Now, the first thing we do, of course, is top up on

2:44 coffee. Don't forget to tip your barista, guys. And what we're going to do is the blunt. We'll come down and we're going to paste in this here like so. And you're going to say, I would

2:54 like to build a beautiful website. I have given you a list to loads of gorgeous frontier websites. And what I would like you to do is to go through those and find for me three examples

3:05 that are most closely related to my desired business. My desired business is an AI education app kind of like Duolingo. Give me the three links. Okay, enter that in and then just send it off.

3:19 Now, you can look yourself, but this is the first step. Effectively, what I want to do here is find websites that look gorgeous, that are in our niche, look fantastic. Already my eye is drawn to

3:29 Dolingo. I think that looks gorgeous. And we can find these different designs. You can do this yourself or you can get AI to help you because there are hundreds and hundreds and hundreds of

3:39 websites listed here and they are all gorgeous. And then Claude is going to give us three of its best options. Again, you can do this directly. For example, you can actually come down to

3:48 popular, which is awesome. And you can see the most popular ones that are there. Mercury is gorgeous. We can look at the newest. And we can also even come down here and search. So, I could just

3:56 come down for education, for example. And then I can see all of the different education ones if I want to. But you can see it's gorgeous. Lots of optionality. So, we have Dolinger, which I think is

4:06 excellent. We have Quizlet, which is okay, I think. And then we have Slush. Slush is very finessy. I think the most relevant of them all. Obviously, Slush is very cool, very fresh. I do love the

4:17 way that the kind of apps bleed in. It's kind of got good scrolling animations. And then Dolingo itself here just has a beautiful thing and it's got these like individual graphics which I think look

4:27 fantastic. So, what we're going to do is go ahead with Dolingo because I think it looks awesome. So, we're just going to come down and copy this and then inside Claude, you're going to give it the

4:35 below prompt, which is this. Hey, I would like you to look at this design reference for Dolingo. I'm going to build an app that teaches people AI. I would like to keep everything else

4:45 essentially was saying be inspired by this design system. Here's another design system you may want to look at as well as a secondary reference. But essentially just use this entire design

4:53 system to build me one for something where basically I am teaching AI to individuals. I am the Dolingo of AI. Basically come down and just literally drop in the link to Dolingo. And if you

5:04 want to you can also go ahead and drop in a second design system. That's optional. The model we're going to use is going to be Fable 5. And we will be okay with extra. You can also do high.

5:12 it doesn't make too much of a difference. Then of course we'll get some clarificatory questions from Claude as well. So what's the app called? Why don't we go ahead and call it Neuro?

5:21 That's an interesting idea. That could be cool. Oh, promptly. Promptly sounds a bit lame. Let's go for this one. Cool. I'm going to say we can do do a link of green. Let's just keep it as it is. I

5:30 think maybe do a little bit more of a blue style instead of green. Great. And send that one off. And also guys, I'm going to put a link down below for a skill that knits parts of process

5:38 together. So it's going to really drastically improve your output. and will improve the quality massively. Now, it's come back and it has done it. So, let's check out the neuro website. Now,

5:48 brain, this is draft one. As you can see, it's got that very Dolingoes, like get started. Very cool. We've got the buttons, free, fun, effective, and we've got some kind of placeholders there.

5:58 Really cool. Scroll down, learn anytime, anywhere. Beautiful job with the font. Come down. Looks good. And I think it's really crushed this. And then bottom right, design system. And then this

6:07 essentially is our entire design system. We come down, login for the app. Now, the cool thing is you have a fully codified design system here. Why is that cool? Well, basically when you're

6:16 building out the apps, you got these mechanics like I'm just showing this as an example. In reality, you wouldn't just use Duolingos, but you get the idea of how powerful this is. Email,

6:23 password, login. Love this. It really does crush it and get all the different game, excuse me, the game mechanics. I need more coffees. This is crazy. Writes about dogs. As you can see, it's got all

6:33 this sort of stuff locked down, which is great. Now, this is locked in, but what we need to do is take it to a new level. Now we have the architecture and the skeleton inside. And we're going to do

6:43 that by moving on to the second level. And the idea with this is the ability to generate beautiful graphics, videos, animations, and also compare basically combine this with its strongest skill

6:56 with the design system strongest skill. What do I actually mean by that? Well, the idea is we want to generate videos. We want to have reference inputs. We want to have um if we want volume of

7:06 sound, which I don't recommend, but you can have that in there. We can crush the slot monster and we can bring everything together. So to do that, we're going to do two things. I'm going to be using

7:13 Higsfield for this. You can use and basically generate anything here, any images you want to, any videos, lots of different models. It's very cool. And the cool thing is we can actually

7:21 connect this to Claude super duper easy with this page, which means that we can set Claude off on a mission and then it will use Higsfield and the models within Higsfield to essentially create a

7:32 gargantellian number of beautiful designs, which is freaking awesome. So, first thing to do if you haven't already is you can literally screenshot this, copy. You come over to Claude, paste

7:40 that in and say, "Hey there, I want you to connect to the Higsfield via the CLI." And once you've done that, it will then open a new window. You'll sign in and then you'll be able to use Higfield

7:51 with inside Claude Code. And what we're going to do is combine it with Incredible Prompt. So, I'm going to go ahead and grab this from I believe it's in the vault. Come down and we're

7:58 looking for design loops. Now, if you haven't seen this design loop video, I will link it on screen. It is really cool. It gets me super excited about it. But all you're going to do is come down

8:07 and grab the skill. Again, I'll put this uh in the same resources in my second link under description. It is amazing. It's called the gauntlet loop. I call it the design loop. It is absolutely

8:17 fantastic. And effectively, what we're going to do now is copy this and head back over to Claude. And then we're going to give it the blur prompt. So, I'm going to actually paste in my design

8:25 loop. Okay, which I've already created as a skill. So, if you haven't done this, just paste this in and say, "Hey there. I want you to turn this into a skill." All right. Then basically come

8:34 down, paste this in, and it will turn it into the design loop skill. Now, when that's installed, when you do forward slash, you can literally type in loop, and it brings out the design loop. Now,

8:43 here's the cool thing that I want you to do. I want you to give it a prompt that sounds a little something like this. I'm basically going to do this. Hey there, I want you to go ahead for me and

8:53 ruthlessly compare this website with Dolingo. Specifically, I want to bring this to live. Dualinga has loads of beautiful animated graphics. It's got a distinctive graphic style. I want you to

9:06 go ahead and create a unique graphic style with unique characters um in the kind of Dolingo style, but obviously make it unique so it's specific to us. And I want you to then go ahead and use

9:16 Dualingo as a gold standard reference. I want you to go ahead and look at the graphics, look at the animations all the way through it and basically create our version of what that is based on our

9:27 unique style that you create and unique motions. such that it essentially looks like the AI version of this. So it's not the same thing. It's our own style, our own unique business, our own product,

9:38 but effectively look at it. And for example, look at the section where we have learn anytime, anywhere. Every section I want to look gorgeous and absolutely flawless. This is what I

9:47 would call the gold standard. Now, I want you to go ahead and use the Hicks Field CLI to generate the unique graphics and also the unique videos. And make sure you're using Seed to Dance 2.5

9:58 for the best video generations. I can see just looking at the graphics, a lot of them are on a loop. There's a lot of personality. It's quirky and it's very distinctive. Make sure you understand

10:08 all aspects of the website to bring that personality out. Then you're going to come back over, drop that in like so, and literally let it run its magic. Now, the cool thing about the design loop is

10:18 the design loop itself says, "Hey, this is our website." And you give it a gold standard. And essentially what it does is the um the model is going to try and recreate it and it'll have various

10:31 judges that are saying does this hit the mark yes or no. And if it does it passes but if not essentially it goes through a loop because if you ask Claude to improve a design it will often say okay

10:43 great you ask it five times it finds five different reasons. So the design loop system helps us cut a lot of that out. So since I'm generating unique video assets, I'm going to go with a

10:53 pilot strategy first to make sure that I like the design and the feel and it enables us to iterate it before hitting the full bam bam walaba bing bomb which is code for basically doing the full

11:03 website. So what should our character cast be? So Duolingo has do the owl plus a cast of humans. We need our own equivalent that reads as AI without being a cliche robot. I completely

11:13 agree. Neuro the neuron sounds lame to me. Little robot devices. Now this is the bit where you want to inject your own personal design. So AI should help us basically the design bit is the fun

11:23 bit. I want to own the creative output. I don't want AI to replace creativity. It's not its job. Its job is to replace repetition in the creative process, not the creativity itself actually. So for

11:34 example here I've said I want to do a shark as our core thing. Kind of like gym shark but our robot version. We'll call him robo shark. So we could probably play around with a kind of

11:42 oceanic and land theme bring in different robotic mechanical versions of animals to make it kind of appearing appealing but clear that it is AI and then send that one off. And then once

11:50 the design loop has completed it has gone ahead and built me this. Now I must admit I went back and said I didn't quite like the idea of a robo crocodile and I actually settled on a different

11:58 design idea because with basically claude will come back and say hey do you want this do you want that and I was like actually I think this design style is really cool. So check this out. This

12:07 is the website with the loop and everything we've got here. One less than five minutes. So, we have this interactive thing here. And you can feel this do a lingo. That wasn't a real

12:16 question, by the way. That was a test. Although, that one was legit. Going to come down. We've got this beautiful interactivity here built on how people actually learn. This is gorgeous.

12:26 I'm really really impressed with this. I mean, it's got its own unique design style. It is actually crazy. I mean, look at this, guys. Have you seen stuff like this being created in this process?

12:37 It is wild. In a month, you'll prompt like you mean it. Get started. And then we got a nice animation at the bottom. Things popping up. They're having a good time. And then we have the full

12:45 beautiful website building using this exact system. And all we did is link in Higsville CLI for the image and video generation. It create various different images and various different videos. But

12:55 that links very nicely onto the next level for this. And what is it the next level beyond this one? Well, once we've done the image and video generation, we have to talk about typography. In our

13:06 battle against the AI slop monster, one of the things that we need to do is genuinely upgrade our ability to use better fonts. And the reason for that, and you can just have a look at this, is

13:16 for instance, fonts change everything. It's like the biggest difference. I remember when I did my corporate job when I was doing a big strategy job before I left to become an entrepreneur

13:24 a few years ago and I always remember any doc I got the first thing I did is control A change it to Aanir or just any font I could get my hand on in that terrible uh Microsoft Word that I I was

13:35 stuck in. So fonts change everything. There's so many different fonts. It is a rabbit hole. But what do I mean by that? Well, there's actually a load of really free fonts you can play around with. I I

13:44 talk about them all the time inside the community. But all these fonts here are completely free that you can actually use and it's dead simple to integrate. I really love fonts.com. Uh they're not a

13:54 sponsor of anything fontest.com because it actually shows you what fonts look like in real life situations. Fonts and use is another really good example of that. You can see like wow this looks

14:04 really cool and you can get different ideations from this. Now practically speaking I built this system inside my community to help people with design systems and one of the things I added in

14:13 there is this graphic section here. Now, the cool thing about the graphic section is when it goes ahead and designs your website. It effectively shows you what that looks like. Um, it explains the

14:23 construction rules. It shows you the asset inventory. Again, this is all completely unique generated imagery. It shows you kind of like a model sheet that you can follow with an ideal color

14:32 palette. But beyond that, if you actually scroll down, you can see that what it does is has all these different fonts you can choose from. And you can actually come down and select these.

14:41 Now, what's cool is I've added in a recommended selector and essentially what the AI does is has a look at what the brand is about, what it's doing, what it's not doing, and then we'll

14:51 essentially say, well, you're going for like a modern SAS look, and based on that information, you want to evoke like trust and confidence, you want something that's got the right level of kerneling,

14:59 all that sort of stuff. And you can literally come down and just see the fonts that you want. All these are available. You can play around with them. you can click them and basically

15:06 change that if you want to see what it looks like, which I think is an incredible thing. So, you always want to check the licensing on fonts. I wouldn't personally be adverse to buying a

15:16 brilliant font. I think it's worth its weight and gold, but there are so many free fonts that you can play around with, and it will honestly just elevate and lift the quality of any design that

15:26 you're doing. Or fonts are one thing, but if you don't have this next level solved, none of this is worth anything. And of course, it is the copy. I could have the best design, the best, most

15:36 beautiful graphics on the planet, but there's one simple thing. If this copy is terrible and doesn't look good, nobody's really going to buy from it because it's just the biggest giveaway

15:47 in the world is the copy. The copy has to look absolutely beautiful. I mean, just look at these beautiful images we've got here, guys, for different tuto different things that we offer here on

15:57 Euro. I mean, this is I'm about to sign up. I'm about to get my credit card out and sign up to this service. Honestly, I'm 2 seconds away from buying it. That's how good this design is. But when

16:05 it comes to copy, it genuinely really is everything. It's super duper important. It changes you. It really does change the way that things are perceived. Now, one skill I did share as well, and I'll

16:15 share this skill with you down below uh in the copy. And by the way, if this sounds like I'm speaking design Spanish, I'm going to put a link down below for my Claude Code master class that will

16:23 take you through the basics, building beautiful websites, power features, memory systems, Hermes agent, building anything stuff I've never shared on YouTube. You also get full access to the

16:32 entire Aentic operating system, the memory operating systems, the ability to chat with any single model, and my exclusive design operating system, which is so freaking cool. I'll put a link

16:44 down below. It will save you so much time and get you to a level you wouldn't even imagine. It is so amazing. Now let's come back and chat about the actual copy here and what that

16:52 physically looks like because it is really really important. So one of the copy systems that I actually built was this great thing and essentially what I wanted to do is you can take any copy on

17:02 a website and you can run it through a system. Now what this effectively does is it checks it for multiple things. First thing it does it kills the AI slop. So it identifies what are all the

17:10 features that AI writing has and are incredible GitHub repos that I brought in for this specific reason. Any signs of AI writing. We're going to run it through GBT 5.6. We do this because

17:20 Claude is so prolific. Its greatest strength has in a sense become its biggest weakness because everybody's using it, right? So GPT 5.6 just makes it sound a little more human rather than

17:30 claesque. We get world class copy. This has been trained on things like what are the best marketers actually saying? What it also does is it identifies for example what are the brands that you're

17:41 using. So for example if I'm building a website because the point of the website is to get customers right if I'm doing a website on a SAS let's look at the top five SAS companies in our niche and what

17:52 are they all doing that the losers aren't doing like what can we learn from what's actually crushing it and it takes that copy and that edge and that design and brings it in to the actual copy. So,

18:02 not only is it got deification, it's it's adjusting the sales copy for you as well. It has a band list for words, certain ways of doing it, runs it through various different things. The

18:12 five big principles are the below. And I say this because it genuinely matters to me that you crush and you can apply these principles anywhere. Don't make me think. One of the best books I have ever

18:21 read. Whole idea is you want basically system one thinking, not system two. In other words, when I own your website, I shouldn't have to engage my brain. I it should just roll over me. And that's the

18:32 purpose of great design and great copy that I don't have to think difficultly. If I said, "Hey, it's 29.62% and you've got to take the square root." All of a sudden, you've lost me. You're

18:42 making me do too much work to understand it. That's why thumbnails that are simpler tend to do better as well. Name the pain first. This is from Daniel Priest's marketing system. It's very,

18:51 very cool. Specific assignment. Um, one ask per screen. This is something I always do. one page, one thought. Which is why you'll often find even on our system here, if I just duplicate this

19:02 and show you, check this out. I come to the website. What's the idea? I'm on one screen. We call this a kind of like um uh I've got the specific name for it, but the height is that like everything

19:11 fits in one screen view. And it's got one point. And the point of this is to get started. Then the next one is the demo. And then this one is one again, one screen, one point. As you can see,

19:21 it's really important. This one here, download the app or whatever the specific thing is. All that to say, it's built on everything, but it doesn't mean anything unless it's actually good. So,

19:29 let's see what's happened here. So, this is actually suggested change 28 lines. Let me show what I mean. So, instead of get started, start free. Way more compelling. Get genuinely good at AI 5

19:40 minutes at a time. Everyone uses AI. Almost nobody is good at it. Interesting. You got here is 5 minutes a day of real prompting. Problems marked the second you answer. You stop guessing

19:50 at what works. Beautiful. Get started. Start your first lesson. It's specific. And again, and it just comes down and explains everything it's doing. It's really, really freaking impressive.

19:58 Like, check this out. For example, instead of saying five minutes wherever you are, five minutes on the train counts. That's so good because now I've got a visualization of, hey, I'm on the

20:06 train. I'm doing something that actually matters. It's really, really impressive. Instead of go further with when 5 minutes isn't enough instead of get started, start your first license. So,

20:14 there's like a million different things we get down here. I think it found actually 28 different changes that it went ahead and moved to this. I'm also going to be updating this to apply like

20:21 more logic as well, which I think would be really cool to level up the system. And the other thing that the system did as well is I actually go ahead and build the neuro design system. So you can see

20:29 it basically shows you the typography, how it works, all the different buttons. And the cool thing about a design system is it shows you how you log in, how you do everything, your color palettes, all

20:37 that sort of stuff. So essentially what it means is that if we need to recreate any of the pages, any systems, we've got like this design system locked in. And honestly, don't underestimate the power

20:47 of image and video generation. I use this platform a lot and one of the interesting things that I often find when I'm using it is it just really elevates the website. Any kind of

20:56 interactivity and bear in mind we could go back and forth to make this like level turn. I just want to show you what when you combine the best-in-class prompting, you know, claw design, the

21:05 right kind of image and video generation like we used at Higsfield in this example, just the kind of thing that you can get that doesn't feel like AI slop. And so it's also important to bear in

21:14 mind is that any fonts that you're using, just make sure that you have the right license for it. So some are free for personal use but commercial will not. So just make sure that you're

21:21 locked in and secure with that. Then also when it comes down to design I use Dualingo as an example here. In reality you want to combine multiple different designs to create something unique and

21:30 your own particular style. I'm just showing you what is possible here when you do this. So in reality I wouldn't copy this step by step and I would be changing certain things out. I'd be

21:38 doing different design systems. But you can see how you can take any principle essentially whatever you imagine. If I wanted to do the AI of Duolingo we have just built it like in this video. That's

21:47 how freaking cool it is. We've got our own graphic style. We've got our own images. It is literally outrageous. But it does lead us onto a big problem, and that's the fact that design systems are

21:56 great. But if you don't have your own agentic operating system that combines designs with productivity and automations and AI and really unlocks next level capabilities for you, you're

22:10 leaving way too much on the table. So, the next thing that we need to do is learn exactly how to do that. in this video right