WEBVTT

00:00:00.000 --> 00:00:02.240
I replaced my entire $500

00:00:02.240 --> 00:00:08.640
per month website with Claude Design in only two hours. Look how good this looks. It is incredible.

00:00:08.720 --> 00:00:18.875
And this is not a prototype, guys. This is live getting thousands of website visitors right now. And just to be clear, last year, my website brought in 1,600,000

00:00:18.875 --> 00:00:20.075
website visitors,

00:00:20.235 --> 00:00:22.475
but it cost me $500

00:00:22.475 --> 00:00:34.970
per month. And I didn't do anything fancy with it. It was just a static page. Here's what my old website looked like just for reference. I purchased a $50 Webflow template and just edited the text and videos.

00:00:35.210 --> 00:01:01.820
The problem is every time I touch the design, it would get worse because I'm not a designer. But now with Claude Design, you can just chat with it back and forth like I did here. And in just two hours, I replaced my entire website, got this deployed, and it's up and running. Now I'm gonna walk through exactly how to do the same thing. But first, hit like, hit subscribe, and hit the notification bell so you don't miss my next tutorial. The first thing we're gonna start with is what is Claude design.

00:01:02.060 --> 00:01:05.260
Go over here to claude.ai/design.

00:01:05.260 --> 00:01:14.545
On the left hand side are your options for what to create, prototype, slide decks. You can start with the templates or you can just start with other. So I'm going to do company website

00:01:14.625 --> 00:01:17.265
and choose high fidelity. K. Click create.

00:01:17.665 --> 00:01:41.115
Now if you already have something to work with, like you have a design system in Figma or you have screenshots for what you want or you even have an existing code base or an existing Figma file, you can absolutely drop it in here and start with that context. But let's say we're creating our main company website's landing page, and here is my current website. If you don't even have a current website, that's totally okay. You can just describe

00:01:41.275 --> 00:02:08.005
what your products are, what your services and offers are. Plot Design will still go ahead and make you your website. The first thing Claude's going to ask is a bunch of clarifying questions. It's the number one job of our landing page that's going to be driving free trial sign ups for solopreneurs and small business owners. Select the answers to these questions that make sense for your business. Click continue in the bottom right corner. You can see a summary of the answers that you provided on the left hand side. And just like ChatGPT,

00:02:08.005 --> 00:02:18.900
just like normal Claude, this is where you're going to talk to the AI agents back and forth. You can see exactly what it's doing. Right? This is its step by step plan, and it's gonna go one by one implementing

00:02:18.900 --> 00:02:21.860
each step in the plan. So this initial

00:02:21.860 --> 00:02:53.410
phase building the entire thing for the first time is what's going to take the longest, probably five to ten minutes. Now here's our first draft, and what's really cool is Claude Design gave us two different versions. This first version is kind of light themed, cream colored. This second version is dark themed. Okay? And then you can scroll down here to see the entire website. So you can compare these two themes side by side and then choose the one that you like best. Or if you like certain things from a that you want included in b, you can also give Claude that feedback directly.

00:02:53.650 --> 00:02:58.615
And for my particular landing page, all of the buttons should redirect to the pricing page.

00:02:58.855 --> 00:03:11.470
And I'm gonna tell Claude to build out the pricing page similar to my old one. And then I'm gonna show you how you can edit and fine tune this website so that you can get it absolutely perfect to what you're looking for. Dripple.com

00:03:11.470 --> 00:03:55.795
is really nice just to browse inspiration, look for different color palettes you like, especially if you're not a visual person like me. I don't know what colors go well together. They'll search a term like dashboard. Say you really like how this dash dashboard looks in terms of the color of it. All you have to do is take a screenshot of it and then drop it into Claude. Even while it's thinking, you can tell it what you want it to do next. You can queue up additional prompts, and it will go ahead and do this after it's done with the previous prompt that we asked it to finish. But overall, this first draft already looks really good. I really like how it created this kind of, like, animated thing up here. I like this scroll bar over here. I like the list of the eight features. I would probably replace these with social media icons. Right? I've used my photo here.

00:03:56.035 --> 00:04:38.285
Here's the updated design. Remember, we fed in this kind of green looking dashboard here, and you can see that Claude updated the entire website to use this color theme. Here, you can see it also implemented the pricing page. So if I click one of these CTA buttons, it's gonna redirect me to the pricing page. What do you do if there are things you wanna change, but you don't wanna have to, like, type here? There's two different ways of editing this. On the left sidebar, you can treat this as a general chat. If you wanna describe something that's gonna be broadly applied to the entire site, then you wanna use the left hand side chat. However, if you want to just, like, tweak the wording of this or if you want to change, like, just this particular icon,

00:04:38.365 --> 00:04:50.600
um, it's easier to do it in the way I'm about to show you. Up here in the upper right corner, the two buttons I wanna point out to you are comments and edit. So comments allows you to choose an item on the website

