Claude Design Tutorial for Designers | First Look + Full Walkthrough!

Robyn Anderson shows how to build a brand design system in Claude, then use it to create consistent visual assets. You set up logos, fonts like Poppins, color codes, and button styles, then give Claude access to those files via a desktop folder or Canva link. She converts a webinar into a branded microsite to show how it works.
Chapters
Hey everybody. As you know, Claude came out with a new design feature, so I've been playing with it over the weekend and I just wanted to share with you how you could get set up as well. And I just wanna take a brief moment and say, if you don't have your brand figured out yet, don't go into Claude and put in a random thing. Go make a solid brand. And if you haven't done that yet, you can go to our classroom and click on AI marketing. and there's multiple modules about building your brand with AI. So if you have it, all you need to do is log into Claude, and then you'll see here there's like this cute little color palette called Design. Just go ahead and click in there. And then the first thing you're going to do is create a design system. So all you would do is go ahead and hit Create Design System. There's a button here if you haven't done it already. And so I did mine today. Let me show you what it is. It's basically your brand identity that Claude knows how to use. So it's everything from logos to fonts to hex colors to how you like your buttons, the radius of them, the spacing, the shadows. So it really is like you're having a little meeting with a design team. And once you're done and approve it, you can go ahead and hit looks good. And then you'll get a little check mark. So this is my marketing kit, just showing like how I want my homepages. So you can see it does all of my fonts, which is Poppins. It has all my hex codes and my other supporting colors as well. And then I uploaded all my type fonts. And so I just said, yes, that looks good to all of these colors, added all my hex codes. If you don't know what your hex codes are, you can always go ahead and ask Claude to review your site and ask which hex codes you're using. And then there's other things like buttons, just seeing what you like for secondary, ghost, if there's shadow, things like that. And if you don't like it, you can hit needs work and you could just describe what you'd like to see and it'll make the changes right there. So once you have that, this is your brand design system. And you can share this with people on your team. Your teammates can edit it. You can also export it. This is awesome because Canva has a brand system too, but you could never export it. So whenever you needed to tell people your brand, you had to go like copy and paste. Okay. So that's step 1, create your brand system. And then once you're done, you can go ahead and create a project with your brand system. So you could say you want a wireframe or a high fidelity. I have a high fidelity, uh, project going right now that I thought I'd show you. But basically I'm trying to take this webinar that I'm doing for score.org and turn it into a microsite. So that's what I'm asking it to do. And I am currently working with it. Uh, my exported PDF was too big. It wouldn't go in. So I just shared a Canva link with it and now it has a few questions for me. Okay, well, you don't have to upload things into the chat because in the design survey in the beginning where you create your brand, you give it access to a specific folder on your desktop. So I actually have a desktop folder called Claude Design. So I ended up downloading my huge presentation and putting it in that folder. Now it has access to it. Before I was trying to upload it and it was just too big of a file. So it's working in that folder and I can also put in other assets from my brand in that folder that it can use throughout my presentations and webpage designs. So right now it's checking out my presentation and it'll get back to me. So let's see what it comes up with. Okay, so it's done and it did such a good job. Let me show you the before and after. This was the homepage before. And now this is what it looks like designed in Claude. Look how much better this is. Okay, so it was like this. Look at this boring one. And then look what Claude did. So much better. And I can see it took, you know, my vibe. Here's the plan. Mostly demo, some slides. The current state of AI. Buckle up. This is so cute. I love it. I think it's adorable. One of the hardest things I think of running a small business is making sure your entire ecosystem looks the same, and this is such a great way to bring your brand into everything you create. Your invoices, your proposals, your presentations, your website, everything should look cohesive, and Claude has completely made it easy to do that. So get in there and try to design something like there's nothing you can't do at this point with design. So go ahead and give it a try and let me know in the comments what you've made.
More from Robyn

What the Biggest Brands Learned About AI Content (and How Small Businesses Can Use It This Week)









