- Hey, my name is Caleb, and in this video, I'll teach you how to build a $10,000 website using Claude, even if you've never built a website before or written a single line of code. Take a look at the websites on your screen right now. I built all of these myself with Claude, and what makes them special isn't just how good they look. It's what happens when you scroll down the page. The whole page moves along with you, almost like it's telling you a story.

This is the first website I built. It's for a coffee shop, and as you scroll down the homepage, the coffee slowly pours right into the cup. The next website I built was for a perfume brand, where a single drop falls from the top of the page and then transforms into the perfume bottle. Then I built this one for a tech company that pulls you through this beautiful field of purple light. It's almost like you're travelling through space.

And the last one here is for a clothing brand that sells jeans with this iconic green stitching. And as you scroll down the page, you even get to sew the stitching into the jeans yourself. Now, I know what you might be thinking. Websites that look this good usually come with a catch. Maybe they take forever to load, or they feel clunky, or they just don't work right on your phone. But here's the best part. These load nice and fast, and they work just as well on your phone as they do on a computer.

And these websites are adaptable to any niche, not just the ones I showed you. I even built one of these websites for my own portfolio with my face right on it, all in a single chat with Claude. Normally, a site like this would cost you thousands of dollars from a developer or an agency, but every site I just showed you was made with three affordable tools the exact same simple way. So how is this even possible? Well, over the last week, I worked with Claude to create something called a skill.

You could think of it like a set of instructions you hand to Claude one time. And once you drop it in, it doesn't matter what your website is for. A restaurant, a store, your business, anything at all. You just tell Claude what you want, and it builds you a website that looks just like the websites I just showed you. So what actually makes a website like this worth $10,000? There's a lot more to it than just looks. The skill researches your niche and your real customers, writes the copy, and builds the whole site around what actually makes people buy.

So by using the skill, you're doing the exact same job you'd normally pay a designer or an agency thousands of dollars for. And in this video, I'm going to teach you how to use it the right way. And once your website is ready, you're probably wondering how to get it online. Well, Claude can handle that part for you too. Using the same skill, it deploys your site live on your own custom domain, all on its own, and keeps it updated as you make changes, so you never have to touch a dashboard or write a single line of code.

It's really that easy, so if any of this sounds complicated, don't worry. I'll walk you through every single step from a blank screen all the way to a finished website that's live on the internet. And by the end of this video, you'll know how to do this for any website you can dream of. So let's go ahead and get started. So the first thing that you'll do is head over to claude.ai to create your Claude account. You'll find a link to this webpage down in the description.

From here, you can either sign up with your Google account or just enter your email address. From here, just go ahead and continue with the signup process. And after you create your account, you'll land here on the plans page. And here's how to make sure that you choose the right plan for you. At the very least, to build the kind of websites I showed you, you'll need the Pro Plan. You can either go with the yearly or the monthly option, which is $20 a month.

The reason why you need the Pro Plan is because if you scroll down here, you'll see that it includes Claude Code, and we need Claude Code because we're going to be using it to actually build your website. Now, when you're building your website with the Pro Plan, you'll most likely be using the Opus model. That model is a step below the most powerful one, but it still gets you great results. Now, the newest and most powerful model is called Fable, and Fable is what makes the best looking sites.

But right now, Fable is only available on the Max Plan, which starts at $100 per month. You can also add usage credits to a Pro account to get access to Fable, but those credits are pay-as-you-go and the cost can add up pretty quickly. Claude also runs an occasional promotion that gives pro users access to Fable, but that depends entirely on when you're watching this video. So here's the short version. Pro and Opus build you a great site.

Max or Credits gets you Fable and the best possible result. The Claude skill works with both, so it's totally up to you on what you choose here. In my case, to get access to Fable, I'll be going with the Max Plan. And once you've chosen your plan, just go ahead and fill out your payment information on the next page. And after you've done that, you should land on this page right here. This will give you the option to instal the Claude Desktop app.

