Turn Claude into a Design Genius... Just Watch

0:00I'm going to show you how to turn Claude into a design genius and destroy the AI slop monster forever with three simple but powerful techniques that will let you create a designer level quality across anything quickly and avoid any costly mistakes. And so if you haven't already, grab that beautiful coffee and let's dive straight in. Now the war against AI slop has officially begun and

0:26I invite you to join me in this crusade. So we want to turn Claude into a design genius and destroy AI slop. I'm going to cover the three very simple questions so you're going to leave the end of this video with something incredibly helpful that is going to lift the quality of your design. Number one is what actually is outstanding design and how can we enable Claude to use that to build some epic stuff together? Number one, number two, excuse me, how do we then use it on something real? Maybe a few different ideas. Then thirdly, how do we give Claude a systematic advantage which I am

0:58most excited about and I've been building some for a few days so I can show you exactly what I mean. Now here's one thing to bear in mind. This is explained by Mike is that they make bad designs because they've never seen what good or great design looks like. So we have to actually see what humans have done to understand excellent design in any capacity whether you're using the Claude app or you're using the Claude design ecosystem. Now before I show you the first thing, here are two things that you have to know. Write these on your forehead, write it on a sheet of paper. Why is slop so apparent? My

1:27theory on this is very simple. Number one is that it stopped but it didn't stop being recognizable. And by that I mean you'll find these certain tells that appear everywhere else. And there are literally five things that you'll notice. It's typography, imagery, hierarchy, color, spacing, some classic telltale signs. So if we just give Claude a prompt the same as everybody else, we're just going to get the same results as everybody else. So the question becomes how do we make Claude think like an actual designer and build something pretty beautiful. Now, level one is essentially an incredible website that has over 2,000

2:03designs of what excellent looks like. You've got Whisper flow, structured. We don't say Whispers Whisper flow on this channel, but we've got loads of different designs here. Look at these. Phantom, linear, whatever it is. Now, interestingly, let's say I click on Slosh as if for instance, I can see the website. This is gorgeous design. But not only that, what this website does with these 2,000 designs is it grabs this. It grabs an extended view of the design hierarchy. I've got an explain it on the left. I have the color palette. I have typography. I have everything all but everything I could ever want and more. The kind of thing that clients

2:38would pay so much money to have. And look, it's got other things down there. We can see Tailwind before, the CSS variables, uh design tokens you can basically grab and go as you want to. So, there are two things that we're going to do with this just to showcase how actually powerful this is. first of that is just to demonstrate its capability. And to do that, we're going to do something classic guys. Something that every design video you've ever seen has said the word. It isn't an orange, it's not banana, it's Apple. We're actually going to look at the Apple design system and as an example, show

3:10you how you can grab these Apple aesthetics and apply them to anything. And to do so, what I'm going to do one very simple thing. These guys are not a sponsor of the video or anything like that. I genuinely found them, thought it was epic, and I'll always just share this stuff with you. The Crocs that Oh, by the way, if you are new, my name is Jack. I built and sold my last tech startup with like a gazillion customers, and now I'm building my own AI startup, and I share the stuff here on the channel that actually works. Beginning with this really cool freaking design

3:37thing. So, I want you to head over to Claude, and essentially what you're going to do is the following. You're going to paste this in, and I'm going to give it a prompt like this. Hey there, I want you to use this design architecture to go ahead and build for me a beautiful website selling titanium protein shakes. Make it look gorgeous, and you can generate the images if you need to. Bam, and once you've done that, we're going

3:59to hit enter and let it work its magic. Beautiful, and now we've got the website here, which is cool. So, let me go ahead and refresh it. Now, I'm not expecting this to be perfect, but obviously you'll be able to see the design inspiration. The best designs come from iterations, but you can see and look, it's gone ahead, it's generated the protein bottles. I like this Bento style box, it's cool, it's done it on two lines. I think that's crisp. This I'd improve a little bit. Six fishes six finishes one room. This is really crisp. Bear in

4:24mind, I didn't give this a single image. It's done all of this off the prompts. Like chalk, sky, citrus, and batil, and graphite. I would probably go for citrus or sky. Let me know what you think down below. Again, we've got a closer look, a bit of a breakdown for flavors, which is cool, and you can just see the basics of this, and I I think this is, you know, based on the prompts I gave it, pretty cool, but you can see exactly the kind

