Claude Design: Everything You Can Build in 16 Minutes (5 Real Use Cases)

Hey everyone. Today I want to share a hands-on review of Claw Design, Anthropic's brand new AI design tool. I'm going to run through five real demos live using claw design to create videos, slides, websites, apps, and even a design system. Now, before we get started, I just want to recognize that Anthropic is building an AI native version of basically the entire knowledge worker stack. Think about it. They already have claw code for development, claw design for design, claw codework for documents and more. The common thread across all three products is that code is now the universal medium for knowledge work. Videos, slides, websites, apps, and animations. They're all just code under the hood. And code is now free or at least very cheap. So, I don't think it's a stretch to say that Anthropic is now competing directly with tools like Figma, Google Workspace, Microsoft Office, and more. But how good is cloud design? Let's run through five use cases, including animated videos, pitch decks, landing pages, mobile apps, and design systems.

Okay, so let's start with animated videos. So, this is the claw design interface, and let's make a new project. Let's say video demo and create. And all I'm going to do is I'm going to find Anthropics claw design announcement post which is right here. And I'm going to copy this whole thing over here. And let's go back to your project. So let's just say make an animated video for claw design featuring this content. And let's paste the content in right here. You can say paste the text 40 lines and let's hit send. All right. So if this works, claw should now ask some clarifying questions that you see here, right? So how long should the video be? Let's say 30 seconds. What tone? Let's say playful and warm. What should the video cover? Probably uh hero. You know what? Why don't we say decide for me? Visual direction. I don't know. Maybe this one right here. And what's this for? Let's say it's for social media and the motion. You know, I'm not a video designer. So, why don't we say subtle typographic elegant transitions and should we show a mock product UI? Why don't you decide for me? And how should it end? Let's just say decide for me, too. All right. So, I really love how it actually asks you a bunch of clarifying questions. It's kind of like in clock code when you ask to do something. It also asks you a questions to clarify the spec and clearly Anthropic has copied that over to here. All right, so now let's hit continue and it's going to go off and actually generate the video. And by the way, the video is basically just code, right? It's HTML, it's CSS, maybe a little bit of JavaScript. So let's see what kind of video it comes up with. I'm going to skip ahead. Okay, so we're back. So that took about four or five minutes to make. So let's take presentation mode and do in this tab and let's hit play for the video. All right. So introducing clot design the speed of thought. That's a great value prop. And it's going to highlight the six use cases here. And let's see what comes next. All right. It's got the three value props. And it's really impressive how it's made the illustrations in each value prop animated. And finally there is a call to action to go and play with claw design. Right? This is pretty incredible stuff. You know, it would have taken hours or days to do manually for a professional video editor, but Claw did it in just a few minutes. And because the video here that you're seeing is just code, you can also manually tweak stuff. So, just turn on this tweak module. And for example, I can tweak the color palette and I can also add other stuff. So, the only flaw right now is that you cannot actually export this as a video as far as I can see. So, you're going to have to use, for example, screen recording to actually save the video, right? But overall, this is pretty incredible. All right, so now let's move on to our next

