Anthropic Just Dropped Claude Design 2.0 (Endless Capabilities)

Anthropic just dropped Claude design 2.0. They did a complete revamp to the platform. So, I decided to put it to the test and it does feel like a much more capable platform. And there are four distinct new features that they added that I'm going to go over in this video. Now, if you don't know what Claude design is, let me break it down very simply so you can understand the rest of this video. Claude design is a product that Anthropic released about 2 months ago. We could use it to generate things like web app prototypes, slideshows, mobile app prototypes. And it's basically Anthropic's version of Figma that we could use for tons of different use cases. I even used it to generate this entire animated video. I did this in one simple prompt and it took my design style from Claude code and was able to import that directly into Claude design and built this for me again in just one simple prompt. Now, the first thing that is different this one is apparent right when we open it up is we have a completely new design of the platform. I think this looks so much better and it's much easier to use. So, right off the bat we get this text box. We have the ability to select a design system or create one from scratch going to show you later in this video how to import this from Claude code. Then we have the option to select from a template so we could create a prototype, slide, document, wireframe, or animation. So, all we have to do is just click on this. Then it knows that you want to create a prototype and then we just write in the prototype we want to create. Our next update, this is one that people are probably going to be pretty excited for and I personally am as well and that is usage. Usage is now calculated differently than before. Now, Claude design is taking from your overall Claude plan. So, for me I'm on the Claude max plan. So, it now has usage limits across my Claude code, Claude co-work, and Claude design. Whereas before we had one specific to Claude design. So, we'd have one limit for Claude design and then for the rest of our Claude accounts. And that was pretty annoying because there were pretty low Claude design limits. I know a lot of people who were trying to test this out and actually do real things with this were hitting those limits very quickly. So, now if we have a Claude pro plan or Claude max plan, it's then going to automatically pull from those usage limits instead of a separate individual one. All right, so the next new feature, this one is pretty cool and this one's going to save us a lot of money on tokens, hopefully. And that is we can now edit directly inside of Cloud Design. So, what I mean by that is if I click on edit on the top right, you can see that I'm building out this user interface for this app that I want to build and I'm actually going to take this and turn it into a real working app inside of Cloud Code later in this video. And over on the left-hand side, you can see I just need to select what it is I want to edit. So, let's say I want to edit the text. I would click that. I could actually drag text to wherever I want. So, let's say I want to add text right here. I could go ahead and do that. I could type right here. So, let's just say Cloud Co-worker or something like that. And we could go ahead and place that directly on our canvas that is Cloud Design. Or if I want to change, you know, text that I'm using here, I could do that. So, let's just change this and say Brocks Daily Macros. And it's as simple as that in order to make changes. Instead of us needing to come over to the chat right here and explain what it is that we want to change because then that's going to eat up a lot of our tokens. So, now think of this as like a mixture of Cloud Design where we're kind of vibe coding a specific design, but also something like Canva where we could actually make edits directly on our canvas. Now, we could edit more than just text as well. So, if I click on edit, I come over and I just select certain elements here. I could go ahead and change how those look. Let's click this little div. I could then change the background. So, let's say that I want to change the color of this to be red, for example. It's as simple as us being able to go and edit each of these elements individually instead of us needing to go to the chat and trying to vibe code our way to, you know, make it look exactly how we want it to look. Real quick, I went ahead and crafted this free resource for you guys that you guys can grab. If you've never used Cloud Design before or you want some different use cases you can try out yourself, this follow-along guide will actually explain it to you as well as even give you prompts you could copy and paste and put into Cloud Design. And if you want to grab this, this is completely free. There's a link in the description to grab it. Basically, just come here, put $0, click I want this, and you'll put in your email and it will send it to you. Now, back to the video. All right, so our next feature, and this one is going to be really helpful if you are an existing Cloud Code user. So, this has to do with our design system. So, to show you what I mean, if I come over here and I click on this where it says design system, you can see I have a couple design systems pre-configured that I built out prior, or we can create a new one from scratch. So, we have two options. First, we could create it here by connecting either Figma, GitHub, or uploading all the different design assets manually, but now we have a new option where we could use Cloud Code, which actually gives us the best fidelity when it comes to the designs if we're using React components. And it will do this for us automatically, so we don't manually need to import all the designs we've built. So, to show you what I mean, if I click on this, it then shows us this set of instructions for us to run this directly inside of Cloud Code. So, if our design system already lives inside of Cloud Code, we could open up our design system package in Cloud and just simply run this command here called design sync. Now, to explain this even further, so we have the ability just to click the design system button, it then reads our kit using Cloud Code with a design sync. It reads and compiles all the different parts and components that we use inside of our designs. So, if we have things like a pre-existing client project or specific design styles you've crafted for your business. For me personally, I have a specific style I use for my school community as well as for my personal brand content, which you've probably seen on my YouTube channel. And now with this command, it will auto scrape that and then it will upload it directly into Cloud Design, so we don't need to do it manually. Now, in order to show you what I mean, inside of Cloud Code work, I have tons of different artifacts and dashboards I've built out in this exact style right here, which you've probably seen on this YouTube channel. And as you can see, it's in a very specific Cloud style here that I personally really like, and any dashboard that I create, I use this as an example. If I come back to our calorie tracking app that I'm building the design for, it's in the exact same style and that is because I imported it directly from Claude Code, so there's always going to be the design consistency as you could see here. And to show another example, here is a quick little animated video that I had Claude design create for me and again, it's in the exact same style that we saw inside of Claude. So before I show you some of the other features in the new Claude design, I first want to show how we could take a app design that we have right here and send this automatically to Claude Code and turn this into a functional application that I could actually use. Because right now this all looks great, but there's no database built on the back end of this, so I can't really actually use this. It's just kind of a fancy design that I built inside of Claude design. So in order to do this, we could come over here, click on share and we want to click on send to and from here we could send this off to different applications. So Claude Code, Canva, Miro and if I click add more, I could even send this to five coding tools like Lovable or other design tools like Gamma. Now, I'm going to focus on sending this to Claude Code, so I'm just going to click send. It gives me this fancy little prompt that I could use in order to set this up. So I'm going to come back over to my Claude desktop app, click on Claude Code and I'm simply just going to paste in the prompt that it gave me. All right, so and just like that, we now have our app imported directly into Claude Code and I could begin making changes here since we have our design finalized. We obviously did that inside of Claude design. Now, I need to do is build out an actual database. So what I'm going to be using is something called Superbase. If you don't know what Superbase is, do not worry. If you're non-technical, you don't really need to know how it works because I'm going to use this via a connector inside of Claude and it's going to do all this stuff for me. Superbase is basically a platform that allows us to store all of the back end information necessary to make our app functional. So to give you an example, here is a database I have that tracks all of my different content. It shows me the duration, it shows the amount of likes, it shows the title of the videos, it shows the URL, etc. Because if I don't have a back end to my app, then the front end is basically useless because it's not able to store any of the information. Well, luckily Superbase makes this incredibly simple. So, let me show you how to set this up. Now, first of all, just make sure to sign up with an account. There's going to be a link in the description as well as the pinned comment to sign up for a Superbase account. And then we're going to come back to Claude and we're going to come over to the left-hand side where it shows customize. And we simply need to add the Superbase connector. So, click on connectors. I have a list of apps I've got connected. We're going to click on browse and just search for Superbase. Then click the plus button. It's going to bring us to our Superbase account. And all we have to do is grant access to the specific workspace organization we want to give access to. So, I'm just going to select my email right here. Click authorize Claude and it should shoot us back to Claude. And there you go. You could see that Superbase is now connected on the right-hand side. And then what I'm going to do is I'm going to select on Superbase. I'm just going to click always approve. So, that way it doesn't ask if it's able to go and pull data from these different database tables as well as create database tables. And now we should be good to go. Then I'm just going to come back to Claude and simply say, "Hey, I want you to turn this into a functional app. Use the Superbase connector in order to create a database for me to track all this information so the user can add specific food and track all this data and have it be accurately reflected on this app." Okay, so I'm going to give it that prompt and now what it's going to do is go and create the back-end database for me and then I'll show you the final result. All right, and just like that it built out this entire app database. So, to show you exactly what I mean, we have my app pulled up right here. We have my Superbase database configured right here with all the information inside of our application. So, in order to test this out, what I'm going to do is I'm going to input one of my meals and we should see that populated in this database as we do that. So, if I head over here, I'm simply just going to add a couple of different products here. So, let's say I ate oatmeal, I had a banana, Greek yogurt, and scrambled eggs for breakfast or something. Now, as you can see right here where it shows breakfast, we can see each of these items of food added to this list. And if I come back to my food log and refresh this, you can now see that it populated all of that metadata into this database. So, hopefully this gives you a sense of how you could go from Claude Design into Claude Code and use something like Superbase to turn this into an actual app that works in real time. Now, the next update that I want to talk about is we could access Claude Design directly inside of the desktop app, whether inside of Claude Co-Work or Claude Chat Mode. We'll see it at the bottom left of our screen. And if I click on it, what it's going to do is pull up this separate screen where we could begin using Claude Design instead of just using it on the web app. Because up until now, we had to come to claude.ai on the web browser and use it directly inside of here. So, now we don't have to leave the desktop app in order to use Claude Design. Which I know for me, a lot of the times I wouldn't even use Claude Design because most of the time nowadays, I'm inside the desktop app and I wouldn't even think to toggle on to the web browser. Now, the next feature I want to talk about inside of the new Claude Design update is connectors. So, I click on my little account icon and come over to connectors. You can see that I can access any of the different Claude connectors I have configured, which I have a ton already added. And if I click on browse directory, it's going to take us here where we can add any of the apps that we want to use. Now, let's say there's an app you want to use with Claude Design, but you don't see it in this directory right here inside of Claude. Well, I'm going to show you a hack that will allow you to connect to 9,000 plus different apps using something called the Zapier MCP. If you don't know what [clears throat] Zapier is, it's an automation platform that connects to 9,000 plus different apps. And an MCP server is like a universal connector that connects your AI to any of the apps that you want to use. So, that way you can go and perform actions across those apps. So, I'm going to click on get started. There will be a link in the description to sign up if you want to test this out. Next, we're going to click on add new MCP server. Then we're just going to come to Claude, copy in the prompt here, and then I'm going to come to the Claude desktop app and just simply paste in this prompt. And now it's going to pull up this little box here where I'm just going to click connect. Then it's going to bring you back to Zapier to copy another prompt. Then I'm going to click continue, click allow, and then click open Claude and this should be set and good to go. Now, back inside of the chat, if I click this use button, it's then going to guide me through how to set this up exactly how I want it to work. So, now we have our Zapier account connected, and in order to add different applications, we'll come to our MCP server we created, click add, and we can select any of the apps we want to add to our server. It's as simply as just clicking this button, selecting all tools here, so it's able to perform those actions across those apps, and then clicking add tool. And just like that, we can now have Claude Design perform actions across these different applications with Zapier. All right, so let's test this out and actually build an animation inside of Claude Design. So, what I'm going to do is I'm just going to select a template here. I'm going to click select animation. I'm going to select my design system, which is called Claude Design System that I configured. And then I'm simply going to come and say, "I want you to generate a product launch style video with this animation skill about how compound interest works." So, I could send that off, and now it's going to generate this entire animated video for me after I answer a couple of these different questions. Now, a couple minutes later, we have this animated video that it crafted in that exact style that I showed you earlier on in the video. I mean, this is pretty cool. The fact that Claude Design was able to generate all this is pretty crazy. All right, guys, there you have it. These are all the new Claude Design updates. If you guys want more content like this, subscribe to this channel. I cover AI for non-techies. With that being said, thanks for seeing the end, and I'll see you in the next video. Cheers.