Claude Design Just Dropped - Full Tutorial (Slides, Websites, Designs)

So, pretty much an hour ago, Claude just released their newest feature called Claude Design. And it already has 6.6

Claude Design. And it already has 6.6 million views. I swear every time I

million views. I swear every time I refresh this page, it's like an extra 200,000 people that have just seen it.

But in this video, we're going to exploring exactly what this feature is and how you can use it in a matter of just a couple minutes. But just as a short intro, you can build beautiful presentations in a matter of just a

couple moments. This is literally a

couple moments. This is literally a oneshot presentation that I created. You

can also style those presentations around, I don't know, like your website graphics, for example. You can load in this website and then it will go to work for you building a presentation with the

exact colors, fonts, themes, all of that kind of stuff. You can also, of course, build beautiful websites right away. You

can upload those in a matter of a couple minutes to the internet. You can build wireframes for something like your website. You can build animated videos

website. You can build animated videos automatically. And you can also build 3D

automatically. And you can also build 3D graphics. Now, in order to get started

graphics. Now, in order to get started here, what we need to do is head over to claw.ai. And on the sidebar, you should

claw.ai. And on the sidebar, you should have access to design. So, when we click in there, I want to point out that this is a research preview, so it may not be available to absolutely everyone yet. If

it's not, it should be in the next coming few hours or days. Let's get

started first by hitting slide deck. And

we can just call this whatever we want, like automatable slideshow. This is just going to be the name over here for you to reference later on. And we have two options. We have highfidelity and we

options. We have highfidelity and we have wireframing. And so when we think

have wireframing. And so when we think about wireframing, this is essentially the final product. It's not going to be like a picture perfect, pixel perfect um graphic that we're designing, right?

It's just going to really focus on the structure, the page to get you maybe the exact copy or structure or whatever the case it is that you're looking to build.

When we look think about highfidelity, this is actually building the final project for us that we could take and then upload onto our website in a matter of a couple minutes. Now, for the purposes of this demo, let's choose

highfidelity because this is probably more interesting. We can click create

more interesting. We can click create and then immediately from within the design area of claw design, we can first of all start with context. So if you

want, you know, to copy a particular theme, let's say you want to copy your website right over here, you can easily go ahead take screenshots and upload those as reference files. You can also

design a system, and we're going to be circling back to this later in the video. You can attach a code base, for

video. You can attach a code base, for example, from cloud code. And you can also upload something from Figma. Now,

of course, we can type this out, but we can also speak to it as well. Can you

please build me a beautiful slideshow presentation that I can send to my clients after a sales call where we are selling landscaping services for $2,000

a package. And so I'm going to send off

a package. And so I'm going to send off my prompt here. And the first thing that Claude's going to do is it's going to follow up with a bunch of questions. And

the idea behind this is that instead of just yoloing something that cloud code's not really going to understand and you're not going to be happy with, it's just going to ask you the right questions to be able to actually build out a design and a presentation that

you're happy with. So you can go ahead and answer this as you like. I'm going

to call my company Landscaping Co. Um

there's no other services that I'm offering at the time. This is all I want to add. And then just for the purpose of

to add. And then just for the purpose of this demo, I'm going to go through this pretty quickly, but it's going to ask you the right questions to get the best output possible on the first take. Cool.

So, I'm going to leave it there. I'm

going to click continue. It's going to build the rest of it out. Cool. So, the

page is done. And I wanted to move my face out of the way here because I was blocking the the chat box here. But, in

order for us to navigate through the pages, we can just circle through the navigation bar down here. You'll notice

it's not perfect. Like, the image hasn't been generated yet. So, that's something that we'd have to add in. But let's just take a look at all the im the the pages.

Um, immediately does look really really nice off the bat. Now, obviously, it's not going to be perfect first shot, so you're probably going to want to change multiple things. And how you can do that

multiple things. And how you can do that is through the tools right up here. So,

the first one is this comment tool where it will allow you to select something on the page and then directly comment on it. So, I want the font size to be 10

it. So, I want the font size to be 10 pixels larger, let's just say. And

