Turn Claude into a Design Genius... Just Watch

0:00 I'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 designer level quality across

0:14 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:26 I invite you to join me in this crusade. So, we want to turn Claude into design genius and destroy AI slop. And we're going to cover three very simple questions. So, you're going to leave the

0:36 end of this video with something incredibly helpful that is going to lift the quality of your design on. Number one is what actually is outstanding design and how can we enable Claude to

0:45 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

0:56 systematic advantage, which I am most 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 was

1:04 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

1:14 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

1:23 your forehead. Write it on a sheet of paper. Why is slop so apparent? My theory on this is very simple. Number one is that it stopped looking bad, but it didn't stop being recognizable. And

1:34 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,

1:42 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

1:53 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 designs of what excellent looks

2:05 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

2:14 is. Now, interestingly, let's say I click on slush as a 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

2:24 it grabs this. It grabs an extended view of the design hierarchy. I've got an explainer on the left. I have the color palette. I have typography. I have everything all bit everything I could

2:36 ever want and more. The kind of thing that clients would 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.

2:46 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. And the first of that is just to

2:56 demonstrate its capability. And to do that, we're going to do something classic, guys. Something that every design video you have ever seen has said the word, it is an orange, it's not

3:04 banana, it's apple. We are actually going to look at the Apple design system and as an example, show you how you can grab these Apple aesthetics and apply them to anything. And to do so, we're

3:16 only 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 the stuff with

3:24 you that crushes it. Oh, by the way, if you are new, my name is Jack. I built and form a last tech startup with like a gazillion customers, and now I'm building my own AI startup, and I

3:32 actually have a stuff here on the channel that actually works. Beginning with this really cool freaking design thing. So, I want you to head over to Claude, and essentially what you're

3:40 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

3:50 website selling titanium protein shakes. Make it look gorgeous. And you can generate the images if you need to. Bam. And once we've done that, we're going to hit enter and let it work its magic.

4:01 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.

4:10 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 on two lines. I

4:19 think that's crisp. This I would improve a little bit. Six fishes, six finishes, one rim. This is really crisp. Bear in mind, I didn't give this a single image. It's done all of this off the prompt.

4:29 Like chalk, sky, citrus, amber, teal, and graphite. I would probably go for citrus or sky. Let me know what you would think down below. Again, we got a closer look, a bit of a breakdown, four

4:38 flavors, which is cool. And you can just see the basics of this. I I think this is you know based on the prompt I gave it pretty cool but you can see exactly the kind of effect that this design

4:48 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, mine glider, which

4:59 is the tech start I founded with some of the AI creators. Really hyped 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

5:08 system behind this. What we can actually do is if we come down here, let's find something like linear. So linear is such a good website. Let me show you this very quickly cuz once you understand how

5:20 good their website is, it will make perfect sense. It's classic dark mode SAS. Everything just kind of fits. Do you see what I'm saying? Everything's just got this beautiful crisp kind of

5:29 like well it's well balanced. It's got the right a 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

5:37 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

5:47 to go over to this system here 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

5:54 prompt. I would like you to use the bel website to look at this page and compare it with mine. I want you to be ruthless. We only like our AI ruthless guys, nothing else. And in understanding the

6:04 design differences and how I can improve mine based on the aesthetics and everything, I give it my website. I give it the website that I like and then I say, "Hey, this is a design system. You

6:15 can also go to Line's website directly. Utilize screenshots. I would like the output as a beautiful HTML breakdown. Keep it concise and simplistic." I look at what it gave me, guys. And I'm going

6:26 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

6:34 green line coming 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.

6:44 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.

6:55 This is the glider letter spacing. We're over here all by lonesome. But you can drag this along and see this is between the two values. That's where linear is. So, you can see the difference. little

7:05 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.

7:13 Oh, it's actually the line height. It's the letter spacing. It's all these small details. It's the amount of white space we have. It is hierarchy. It is um so many different things it could be. And

7:23 this just breaks down basically section by section shadows, accent, frequency, border, radius, vocabulary, the values side by side, the display weights, and it's incredible. And we've built a

7:36 design system for Glider 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

7:45 this immediately when I got this." So, I'm super excited that we can get these insights. You can copy the hex by clicking it. This is the design, the glider design palette. It is incredible

7:54 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 billiondoll company and their website is gorgeous. So one action step is find the website

8:06 that you think are fantastic on this website here and run that comparison between just a couple of them. Um you these guys have done a really good job. So I I I think this is a great resource

8:17 to share and have a little play around with and obviously now they're moving out into different page types profoundly helpful. But obviously websites are just one dimension of design. The second

8:27 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 cord design technique that I have ever come across.

8:38 One of the most powerful ones I've seen and it's called I called the design loop. It was called the gauntlet loop by a gentleman who discovered it. I'll put a video link on screen here so you can

8:46 go and check that out. Such a cool video uh 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

8:57 amazing and it's been shared by a guy called George Harley. So, thank you for that. Who who realistically found all these different beautiful email uh HTML campaigns. Basically, you can see loads

9:07 of big brands in there like Apple announcing a launch for something. You've got Figma, you got all these different brands, but there's a problem. And the problem is the design is one

9:17 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.

9:27 So, let's say we like this apple one, for example. You can just literally come down and all we're going to do here is just literally screenshot this. Okay? Like that. Bada boom, bada bum. Come

9:35 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

9:43 going to say hey use the for/design loop. The way that 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

9:54 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 around in a loop. It

