Claude Design: Turn your ideas into real visuals

Every time I build an app with AI, I get this sinking feeling that it looks like every other app out there. And I should know better since I spent the first decade of my life working as a graphic designer. The problem is, AI is great at giving you something acceptable, but not exceptional. Claude Design is an attempt to fix that. You work out what your app is supposed to look like before the code takes over. And when you're ready, it hands off directly into your favorite coding app. This is an Anthropic Labs product. They've created some of Anthropic's hottest tools like the model context protocol, skills, and co-work. It's available for Pro, Max, Teen, and Enterprise subscribers included as part of your plan. But it isn't on the Claude application or the claude.ai website. You have to go to claude.ai slash design. When you first get here, you've got four different kinds of things that you can create. Prototype, which is building websites, slide deck, which is a great way of creating slides. You can also do from template, which lets you import a previous project that you have done. And then there is the other feature, which right now lets you create a project or a design system. And on the right, there's also a place where you can click to check on different examples with their prompts that will produce similar results. We're going to get started with a simple prototype here. I'm going to call this MV How. Kind of a play on words on NVP, which is a minimum viable product. It's going to be a website to help people validate ideas for potential vibe coded products. So we'll choose high fidelity and I'm going to hit create. This is going to take me to this second screen where I can start with some additional context here. I can bring in a screenshot. If I have a current design system, I can have it use that as well. And I can also bring in a Figma file. I'm going to go ahead and hit add screenshot. I've already got a screenshot right here, and it's from a website called Vybed.org, which is something that I've coded before and spend a lot of time tweaking. I really love the colors and some of the design elements here. So we'll go ahead and select that, ask it to open it. And you can see that it brings that into this uploads folder. Then I'm going to add a prompt down here to give it a little bit more of a description of what I want. And you want to include here the screens that you wanted to make for you. I'm going to ask it to design a website called MVPal, which helps developers through creating a product requirements document before building. This is going to walk you through the usual PRD categories, primary users, problems to solve, et cetera. I'll ask it to include a hero, a step-by-step PRD builder interface, and a user flow. Plus I'll reinforce that it needs to use the Viva.org website for inspiration. even though I included the screenshot right here, and then we'll go ahead and hit send. And this is going to take a while. This tool is a token burner. If you go to your claude.ai website and under preferences, you look at your usage, you're going to see that Claude Design gets its own set of weekly limits. And I've only created a couple of different little things, and it's already up to 57% used. This thing is going to use up your tokens really quick. And if I run out of tokens, I'm pretty much done for the week with this tool. I'll have to wait until next Monday to use this again. It created a little plan of action for what it needed to do here. And you can watch it as it progresses through the process. You can see it's starting to create some of the files. And once it's done, it's going to give you a design. You can see that it picked up some of the colors from my background and it made a clickable website that I can use to build upon. It went through and thought about what this tool is going to need to do. And it provided an interface for me. It also drifted a little bit from my Vivid.org, but I think it did a pretty cool job of it. Another cool thing that you can do with this is open up this tweaks section. Now tweaks is going to give you a little pop-up where you can modify what's happening with the tool. So I'm going to say, I want to play around with the colors and the fonts used in the design. I'm going to hit this add button. So you can already see that even with this simple design, it's already gone to 77% of my Claude weekly design limit. With the tweaks, you could quickly modify the look and feel and kind of explore different options for the website. I think this is actually looking pretty good. I like this color. Let's take a look at carbon, which kind of shows you an option for dark mode. I think I like this plum dust color. You can also change the accents and you can come in here and modify different fonts. I'm going to go with this second one and you can adjust the corner radius. You can keep going and ask the tweaks to give you more options to play around with the design. You can also edit things directly here. So if I click this edit button, you'll see that it's given me some simple options for modifying the fonts here. And this will be the default font for the entire page. But you can also click on any item and control that item's parameters. And this also lets you go ahead and edit any of the text. So maybe we'll just say that it's version 1. We'll let Claude take care of this in the future. And maybe in this navigation part, we definitely want to go with... Let's go with the JetBrains model. I like this sort of coding style since this is a coding website and we can make additional tweaks manually pretty easily by going through that section if we want to we also have the option of drawing something on screen and Make it a change that way. Maybe we can circle this section right here. And if we just start typing anywhere So I'll tell it to change these fonts to programming monospace fonts and give the numbers a red circle background plus make the colors a little bit simpler and then we can send these looks like it needs a little bit of clarification so I'll just tell it again that I drew a circle to highlight the eight conversations area I want monospaced fonts simpler colors and a background circle around each of the numbers we'll hit send right that part is looking a lot better now you can share this design with others by going to this share section and then copy a link that you can send to other team members, give them permissions right here and then everybody would be able to collaborate, draw and edit the file directly right here. The other thing that you can do with share is make a copy of this as a template, something that you can start a new project with a lot quicker. So we'll give this thing a template name. I'll call it clean modern light. I'll say a design for a clean PRD generator, and if I want to, I can publish this so that other people in my group can take a look at this project. You can also download the project as a zip file, export as PDF. Another thing that you can do with this tool is create slideshows so you can export those to PowerPoint or Canva. And one of the great features that you can do here is hand this off to to Clod code, giving you a really good start to continue working with this project. This is just a link to where the project lives on Clod. So I can copy that into my clipboard and then I'm going to switch over to the Clod application, make sure that I'm in the code section. And I want to create a new folder for this project. So I'm going to say open folder and in my coding subfolder, I'm going to create a new one for MV Pal. I'll hit create and I'll make sure that that folder is open. And now I can just paste that prompt. And it's going to bring that into Claude so that I can keep on working on it. Right, it looks like it brought that design in. It's looking pretty good right here. And Claude can really just take it from here. If I go back to my home page, you'll see the template is listed right here. Another thing that I can do is set up a design system. This is going to take some information from somewhere. It could be a GitHub repo, code from your computer, a Figma file. And what I'm going to do is click on this browse button and find that new folder for that MB pal that I created. And I'm going to load up all of these files that it added in there. This is going to analyze those files and create a detailed design system for you to use when you want to build other similar projects. This is a little bit different than the template. So we'll continue to generation and you're going to see how it's different. It's not a real website. It's more of the individual components from the design. When Asset is building, you can see that it gives you different pieces that it's generating for you. You can upload your own fonts if you want to. And you can also give it feedback about what things you like about what it's doing. So if it looks good, just click on. It looks good. If you don't like something, then you can modify it by telling it that it needs some work and you're supposed to go through all these design definitions and just give it some feedback about what you like and don't like. Maybe I'll give it some feedback here. I'll tell it that I'd like the italics to maybe be a little bit heavier and just keep on going through these different places. You can continue to prompt with it over here and give it some additional ideas. But just kind of go through what you like and don't like about the design. Whereas the template is just really a copy of an existing website. This is really more like a definition of your design that is separate from the interface. After a while, it even made some adjustments when I told it that it needed more work. So keep on going through this and you'll have a solid way to begin similar projects in the future. I love this tool. It's the way that I want to work with websites in the future, starting by focusing on the design, establishing design systems that I can reuse over and over. However, right now it burns a lot of tokens, even in my Max account, which is $100 a month, so I'm not sure it makes sense for every project, but it sure makes it easy to make your apps unique and look great before you start coding.