you'll notice down here, it's actually selecting this exact element on the page. And now we're actually going to

page. And now we're actually going to send this comment to Claude for it to edit that. Okay. Another option here is

edit that. Okay. Another option here is that we can directly edit something on the page instead of having AI do it for us. So we can select landscaping here or

us. So we can select landscaping here or the title. Okay. And now we have access

the title. Okay. And now we have access to changing the color, size, font, weight, all of that kind of stuff as well. And we can also draw on the page.

well. And we can also draw on the page.

So, let's say I wanted to circle this. I

could quickly circle that. And um down below here, you should be able to chat by hitting like command or control G.

And now I can just type in can you please change the headline there so that the font size is slightly larger. And

then you click send and it'll go ahead and update that for you. So, this is more like granular. in case you want to, you know, I don't know, like highlight something very specific, you can zoom in and you can also go into presentation

mode, whether it's in a new tab, in this tab, or it's full screen. Cool. Now, the

other thing, too, which is really cool, is when you're happy with the presentation, you can export this not only as a PowerPoint presentation, but you can export it directly into Canva.

If you want to go through the Canva route, you will have to come back to claw.ai, AI. Head over to settings and

claw.ai, AI. Head over to settings and just make sure in your connectors you actually have Canva configured. You can

browse the connections up here. Just

make sure that you added it in and hit configure and make sure that you're allowing it to write different slides by default. This is not going to be always

default. This is not going to be always enabled. You just need to make sure that

enabled. You just need to make sure that is enabled so that you can actually export things over to Canva. And also

once you export a PowerPoint presentation, you can go into something like Google Slides for example and you can hit file, import slides and upload directly from your computer and then

import them in. So it's really just as simple as that. Cool. Now let's take it a step further and create a beautiful website using Design by Claude. So back

inside the homepage, I'm going to hit prototype highfidelity and we'll call this like automatable website and we can click create here. Now, I've already actually gone ahead and I've created

this presentation or this website already. And so, all I typed in here is

already. And so, all I typed in here is I said, "Here's my screen uh my brand screenshots, and I included two screenshots I took from my website."

Okay? So, I went over to the site, took some screenshots of the whole page, dumped it in here, and I said, "Please create me a one pager uh for a new service, AI content system building 10K

one time, and so on and so forth." And

just from that it was able to design this whole landing page which looks really really beautiful. The cool thing is is that you can import in uh of course screenshots but you can also

import in files from other uh other software as well like Figma for example or GitHub or you can just drop in uh the code as well and it's going to redesign

based on those files which is really really cool. Now, let's say you're happy

really cool. Now, let's say you're happy with the design here, okay? And you want to export this and you want the site to go live. You can just click export and

go live. You can just click export and then hand off to Claude Code. You can

copy this command right down here and then inside a new uh window inside Claude Code, you can just literally dump that in and it's going to uh build out the entire thing for you and it will

build out the entire site for you so that you can access it online. Now, if

you want to deploy this live, probably the easiest way would be to upload your code into GitHub. GitHub is like Google Drive for code essentially. You store it online and then once it's in GitHub, you

can export it uh to Versel and Versel will host your static site online. Both

of these applications are free. If you

want the same consistent design spread across all of your different projects you're building with Claw Design, what you can do is head over to design systems and create a new one. Now, you

probably want to add in like a company name, for example, and a blurb about what you do here. And then you can drop a link to your GitHub repo, okay? Um,

add that in. And then you can also add in code or upload from Figma or add any assets like fonts and logos and all that kind of stuff. And then you can continue to generate. This will take about 15

to generate. This will take about 15 minutes. And then you can apply this

minutes. And then you can apply this moving forward to every single project you create. So if we actually just copy

you create. So if we actually just copy this URL and go back to the homepage here, now all of a sudden inside of the uh prototype or interface on the left-hand side, we can choose from a

design system and you can create as many of these as you want. So that's it for this video, guys. Thank you so much for watching. If you found value in it, make

watching. If you found value in it, make sure to hit that subscribe button and like button down below.