0:00 More design can now build beautiful websites that don't look like AI slop, but only if you use the right systems that are now available. And in this video, I'll show you this simple and new system [music] 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 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 cuz everybody gives it the same prompt and these models are spitting out 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 like variety. This is why I'm making this video. Now, you can spot it in a
0:46 second. So, let's understand what the slop monster is before we understand what the solution actually is. It's the same typeface. 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 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 that this itself is an indigo, the irony is not lost on me, but purple is the color I wanted to see gradient on this one. Three feature cards everywhere, it's always consistently three. Have you noticed that? Over time, it's three. Everything's got the same round on it, the frosted glass, and a headline that just sounds like AI slop. People don't even change the text. So, the first level in destroying the AI slop monster
1:32 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 know what great design is. Now, we can look at different websites to this. One fantastic example is this. I mentioned it on a previous video. This, guys, is like Willy Wonka's chocolate factory for gorgeous websites. I mean, look at this. We've 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 those 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, 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
2:17 over to this website here. I'm going to put all the links down below. Anytime you get any free resources, and I give away all the game for free, it is the second link in the description, which says free resources. I'll take you free through to a free 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 access everything 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 coffee. Mm. Don't forget to tip your barista, guys. And what we're going to do is the blog. We'll come down, and we're going to paste in this here like so. And then you're going to say, "I would like to build a beautiful website. I've 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
3:04 me three examples 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. 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 Duolingo. 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 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 popular, which is awesome, and you can see the most popular ones
3:50 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 come down for education, for example, and then I can see all of the different educational ones, if I want to. But, you can see it's gorgeous, lots of optionality. So, we have Duolingo, which I think is excellent. We have Quizlet, which is okay, I think. And then we have Slush. Slush is very finesse-y. I think the most relevant of them all, obviously Slush is very cool, very fresh. I do love the way that the kind of apps bleed in. It's kind of got good scrolling animations. And then Duolingo itself here just has a beautiful thing and it's got these like individual graphics, which I think look fantastic. So, what we're going to do is go ahead with Duolingo, cuz 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 below prompt, which is this. "Hey there,
4:37 I would like you to look at this design reference for Duolingo. I'm going to build an app that teaches people AI. I would like you to keep everything else Essentially, we're 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 system to build me one for something where basically I am teaching AI to individuals. I am the Duolingo of AI, basically." Come down and just literally drop in the link to Duolingo. And if you 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 Xtra. You can also do High, 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?" Uh why don't we go ahead and call it Neuro? That's an interesting idea. That could
5:23 be cool. Uh promptly. Promptly sounds a bit lame. Let's go for this one. Cool. I'm going to say we can do Duolingo green. Let's just keep it as it is, I 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 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. Number one, this is Draft one. As you can see, it's got that very Duolingo-esque, like get started, very cool. We've got the buttons, free, fun, effective, and we've got some kind of placeholders there. 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 essentially is our entire design system.
6:09 We come down, log in 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 building out the apps, you know these mechanics, like I'm just showing this as an example. In reality, you wouldn't just use Duolingo's, but you get the idea of how powerful this is. Email, password, log in. Love this. It really does crush it and get all different game Excuse me, the game mechanics. I need more coffees. This is crazy. Right spot dogs. As you can see, it's got all 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 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's 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 or 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 Higgsfield for this. You can use 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 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 Higgsfield and the models within Higgsfield to essentially create a gargantuan 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 that in, and say, "Hey
7:42 there, I want you to connect to the Higgs field 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 Higgs field within side Claude code. And what we're going to do is combine it with incredible prompts. So, I'm going to go ahead and grab this from I believe it's in the vault. Come down and we're 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 and grab the skill. Again, I'll put this uh in the same resources in the second link under the description. It is amazing. It's called the gauntlet loop. I called it the design loop. It is absolutely 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 below prompt. So, I'm going to actually paste in my design loop, okay? Which I've already created as a skill. So, if you haven't
8:28 done this, just paste this in and say, "Hey there, I want you to turn this into a skill." All right? Then basically, come 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 up the design loop. Now, 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 ruthlessly compare this website with Duolingo's. Specifically, I want to bring this to life. Duolingo has loads of beautiful animated graphics. It's got a distinctive graphic style. I want you to go ahead and create a unique graphic style with unique characters um in the kind of Duolingo style, but obviously make it unique so it's specific to us.
9:14 And I want you to then go ahead and use Duolingo 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 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, 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 would call the gold standard. Now, I want you to go ahead and use the Higgs field CLI to generate the unique graphics and also the unique videos and make sure you're using Seed Dance 2.5 for the best video generations. I can
10:01 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 all aspects of the website to bring that personality out. Now, 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 the design loop itself says, "Hey, this is our website." And you give it a gold standard. And essentially what it does is the the model is going to try and recreate it. And it'll have various judges that are saying, "Does this fit 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, great." You ask it five times, it finds five different reasons. So, the design loop system
10:48 helps us cut a lot of that out. So, since I'm generating unique video assets, I'm going to go with a 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 walla walla bing bong, which is code for basically doing the full website. So, what should our character cast be? So, Duolingo has Duo the owl plus a cast of humans. We need our own equivalent that reads as AI without being a cliché robot. I completely 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 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:33 example, here I've said I want to do a shark as our core thing. Kind of like Gymshark, but our robot version. We'll call him Robo shark, so we could probably play around with the kind of oceanic and land theme, bringing different robotic mechanical versions of animals to make it kind of appear appealing, but clear that it is AI, and then send that one off. And then once 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 robot crocodile, and I actually settled on a different design idea because with basically could all come back and say, "Hey, do you want this? Do you want that?" And I was like, "I actually think this design style is really cool." So, check this out. This is the website with the loop and everything we've got here. One lesson 5 minutes, we have this interactive thing here, and you can feel this do a lingo. That wasn't a real question, by the way. That was a test. Although, that one was legit. Going to
12:19 come down, we've got this beautiful interactivity here, built on how people actually learn. This is gorgeous. Did it 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? 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 beautiful website building using this exact system. And all we did is link in Higgsfield CLI for the image and video generation. It create various different images and various different videos. But, that links very nicely onto the next level for this. And what is it the next level beyond this and what once we've done the image and video generation, we have to talk about
13:04 typography in our 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 as for instance, fonts change everything. It's like the biggest difference. I remember when I did my corporate job, when I did my big strategy job before I left to become an entrepreneur a few years ago, and I always remember any doc I got, the first thing I did is control A, change it to Avenir or just any font I could get my hand on in that terrible Microsoft Word that I I was 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 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
13:51 to integrate. I really love fontself.com. They're not a sponsor or anything. fontself.com because it actually shows you what fonts look like in real life situations. Fonts in use is another really good example of that. You can see like, "Wow, this looks 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 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, explains the construction rules, it shows you the asset inventory. Again, this is all completely unique generated imagery. Uh it shows you kind of like a model sheet that you can follow with an ideal color palette. But beyond that, if you actually scroll down, you can see that
14:36 what it does is has all these different fonts you can choose from. And you can actually come down and select these. 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 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 kerning, 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 change that if you wanted 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 brilliant font. I think it's worth its weight in gold. But there are so many free fonts that you can play around
15:21 with, and it will honestly just elevate and lift the quality of any design that you're doing. Oh, 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 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 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, the different the different things that we offer here on Neuro. I mean, this is got 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 it comes to copy, it genuinely
16:08 really is everything. It's super duper important. It changes It really just changes what it things are perceived. Now, one skill I did share as well, and I'll share this skill with you down below 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 Cloak Code Masterclass that will 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 entire Agentic 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 down below. It'll 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 physically looks like because it is
16:54 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 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 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 GPT 5.6. We do this because Claude is so prolific, its greatest strength has in a sense become its biggest weakness cuz everybody's using it, right? So, GPT 5.6 just makes it sound a little more human rather than Claude-esque. 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
17:40 brands that you're using? So, for example, if I'm building a website cuz the point of the website is to get customers, right? If I'm building a website on a SaaS, let's look at the top five SaaS companies in our niche, and what 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, not only is it got the AI-ification, it's it's adjusting the sales copy for you as well. It has a ban list for words, certain ways of doing it, runs it through many different things. The five big principles are the below, and I say this because I genuinely matters to me that you crush and you can apply these principles anyway. Don't make me think. One of the best books I've ever read. Whole idea is you want basically system one thinking, not system two. In other words, when I'm
18:27 on your website, I shouldn't have to engage my brain. I it should just roll over me. And that's the 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 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, and this is from Daniel Priestley's marketing system. It's very, very cool. Specific assignment 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 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 I've got a specific name for it, but the height is it like everything fits in one screen view, and it's got one point. And
19:14 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, 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, 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 minutes at a time. Everyone uses AI, almost nobody is good at it. Interesting. You go here, Nura is 5 minutes a day of real prompting. Problems marked the second you answer, you stop guessing at what works. Beautiful. Get started start your first lesson is specific. And again, and it just comes down and explains everything it's doing. It's really really freaking impressive. Like check this out for example, instead of saying 5 minutes
20:00 wherever you are, 5 minutes on the train counts. That's so good because now I've got a visualization of like, hey, I'm on the train. I'm doing something that actually matters. It's really really impressive. Instead of go further with it when 5 minutes isn't enough. Instead of get started, start your first lesson. So, there's like a million different things it could down here. I think it found actually 28 different changes that it went ahead and moved through this. I'm also going to be updating this to apply like more logic as well, which I think it'd be really cool to level up the system. And the other thing that the system did as well is actually go ahead and build a new design system. So, you can see 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 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,
20:45 don't underestimate the power 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 interactivity. And bear in mind, we could go back and forth to make this like level 10. I just want to show you what when you combine the best in class prompting, you know, cool design, the right kind of image and video generation like we use the Hexfield in this example. Just the kind of thing that you can get that doesn't feel like AI slop. And so, what's also important to bear in mind is that any fonts 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 locked and secure with that. Then also, when it comes down to design, I used Duolingo as an example here. In reality, you want to combine multiple different designs to create something unique and your own
21:30 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 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 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 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 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
22:15 video right here.