use case, which is using Claude to make a slide deck. Now, when using AI to make a deck, I like to use regular claw first to iterate on the copy for each slide. So, for example, to make a slide deck for this tutorial that I'm sharing right now. I first asked it to write a tutorial style post and here's kind of the brief outline and then we went back and forth on the copy a lot and finally ended up with something like this down here, which is a clean version of each slide and the copy that appears on each slide. Right? All I did was I copied all the copy here and I pasted into claw design. If I scroll all the way up here saying, "Hey, can you make a slide deck based on this copy? " And this is the slide deck that I came up with. Okay, so cloud design, here's a new AI designer and here's the five use cases and then there's like a takeaway slide. Now, this is okay, but I think this is kind of boring and static compared to the videos that we just made. So my pro tip here is that you can actually ask claw design to make a video first and then turn that into a deck and you can make much more engaging and animated slide decks that way. So here's another project where I pasted the exact same slide copy and I asked it to make an animated video instead. Right? And this is the video that I made. So you can see that this slide deck is actually way more engaging and way more interesting than uh the static slide deck that we had before. So the next step is I just hit share here and I hit duplicate project to make a new version of this. And basically in this project all I did was I just asked it to convert this video into an animated slide deck that I can manually toggle through. That's literally the only prompt that I put and it was able to change the video that you just saw into the slide deck that I'm sharing. Right? So yeah, this is a much better result than just getting it to create a static deck. Right? Okay, so that's my pro tip. By the way, I think with these artifacts, you can use AI to generate the first 90%. But the last 10% still requires manual updates, right? So, let's kind of make some manual updates right now. So, for example, over here, it says behind the craft episode 47. I don't really like this, so I'm going to go into edit mode here, and I'm just going to delete this text right here. And then I'll turn off edit mode, and it should be gone. And you can see here that I've also prompted AI to make some up updates. So, for example, I prompted it to swap video into the first slot and slides into the second slot. And finally, uh as you saw before, you can turn on this tweaks panel right here. And you can tweak the pallet or you can ask it to add other things to edit and update. So, for example, instead of the warm palette here, we can make it ink or clay palette. Uh, I think that's like an MVP for AI design tools these days. You can get AI to generate the first 90%, but you have to let the user make manual tweaks afterwards because AI is never going to get it right in one shot. All right, now let's have some fun. Let's go open the slide again. And now let's look at landing

page examples. Okay, so right here I have the claw co-working page and it looks pretty good, right? So let's just ask claw design to recreate this marketing page and see what it comes up with. So I have a project here and all I did here is just say recreate the claw co-working page. Right? Pretty lazy prompt. I didn't even link the website uh and but it managed to find the link and recreate it. And you can see here that it's not quite perfect. It doesn't really have the video here. And let's scroll down. And there's some other things that don't look quite right. But this is probably like 80% there, right? It generates some pretty good illustrations here. And there is some other stuff down here that looks pretty good. So now for fun, why don't we ask it to update this website to a ton in cheek version of anthropic taking over all knowledge work. And let's go ahead and submit. And let's see what it comes up with using the same style. Okay, we're back. And it looks like uh Claude updated copy for this co-work website to something that's way funnier. So first of all it says it acquired the concept of work. Anthrop is pleased to assume responsibility for all the large tasks. Please place remain seated. And the tagline is we'll take it from here. Uh we took all of it. You don't have to do anything anymore. Just go relax somewhere. We have it all handled. locate the NIA's hammock and uh hand off your career to us. You know, I think it's only a matter of time before they actually really do take over most of knowledge work again. Maybe AI will do the first 90% and then us humans will do the remaining 10%. So yeah, so maybe I'll publish this website and share a link with Anthropic to see what they think. Maybe they'll get here in like a year from now. All right, but let's keep going. Let me show you some more things that it can generate. Right.

So in Anthropic's marketing video for claw design, it showed that you can generate a 3D globe, right? So I basically put their prompt into my own thing. Design interactive dark theme graphic showing how culture flows between cities and then make a rotating globe. And this is what I came up with. Pretty impressive animation. The continents don't look quite right. Uh it looks like everything merge into one big continent. But there's a bunch of toggles here. I don't know exactly what to do. You can turn stuff off and on. I guess you can make the art glow more. And yeah, it looks pretty fun. And I can always prompt it to make the contents look better. All right, so now here's another fun one you can make. So this is a prompt to create a very large editable text box. And for certain words like fire, smoke, metal, and wind, render visual and particle effects that match the word, right? And here's the words I came up with. So let's just type the words. So let's say I'm on fire. And you can see there's fire here. Need water. Seeing a lot of smoke, right? Hope for some wind. Electricity. I love the lightning on electricity. Ice and stars. All right. Oh, it's actually not electricity. It's electric. So, let me fix that to bring the lighting back. There we go. All right. So, that's pretty fun, right? And you can make that yourself. You can play with it with your kids. And you guys come up with all kinds of creative ideas because design and code is now so much easier with cloud design, these other tools. All right, so now let's move back here and