4:46of effect that this design style has. Now, that is cool, but there is a second use case that's going to be even more applicable to you right now. And that is taking your existing website, for example, my Glider, which is the tech startup I founded. It was one of the AI creators, really happy about it. And let's say that I like the look of it, right? But maybe I want to level up a little bit. So, we've got a full design system behind us. What we can actually do is we come down here, let's find something like Linear. So, Linear is um such a good website. Let me show you

5:18this very quickly, cuz once you understand how good that website is, it will make perfect sense. It's classic dark mode says everything just kind of fits. Do you see what I'm saying? Everything's just got this beautiful crisp kind of like well is well balanced, it's got the right good color palette. I just think it's really interesting. And um here's the thing, knowing what's happening is one thing, but being able to articulate it is something else. Sometimes that we just know it looks good, but we can't explain it. And that doesn't help Claude. So, what we're going to do actually now is we're going to go over to this system

5:48here and we've got linear and we've got everything. Now, what we're going to do is literally copy this link and then head over to Claude and you're going to give it this prompt. I would like you to use the below website to look at this page and compare it with mine. I want you to be ruthless. We only like our AI's ruthless, guys, nothing else. And in understanding the design differences and how I can improve mine based on the aesthetics and everything. I give it my websites, I give it the website that I like. And then I say, "Hey, this is a design system. You can also go to

6:16Linear's website directly, utilize screenshots. I would like the output as a beautiful HTML breakdown. Keep it concise and simplistic." And look at what it gave me, guys. And I'm going to put the link down below for this entire skill so you can do this. Now, look at this. Top left we have Glido and Linear. This looks gorgeous. And look as I scroll down, you see this green line

6:34coming up? I love these little details. I'm a king of the little details. I love the details. It found three big gaps. The letter spacing is too loose. There's no elevation ladder. And also the hero art competes with the product. Interesting. Give me more detail. Now, what's so cool, it's even added like an interactive slider to show me the difference. Now, check this out. This is the Glido letter spacing. We're over here all by our lonesome. But you can drag this along and see this is between

7:01the two values. That's where Linear is. You can see the difference. Little small details that it's picked up on because we not we may not be able to articulate [clears throat] what is the difference here. Like, "Oh, it's actually the corner radius." Okay, cool. "Oh, it's actually the line height. It's the letter spacing. It's all these small details. It's the amount

7:18of white space we have. It is hierarchy. It is um so many different things it could be." And this just breaks down basically section by section, shadows, accents, frequency, border radius, vocabulary, the values side by side, the display weight. And it's incredible. And we've built a design system for Glido that we use on presentations, on our website, on our app. And this is going to be so helpful for us. I literally sent it to my team. I was like, guys, we have to look at this immediately when I got this. So, I'm super excited that we can get these insights. You can copy the hacks by clicking it. This is the design

7:51the glider design palette. It is incredible. And you can do this for your own brands. And it's not to say that linear is the peak of design, but it is a billion-dollar company and their website is gorgeous. So, one action step is find the website that you think are fantastic on this website here and run that comparison between just a couple of them. Um and these guys have done a really good job. So, I I I think this is a great resource to share and have a little play around with. And obviously now that moving out to different page types profoundly helpful. But obviously, websites are just one dimension of

8:26design. The second question really becomes, how do we use this for other things? Well, to do that, I'm going to show you one thing and it's using the most powerful core design technique that I have ever come across. One of the most powerful ones I've seen. And it's called I called it the design loop. It was called the gauntlet loop by gentleman who discovered it. I'll put a video link on screen here so you can go and check that out. Such a cool video explaining how this works. Now, the idea here is essentially that we get Claude to build something fantastic. Now, this is a resource here which is amazing and it's

8:58been shared by a guy called George Harley. So, thank you for that. Who Who realistically found all these different beautiful email HTML campaigns basically. You can see loads of big brands in there like Apple announcing a launch for something. You've got Figma. You've got all these different brands. But there's a problem. And the problem is the design is one thing, but how do I get from an image to something that I can actually use? Well, the answer is the design loop. So, what we're going to do here for example is find a design that we think is great. So, let's say we like this Apple one for example. You