We'll need this to continue, so go ahead and scroll down and click this button right here to download the desktop app. Go ahead and run the Instal Wizard here. And then just wait for the Claude Desktop app to instal, and then log in with the account that you just created. Okay, and once you've installed the desktop app and you've signed in, you should be brought to this screen here. The first thing that we'll do here is go over to the top left and switch over to the code tab.

And that's going to bring us into Claude Code. Before we begin our chat here, there are a couple things that we have to do first. Let's start by going down to the bottom right. And here we're able to change our model. At the moment, mine is currently set to Opus. Since I'm on the Max Plan, I have access to Fable, which is the strongest model currently available. I'll be using this for my build, but like I mentioned earlier, you can still use the skill on Opus as well.

Both options work great, but you'll get slightly better results with Fable. So in my case, I'll switch over to Fable. And the next thing that we'll do is adjust the effort here in the bottom. I'm going to take the slider and move this all the way over to the right. And now to build my website, I'm using the strongest cloud model with the highest effort available, and that's how you'll get the best results possible. The next thing we'll do is head over to this folder icon right here.

Let's click in, click open folder. And here we'll make a new empty folder somewhere on your computer that's going to act as your workspace. It's basically the home base for all of your website's files. So in my case, I'll go over to my desktop, then I'll right click over here, go into new, and then folder. And I'll just name this 10K websites demo. Then I'll go down to the bottom right here and click select folder. And now everything that we do within Claude Code will be saved right here.

And one last thing we'll check here is our mode. I'd recommend making sure that you're on auto mode. This will let Claude work for you without asking for permission at every step. And with all those things done, we're ready to connect our first tool to Claude Code. The tool that will be connecting is called Higgsfield. Higgsfield is basically the generator that creates all the images, and also most importantly, that beautiful scrolling video that moves down your website as you scroll down the page.

Higgsfield is where all of that comes from. So what we're going to do here is connect Claude and Higgsfield together, so that way Claude Code can generate your video and your images and drop them right onto your website for you. So the next thing that you'll do here is head back down into the video description, and there you should find a link to Higgsfield. And by using that link, it'll take you to the page with their best current deal.

Higgsfield does change their offers pretty frequently, so what you see on your screen may not be exactly like mine. The only thing that matters here is that you sign up for an account that has credits on it because that's what pays for your images and your video. So right here you can see that they're currently offering a $0 one-day trial. So in this case, I'll sign up for this free trial, okay. And once you sign up for an account with Higgsfield and you have credits loaded into your account, you're ready to move on to the next step.

From here, let's go up to the top and click into MCP and CLI. Now on this page, go ahead and scroll down and copy this URL right here. With this copied, go ahead and switch back over to Claude. Now back over here within Claude Code. Let's go down to this plus icon right here. Hover over connectors, then click into manage connectors. Go up to the top right and click add. Click add custom connector. For the name here, let's type Higgsfield, and then paste in that URL right here.

Go down and click add and then click connect. And it's going to open up your web browser again. You may be asked to sign back into your Higgsfield account, so go ahead and do that. And then here you're able to connect Claude to Higgsfield. So let's scroll down and click allow. From here, click open link. And with that done, Claude and Higgsfield are officially connected. So now Claude is able to generate all of your images and video for you right here inside of the chat.

So now that everything is finally in place, let's go ahead and bring in our Claude skill and start building the website. So the next thing that you need to do is head back down to the video description and download the 10K website skill. You'll see a Google Drive link to the skill, and it's completely free to download. That skill will teach your Claude Code how to build these types of websites from start to finish. And here's what you have to do after installing the skill.

Go ahead and open up this folder that we used as your directory on your computer. I'll go ahead and open up that folder here. And after you download the skill, you just want to drag it right here into this folder. And just like that, Claude now has access to the skill and knows exactly how to build these kinds of websites. So I'll go ahead and close out of this. And with that skill loaded in, let's go ahead and send our first prompt.

Use the 10K websites skill to build me a website for my coffee brand. Now, of course, in your case, you'd want to edit this prompt to say exactly what you're trying to build. You can add more information if you want to, but the skill is designed to ask you all of the right questions to make sure that Claude understands exactly what you want to build. Now, once you have your prompt typed out here and you have the skill inside of the folder, you can go ahead and send this prompt.

