Every Level of Claude Design Explained

0:00 I have spent hundreds of hours designing in Claude and I'm going to take you through the seven levels of Claude design, what to expect at each level, the exact costly mistakes to avoid, and

0:12 how to unlock the next one so that you can design anything, websites, graphics, decks, full apps, and turn it into a consistent system that you can reuse in minutes, even if you've never designed

0:25 in your life. So, with that in mind, grab that beautiful coffee and let's dive straight in. So, there are seven levels to Claude Design. And by the end of the video, your friends will think

0:35 you're some kind of design genius that you've got a team of designers locked up in your basement pumping this stuff out. We have seven levels. And each level, I'm going to show you exactly what

0:45 you're going to be saving. And the next one is actually stronger than the previous. So, they all build on each other. Now, level one is what we call the plug and go. At this level, you're

0:55 actually using claw design. Now, if you're using core design, you're going to open up the claw.ai online. You come to the bottom left and you click design. Now, once you do that, you will see your

1:04 design command center. Now, a level one user will basically just give it a prompt like, "Hey there, could you go ahead and just create for me a UI markup for a t-shirt company that produces

1:14 teddy bears." You can click on UI mockup and just do this. No designer system. Go ahead. You pick the model. Again, Fable 5 is the most powerful of all the models. Of course, you can scale it down

1:25 if you want to, as well as the effort. And then just send that on its way. And by the way, if you're new, I'm Jack. I built and sold my last tech startup with like a gazillion customers. Now, I'm

1:33 scaling my own AI startup, and I share here the stuff that actually works. And if you love being at the cutting edge of stuff like design, just drop me a like uh and a subscribe down below. It really

1:43 supports the channel out and helps me build beautiful videos just like this. So if you look at this here for example, we'll always get some questions. So basically in this scenario, you're going

1:52 to go ahead and and basically describe it. So I could say, "Hey, a t-shirt with teddy bear designs. What kind of UI is this? Decide for me. Desktop web is fine. Of course, you want to be mobile

2:01 optimized. Who's the target customer?" And again, you know, Claude Design will actually guide you through this process. So brand name, we'll just say this is Teddy, which is a beautiful name. As you

2:12 can see, I'm wearing a beautiful teddy. I love my teddy bears. And you just answer the questions. But what is cool is that you can add Legos if you wish. We're just going to go through click and

2:20 use this like a typical individual, warm and cuddly. Um, and we're going to say this is going to be exploring the idea. And when you're done, you click continue in the bottom right. This is level one.

2:30 It's basically using the chat interface with no bells and whistles. Extremely basic. But if you're watching this video right now and you're using core design like this, you are still ahead of

2:41 genuinely 99.9% of people who don't even know that claw design exists, let alone are using it. And as you can see, Claude has come back with a website. It's actually used an existing color palette,

2:53 but we would all agree that at the moment it needs a little bit of work, but as you can see, it's still better than not using an actual design system at all. And in the bottom left, we can

3:02 improve this. Now, the key unlock for escaping level one is understanding that the first site it gives you is going to be the same as everybody else if you're using the same systems and the same

3:12 prompts. You're going to get generic purple gradient slop unless you give it specifics. Now, I've already shown what that looks like, but just so you know, you can still save hundreds of dollars

3:21 if you went onto Upwork to buy this website or anything like that. People are selling websites for hundreds, thousands of dollars that you can build with Claude Design. So, you're already

3:30 saving money if you're using the system. But if you actually want to build like a designer, you need to leverage the system inside level two. Now in level two, the whole idea is that we actually

3:39 brief this like our design direct. We give it not only a very specific brief, but we're going to give it design inspiration that's going to be specific for our project. Think of it like having

3:51 a designer, which is going to be our guy here. Instead of saying, "Hey, just build me this thing." We're going to give it really specific instructions and we're going to show him beautiful

4:00 designs that we found elsewhere so he can use that to build something incredible. So in this example, let's say that we were going ahead and building a mobile app design. I click on