9:29could just literally come down. And all we're going to do here is just literally screenshot this. Okay? Like that. Badabim badaboom. Come down and grab that one design. Come down, and then hit clipboard and just literally copy it. And you can post it in. So, here is the Apple one that we selected, which we like. And I'm just going to say, "Hey, use the {slash} design loop." The way

9:47that the design loop works is simple. Effectively, and I'll put the skill as well down below so you can grab it. It basically you provide it with a benchmark, which is "Hey, I want you to design like this." And what happens is Claude creates a couple of different agents. One is like a critic, which essentially goes round and round It goes through various different stages and levels, all validating it. So, for example, one might say, "Does it hit the proof?" The second critic might say, "Hey, is the design great?" And the third critic might be something like visual impact. So, it creates three different sub-agents, and it basically

10:19goes round and round the loop until it hits the desired mark. Technique is one thing, output is everything. Go ahead and recreate this product launch for me in HTML such that if I were to paste it into an email, it would look beautiful. This is for the launch of Glido on Windows. As you can see, go ahead and grab this. I want you to pay close attention to the luminosity divide the energy. So, this is what I gave it. This is what it gave me back in one shot, just like this. I said I want in GWD 26, Glido Windows Day, November November 12, 2026. That is incredible that it did

10:49that on one simple shot, and this is HTML, which means that we could share that with our audience and do whatever we want to. That's how powerful this design loop is. And from this, we could build out our own design systems or anything that we like. And then another example of this is actually Anthropic. So, if you check this one out here, uh this one here, Claude welcomes Claude Platform. So, I said, "Hey, do the same thing with this one." And then we got this. Kastle, welcome to the Kastle Platform. And it even created for me an Anthropic-esque um basically orange signal, get your API key. And again, not that the idea isn't

11:23to just take this, but you can just see how powerful it is. Like, if you say, "Find out what works about this, but I want to change ABC, or look at these four things as inspiration, and adapt You can now have these assets fully built using Claude in this new system. But the big issue here is that a HTML email is one thing, but if we can't actually send it, then we have a big problem. So, what I want to do is actually show you how you can actually even action it. Say I wanted to send this to somebody. You're going to shoot it over to Claude code. And then

11:48effectively, we're going to just draft this and add it to an email very quickly. And by the way, level three, I think is actually the most powerful of all these systems and you'll see exactly what I mean in a sec. But let's say that I want to go ahead and send this email. I might just say, "Hey there, I want you to use my Zapier connection to basically grab the HTML that we just created and create a draft email to myself or send it to myself, please. Well, and just add a random subject line." Now, the reason why I'm using Zapier for this is my authentication lamp. Let me explain what

12:17that means. So, you can, inside Claude, connect to all the tools, but the problem is you need to do this in every single app in CodeX and then anti-gravity. One of the cool and also Hermes agent, right? If you connect to Zapier, you can use all these same things. And the other thing personally that I like is the fact that I can access things like school where my community is. We're doing a meetup, by the way, in Budapest in 2 weeks. We'd love to see that. Grab a beautiful coffee in person. So, what I'm going to do now is use the Zapier integration to send something. And then, guys, I get

12:44this email here and look at that. That is freaking gorgeous. And does the button work? Let's just see if it does. I click on it and what happens? But I mean but a bum, we have the community with lots of incredible stuff happening. I'm really impressed by that. You can build it and you can connect everything. I'll put a link for Zapier down below so you can check that one out as well. But it does take us very nicely onto the third level that I am most excited about. Now, what is level three? Level three effectively asks the question, can

13:08we give it an environment to work in? Can we have one engine, one box? And by the way, if this sounds like I'm speaking Spanish, I'll put a link down below for the full Claude code masterclass that goes through all this stuff, design systems, building Claude, learning how to use Claude, all its features, websites, memory systems, everything you could possibly imagine, including all the stuff that I just don't share on YouTube. And also, we've got meetups where incredible stuff happening so it's very, very well worth checking out. Now, this is level three

