Transcription
Enthropic has dropped clawed design, and this is an extremely powerful tool, but only if you are using it correctly. So, in this video, I'm going to walk you through exactly what it is, how it works, how to get it set up and master it before everyone else. You're going to get everything you need to actually start using it the right way from the jump. And so, by the end of this video, you're going to know more about Clawude Design than 99% of people who use it. So, without further ado, let's dive in.
All right, so first of all, let's talk about what even is the new Claw AI design tool. So, let's talk about that right now before diving deep into all the new features, how you could begin using them, and a couple of different amazing use cases that you can begin testing out right now. A key thing that I want to note very early in this video is that this is specific for visuals and designs, not full functioning web applications. So, if you think of something like Lovable, you can not only build design with AI, but you could also build in specific databases, backends, collect payments via Stripe, all of those different things, and even host your apps, web apps or mobile apps onto the platform. That is not what this AI design tool is. So, I wanted to preface with that before diving deeper.
Then, one of the coolest things about this is it has context on your brand. So we can pull your style from your codebase, different brand documents you have, or even files you have on your computer. And you are probably asking, Brock, do I have access to this? I'm a paying user of Claude. And here is the quick answer. So this is available on every paid plan. So if you're on the pro plan, which is $20 per month, you will have access to this as well as on the max plan. Claude team and enterprise users should have this in their accounts as of today.
So there are four different output types that we can get from the claude design agent. So let me break these down right now. We can give it a prompt for example or even upload a screenshot. It will go through this design process and it could generate things like slide decks, landing pages, one pages, which is basically things like document briefs, pitch summaries or different reports. And we could even create visual mockups and prototypes of an interface before we actually begin writing the actual code for it.
All right, so enough of me yapping. Let's hop directly into this new design tool. So, in order to access this, you're going to come to claude.ai on the web. There will be a link in the description to do this. So, if you have your account and you are a prouser or above, you should now see this on the left hand side of your screen. If you can't see it, then make sure to open the sidebar. You will find it directly underneath the clawed code button. So, if I click on this, we will then see our new interface right here. Let me give you a quick tour on the claw design platform and the interface so you could get a sense of what this can do and then we're going to dive deeper into each of these features. So do not worry about that.
First of all, we have our recent tab here. This is basically where we're going to see all of our different designs. I have a couple of different ones here. We could see our designs. We have different examples which are basically pre-existing like templates that you could use. And you could click this use this prompt button and it will actually begin coding this for you and basically replicate exactly what you see here. If you've ever used a platform like 21st.dev, you could basically copy user interface components and copy the code and the prompt behind it. And this is a very similar idea. It's kind of like a directory of different user interface components that you could use.
Next up in this menu bar, we have design systems. And this is something I'm going to talk about much more in this video. And this is where it gets really, really interesting and where this tool can become very powerful if you use it correctly. So, I'm going to dive deeper into this later in this video. So, make sure you stay to the end.
All right. So, I want to talk about now the different inputs that we're able to actually give our Claude design agent. So, there are multiple different document formats that we can actually upload to our Claude agent. First of all, we can upload Word documents. Second, PowerPoint documents, Excel spreadsheets. All of these different formats we could upload directly to our claw design agent.
To show you exactly what I mean, let me pull up a project here. And what I'm going to do is I'm going to take this PDF document, which is basically a guide on how to use the new Claude Code desktop app. I really love the design of this. I think it looks really solid. So, I'd like to try to recreate this exact style. So, what I could do now is come back to my Claude Design app and I could just simply drag this and upload this PDF. We can now see a PDF is attached here as well as it's inside of our designed files. And then I'm just going to say, I want you to make this into a slideshow deck in the exact same style as this PDF here. I want you to create infographics that look very similar to the graphics shown in the PDF as well. So I could send that off. And again, if we have specific like Excel spreadsheets, for example, we could upload it directly in here and then turn it into an app prototype or maybe a slide deck or something like that without us having to like reformat that and basically upload it as text, for example.
All right. And a couple of minutes later, we now have this slideshow here, Cloud Code desktop. This looks very similar to PDF that we uploaded. It looks a little bit like more yellow kind of I guess the background, but this is really solid. And a key thing to note here is it took all of the information from that existing PDF that I gave it and it's all shown directly inside of here. So you could see MCP servers. It's got this cool little graphic, another graphic here. I mean, this is pretty solid for a spreadsheet that I created in just one prompt and I just gave it one reference image and it was able to recreate a similar style to it.
I just showed you how to create a slideshow, but that is not the only thing we could do in here. It's a lot more powerful than that. So I'm going to show you how to create a prototype of a mobile app directly inside of the claw design platform here. So what I could do is just come here and give it a name. Let's just call this mobile app. There's a couple of key distinctions and things I want to mention right here is we can select our design system. Right now I have AI for non techies design system selected. But for this use case I'm going to select none. And again, I'm going to show you how to create your own design system here right after this quick little demo. There's a couple of different things we can select. We can click wireframes, which is basically just rough wireframes to explore different ideas and flows quickly. So if we want to kind of just work on like the template or the frame of our website before really finalizing the design and spending more time to craft it, we can select this or we can select highfidelity, which will actually create these more polished mock-ups like you probably are wanting to create. So I'm going to click on this create button and it's now going to take me to this interface. It looks very similar to Lovable. couple of different things. I could open up design systems. I could add a screenshot and I could even attach a codebase here, which is pretty cool. So if we use GitHub for example, I could click on this or I can simply just upload a folder on my desktop with my entire code and it could extract all of that and then turn that into a functioning prototype. I'm just going to give it this simple prompt. So create an iOS signup flow for a bike sharing app. Show screens on a canvas. So it's very, very simple prompt. So, I'm going to give it that and then I'm going to show you what it's going to generate here in a second.
While this is loading, I want to talk about a couple of key things. So, we do have this comments button right here. And that is because the new Claude Design app is built to collaborate with your team. Let's say somebody on your team makes a change to our app. You could leave different comments here and just say, "Hey, this sucks." For example, we could send that off and now everybody on our team can now see all of these different comments that we make on this specific project. And then another thing is we have a share button over here. So we could give this a name and can give specific access to our teammates. So we could let them view it, we can let them comment on it, and we can let them edit or we can keep this as private. So we could go ahead do that, copy the link, and we could even duplicate this as a specific project or as a template.
At any time, I could open up our design files tab right here and see all the different components we have inside of this prototype. So, if I open this up, there's a couple of different things in here, as well as all of the pages that are generated. We can view right here as well. Then, if I click on this signup flow HTML, we can now see this user interface for our app. This looks pretty solid. It definitely doesn't look the best, but I gave it a very, very simple prompt. Basically, it breaks down what this app is for. It shows the flow. So, we have our welcome page. We have our signup page. That's pretty cool. And from here, we could do a couple of different things. Obviously, we could come back to the lefthand side and make changes directly right here. Or we could edit specific elements directly. So, let's say I want to change the text right here. I could just change the text or I could select on any other element and change the specific color of it for example. Or I could even select draw and draw on our canvas and make any of the changes that we want to. Like for example, let me just go like this and X out that bike. Then basically it would go ahead look at that and then delete the bike for example. So if you want to edit your prototypes or your designs just by drawing on this canvas, you can do that. This does feel very similar to another design product called Google Stitch. If you are familiar with this, it creates some pretty amazing user interfaces that you can then export into Claude Code or anti-gravity, any of these other coding platforms. So it feels pretty similar to that, but honestly, it doesn't have that same high quality feel that Stitch has, I will say.
Next, what we could do if we're happy with this design, for example, we could come over and click on export. And there's a couple of different ways we can export this. We can download this project as a zip file. We could export it as a PDF, a PowerPoint document. We could send it directly to Canva to make more changes to this. Export it as a standalone HTML. Or we can hand this off to Claude Code to begin turning this into a fully functioning app because right now this is just a prototype. I I can't come here and actually test out the app and see if it's working properly. It's just a design tool right now.
Okay. All of this is great, but what I want to focus on because this is one of the key things here that makes this product very interesting. The design system feature is pretty pretty cool. So, I'm going to break that down right now. So, this is a way to teach claw design our exact style automatically. And the cool part about this is we don't need to give a super comprehensive prompt in order to draft and create this design system. We can craft this by doing a couple of different things. We can point Claw Design at our codebase or specific design files that are on our computer. It could read them and will actually use those visuals from those different sources directly inside of this style that it's going to create. So, it will read and pull different colors, different font, typography, and different components and will apply that system to every single output. Think of this as like a design cla file where anytime we generate a prototype, it will always use that specific style. And there's four specific ways we could teach it our style. We don't need to have a codebase if we don't already have one. What we could do is we could drop in a URL to a specific website. So whether that's your website or a website we want to recreate. We could drop in a brand kit that has different logos and fonts directly stored in a specific folder. We could give it a slide deck or document. And like I said, we could pull directly from our codebase that is stored in a repo such as GitHub.
Now, in order to craft one, we come back to Claw Design and click on this button that says design systems. Right here, I have a couple that I have created prior to making this video. I have my AI for non techies design system and this is my default one. So, we could basically pick a default system. So, whenever we generate something, it will automatically use that style. So, if I open this up, we could take a look at exactly what this looks like. So, we have all of our folders here with our different app icons, our logo mockups. Basically, every single user interface component we use inside of this design style will be stored right here. Then if I pull this up, this is an example of a landing page that I created for my school community using this exact design style that I crafted and it looks pretty solid. I basically tried to recreate the anthropic and claude, you know, style and typography and colors. It looks pretty cool.
But let me show you now how you could craft the exact same thing. If we come back to our design systems, we could just create a new one right here. And what we are going to do now is do a couple of different things. We are going to give this a name. So let me just call this claude design. And we could link our code from GitHub if we do have specific code that we want to reference. We could drag specific folders directly right here. And on top of all that, we could upload any logos, fonts, or specific assets directly down here and add any other notes. Personally, I'm going to grab a couple of files to upload kind of the style that I'm going for and then I will show you exactly how it recreates that. So this is my skills dashboard that I created. I really love the way that this looks. I think that the typography, the style of it, it just looks really clean. I really like this. So I want to copy this directly. This is an HTML file that is stored on my computer that I use inside of Claude. So let me just go grab this specific file from my computer and just drop it in there as a reference. Here is the folder that I'm going to copy and bring back to Claude. Then I'm going to click on browse. Open this up. And now we have our skill dashboard folder stored right here. Next, I'm just going to click on continue to generation. And apparently this will take about 15 minutes. So, let's let it do its thing.
So, this is where things get really interesting because right now Claude is still working as it says right here. But, we could begin giving feedback on the work it's done so far. And this is how we're able to craft our exact brand guidelines we want to create. And we could do so by going through each of these individual things that need review. For example, we have this read me right here, which is basically breaking down how this system works. We could go ahead and click on looks good or we could add needs work and give some comments on this. I'm going to click looks good. It's showing me the bedrock colors here. I'm going to go through these pretty quickly. By the look of it, these look pretty good. And we could always go back and change these if we like. For example, this is what our hero section will look like. That looks super good. or display scale, body type. Like all of this is stuff that I actually don't even understand what it is, but I think it looks good. And if we ever want to make any changes, I could just come here, click on needs, work, describe what we want to change, and it will add it to the queue directly on the lefthand side where Claude is going and crafting this for us.
And about 15 minutes later, we have our design system crafted. And I could click on design files. Right here are basically all of those files directly inside of this system. We have our skill document, our skill MD file, which we could go ahead and change if we want. We could just make any changes directly inside of here. But what I want to do now is just click on publish. And I could make this my default design system.
Now, the question you probably have is like, how do we use this design system? How do we trigger it? And that is very easy. Whenever we come and create a prototype, a slideshow, or some specific template, we could always specify which design system we want to use. The claw design system is the one we just created. So, let me just try this out now. Let's say that I want to create a slide deck. I could just start here, select my design system, and then say, I want you to create a slide deck about the new Claude Code routines that just released. So, I'm just going to send that off. And now, it's going to begin building this slideshow for me. So, pretty cool.
Our Claude design agent is going to ask us a couple of different questions about what we want to talk about in this slideshow. So, I could just go ahead and pre-select all this stuff. Let's say that I want this to be a 15minute talk. could basically break down all these different things. Let's say it's product announcement overview. So, I'm just going to move forward with a couple of those different specifications and then see what it actually creates.
All right, here we go. Here is our slideshow with this exact same design. It looks very similar. If you look at this, it looks pretty identical, honestly. Very similar typography. We even have this clawed logo that's spinning. It was able to pull that because it's actually looking at the code that was written for this HTML site and reconstructing it and building from there. So, if I skim through this, this all looks super solid. Obviously, it's like in that same exact style. And again, if we want to make changes to this, we definitely can. But in my eyes, this passes the design style checklist. And I'm actually really happy with this.
Then from here, we could export this basically anywhere we would like. We could export this as a PDF, a sharable URL, a PowerPoint document. We could even take this and import it into Canva standalone HTML site. And we could even send this off to Claude Code and begin building this into a fully functioning application or specific website and even host it on something like Versel.
So guys, that is the new Claude design that was released. If you guys want more content like this, subscribe to the YouTube channel. If you are interested in getting the 50 Claude skills that I use every single day, as well as join some entrepreneurs who are using Claude and Claude co-work every single day inside of their business, then make sure to join my school community. There is a link in the description to do so. But with that being said, guys, thank you for watching to the end and I will see you in the next.