Claude Design 2.0 Just Changed Everything...

Claude code is the world's number one design agent and they just dropped Claude design 2.0. And in this video, I'll show you exactly how to use its most powerful new features across five levels and how to overcome its biggest limitation. So you don't waste your time and you get light years ahead of everybody else even if you've never even touched this before. And if you're new, I'm Jack. I built an AI startup with a gazillion customers. [music] Now I'm building my own AI startups and I share here the stuff that actually works. So if you [music] haven't already, grab that beautiful coffee and let's dive straight in. So these are the five levels of Claude design. By the way, if it's in your background, I'm currently in Budapest drinking that beautiful Budapest coffee. And I'm going to be honest, the lighting situation looked like I was an unlockable character 5 minutes ago. So thanks for bearing with me. Now, what actually is Claude design? Effectively, it is Claude's answer to creating beautiful design and Claude is at the moment Opus 4.8, one of the best design agents on the planet. You can build websites, apps, prototype decks, effectively anything you want to. And initially, it got a million users in week one which leads us on to the change and why we need to talk about it in this video. They have done four big things and a few of the small things that I'm going to show you and how it's going to affect what you design. First of all, and this is the big one, credits go further. Biggest limitation was the fact that oh my gosh, like you would literally bleed credits. You just said the word Claude design and your Claude credits went broke. You can bring in design systems, you can design both ways and you can even edit on the canvas. So let me show you exactly what that looks like by jumping through to the very first level which is knowing exactly what the tool physically is. So you remember if you're on the basically the Claude website, on the left hand side, you click on design, you will see the interface. But you can also access this inside your Claude desktop app. Now on that Claude desktop app, if you click on chat in the top left and you come down here to design and just I just might have guessed it, click that design button, it actually opens up a new terminal. So, when you click on Claude, you can see one for basically Claude design and one for Claude itself. And you can do everything now inside the desktop app. Now, I know many of us have PTSD credit PTSD from using Claude design, but I'm going to show you it's actually pretty cool. So, let's familiarize ourselves with it. So, you can select effectively the thing that you want to design, prototypes, website animation frames, which is awesome. All your projects live underneath, which is fantastic. You can see all of the design system. So, if you've got a particular brand, we can build one of those and even have templates down there at the bottom. Now, you can select the design system when you're building, or you can just clear that and just go and create something brand new. And here, we can select the model. And I'm going to show something really interesting in this video that's going to help solve any issues you have with tokens. So, this takes us on to level two, where we're going to build something together. Now, what's really cool here is we can build it in any brand. We can give it a GitHub repo. It can design basically anything in brand. It will auto validate things. And we can even take that stuff, push it out to PowerPoint, PDF, Miro, Figma, anything that you want, you name it. So, let's go ahead and give that a crack. So, to really challenge it, I'm going to give it, for example, a link to a repo, and I'm also going to give it an image. So, let's give it a task. I'm going to come down. I'm going to select slides. We're going to go with no design system, like so. I'm going to give it the following, which is, "Hey there, I'd like to use this repository, this GitHub repo, and this image to design for me three beautiful slides in talking about why LaCroix is the best drink to be having in 2026." All right, further on in that, and let's go ahead and grab the actual GitHub repo. And here it is. This basically is a repo that I built just to kind of extract great design principles. So, come back over, drop that in there. Now, you can drop anything that you want into it. You can drop in Figma files, you can drop in images, whatever you like. And in fact, if I even open up these principles, you can see I have a really clear design style with this. If I copy this image, for example, come back over, drop it in, just literally copy and paste the images that you like, that you think are groovy and cool. It's really designed to make it as easy as possible. Then you can select the model Babel 5. She will be coming back. I'm hearing she's coming back. On that point by the way, it has been it rumored that GPT-4.6, which is the latest ChatGPT model, is allegedly that that big model, okay, which sounds a bit controversial, is supposed to rival if not exceed some of the fantastic models. So we're going to keep our eyes peeled for that because even with any model release we've seen with ChatGPT, Claude has always seemed to edge it. But there might be a model that even challenges is Claude, which I'm going to I'm going to cover in a second in this video. Now, the first thing that's come up here, for example, is going to show us some questions. So we're going to do this for the Let's just do it for the investors pitch. That's fine. Playful and bold, Wild Claw wins the most, zero sugar health, flavor variety, and lifestyle and vibe. That's fantastic. Use them as the main visual style. Just make something that's beautiful and follows the instructions and the visual style. So we're giving it some information, come down, and then click on continue. Beautiful. Now we have the presentation from Claude to LaCroix owns 2026. You'll see at the bottom we have speaker notes, which we can edit. We can just uh look at it if we want to. Then we have slide two, which is going to be three reasons it wins. It's cool cuz you see these squares and circles, it actually copied that from that initial image, which is cool. It's taking some creative license. Come down, and the commas can in the cooler wins the decade. Cool. That's decent. In this itself, you can do a couple of things. I can mark up so I can like basically say, "Hey, let's make this section bigger." So I can come down and say, "Hey there, make this section a little bit bigger." Okay, cool. Send that one off. While Claude is working in the background, you can drop comments on there, too. But probably the coolest one I think is going to be the edit feature. So I can just literally now edit it. Now, the reason why this is important is because previously we had to give a command, and AI had to go through the entire context window, which meant they just burned so many tokens. Now, let's say for example, I want to remove the apostrophe, I can just click on this, come over, and there you go, done. I don't have to say, "Hey Claude, remove the full stop." It can physically do it, and we can edit it. Then on the left-hand side you see you can actually edit everything. We can check out the font sizes, um play around with colors, just kind of edit everything in detail just like you would do in a Figma. So now Claude has made that image larger. If you want to, you can do presentation mode and actually go full screen with that and just say "Hey guys, here's my presentation. How good is life?" Cool though, we can actually go ahead and share this. And on the share link, you can do it to your workspace if you want to. Or if you come down to export, for example, you can see the different formats we have here. So, we can do this as a stand-alone HTML, or you can do it as a PowerPoint, export it in PowerPoint, and then actually edit it within that software yourself. Well, this leads us onto the coolest part of this and actually the biggest issue that I've covered so far. And that's the fact that it's not re-imagining. It's not creating things. What we can do with Claude design is actually use our inbuilt connectors that we already have in Claude code. Let me show you exactly what I mean. For example, we could scrape information about competitors or our websites. We can generate images ourselves within Claude design. And bear in mind, design is just one part of many in Claude code. So, if you want to get the full breakdown from foundation setup, building websites, power features, memory systems, Hermes, everything I have never covered on the channel, I'll put a link down below for the full Claude code course. With that as well, you also get access to the beautiful Claude code operating system, which is freaking unbelievable. And how you can take it to new level. Now, if I come back over and I land over here, I'm going to come back over now to the homepage real quick. And what I'm going to do is use a connector. I'm going to give it a very specific prompt. I'm going to say, "Hey there. I would like you to go over to glido.com and use my fire crawl connection, my fire crawl MCP, to extract the brand identity. And I want you to create for me an animation that is three pages long." Cool. And then what I'm going to do after I'm done that, I'm actually going to go ahead and say this. Go ahead and also use um an image generator to go ahead and generate some unique images or maybe one unique image based exactly on that style in that deck for me. Now, I'm going to deselect my design system here just for argument's sake and then come down and we're going to go ahead and choose animation. And then go ahead and send that one off. Now, for creating images itself, you could use Higgsfield. You could use something called Kia AI, which I think is probably the cheapest way to do it. Actually, uh once you connect that API key to your Cloud system. Now, the reason I love using Firecrawl is cuz you can actually extract information unbelievably easy. It is so cheap because essentially, if you scrape a website, you've got to take in all the tokens. With Firecrawl, you mess out all the HTML stuff. You can literally search, scrape, and track with it. I use it to get brand identities. It is super duper easy. All you do is literally connect it, and then you're rocking and rolling. So, if I come back over now to Cloud Design, you can see it's using Firecrawl to scrape and get that information, which is great because not every website is built for AI. Using tools like Firecrawl, we can actually get the right information way faster and do so much cool stuff. And just like this, guys, we now have our actual presentation. So, let's have a look at what it's designed for us here. And I'll tell you straight away, it has absolutely captured the Well, okay, this is cool. I like it. It's captured the actual font edge and the color scheme, which is all in type with your voice. That's very true. Speak naturally, it types out. So, it's actually grabbed this image. This is cool. Ah, that's really cool. Do you know, I'm actually genuinely impressed with this. I think this is really freaking decent. 20 hours a month saved. This is information it's going to have and grab from the website. It's also got the logo, which I think is freaking amazing, and giving it tools like Firecrawl absolutely crushes it. I do want to touch on actually what is going on here compared to Cloud Code and this because keeping this 100% real, to Cloud Design itself is just the ability to effectively edit it. It's this interface here and the ability to export it different things like PowerPoint and PDF. Cloud Design is using the Cloud Code model underneath. And so, by that virtue, anything you technically build in Cloud Design, you can, if you want to, build in Cloud Code. It's just trying to make it so easy. And if you're time poor, sometimes it's easy to go into Cloud Design and build the thing. Which interestingly takes us on to level four, which is the ability to basically pass information from Cloud Design back to Cloud Code. Now, you may want to do this if, for example, let's say that we build a dashboard, right? And then we actually want to take that dashboard and give it a database and build it out into a full system. Well, we can't do that in Design. So, for example, let's go over to our beautiful glido animation and let's share this number one. Now, you can export it to these different things. We don't want to do that. What we want to do is send it. Now, we can send it to Claude code, Canva, or Gamma. We're actually going to go ahead and send this one over to Claude code by clicking send. Now, two different ways. Now, there've been some complaints as well about it's not a clean crisp integration. You can send it to Claude code web. I wouldn't do that. If you're in the app, just honestly use the app. What you can do is literally copy this and effectively what it's doing is it's detailed where the files are living, which is super helpful. Or if you want to, you can just download it as a zip. That's completely cool if it just makes that a lot easier. But, I'm going to come down. I'm going to copy the prompt like so and then I'm going to head over to Claude code. And now, within Claude code, I'm going to literally paste that in and I'm going to say, "Do me a favor. Pull me together a very simple one-page website using the design principles in this with this video integrated into it, please." Send that one off and then we should be ready to rock and roll. So, we can bring it over to code when it reaches a certain level of complexity or if you just want to get the initial design done and then you can bring it back over. Beautiful guys. And then Claude has gone ahead and designed this. It's integrated the video into which is great and it's added some other beautiful bits and pieces, which is awesome. One interesting thing though, when I come back over here, is that when I actually exported it to Claude code, it was like, "That's cool." But, it couldn't find the video. So, what I did is I actually went back and I re-extracted it. I downloaded the zip. And actually, if you even listen to what Claude code tells us here, for example, at the moment the integration is a little dicey. When it downloaded it from the handover, it didn't have anything. But, when I took it from the zip, effectively it is the best way to go ahead and do that. So, just bear that in mind. And also, when you do download it as a zip, whatever you build in Claude design, you can take it anywhere that you want to and use by any single model that you'd like. Which interestingly takes us on to level five, which no one's really talked about when it comes to Claude code design. And before I show you that, just bear in mind, you always want to extract the zip. Extract the core code, then link it back up. I think the integration will pick up as time goes on, it's a great thing directionally. People have run into snags, so make sure you're going ahead and actually downloading it. Now, let's think about level five here. And we're talking about owning the entire stack here, right? So, how do we actually get to the point where we're not locked in with any specific model, but what if we want to use this design with a different model? What if we want to build on this with something else? Well, there's two ways that we can do this and I'm going to show you both and I want to make sure you got both of these in your arsenal so you're never caught short ever again. Now, firstly, we can head over to open design, which effectively is mirroring everything that Claude design does, but it runs locally on your computer and you can power it with any model you want to. To use this, come down to code like so, come over and literally copy this. You're going to open up a new session and say, "Hey there, I want you to download this repo and open it up for me in a local host." Ordinarily, when we get repos, we never give Claude this command unless you really know the repo that you're referencing. Ask Claude to always check it for you. Beautiful. Now that's done, I'm just going to go ahead and say, "Awesome, open that up for me, please." So, effectively, this is the software on your computer that you're now locally hosting and it just unlocks new capabilities. And when it opens up, you're going to come down and click on local coding agent, which is fantastic, and then we can pick all the things that we want to connect with. So, for this one, you can even use Claude code in it if you want to or you could use ChatGPT. So, use your ChatGPT $20 subscription to basically code anything you want to if you hit your limits, which is fine. We're going to skip all of this, come down, click on continue, and then we're ready to rock and roll on building a design system. And then, when you open design, I kind of I want to attach the exact same thing that we just built in Claude design and Claude code by coming down here, clicking on the plus button like so, and I'm going to attach a file. So, as you can see, I've got Claude as a and I'm going to come down and say, "Hey, on this website, I just want you to change the color from green to blue." I'm just doing this as an example, click off, send. But of course, before we do that, we can actually then go ahead and pick the model we want to. So, I'm going to go ahead with the Claude X CLI in this case and then send that one off. And CLI just means command line interface. It just means that on your computer you can access Codec, which is the chat GPT coder, just like Claude code is for Claude. It's just fancy speak for using different models, basically. An open design is a free repo. It's a free project people have built to let you use the kind of core ethos of Claude design, like it's kind of like skills, that kind of thing, uh in an open environment where basically you can use any model to power it. That's why this is so cool, and it's a great build on. It lets you keep on building if you hit your limit in Claude code. And then beautiful, just like guys, we've gone from green to blue. I think green is better if you ask me, but you get the idea of how this entire thing connects. And they get really creative, like here's an example of something that I built earlier. For example, you can see this is another instance of using Glado, using fire code coming down and connecting everything together, coming over and just seeing these beautiful basically these beautiful animations with this system. Now, one thing to bear in mind is if you do use open or tip, you can't export it like into PowerPoint. That is Claude design only. One of the really cool things that it does and why it's a great place to play around and build some stuff. And on top of that, you can also use GLM 5.2, which is around the same performance as Opus 4.8, but 1/6 of the cost. It lets you take it to completely new level, and you can do that by using it inside the terminal. And again, just build on any of the designs you've already built. But it does then take us on to a really important question. And that's essentially where do we actually go from here? Because a design is one thing, but it's only one part of a series of core things you need to understand with Claude code to advance your business and your personal life. So the next thing we need to do is learn how we can build those pieces together in a gigantic operating system, which we'll do right here in this video.