4:08 this. I'm going to remove this system for the moment and remove it. And let's say the prompt is a habit tracking app kind of like notion and something that looks gorgeous. Now before we actually

4:20 go ahead and begin the prompt, what we can do is search different websites for inspiration. So, for example, Pinterest is a brilliant one that can show you loads of different apps and you can find

4:29 one that you think really resonates with your style. I mean, you go even further. Look at these beautiful designs. I mean, this is so slept on. It really is crazy. Look how beautiful these designs are.

4:39 So, I really like the look of this one, for example. And again, I can just go through, click on the images, and get inspiration. So, let's say we like the look of this. You can maybe take a

4:47 screenshot of that, come back over to Claw Design, and drop it in. Great. And then you can check other websites like awards is beautiful for basically award-winning websites. This is great

4:56 for websites. You have Godly um which is really cool. Godly is fantastic for different designs that you think are really crisp. Again, it all really depends on the thing that you're

5:04 building. Mobin is another really good one as you can see. Beautiful designs. And also uh Landbook. I'll put a link down below for you so you can go ahead and grab these ones. Let's say we like

5:13 this style here. I'll say use the below uh image as a kind of reference to build this out, please. I just want uh one single page. and then come over and click submit. Now, there are two parts

5:22 to level two and I'm going to show you them. Level one is a design design inspo, but level two is very interesting. Now, look at this. I can see it before our very eyes building out

5:31 this thing in front of us. And I love all of this design stuff. Design is the single most underutilized aspect of any creation. It really does affect perception and what people pay for

5:44 things. And how you do anything is how you do everything. Which is why I think design is so incredible. And if you just look at this, can you see the difference between giving it a prompt suggestion

5:54 and not? This is with if I come back up here to show you what we get with no reference. And this is something that we get with a reference, which is incredible. Now the second part of level

6:03 two, the individual at level two is somebody that understands that just one section is not enough. You have to iterate as with anything. So I might come down and give it some further

6:14 feedback. So I could say, for example, again, it's even interactive, right? Which is cool. So I might say, hey, when I've selected all the buttons, I would like there to be confetti. And I would

6:23 also like to check out different screens. And each screen should have a different color at the top. So yellow might be one, blue could be another, and then green. And come off. And then just

6:33 send that one off. And for sure, make sure that you go back and forth with cord design in a conversation so you can be super happy with the result. And then momentarily we scroll down. I click on

6:44 metate. And do I see confetti? I do, which is great. And let's have a look at the different pages. I mean, this is really good. I'm very impressed with it. So, one thing I might do is change the

6:53 contrast between the black and the blue. But otherwise, I think that this is a really good start. And you can see the core principle here is you need to keep on iterating. And it just sounds like

7:03 I'm speaking Spanish. I'll put a link down below for the full Claude code master class that takes you through design systems, setting up Claude, how you can level up, use power features,

7:13 build beautiful websites and stuff that I have never shared online, including you get access to the full Claude code agentic system which has as well inside it. I'm launching very soon a design OS.

7:25 You're not going to want to miss that. It will get you so much further ahead. And the rule for level two is never oneshot it. You direct and then you go ahead and then you can iterate it. And

7:33 again, this one is going to save you more money just simply because the quality of the design is way better. And if you take anything away from this video, just know that iteration and

7:42 design reference what are like massively underutilized. But it does bring one problem to the table. And that's idea that building these oneoff is not only slow, but it's not replicable, which is

7:53 why at level three, we begin the process of a design system. Now, think of it like this. If you don't have a design system, it's like having a different design contractor for every project you

8:05 do. Think of how timeconuming and wasteful this would be. With a design system, we have one designer with one really clear set way of doing things, which saves you time and makes

8:15 everything so consistent. Now, let's say for example that we have an app that we really like the look of. I mean, look at this. We've got a month of wins. I think this is looking really sharp and we did

8:24 that just with one prompt. What I can do is come down to share. Now, cool little hack. I can publish this as an artifact. If I do this, it will give me a public URL that I can share with my team and