And this is what it looks like when you start a new conversation with Claude Code. You'll see your message here on the right and you'll see Claude responding in real time on the left. So now we'll go ahead and give Claude Code a few moments to extract the skill from the folder and work through our prompt. And then once it extracts the skill and make sure that everything is working correctly on your system, it's going to start asking you questions about your website.

Right here, the first question it's asking me is about my coffee brand. It's asking if this is a brand new idea, if I have a real shop with photos, or if I have a real shop with no photos. And I can also type my own answer down here. In my case, I'll just go with a brand new idea and I'll have it generate all of the visuals for me. Now, the next question it's asking me is about the vibe of the website. I have a few options here between warm, calm, and handcrafted, dark and dramatic, bright and playful, or clean and minimal.

In my case, again, I'll go with the first option here. Now it's asking if there's any websites or images that I want to take inspiration from. I have the option for Claude to surprise me or if I have some stuff to share. And if I did have some reference images or real photos of my coffee shop, I could just drop them into the chat. And again, I'll go with the first option here. Now it's asking if I have a logo, product photos, or any other files I want added to the site.

If you have your own logo or product photos, feel free to drop those in now. In my case, since this is just a demo website and I don't have anything for the brand, I'll just have Claude make everything from scratch. And as we can see right now, the skill is behaving exactly as it should. It's asking us all of the right questions and giving us opportunities to upload our own files or just have AI design everything for us.

So no matter if you have your own established brand or you're starting something from complete scratch, you're able to generate a website in minutes. Okay, now Claude is asking us about the scrolling video on the website. This is a big choice here because this is what the website's scroll video is going to look like. It's the main hero section that appears at the top of the website as you scroll down. This skill is trained to know what type of concept will work well for the scroll.

So for example, here, the top one is an espresso pull. So that means that there's going to be coffee essentially falling from the top of the website. And then as you scroll down, it pours into the cup. There's also some other options here, like a pour-over and coffee beans falling down the website. And if you have your own custom idea, you can type it out right here. In my case, I'll go with the recommended option. And now it's asking what the brand should be called.

I'll just go with the recommended option again. So now that Claude has all of the information about our website and our brand, and it knows exactly what we're trying to build, it's going to use that Higgsfield connection that we established earlier to prompt Higgsfield to generate the starting frame for your hero video. Right here you'll see that it's currently generating that starting image. So we'll give this a few moments to process.

Okay, so the image generation from Higgsfield has completed. Claude is now asking us if we want to use this frame for the video or if we want to change it to something else. I'll go ahead and minimise the questions here so we can actually see what it came up with. And yeah, I think this looks pretty good. What it's showing you here is your starting frame for the video. So whenever you load into your website for the first time, this is where the scrolling website is going to start.

And then as you scroll down the page, the coffee is going to fall from the top here and it's going to slowly pour into the cup at the bottom of the page. So if you're happy with this generation and you want to use it for your video, just go ahead and open up the questions here and tell Claude to use this frame. And the next thing that Claude is going to ask you is which video model you want to use. It's going to tell you the model that's available to animate the video and how many credits it's going to cost.

If you have a preferred video generation model, you can choose yours here. In my case, I actually prefer Seedance, so I'm going to go with that. Now Claude is going to work with Higgsfield to generate your hero video. This process can take a few minutes to complete, so I'll go ahead and fast-forward to whenever the video's ready. Okay, so our video is ready for review. You'll see here that Claude comes back with a question asking if you want to use the video that it generated or if you want to change something.

It's also going to tell you how many credits it'll cost to regenerate the video and how many credits you currently have left. So let's go ahead and minimise the questions here and review the video. Yeah, I think this looks super clean. I can imagine that as you scroll down the website, this coffee pour from the espresso shot is going to look really cool as you go down the page. Now let's open up the question again and I'll go with use this video.

