LongCut logo

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

By Peter Yang

Summary

Topics Covered

  • Code is now the universal medium for knowledge work
  • AI generates the first 90%, humans do the remaining 10%
  • Any knowledge work company is now a competitor to Anthropic
  • What a great time to be a solo builder

Full Transcript

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

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

animations. They're all just code under the hood. And code is now free or at

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

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

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

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?

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

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?

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

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

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

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

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

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,

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

now. I first asked it to write a tutorial style post and here's kind of the brief outline and 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

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

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

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,

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

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

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

again. And now let's look at landing page examples. Okay, so right here I

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

with. So I have a project here and all I did here is just say recreate the claw co-working page. Right? Pretty lazy

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

illustrations here. And there is some other stuff down here that looks pretty good. So now for fun, why don't we ask

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

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

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

anything anymore. Just go relax somewhere. We have it all handled.

somewhere. We have it all handled.

locate the NIA's hammock and uh hand off your career to us. You

know, I 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

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.

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

continent. But there's a bunch of toggles here. I don't know exactly what

toggles here. I don't know exactly what to do. You can turn stuff off and on. I

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

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

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

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.

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

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

yourself. You can play with it with your kids. And you guys come up with all

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

design system. So first let's do mobile app. So here I've just asked it to

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

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.

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

effort. I don't really know what effort means and we can log the set and keep going. So yeah, this looks pretty good.

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

liquid glass. And I just asked Cloud to create the Apple liquid glass design system. All right. And this is what I

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

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

already. But now let's take a look at this. So, it's created uh type, color,

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

or not. Shadows, spacing, let's just hit looks good for everything. All right.

Yeah, this definitely looks glassorphic.

Looks good. 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

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

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

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 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

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

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

Loading...

Loading video analysis...