8:34 say, "Hey, what do you guys think about that?" You publish it to basically the web and then you can copy and share that. What I want you to do is connect to share. Come down here and do

8:41 project.html for me and just download that as a project archive and click on export and then save this. And then when you come back to the homepage, scroll down and click on create a design system

8:52 at the bottom like so. And then you can go ahead and say I'm going to go create here. And here we're going to explain what we're doing. We are a productivity tracking app. Beautiful. Come down and

9:02 then it says add fonts, logos or assets. Just come down here and click on basically uh any files you want to upload. And then just select the file you just downloaded. And then once

9:10 you've done that, you've added any of the notes, just come down and click on continue to generation. Come down here and then click on generate. And this will now build out a design system. Now

9:18 at this point you can add in logos. You can do anything you want to. If you're working with clients, grab their logos, grab their typography. One very cool website is cool.co. So with my first

9:28 tech startup, the top 100 UK one. What we did is we when I got a brand palette is we used the generator and you can literally just say we hit enter for example spacebar and it keeps doing

9:37 different colors and you can come down and you can actually go ahead and lock it and then you do a bit more. You come down here locker. It's a completely free tool. Very very cool and just good for

9:45 getting inspiration. But the real hack is finding existing color palettes that already exist and using and leveraging those because they're very complimentary and you don't need to reinvent the

9:55 wheel. And then you'll see something that looks like this. And this is the entire streak line design system. It's got sources, content fundamentals, visual transformations, handdrawn marks.

10:05 It has literally gone ahead and included everything. We've got a color palette. It's literally beautiful. And you can see it's even got motions on there. I mean, it is really beautiful. And the

10:13 cool thing is if I want to change it, if I want to add additional images, I can just drop it in the bottom left. Now, every business needs this. This is something that businesses would spend

10:22 thousands of dollars to get right. And you can produce designer level quality with just a couple of prompts and the right systems. Now, what I want you to do after you've gone back and forth and

10:32 had your conversations, come over to share in the top right. And what I want you to do is come down and just have this on your computer and get it out of this environment. So, you're going to go

10:40 to project.html HTML and you're going to come down and project archive is fine and just click export. And so now you have this beautiful design system. The cool thing is that every output is going

10:49 to match your taste. It's now one file that you can use everywhere. But the big issue here by only having this design system is that it only really applies to our website or the app that we designed.

11:00 And this is how you can progress to level four in our sevenle system here, which is actually using the system for your entire business. Now imagine we have this universal design system. We

11:11 have many things that we do. We write emails. We do presentations. We have CVs. We interview people. The cool thing here is we can take this design system and replicate it. Spread like locusts in

11:23 the wild. So it's in our YouTube, it's in our Instagram, and it's instantly recognizable, but it's your design system. Now we have it. We can physically do that. So for example, if

11:33 we come back over to Claude, check this out. I'm going to come down here, click on Streakline design system. What's really cool is they've kind of given you ideas about how to use the product. So I

11:41 could for example come down and say click on color and type pairing and I might say explore col type pairings for this design system. Please go ahead and improve them and then we can go ahead

11:51 and send that one off. The other thing that we could do if we wanted to is just think about all the things that you may want to do in your business. The big one here I'm going to show you what this all

11:59 looks like. We could do presentations, right? So for example, we could do slides. I could say make a slide deck about productivity. Beautiful. And then also come down and see. And you can even

12:08 do emails. Let me show what this looks like. All I said was design me an email. Let's check this out. First one here. This is a sponsorship deck. And look at this guys for a one shot. How crazy is

12:17 this? It's understood the color the color scheme. Um and it's basically gone ahead and built out these decks in one single shot. But we may want to move this around a little bit. So I might

12:25 say, hey, on each slide, make sure that the height of the color is consistent. And also I want things to be no more than two sentences long. So keep that up there. And there should be something

12:36 visually beautiful on every slide. So for example, on the first slide, the yellow is too low. So we would then go back and forth. And again, we're building out the template. Remember

