NEW Claude Design Tool Is INSANE!  🔗 **Source:** [NEW Claude Design Tool Is INSANE!](https://www.youtube.com/watch?v=L4ybnW8t1d0) Hey there, it's Leo from Fireall. And in this video, we'll be taking a look at a really, really, really cool feature from Claude that just launched about 30 to 40 minutes ago. When I saw this, I didn't really know what to expect, but while testing it, it really surprised me. Basically, what you do inside of Figma, like create a landing page, set up your entire brand design, or just have all your assets there just ready for whenever you want to build anything. This is also a collaborative tool. So you can click on comment. Leave a comment here like I loved this part. Send a cloud or comment. If you sent a cloud probably it'll just understand that this is the component you want to change. Or if you just leave this as a comment, other members should be able to find that specific comment on the comments tab up here. But I'm skipping a bunch of steps. Let's first go through the homepage and understand how you can get to that point of having an actual design done. I built four different designs with the four different available features that I found. First one being the wireframe, then highfidelity. I also created a design system and finally a slide deck. When you create a new project, you have to choose between either if you want to create the actual highfidelity project or if you're just testing out different designs and different ideas. If you have a quick sketch and you just want to test something out, you can come over to project name. Let me type in something like project test. Select wireframe. Click create. And here you'll see an agent that will understand you want to create a wireframe. And based on the context you give it, which can be many like a GitHub repository, web element down here. This is more about what you can add to this specific project scope. So for example, you can add a save as PDF skill which will then allow the agent to output your project as a PDF. In my example, what I did was click on start with a sketch. When you select this, you're basically given a sketchboard for you to draw in. What I drew was the worst design UI ever, but Claude was able to get that and transform it to an actual wireframe. By the way, this is an actual HTML page that you can click through and see the different sections of your website. You'll also notice that every time Cloud creates this tweaks window that allows you to see different variations. So, if I don't want to see this mobile version, I can just hide it like that. Line wobble, I can make it less wobbly or more. But if that's getting in your way and you don't want to see this, just untoggle it up here. Additionally, I can change specific parts of the websites by using the edit option. So, for example, if I want to change this, I can either change the text or I can change the font, the size, color. This is very similar to I think it's called Elementor for WordPress, but you used to have to build an entire template and pay hundreds or thousands to have a website with all of this capability and now you can generate it in minutes, which is pretty cool. All right, so that's how you can design a wireframe. Let's check the high fidelity feature. Whenever you want to check your past projects, just go back to the homepage, select either your designs. These examples are from Claude. And by the way, I really want to build with this. I believe I might not even cover half of what is possible with this tool in this video and it's still in research preview. So you can probably expect a lot of improvements with this. All right. Now, as for the highfidelity project, I wanted to test with an actual existing website. And the website I sent it was the firecrawl website. This is it right here. I just sent a screenshot. And by the way, if I type in something like firecrawl project, select high fidelity, hit create, let me screenshot the website. And as soon as I insert this screenshot, it is added as one of the uploads to the design files. Hitting send will have it understand what it needs to do and prompt me with these questions on more context of how exactly do I want the website to look like. Since I didn't give it any context, it's asking me what would you like me to design? So, let's select an original landing page for a similar product. And I like that it always considers that I might not have the answers for these questions. So it tells us things like if you don't have one yet, say invent it. So invent it. Or you can toggle things like decide for me. Decide for me. Accent color direction. Let's select the orange one. And leave the side for me toggled for every single question. I believe all these questions are optional, but really useful if you're actually building something. Provide the most amount of context possible. You can even add images as reference here. But as for this example, let me just hit continue and see what it builds for us. While it's building that, let's check the example that it already built previously, which is this one. Honestly, it looks really, really good. And I really like this tweaks option that allows you to change the hero section, the accent color. You can toggle between the light mode and dark mode. Dark mode isn't looking that good. But again, you can just click on comment, select what isn't looking pretty good. And I'm actually going to select everything. The color in dark mode isn't looking good. Background color. Let me send this to Claude. This sends it off to the chat and it should start working on it. All right, it's done. I thought it didn't change for a second, but just by clicking on a link up here, which reloads the page should then apply the changes. All right, now back to our recent build. It seems like it's already done. And this is it. It's really close to the previous one, but there's a huge section here that I really appreciate. And we have more options in the tweak section. So, yeah, this looks more with the original firecrawl landing page. And by the way, this tweaks option, you can ask Claude to add different options here. So, for example, if you want different options for the hero copy, you can just ask Claude to add that for you. Okay, that checks off high fidelity and wireframe. Let's check how you can add your own design system. This was my prompt for setting up the design system. But the reason why they use this design system and why you should configure it for your company is because again for context. It gives Claude the exact context to build something that isn't generic as well as to keep the design consistent. You don't want to be using an inconsistent design every time you post something because branding is all about identity and being remembered. So the more you use that specific and consistent design, the more your brand will be remembered. After I sent my prompt, it asked me a bunch of questions similar to the previous build. And then it took around 10 minutes to actually design everything. Then everything is displayed here. You can either approve it or tell it it needs work. But honestly, everything that was created looks pretty amazing. Like look at this mobile app. And it's not just an image. You can actually interact with it and go inside of the app. Check it out. Really, really cool. There's also a website they generated. This is how it looks like. There's a bunch of different sections. I honestly really enjoyed this. Finally, we have more core design features like type. You can see how the hero section might look like, how the body would look like along with other variations. I honestly don't think designers are cooked because of these types of tools, but rather that they'll have a much more powerful tool to work with. These are all of the primary colors, then neutral, paper, semantic. We have the spacings, shadows, background patterns. The thing about this is that the average person without a design background would just look at it and say, "Okay, I think it's cool. Let's just build it." But an actual designer would know what to do to iterate and make it even better. Now, after you have your design system all set up, you can click on new design using this system. I'm actually going to use this tool myself for building social media posts. And setting up the system design is the very first thing I'd want to do. All right, we covered everything down here. Let's check the system deck. I know you can just go inside of Claudet and ask it to build a PowerPoint presentation and it should do pretty well, but this is honestly just something else. My prompt was create a presentation about Claude skills. Use Claude's brand design to do so. First of all, it absolutely nailed the Claude design and the overall content explaining about skill isn't that bad. I mean, I guess it would benefit from additional context, but the overall structure just looks really good. And you also have the tweaks option here where you can tweak around and change through different variations. This was all built with just this prompt. And after this prompt, again, it made me a bunch of follow-up questions. One of them was if I wanted speaker notes. I did choose to use the speaker notes just to see how it looks like. And it's just basically a text area where you can add your own notes and just looks pretty useful. By the way, I didn't mention about the design files. In the design files, you can see everything that was added as context of the project. So, a screenshot that you send will be found here. The HTML generated can also be found here along with all of the other assets for your project. You should see much more inside of here when you're creating your design system just because I mean all of the SVGs will be in here. The UI kits. So, if you want to check out your actual website, you can find that file in here. So, let's click open and see the actual HTML. And this way, I mean, you actually own what you're building. All right, I guess that's it for today. Thanks for watching and I'll see you in the next video., NEW Claude Design Tool Is INSANE!, YouTube, 01kpgwdq62rjbxjgw9118gnjnq.