00:04:50.935 --> 00:05:07.810
and tell Claude exactly what you wanted to do to change it. Let's say we choose this, and we're just gonna say rewrite this. So you could have it change the color. You could have it insert an image. You can have it put an icon here. You can have it update the copy. You can remove it altogether.

00:05:07.970 --> 00:05:38.490
On the left hand side, it's currently working, so it got our comment. What's really cool is you can just, like, go through the entire page and leave your comments, and Claude will iterate on them. Now if you know exactly what you wanna change, let's say I I wanna change, like, this headline, click edit. And then you can click on something on the page. You can edit the copy, but you can also change some of these things, like what font do you want. So let's say we want, like, a different font. Okay? So we can change that. The font size, the color, is it left aligned, the width, the height.

00:05:38.810 --> 00:05:44.970
Let's say we want to replace this word the with AI, and maybe you wanna capitalize content

00:05:45.175 --> 00:06:12.550
engine. Edit lets you just edit it directly. So more most importantly, you don't burn your tokens. And secondly, it's really much faster to do this for little tweaks instead of having to type it out on the left sidebar here. If you are not on the Claude Max plan, you're watching out for your token consumption, go ahead and click the settings icon on the bottom left corner where you can change your model. For a lot of these tasks, um, you definitely don't need Opus 4.7.

00:06:12.550 --> 00:06:13.190
It's way

00:06:13.545 --> 00:06:14.425
overkill

00:06:14.425 --> 00:06:27.625
after the initial build. The initial build took five to ten minutes just to get everything set up. And after this point, you know, it's gonna be pretty minor easy edits. So you could safely switch to Claude Sonnet 4.6.

00:06:27.800 --> 00:06:35.640
Now the last thing I'll point out before we talk about how do we deploy this and get this live are all the additional tools you have to add in context.

00:06:35.800 --> 00:06:55.745
Remember in the beginning, Claude asked if we wanted to drop design files or Figma files or anything like that. We kind of skipped that step. I'm assuming you don't necessarily have a lot of that. But for those of you who do or if you're in the middle of working on this and you end up seeing design and inspiration from other sources out there, it's never too late to add additional context.

00:06:56.100 --> 00:07:12.025
All you have to do is click this import button. K? And if you have a Figma file, for example, you can click this. If you wanna grab a certain web element from a website that you really like, go ahead and click this, and it's going to use Claude design capture capture to literally inspect

00:07:12.105 --> 00:07:52.050
that thing on the website that you like and recreate it to the best of its ability. If you have skills or design systems, you can also use them here. If you wanna see the full screen view, you can click up here in the upper right corner, click presents. And now we have this nice full screen view, or you can open it in a new tab by clicking. So you have the version you're working on and then the new tab here. So you can, like, really preview what the sites would look like. The designs are not necessarily mobile responsive. To check that real quick, you can right click this, click inspect. This should already be a phone, but if not, go ahead and click on it. And then you can see the phone view of this. So it depends on the website, but if it looks good to you, then great.

00:07:52.130 --> 00:08:02.050
If there's stuff here that looks kind of messed up to you on the phone or you feel like the font is too small here, what you can do is take a screenshot of this, drop it into

00:08:02.385 --> 00:08:05.265
Claude, make this more mobile responsive.

00:08:05.265 --> 00:08:14.225
And it will be able to analyze the image and understand what you mean by making it more mobile responsive. It's common things like your font is too small, you can't quite scroll,

00:08:14.385 --> 00:08:43.215
padding is all messed up, and you can't get certain buttons. So now let's talk about what do you do once you have a design you like. What do you do next? You have a couple options here. Click share in the upper right corner. You can download it as a ZIP, export as a PDF, PowerPoint, send it to Canva. You can export it as a standalone HTML file. Option we're going to talk about is downloading this project exactly as it is and then deploying the website live. And it literally only takes one minute. We need to rename

00:08:43.375 --> 00:08:46.575
the main landing page to index.html.

00:08:46.720 --> 00:09:02.495
The app we're using called Netlify just expects it to be called that. And you should see it up here renamed to index dot HTML. Go ahead and click share again. Download the project as a ZIP file, and then go to this website, app.netlify.com/drop.

00:09:02.735 --> 00:09:10.335
And then we're literally just gonna drag and drop our ZIP file. And this website has basically made it super, super easy for anyone nontechnical

00:09:10.335 --> 00:09:18.430
to be able to deploy their site. This is your unique URL. This is your password. So go ahead and copy the password, and let's open it up.

00:09:18.910 --> 00:09:58.080
Okay. Put in our password and boom. And this is our website. Now this is a publicly accessible link as long as you have the password. You can already share it with your team. You can share it with colleagues. You can get feedback. You can even share it with customers. You will need to sign up for a Netlify account so that you can remove the password and click sign up for free. Just go through this process, and then you'll be able to have access to the app you've just deployed. In Netlify, you can, of course, change the domain so that it's your own business domain, your own custom website domain. It's super easy with Netlify as well. If you enjoyed this video, hit like, hit subscribe, and hit the notification bell so you don't miss my next train.