12:44 level two. It's iteration. Now check this one out. I come over here. This is a welcome email. This is freaking cool. All I said is, look, go ahead and build it for me. It asks you a few questions

12:53 and it's gone ahead and built this for us. Now obviously we can improve this massively. But look how on brand this has actually been by doing that. And we can go back and forth. We can add a

13:03 logo. we can do anything. And then finally, I've got here what I talked about in terms of the design system about the color typing. And look at the detail of this, you know, the system

13:11 behind the streak. And we have various different levels. After I pour my coffee, I will write one sentence. I love that. And then we got color and type. Again, I think this yellow circle

13:19 thing needs to be improved a little bit, but you get the idea of the types of things that you can build when we iterate and have those conversations. And the blue light behind me has

13:27 mysteriously returned because we're on a blue page right now, which is quite interesting. But look, I come back over to here on the sponsorship deck and you can see already it's taking in my

13:36 feedback. And essentially, you're looking for consistency. You're looking probably, you know, at least don't be afraid to have like five to 10 different back and forths with this to get it to

13:44 the point where you're really happy with it. So now you've got your entire system locked and loaded, your entire design system. You've built it once and now essentially whenever you're doing a deck

13:53 or whenever you're doing an email, you have that beautiful system locked in. And you can start to see the value. I just spent I think it was like $4,000 specifically on an email sequence. And

14:02 so now in level four, you have your entire system. And I have personally spent thousands and thousands of dollars in the past in my businesses for building me out an email design

14:10 sequence, building me out what the visuals look like. Claw design is giving you credible design skills uh in the hand of people who haven't really designed before, which is incredible.

14:19 But it does have one sort of limitation that is solved only by level five. Level five is where we introduce and we bring in what I would call outside firepower and this is beyond simply inspiration.

14:33 This is actually creating something beautiful. So imagine for example we had a designer and this designer basically could only really replicate what is seen. It would be great but if we wanted

14:42 something unique and really fit our brand we'd be severely limited. But with this skill what we're actually able to do is create something beautiful and unique. And I'm talking about image and

14:52 video generation. Now, what that looks like in reality, you can use any platform you like to. I personally really enjoy using Higfield because it's just a brilliant UI and it just seems to

15:00 do a great job. So, I could come down here and say, "Hey, go ahead and design for me a logo for my productivity app. Make it look beautiful." You do this. I'd highly recommend I like Nanob Pro.

15:11 Basically, GPT image 2 is also good. You can do any. I've got unlimited at the moment. Pick the ratios that you want. Um 4K is a little overkill. I like 2K on this one. and then just get four

15:21 different variations from Higsfield here. But we can take it one step further and this actually is one of the places I do all of my generation. Now I'm going to duplicate this. Check this

15:31 out. Come over to the MCPN CLI. What you can do is basically copy this and build this directly within cloud code. I'll put a link down below so you can grab this, but basically say, "Hey, go ahead

15:41 and connect to the Higsfield CLI." Opens a new page. You sign in and then you're ready to go and connect. Then you can say, "Hey, use the CLI. go ahead build me five different designs. And look at

15:51 this. All I did, guys, I uploaded the design system and it's come back over here and you can see I've got five different things that I think are cool. What do I think is the coolest one? I

15:59 think this is clearly the winner. So, I'm going to come down here and I'm literally going to save this image. And now we have this. And this is the whole benefit of using external systems to

16:08 supercharge your own design systems. Now, this is for a logo, but in reality, it could be done for anything. I also like this bear, by the way. I'm going to go ahead and save this image as well

16:17 because maybe I want to bring in I find actually that having an animal on a brand really helps with branding and marketing. And then the cool thing is you can build beautiful websites that

16:26 look like this using Higsfield or AI image and video generation. And all of this was done in one prompt to get these beautiful animations and as you can see it's scroll stopping and we can mobile

16:36 optimize them as well. It got a unique font and it just takes cool design to a new level. Here's another example of this. You can see in this monolith website here, and I'm going to mute it

16:45 right now because it has some sound to it. But you can see it's the exact same process, this beautiful thing. And you can literally come in and scroll and just create assets and create websites