let's finish off with mobile app and design system. So first let's do mobile app. So here I've just asked it to create a beautiful mobile fitness app. And as usual, it's asking me for some clarifying questions, right? So let's fill them out together. So I want to use it for strength training. I am definitely not a serious athlete. Let's say busy professional visual style um what we say energy and let's ask the design home workout in progress and um how many visual variations let's do single variation how interactive why don't we do clickable nav or you want to decide for me and let's do decide for me for all of this and uh let's hit continue and see what it comes up with. All right, so I'm going to skip ahead and see how good Claude Design's mobile designs are. Okay, we're back. That took about four minutes and Claude has made a beautiful mobile app design for us. And you can see here it is actually taking screenshots of it and verifying it to make sure that it looks good. But let's take a look ourselves, right? So, first of all, we have a pretty warm looking app. Uh, our next workout is push day. And there's a bunch of stats down here. And let's hit begin session. All right. So now we're working our bench press and we can adjust the weights and how much effort. I don't really know what effort means and we can log the set and keep going. So yeah, this looks pretty good. I think there are some issues here, text overlapping issues, but you can see here that Claude is still uh reviewing everything and fixing issues. So it looks like Anthropic has actually built play testing into cloud design. So that is actually taking screenshots of what it's making and making fixes afterwards without you having to tell it to, right? Which is pretty great. All right, so now let's move on to our very last use case

which is creating a design system. Now I am a PM. I am a wannabe designer. I really don't know that much about design systems. All right, but nevertheless, I still asked Claude to make design system for Apple liquid glass. And all I did was I uploaded a Figma UI kit of Apple's liquid glass. And I just asked Cloud to create the Apple liquid glass design system. All right. And this is what I came up with. And by the way, if you want to try this, it's pretty much going to use up all of your tokens to create a design system. It took about 10 minutes to do it. So I only recommend doing this if you really want to have design system and you already have yours in place already. But now let's take a look at this. So, it's created uh type, color, spacing, and there's actually a bunch of stuff that I need to review, right? So, it created the iconography. Let's say looks good. It created the motion easing curves looks good. Remi file looks good. Even radi I really don't know if this looks good or not. Shadows, spacing, let's just hit looks good for everything. All right. Yeah, this definitely looks glassorphic. Looks good. Looks good. All right. So we just hit looks good for everything and our design system is now ready to go. And now I created the same fitness app but with this design system attached. So now let's take a look. All right, this is what I came up with. So it definitely looks like liquid glass but there's definitely a lot of issues overlapping stuff and other issues. And it's probably because I didn't give it a proper design system to be honest. But overall this app definitely looks a lot worse than this app right here. So we can obviously continue to prompt it to make edits but for the sake of this video I am just going to move on. So we

just took a tour of using claw design to create videos, slides, landing pages, mobile apps and even a design system. And if you want the exact prompts to create what I just shared, please check out the link in the description to read my written guide with the prompts. Now I want to close with a few takeaways. Number one, it's pretty clear to me that Anthropic is going after the full knowledge stack. They have cloud code for coding, cloud design for design, and co-work for docs and more. And claude, of course, can also read your emails and manage your calendar for you if you let it. So, what this means is that any knowledge work company is now a competitor to anthropic. I'm talking about incumbents like Figma, Google Workspace and Microsoft Office along with AI startups like Replet, Lovable and Gamma. Traditional tools like Figma and Office, they were designed for humans to handcraft designs and slides one by one. But a default path now is to work with AI to get 90% there and handcraft the last 10%. and AI native tools like repidil loable and gamma they can create beautiful videos and slides but they do pretty much very similar things as claw design and claw code and some of these other tools right so at this point I can't tell if anthropic is in the business of building a platform for other developers or potentially just competing with every single AI startup out there but finally the last point I want to make and that's more positive is what a great time is it to be a solo builder AI is now good enough to be an entry-level designer and engineer. And as someone who's training product, I can now create whatever I want with AI's help. I just wish I had more time in the day to tinker and make these products. So overall, cloud design is still early and pretty buggy. And it's also not clear to me how design, co-work, and code all fit together in Anthropics product suite. But I think it's a pretty amazing product and I definitely recommend giving it a try because it's just so fun to play with as you see in this video. And if you enjoy this practical tutorial, please be sure to like and subscribe to my channel for more like this. Thanks so much and I'll see you next