Now, the next thing that Claude is going to do is generate some additional imagery for the other sections on your website. I'll close out of the question here and you'll see all of the different image generations it's come up with for the other sections on your site. If you're happy with these, just open up the question and tell Claude to use these images. And from here, the next thing that's going to happen is Claude is going to go ahead and build your entire website for you.

Keep in mind that this process can take quite a bit to complete. I've had it take anywhere from like 20 minutes all the way to over an hour. It really just depends on how complex your website is. So be patient, go grab a coffee, sit back and relax while Claude does the work for you. So I'll go ahead and fast-forward to whenever my website is complete. Okay, now my website is ready to go. The next thing I'll show you how to do is how to properly preview your website and offer revisions to Claude.

Your website may open up here on the right-hand side, but from my experience, this preview panel doesn't work super well. So I'd recommend closing out of this and then clicking on this link right here. That link should open up your website inside your web browser. And to preview our website, all we have to do is just scroll through it. In the background here, I can see our hero video. And then as I start scrolling, the video begins playing.

I have some text here that's built to the side of the website. As I scroll through, we'll see there's some more text that appears here, but this doesn't look quite right. So I'm going to make sure that I note this down to give to Claude later and tell it to fix this problem. Then as I continue scrolling, there's some more text here. And then at the very bottom of the hero section, we have our call to action. So I think this is a really solid first version for our hero section.

And if I continue scrolling through the website, we can see our other sections as well. These are those three images that we saw earlier. Scroll through, we'll have some more sections here. We have this cool interactive button here that allows us to interact with it and kind of pull the coffee for ourselves. And below this, we have another section here, and this keeps going all the way down to the bottom of our site.

So as you're scrolling your website, I'd make sure that you go through and you know anything that you want changed. So for example, here, if you don't like this section about your customer reviews, you could ask to remove it or change the text. Scrolling through here, maybe you don't like this image, you could ask Claude to replace it. And yeah, you're basically just doing a single pass through your website and writing down every single thing that you want changed.

So I have everything that I want changed written down. So now I'm going to switch back over to Claude. And here, instead of writing out a long message, I'm actually going to use the voice to text feature. You can actually just speak to Claude like a regular person using plain language, and it's going to understand what you mean. Just think of Claude like your personal website developer. You can speak to it just like you would a human.

So I'll click on the microphone icon here and say, "I noticed as I was scrolling through the website, the second block of text in the hero section seems to be weirdly cut off. I need you to take a look at that and make sure it's fixed. Also, I think I want the fonts to be more bold. I'd also like you to do a final quality pass and make sure that everything appears correct on the website." Okay, and those are all of the revisions that I have for Claude.

Once you've given Claude your revisions for your website, just go ahead and send your prompt. This process will also take a few minutes to complete, so I'll fast-forward to whenever it's done. Okay, now Claude has come back with the revised website. It's going to ask you if you want to get the website online or make more changes. So I'll go ahead and close down the questions here and I'll open up the link again to review it.

If I scroll through here, the main revision that I had for the hero section was the, this little block of text here. So that looks fixed now and it actually appears properly on the homepage. And scrolling through here, looks like everything else is the same. And Claude has also gone through and made the fonts a bit more bold. And if everything else appears correct on the website, then I think I'm ready to get this thing online.

Scrolling down, everything looks pretty good. So with that review finished, I'll switch back over to Claude, open back up the questions, and I'll click get it online. Take a moment to wait for Claude to respond here. Okay, so now for the next step, you need to get your web hosting. For this particular setup, I'd recommend using Hostinger. The reason why I recommend Hostinger for this setup is because of their new tool called Hostinger Connector.

With the Hostinger Connector, you're able to connect Claude Code to Hostinger, just like we did with Higgsfield. So that means that your image generation and video generation, your website build, and your hosting are all connected through Claude Code. Using the Hostinger connector, Claude Code is able to automatically deploy your website online and even push out updates live. And to get the best price available on your hosting, just go down and use the first link in the video description.

That link will get you the best price available and an extra 10% off discount. When you use that link, it'll take you to this page right here. Once you're here, scroll down and click get a plan. And that's going to scroll you down to the plan options here. For this website, I would recommend just using the business plan. So under the business plan, I'll click choose plan. And then on this page here, you can start by adjusting your billing period.