10:05 goes through various different stages and levels all validating it. So for example, one might say, "Does it hit the brief?" The second critic might say, "Hey, is a design great?" And the third

10:14 critic might be something like visual impact. So it creates three different sub aents and it basically goes around in a loop until it hits the desired mark. Technique is one thing, output is

10:24 everything. Go ahead and recreate this product launch for me in HTML such that if I was to paste it into an email, it would look beautiful. This is for the launch of GLD on Windows as you can see.

10:32 Go ahead and grab this. I want you to pay close attention to the luminosity, the vibe, 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 went

10:42 in GWD26 glider windows day November tw November 12, 2026. That is incredible that it did that on one simple shot. And this is HTML which means that we could share that with our audience and do

10:56 whatever we wanted 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

11:07 anthropics. So if you check this one out here, uh this one here, Claude, welcome to Claude platform. So I said, hey, do the same thing with this one. And then we got this cursel, welcome to the cast

11:15 platform. And it even created for me an anthropicesque um basically orange signal, get your API key. And again, not that the idea isn't to just take this, but you can just see

11:25 how powerful it is. Like if you say, find out what works about this, but I want change ABC or look at these four things as inspiration and adapt it. You can now have these assets for you built

11:34 using cord 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

11:44 you can actually even action it. Say I wanted to send this to somebody. You're going to shoot it over to cold code. And then effectively, we're going to just draft this and add it to an email very

11:51 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 second. But let's say that I want to go ahead and

11:58 send this email. I might just say, "Hey there, I want you to use my Zapia connection to basically grab the HTML that we just created and create a draft email to myself or send it to myself,

12:10 please, and just add a random subject line." Now, the reason why I'm using Zapia for this is my authentication layer. Let me explain what that means. So, you can inside Claude connect to all

12:20 your tools. But the problem is you need to do this in every single app in Codeex and in anti-gravity. One of the cool and also Hermes agent, right? If you connect to Zapia, you can use all these same

12:29 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 meet up, by the way, in Budapest in 2 weeks. Would

12:38 love to see you there. Grab a beautiful coffee in person. So, what I'm going to do now is use a Zapia integration to send something. And then, guys, I get this email here. And look at that. That

12:46 is freaking gorgeous. And does the button work? Let's just see if it does. I click on it. And what happens? Bada bing, bada boom. We have the community with lots of incredible stuff happening.

12:53 I'm really impressed by that. you can build it and you can connect everything. I'll put a link for Zappy down below so you can check that one out as well. But it does take us very nicely onto the

13:01 third level that I am most excited about. Now, what is level three? Level three effectively ask the question, can we give it an environment to work in? Can we have one engine, one box? And by

13:12 the way, if this sounds like I'm speaking Spanish, I'll put a link down below for the full Claude Code Masterass. It goes through all this stuff, design systems, building

13:19 cordling, how to use cord, 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

13:28 got meetups. We got incredible stuff happening. So, it's very, very well worth checking out. Now, this is level three, and that is a design operating system. This is one that I built inside

13:37 my own cloud operating system. Obviously, we've got our memory systems, we got our chats, we got everything, but the design OS is really cool, and I'll show you why. Because a large part of

13:45 design is the ability to generate images and videos. And what this lets you do is pick the platform. So Higfield, Kia AI, Open Router, OpenAI, um different sections if you want to and generate

13:55 images. For example, if I chose one here, I could say something like a beautiful um liver and white Springer spananiel with a protein shake next to them. Okay, I just drop that in there.

14:05 Let's go down and select something like I don't know 16x9. 2K image is fine. Let's do two. And you can pick whereabouts happening and also the model. So I think go for nano banana 2

14:16 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 and then it

14:25 will go ahead and build that. And just like that I have a beautiful spring with a protein shake next to it which I think is really cool. Peakway protein. I think this is so freaking sick. And then got

14:34 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

14:42 system, okay, we know it does load cool stuff, right? You can chat with it. You got a dashboard. It shows you your usage, how much money you're spending. It tells you how you can improve because

14:50 it reviews your chats every day locally and tells you new skills you could use. It's got like a bazillion things. I've covered it a lot on the channel, knowledge graphs, all that sort of

14:58 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 every

15:07 single image on your own computer. And what I really love about this is I can come down and type for things. If I type in, for example, burger, right, enter here. It will show me every image of a

15:18 burger on my computer. Not just like is burger in the metadata, but also I indexed it with like a really cheap model, so I can easily find my stuff. Then these are all the burgers I have.

15:29 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 into a browser here,

15:37 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.

15:47 So this idea of having your own design operating system running locally that has access to all of your images and videos. You don't have to spend hours thinking, dude, where do I find this?

15:56 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 Nan 2. You can do these design systems and this just makes

16:06 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

16:14 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 on design

16:21 system is explain it. I could say Jack thumbnail, okay? Or Jack design. As you can see, I built one down here. Enter this as a description of what it is. And then you can literally just add images

16:30 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

16:38 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 with a giant protein shake." All right, really

16:49 easy. Let's do two images, 16x9, 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

16:59 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 communities because I I love it and I actually want to go ahead

17:07 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 thumbnail of a video I have coming out in about half an hour, which is just

17:15 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 could be

17:23 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

17:32 Hicksfield and OpenAI and being able to access my own current library is so beneficial locally. And I'll put a link down below if you want to grab this OS in the community alongside all the other

17:43 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,

17:52 which we're going to do together in this video right