Transcription
So, the updates never stop. Enthropic just released Claude Design, which now gives us an interface to create web apps, websites, pretty much whatever we want via the Claude interface. This is their version of Google Stitch. And as you can see from this demo video, it's all about giving you the ability to tweak everything from the macro to the micro with these designs. And we're not talking about just web apps, we're also talking about mobile designs as well. And it's kind of funny because when we talk about Enthropic and Cloud Code, one of its biggest weaknesses is front-end design. So to see that they're now coming out with a full-fledged application that handles this weakness is pretty cool.
So in this video, I'm going to show you how it works. We're going to do a quick demo so you can jump in there yourself. Now, Cloud Design was created with Opus 4.7 in mind, and it's available if you're on anything from the Pro Max to enterprise. And this does everything from prototypes to mockups to PowerPoint presentations. And it's something we can export into things like Microsoft PowerPoint or send it to Canva.
Now, one of the cool things about this is brand design. So, you can give this a codebase, say the codebase of your website, and it will pull all the brand assets from the website. So, it can match things like colors and typography to the design you're working on.
So, to get started, you just need to head to claw.ai/design, and it will take you to a web page that looks like this. Now, right away on the left, we have a few different options. Prototype, slide deck, you can use a template or other. Down here on the bottom like I was talking about. We have the ability to create a design system. So if I go to setup design system, I can give it something like my company name and then I can provide examples of my design system. You don't have to do this, but this will help if you already have something you're trying to match it to. So you can give it the link to your GitHub. You can actually drag the folder. So if you have the codebase on your actual computer, you can drag it here or you can just add the fonts, logos, and assets as well as any other notes.
So, what I did is I just selected the folder on my computer with assets to my website and then I just hit continue to generation. When you do this, especially if it's a larger codebase, first of all, it's not going to upload the entire codebase. It's going to figure out which files actually make sense. And secondly, you'll get a pop-up window that says, hey, this can take 15 to 20 minutes as it goes through all your files.
Now, if you want to do something from scratch, you can totally do that as well. So, we'll just start a new prototype. We'll call it chase demo. We have two options. You have like just a rough wireframe or we can go straight into a high-fidelity mockup. So we'll do the mockup that's going to take you to this page and again definitely getting some stitch vibes here. So I'm going to tell let's design an interactive dark themed graphic showing how culture flows between cities a rotating globe with the cities connected by glowing path. This is the same thing they did in the demo. But I'm interested to see if what we get here actually matches the asset they showed us in the video and and what sort of differences we're going to see. How much should they hype it up in their ad. So, we're going to go ahead and send it. And by the way, you can see here we can also choose things like the model. You can attach stuff. You can actually do voice here and import whatever you want.
So, right away, it starts asking us some questions, which I really like. This is almost similar to plan mode inside of Cloud Code. So, what kind of culture we think? Uh, let's just do mixed globe style. Let's do this flow path. That looks cool. What do we want to do for color palette? Uh, let's do multi-hue. And right away, I I love the fact we're now getting these prompts. If I go into stitched, I'm not really going to get this. If I go into other things, I'm not really going to get this. Like, one of the most powerful things inside of Cloud Code, and we've talked about this in other web design lessons is, you know, having this back and forth to kind of figure out these blind spots in our plan. And the fact it's asking me all these questions, it's huge. And it's asking me quite a few. You know, even normal plan mode in cloud code only asks like three. So, we'll drag to rotate. What city should we feature? Let's do top 10. How much UI? Let's do full dashboard. Overall mood, let's do editorial. We'll keep with editorial. Uh, what should be tweakable? We'll do flow color palette. Have it do three things. Let's continue.
And then over on the left, once we answer those questions, it sets up its progress. Again, similar to what we would see in cloud code if we had it on plan mode and had to do stuff. And by the way, this is obviously something that you have to be on the web app to do. You this isn't something that's available in the terminal for obvious reasons due to the graphical nature. And from what I'm reading, I I don't think this is ever going to be implemented into the desktop app. Or maybe it will at some point, but as of right now, you have to do it through claw.ai.
Now, as this is building, let's talk about some of the questions you might have, which is like, how is this any different from me giving it this prompt right here into the chat window or pulling up cloud code and just saying, "Hey, I want you to build this interactive thing." Well, and having it just, you know, create some sort of web app out of that. The answer is at if we get super reductive, nothing really like right, it's just writing code. It's going to be the same thing. The difference is, and again, if you've done any sort of front-end design in any capacity, even if it's just a simple landing page, you understand the power of being able to visually see these things and compare them. That's why, you know, Google Stitch is so cool because the awesome thing about Stitch isn't even necessarily design philosophy, although I think it's really good. It's the fact that I have a UI where I can visually see a bunch of options and edit it in this manner and then when I like it, pull it into code. When I'm doing everything code first, from a design perspective, it's tough. It's kind of janky. It's kind of hard to take a visual medium and put that into natural language which gets turned into code which gets turned into a visual and really nail it especially at the beginning like I need to see things visually at least for me and I need to see options and so having this is awesome. This is a great step forward for anthropic and clawed code because this has been a real weak point. That's why you see apps like pencil and things like that becoming so popular because it gives you that visual medium to deal with these sort of things. And also quick note like you can see down here like these are full-fledged applications. It's essentially prototyping. So you can have these things called APIs. You should be thinking this more not just as like a visual design Canva thing. You should be thinking of this more in terms of like Google studio like Google AI Studio type deal.
So here's what it came back with. Kind of went with editorial style. We can see the globe right here. I can drag it with the mouse. We can do the rotation speed, change glow intensity, change the pallet. That's kind of cool. And then it kind of has like little writeups over here. Now, let's talk about being able to edit this thing. First of all, we have this little tweaks thing up here. So, the tweaks just has to do with rotation speed and all that. I can leave comments. I can edit. I can draw. And then we can also do things like full screen to see what this would look like for real. Oh, that's kind of interesting in full screen. That looks much much better actually. But let's say I wanted to make an edit to this thing. Obviously, we could just go back into the comp window and prompt it. If I go to edit, I can get a lot more granular. This kind of reminds me of like cursors editor or even something like lovable. So, I can, you know, actually select the individual cities themselves. If I select the globe at large, it will bring it up here. And I can change things like the color. That looks hideous. Uh, you know, the height and all that. So, I have the ability to get very, very specific with what I want to change, which again is great. Better than me saying in text, hey, I want to change the size of this. Well, I can just select it in here and edit it that way.
We could also do comments. So, I can click on any particular thing. Same thing with edit, but instead of actually changing, hey, these specific numbers, I can click on the globe and leave a comment and be like, can we make the globe larger? You know, send a clot. And it creates a queue of comments if you don't want to send it to Claude right away, but at any point you can then send it to Claude and we'll start working. On top of that, we can also draw. So, I could be like, "All right, well, I just want like a moon over here, you know? Let's get let's get a moon. I want to see like Artemis 2 over here flying around." Stuff like that.
Then over here, we also have the design file. So, you can actually take a look at the code underneath the hood. And lastly, we have the ability to export and share this thing. So, if I click export, I can download it as a zip. I can export it as a PDF, PowerPoint, send it to Canva, or what's also super cool is I can hand this over to Cloud Code and it gives me the command to bring this inside of Cloud Code, which is great.
So, that's where I'm going to leave you for today. I know that was kind of down and dirty, but just kind of wanted to show you how to navigate this thing and what's possible. Definitely expect a deep dive in the next day or so showing you how you can get the most out of this. As always, let me know what you thought. If you want to get your hands on the Chase AI masterclass, that's down in the pin comments.