16:55 and videos and images that just take the actual feel to it to a completely new level. This is another example of the kind of thing that you can build. And I built this using Higsfield using their

17:06 video generation. And you can see it just follows this nice, crisp, different website design style. And you can do all of that inside Claude. And so by combining literally these design systems

17:16 with external firepower, you get access to designs and like this beautiful imagery that you don't get if you're just using Claude alone. But it does take us very nicely onto level six. Now

17:26 level six is something that opens up an entire world of possibilities in content. And this is the idea by giving it motion. This could be beautiful HTML graphics. This could be um 3D spheres.

17:40 It is really really powerful to access it just come over to core design here select your system and what we could do we can create a 3D object. This could be really cool to have on our website. We

17:50 could then also if we want to and this is one of my favorite ones is the animations is just give it something to animate. So you could say hey there I want you to create for me a beautiful

17:58 HTML animation explaining the power of habits and how they change over time. Now once you've done that come down and click go. For example this is something that I built earlier. I'm going to come

18:08 down and show what this looked like. This is all complete one shot. Small actions every day. Drink water, read pages, move 20 minutes. Basically, you get 1% better every single day. This is

18:16 really cool. But it compounds, which is decent. And again, this is all just one shot. And look at this. It's built a really cool graph. And obviously, we can move this in any direction that we want

18:25 to. 37% better in a year. There's your streak. I mean, it's great just for a one shot. I just said, "Hey, go ahead and build me something random." It's gone ahead and done that. And then we

18:34 have a really simple HTML graphic and animation. And then it's gone ahead and actually built me a 3D mockup for something I could use. Now, this could be like a cool 3D thing to build in. You

18:42 can do spheres. You can do anything. And this is another example. It went ahead and designed for me a hypersphere, which is really cool. And again, it's just something interactive. And then you

18:50 could you could if you want to just put this onto your website or if we had like check marks that was 3D and when somebody hit a certain number of tracks, that could appear in the app. We can do

18:59 all of these with the claw design systems. And the reason why I like using for like image generation for example the whole um using claude is cuz we combine claude and image generation

19:09 together and it just does a better job of thinking better job of prompting. That's why I really like using claude as the kind of design intelligence engine and then using something like Higsfield

19:18 to go ahead and make those images and those videos. And this is another example of motion something I designed yesterday. You can see it shows it can do 3D animation. It just really helpful

19:27 and nice to see the graphics. loads of different styles all really depending on the thing that you want to build. And so by giving it motion, we can make websites, videos, content that feels

19:36 alive, just like you see now in my content with these beautiful animations. But there is one final level. Now, most people don't really ever get past level one or even start this journey. But

19:46 level seven is the pinnacle and it's where it really takes it from looking nice to being something that's actually usable. And this are full production apps using everything we've covered here

19:57 in claude design. Now what we can do with this is combine claw design with the power of claude code to build production apps that look absolutely beautiful and have databases where

20:09 clients can create accounts. We can send them emails. We can essentially do anything that we imagine. Now to do this we're going to be using two things. One is claude and the second is superbase.

20:20 Now, Superbase is all of the stuff that actually enables you to build projects. Now, the cool thing is you don't need to be a master of SQL and it's really simple because we can connect Claude to

20:30 this and let Superbase and Claude essentially build out our entire storage back end. And I genuinely use this for example with this software that I built for my community like this kind of road

20:40 map where you essentially select characters, you can come down, it analyzes your profile, builds out loads of cool, incredible stuff. I have it for essentially all the things that I use

20:49 when chatting to all of my YouTube videos. Or maybe you want to use many different things. It is effortless to actually use. And the cool hack here is we're going to use something called

20:57 agent skills by Superbase. Let me show you what I mean. Now, you can grab this link down below. This is the prompt and the guide I wish I had when I first started using Superbase. All you're

21:07 going to do is come down, literally copy all of this like so, and head over to Claude. Then literally come over and hit enter. Now, what you can also do is connect to Superbase inside Claude. Let