By default, it'll be set to 48 months, which is a pretty long-term commitment. I'm going to switch this to the 12-month plan. This will get us a free domain for the first year and plenty of savings. Scrolling down, I'll choose my domain name. I'll go with emberlinecoffeeshop.com. And as you can see, that's available and free for the first year. I'll select this. You can also adjust the billing period for your domain.

I'll change this from two years to one year. As you can see, that's going to be $0. Then on the right side, you're able to review your order, check out everything here, and make sure you use the first link of the video description to get this additional 10% off discount. Once you review everything here, just scroll down and click continue. And on this screen here, you just have to register for a Hostinger account. So I'll enter my email address right here.

Then I'll also create a password. Then I'll scroll down the page and click register. Now on this screen here, just fill out your billing address and your payment information to continue. And after you fill out your payment information, you'll be brought into Hostinger's onboarding. However, because of the way that we built our website, we're just going to completely skip the onboarding here. Start by going up to the top right and clicking this X, then click leave.

Then go to the top left here and click on these three lines. Click into domains, and then find your domain name here. Click set up, and it will ask you to fill out some details here regarding your domain name registration. So make sure that everything is correct on this page and click register. Now Hostinger will register your domain. It's going to let you know here to check this email address to make sure that you verify it.

You should get an email from Hostinger soon that just has a link you need to click. Once you're done here, click continue. And from here, we just need to go back to the hosting or connector page. You can easily get back there just by clicking the first link of the video description. I'll enter that link up here and press enter. Now back on this page, click instal extension. Then here, select Claude Code. Copy this, and go back to Claude Code.

From here, just paste it in, and then send this. This is going to connect Claude Code to your Hostinger account. And after a few moments, this webpage should open up in your browser. And now if this webpage doesn't open up automatically, here's a quick fix. You'll just want to close your Claude desktop app and reopen it. And then go back into your chat and ask Claude Code to open up this webpage for you. Once you're here, just scroll down and click allow.

This will connect your Hostinger account to Claude Code. Let's go ahead and switch back over to Claude. Back over here within Claude Code, it's currently asking about my domain name. It's asking if I want to use the free domain that I claimed earlier. So I'll say yes, use my domain. And now with that done, Claude Code is going to deploy your website and connect it to your domain and get everything online for you. This will take a few minutes to complete, so I'll fast-forward to whenever it's done.

Okay, and after a few minutes, your website will be deployed live on your custom domain name. Go ahead and click on it right here to review it. And you'll see our domain name right here, and the entire website is completely functional. I would also recommend reviewing this website on your mobile device as well, just to make sure everything looks correct there too. Now, if you ever want to make changes to your website, you do it the exact same way through Claude Code.

So if I switch back over to Claude here and I close out of this preview, I'm able to chat with Claude Code just like I did before and push out any more updates. And because it's connected to Hostinger, it's able to automatically deploy everything and make those fixes for me. And for the other settings for your website, you'll use the Hostinger hPanel. So I'll go back over to my browser. Go back to Hostinger here. Go up to the top right and click my account.

In the top right here, you have your account information. And then in the top left, click into websites. And you'll see your website listed right here. Click dashboard, and you'll see all of the information regarding your website here. And if you're ever looking for something specific and you can't find it, just go to the top right and click Ask AI. We'll scroll down and click turn on. Scroll down again and click no thanks.

And here you're able to communicate with the Hostinger Kodee AI. This is surprisingly helpful and can help you out with many different things within hPanel. And if it can't figure something out for you, it will connect you to a real person. Your website is now live. It looks great, loads fast, and it's optimised for mobile. From here on out, Claude Code is basically your on-call developer. Anytime you want to change something, you just ask it and it updates your site for you.

All the links that you need are down in the description, including the skill and your hosting. And don't forget to get that extra 10% discount on your hosting. Use the first link at the top of the description. Thanks so much for watching this video, and I'll see you in the next one.