13:33and that is a design operating system. This is one that I built inside my own Claude code operating system. Obviously, we've got our memory systems, we've got our chats, we've got everything. But the design OS is really cool and I'll show you why because a large part of design is the ability to generate images and videos. And what this lets you do is pick the platforms to Higgsfield, KAI, Open Router, OpenAI, um different sections if you want to and generate images. For example, if I chose one here, I could say something like a beautiful um liver and white Springer Spaniel with a protein shake next to

14:03them, okay? I just have to drop that in there. Let's go down and select something like, I don't know, 16 by 9, 2K image is fine. Let's do two and you can pick where that's happening and also the model. So, I think good for Nana Banana too, which is cool. And the way that I built this, by the way, is actually shows you how many credits or how much it's actually costing you for each one you do. So, you can generate it

14:24and then it'll go ahead and build that. And just like that, I have a beautiful Springer Spaniel with a protein shake next to them, which I think is really cool. Pea whey protein, I think this is so freaking sick and I got another one here which looks absolutely gorgeous. I love that dog. But let me show you the coolest thing and the reason why this is so important. The idea of the Claude code operating system, okay, we know it does logical stuff, right? You can chat with it, you got a dashboard, it shows your usage, how much money you're spending, it tells you how you can

14:49improve because it reviews your chats every day locally and tells you new skills you could use. It's got like a design in things. I covered a lot on the channel, knowledge graphs, all that sort of stuff. Here's why the design thing is so powerful, right? You have this library here and this is a feature I wish Apple added but didn't. If you click on library, you can actually see

15:07every single image on your own computer. And what I really love about this is I can come down and type the thing. So, I type in for example, burger, right, into here, it will show me every image of a burger on my computer. Not just like is burger in the metadata, but also I indexed it with a Karuchi model so I can easily find my stuff. Then these are all the burgers I have. You'd think I love burgers, right? But this is just so freaking helpful. And now I can click on this for example, and I can just copy for the chat. And now if I paste this

15:36into a browser here, I've got it. So I can use this anywhere I want to, copy it like this, download it, do anything I want. It is just such a lifesaver. I can filter by images and videos. Magic and magic scan updates it. So this idea of having your own design operating system running locally that has access to all of your images, videos. You don't have to spend hours thinking, "Did where do I find this, find that?" Is really, really, really helpful. But the other cool thing you can do. So for example, if I go 4K AI here, I've got 992. You can do these design systems and it just

16:05makes generating things really cool. So check this out. You see this little thing down here? If you click on this, you can actually create a new style recipe. So let's say that I have my YouTube channel, right? And I want to do a consistent style. And so let's say there's like a format that I like. Let's say I like this uh thumbnail style format. Well, what I can do with a design system is explain it. I could say, "Jack thumbnail." Okay, or Jack design. As you can see, I built one down here. And so this is a description of what it is. And then you can literally

16:29just add images here for any style that you want to, which is really handy. And then you have this thing here. So for example, if I come off this and show you, if I just come down here and I click on Jack design, what this is, as you can see, is basically images of me with some descriptions. And I could say, "Hey, replace the thing in the image

16:45with a giant protein shake." All right? Really easy. Let's do two images, 60 by 9, 2K. That's going to cost me 12 cents. I just generate that and then it will go ahead and build it for us, which means that if you have a design style for your business, you want to integrate it into your websites, you want to do anything, this just makes it way easier. I built this for the community because I I love it and I actually want to go ahead and use this. And then just like that, we see it coming in. Now it's got design with the giant protein shake. This is a

17:12thumbnail of a video I have coming out about half an hour, which is just really handy. I just think that's so helpful to do. So if I'm going to get my consistent thumbnails and if I just want to change one section, I just literally select Jack design or it could be Jack thumbnail style one or Jack sky image or whatever I want. And then we have the second design which looks epic and I just find it so helpful to be able to tag in different services like Hicks field and open AI and being able to access my own current library is so beneficial locally and I'll put a link

17:39down below if you want to grab this OS in the community alongside all the other bells and whistles. And so now we've learned how to turn Claude into a design genius. The next thing that we need to do is learn one of the most powerful skills and that is the design lip which we're going to do together in this video

17:54right here.