21:16 me show you where that is. And honestly, you need to have a database system inside Claude if you're going to build anything to production. And I'm going to blow your mind with how easy this

21:24 actually is. Now, if you come down here to the plus and click on connectors like so, and click on manage connectors. Then here, what I want you to do is go ahead and just search for Superbase like so

21:33 under connectors. And then you can actually go ahead and it will literally open up in a new browser and you can connect it. And you can see it essentially gives cord the ability to do

21:42 everything it wants to inside Superbase that you may need for a project. Then let's give it a prompt. I want to go ahead and create for me a login page with an admin dashboard using Superbase.

21:51 Follow the below design system. Set up a new Superbase table. Build a website with a login section. Add a form for users to submit name, email, income, additional information, and everything

22:01 should be accessible once I sign in. Now the cool thing about these Superbase skills is essentially what it is and the reason why we installed that scum is what it lets us do is it basically

22:10 describes how Superbase works to Claude which means that Claude is no longer guessing. It actually has an understanding of all of the infrastructure inside Superbase, meaning

22:21 that it can spin up like apps that remember things in literally one prompt. And then of course here all we're going to do is upload our design system. And then we have a very cool actual like

22:32 signup page using the teddy that I found using the logo and we can enter this information. So maybe this is a weight list. So let's fill this out. For example, Alex streak. I'm going to say

22:40 that my income range is 250k plus. Occupation could be chief coffee officer. Beautiful. Uh country is can be United Arab Emirates. Uh anything else? Yes. The habit I'm trying to keep the

22:52 most is the habit of daily gratitude and thankfulness. Cool. And then we're going to go down and pick a password. And once we've done that, let's click on save my spot. Beautiful. We are on the list.

23:02 Now, let's see if we can actually login. So, I'm going to come down here and login for example. Login or sign up. Again, we got a login and a signup page. Guys, this is crazy. Enter an email. I'm

23:10 going to enter in the password that I had right there. Then click in login. Awesome. And this has come back invalid because by default, what happens when you create a form is it asks you to

23:18 basically confirm the email. Now, this is a setting in Superbase. You can turn this off in claw by saying, "Hey, turn off auto confirmations." It's really helpful when you're testing. Um, and it

23:28 basically it's a safety feature. It means that when somebody signs up to your servers, they have to validate that they were the person who did it. Dead easy to turn off. You can ask claw to do

23:36 it. Or for example, if you want to come there yourself, you can click on streak line. And I'll just show you how this works. It's a really good one to know. So in base once you've started the

23:43 project, click on authentication on the left hand side. Then once you've done that, click on sign in and providers. And as you can see, you've got all providers email. Um, this is basically

23:51 if they want to do that. Now you got confirm email. You're just going to remove that. Then click on save changes. And that's it. Just wanted to show you what the platform looks like. Although

23:58 with Claude, you don't really need to touch it. So we can come back again and log in with the details. Let's come over here and click login. And there we go. Your signups. Very, very cool. Chief

24:06 Coffee Officer, United Admirate. Here's my note. And I've got everything there. And this is all done using these superb skills, which is incredible. But then, for example, where we can really

24:15 leverage the superbase skills because design and functionality in apps are one thing, but the ability to make it safe is something completely different. And then the other cool skill we can do here

24:24 is actually run the superbase database advisor and show them what they flag. So this is another part of the superbase skill and it just helps you protect what's inside superbase again using the

24:34 skill inside claude with claude design. And look at this security warning leaked password protection disabled performance onele note. And look at this. No rowle security gaps but this gives you the

24:44 ability to do it. And then you can say awesome walk me through step by step exactly how to fix this and anything else that I might miss. And again, it just gives Claude the ability to

24:53 understand how this works. Now, this could be a signup form for your business with your brand, with your design, everything that you would like. But now, we've covered the seven levels of Claude

25:01 design. That doesn't mean anything unless we have an agentic operating system that runs our business, our personal life. And we're going to learn exactly how to set that up in this video

25:12 right