# How to Build a $10K Website in Minutes (Step-by-Step Claude AI)

Channel: Create a Pro Website
Video: https://www.youtube.com/watch?v=HI1Eb0jTBjw
Duration: 24 min
Language: English
Words: 5569
Transcript page: https://viewrankai.com/tools/youtube-transcript/HI1Eb0jTBjw

---

[0:00] In the next 20 minutes, I'm going to show you how to build an incredible $10,000 website like this one that you're seeing here, all using Claude, without having any prior experience or without touching any line of code. Now, a few years ago, a website like this would have cost you thousands of dollars or spent months going back and forth trying to build with a developer. Fast forward to today, I built this one here in just about 20 minutes by simply talking to Claude and telling it what I wanted. And it went and did all of the hard work to bring me from just a simple idea in my head to this website that you

[0:30] see here live and online. So, in this video, I'm going to walk you through this entire process from getting set up if you've never touched Claude before and have no idea where to begin, all the way through publishing your custom website live and online with your own custom domain name. This way you can start using your website right away. So, if you're ready to get started, let's

[0:47] hop in. All right. So, let's hop in with step one, which is getting set up to build. And we only need two things in order to do this. The first thing is Claude Code. And the best way that I found to use Claude Code is using Claude Desktop app, which is just such a simple and fast way to dive in and start building things right away. So, if you head on over to claude.com/download, you'll find this link here where you can download Claude Desktop. And then, just make sure that you're signed up for one of their plans here. You're going to need at least the Pro plan here for $17

[1:18] a month. And this will give you everything you need to be able to start building using Claude Code. So, once you're signed up for Claude and you have the desktop app installed, the second thing we're going to need is Higgsfield. And Higgsfield is our media generation AI platform. This is the tool that I use and recommend for images, videos, or any of the media that we're going to need on our website to make this thing look and feel premium, all those cool scrolling video effects. So, you're going to want to sign up and have a plan with Higgsfield as well to generate all of this for you. Now, obviously, this step

[1:48] is optional if you have your own media, but one of the coolest parts about this is it connects directly into Claude so that it can do all of the generations for you while you're building out your website using Cloud Code. You can click the second link down in the description if you want to get signed up with Higgsfield today. And once you have an account, all you have to do is go right

[2:05] up here to the top where it says MCP. And here is where we can connect Cloud to our Higgsfield account. So, you can see right here, this is the Cloud desktop plugin or the connector that lets us actually communicate with Higgsfield directly inside of Cloud. So, all we have to do is just copy this link

[2:23] right here. And then just Cloud and you can go over here to the code tab. And from here, you can go down to customize. And from this tab, just go on over to connectors. And here, you can go up to the add button. And here is where we can actually add the Higgsfield connector. So, just give it a name and paste in that link right here that we copied from Higgsfield. And just

[2:46] click continue. That will connect you right here to Higgsfield. And if it's your first time connecting, it's going to ask you to log in to your Higgsfield account. Once you log in, it's always a good idea to close out Cloud, reopen it up, and your Higgsfield account will now be connected and everything will be now built in so that we don't ever have to go back to Higgsfield. We can do everything right here inside of Cloud. All right, so once we have Cloud installed and Higgsfield is connected, we can move into step two, which is getting our project set up. So again, inside of Cloud here, just make

[3:14] sure you're up on the code tab and we can go over and start a new session right here. Now, anytime we start a new Cloud session and we start to build something from scratch, we always need to start with a brand new clean folder to start building in. This is where we're going to store all of our files and everything that Cloud builds for us all inside of one nice project folder. So, right down here, this little folder icon, here you

[3:35] can click and we can choose open folder. Now, for me, I have a folder called Cloud Code right here. And I can scroll down. I have another folder called websites. And I'm going to create a new folder today. We're going to call this Axis Watches. This is what I'm going to name the folder.

[3:52] Go ahead and click create. And here we can just click open. So now we've created a new session with our new project folder tied to the session right here. So now everything that we build inside of this session will be stored inside of that folder. Now before we enter any prompts in, we do need to put a couple of things inside of that folder so Claude has access to

[4:09] everything it needs to begin building. So if I go over here and I open up that folder that we just created, I'm going to add a couple of things inside of here. So the first thing I want to add is our skill. And this skill is going to be what Claude uses to actually build out our entire website, all the technical stuff that it needs to know instead of you having to enter in a bunch of prompts. I've provided a skill for you you can download down in the description of this video. Just scroll on down, click that, and when you download it, it should look something

[4:35] like this. A Claude MD file. And this MD file has all the information here about building our website step-by-step. So it's going to walk you through this entire process so you don't have to worry about typing all this stuff out or making sure you remember what to do. It's going to literally give you everything you need all within this one skill. So let's go ahead and just copy

[4:55] this on over into our folder. Just like that. And while we're here, I'm going to also copy over a couple of assets that I have which which these are just product images for the watches that I want to feature here on my website. So if you're building out a website for your product or your business or your brand, your portfolio, whatever it is that you might be building, you may have some images that you want to provide in order to actually be featured on your website. So I'm going to go ahead and copy over all these assets here into this folder as well. Cool. So now our

[5:22] project folder here has all of our assets with any images that we needed to have in order to build the website and it has our Claude MD file which is the skill required to actually do all of the building. So once we're ready now, we can hop back inside of Claude and we can begin with step three which is actually start the build. And this is the fun part. Now because we gave it that skill and we have that all the information that it needs to do the build, we don't need to enter in anything technical here. All we need to do to start this out is to just talk to Claude and say,

[5:50] "Hey, I'm looking to build a website for my brand." So, that's exactly what I'm going to do right now. If you click this little microphone icon, we can actually talk directly to Claude using the microphone on your computer, so I don't have to do any typing. Hey, I'm looking to build out a website for my new product and brand called Axis Watches. I provided a few product images for you for the watches, and you should have an MD file with all the skills that you need to actually build out this

[6:15] website. Let's get started. That's the first prompt that I'm going to give it to just get started here. It's going to go through and ask me what it needs to actually build out this website properly, but all I need to get started is that. Now, before I click enter, I'm going to go through and adjust a few settings right here. I'm going to click on this accept edits, and I'm going to turn this on to bypass permissions. And this is just so that Claude isn't constantly asking me for

[6:37] permission every single step of the way. It can just go through and start building and doing its thing. It will walk you through and guide you each step of the way, but this is just so that it's not for permission to copy files over and just do different things like that. The other thing to take note of is what model you're using. Today, I'm going to be using the newest model Fable 5.1. That is because I'm on the Max plan with Claude, and so I have access to Fable. If you do not have the Max plan and you don't have access to Fable, you can absolutely switch over here to Opus

[7:04] 5. This is the best model that I recommend when you're using just the Pro plan. It is so incredibly strong. It produces incredibly great results, almost the same to me as Fable. It's just a little bit different in the way that it works. So, experiment with different models and see which one is going to be best for you and your needs, but for me today, I'm going to go through and I'm going to just use Fable so we can get this thing to look as awesome as possible, and I'm going to

[7:26] just push enter here. Now, Claude's going to go through and it's going to scan the folder that we gave it, and it's going to see if there's any images that it can use right away, and it's also going to read that entire skill that we provided. So, it's going to start going through that process now step by step with me, and

[7:39] you can follow along the exact same way. So, as soon as it comes back, we'll see what it says. Okay, cool. So, you can see it's come back here and it's saying we're on phase one of six. This is the brand kit here. This is where we're going to start developing your brand and giving it all the information it needs to start building out your site specifically for your needs, right? So, go through and give it all the information it needs here, colors, fonts, logos, things like that. Any images or files, again, make sure you copy them over into your project folder, but anything that's just information

[8:07] related, I'm just going to go ahead and paste that in right here. So, you can see here I got my brand name, a little slogan, a little bit about what my business does, some info about my products here, the price points, kind of who they're for. My main branding colors is again just totally made up here, but this is just a baseline level of information to give it so that it can kind of know what to do. We got the goal of the site. I got some contact information, and I said that there are some product images inside of our assets folder, so it has everything now that it

[8:35] needs to get going. I'm going to go ahead and just click enter. And again, just make sure that you take the time to give it as much information as possible so that it can build out your website with the most accurate info and the most branded to your specific needs. Okay, sweet. And it's come back, and it says our brand kit is complete. So, it's gone through and taken all the information that we've given it, and it's built out an entire brand kit. If we open up our project folder, you can see it's went through and built out a couple of new folders here, and inside of the copy

[9:02] folder, we have our brand kit. And here it's gone through and really listed out all the details that it needs, literally giving it super fleshed out information about our brand, the products, colors, everything like that. So, now that it's done with phase one, it says we can just reply with the word next to move on into the next step. So,

[9:19] let's do that. All right. Now, here we are in phase two. It's going and asking us to build out our hero film. This is the part where it's going to use Higgsfield to actually generate some video content and really get those cool cinematic scrolling effects on our website. So, the first step here is just asking us a couple of questions about what kind of content we want to build. So, go through and pick the option that you like best based on your product or the site that you're building. If you want to have your own idea, you can always enter in

[9:46] information here on other. I'm going to go ahead and choose the one that it's recommending here with the approach. And now it's saying, "How do we want the film to be built? Do we want it to be one continuous shot? Do we want it to be a stitched journey or individual shots per section?" So, this means as we're scrolling through the website, there's going to be multiple sections that it goes through. Do we want this to feel like it's just one long video kind of going through the entire one scrolling process or do we want it to feel like there's multiple different videos kind of being stitched

[10:12] together or individual shots for every section, right? So, in this case, I do want to have one kind of continuous long shot. I think that's going to look really cool. Cool. So, based on the answers that we've given it now, it can go through and start building and prepping out all of the assets that it needs using Higgsfield to generate the images first. And once we approve the images, it'll start generating out the actual video files. Once we're happy with all of the media, it can actually

[10:35] start building out the real website. Now, Higgsfield does take a second to generate some media. So, while this is loading and doing its work in the background, we can actually go ahead and move into step number four, which is getting your hosting, your custom domain name, and getting all of that connected so that whenever we're ready to publish this thing online, we'll have everything set up and ready to go. So, in order to have your website live and online with your own custom domain name, we're going to need a hosting plan. And the hosting provider that I recommend is called Hostinger. They make things incredibly simple and it's a super fast setup

[11:04] process with CloudCode. So, if you click on the very first link down the description of this video, it'll bring you over to a page that looks like this. And this is our special co-branded webpage here with Hostinger where you can choose your plan and get your connector all installed so that it's connected to Cloud all in one place. I'm going to show you how to do all this. So, starting out, just go ahead

[11:23] and click on get a plan right here. And here you can see we have our unlimited plan, which is basically going to give you unlimited websites. It's also going to give you a free custom domain name for an entire year for just signing up with this one hosting plan, as well as giving you the ability to build any kind of website that you need all within one place. So, with this link down in the description, you're even going to get a bigger savings using our custom Create a Pro Website coupon code here. So, I'm going to go ahead and

[11:50] click choose plan. Now, here is where we can actually choose how long we want our hosting plan for. So, by default it gives you a 48-month period, but we can go through and actually choose just 12 months. If you're just starting out and you're not sure how long you want to have your website online, just know that you do get the biggest

[12:06] savings by choosing the longer periods. 12 months though is a good place to start because we're also getting our free 1-year domain name with this order. So, we might as well have hosting for 1 year with our free custom domain for 1 year. Now, you can see with our coupon code Create a Pro Website here applied,

[12:23] you're getting an additional 10% off. So, you have your entire website hosted online with a custom domain for about 53 bucks. Pretty awesome. Soon as you're ready here, just go ahead and click on continue. And here, it's just going to go ahead and ask for your payment information. So, go ahead and just fill in your billing information and select whatever payment option you want, and then you can click submit payment. And just like that, your

[12:43] hosting plan is purchased. All right. Now, as soon as you finish completing your purchase, you should be brought to a page that looks like this, which is the hosting or startup page. And in this case, we're going to go ahead and say migrate an existing site because we're building our site using Cloud Code. Now, under this option, we're going to choose upload backup

[12:59] files. And we'll click next. Now, here is where we can choose your free domain name. And you can see we have one free domain name available because we just purchased that brand new hosting plan. So, here you can type in and see which domain names are available for purchase. So, I just typed in axiswatches.com for Axis Watches company, and this is again just a totally made-up brand, but you can see that this domain name is available here, and our first year is going to be completely free. So, if we

[13:25] select on that, I'm going to click next. And here, just go ahead and confirm your information and we can click register. If it asks you to verify your phone number, just go ahead and enter the code that it sends and click verify, or you can click I'll do that later. And just like that, our domain name has been added to our website. Sweet. I'm going to click continue. All right, sweet. So, here we are now with this step of uploading our website backup files. Now, like I said before, we're going to let Cloud do all of the hard work for us. So, we don't even need to

[13:53] actually do this step. We can actually just close out of this process and go right back to the Hostinger HPanel. So, I'm going to click on the logo up here and click yes, leave migration. Right now, in order for Cloud to actually take control and do all the rest of the work for us, we need to actually connect to Cloud to Hostinger, just like we did with Higgsfield in the beginning of the video. So, let's pop back over to Cloud real quick. So, the same way we did before, we can go up to customize and we'll go over to connectors. And here, we can search for connectors and search

[14:18] for Hostinger. And you'll see the Hostinger connector right here. Here, we can just click connect to Cloud. And that'll bring you right back over here to your web browser, where you can say continue connecting. And because we're already logged in to your Hostinger account, you can see that it's just asking us to go ahead and allow the connection. So, let's click

[14:36] allow. All right, and just like that, it brought us back to Cloud and you can see it says we are connected and it's been logged into our account specifically. So, if we go back to our connectors, under yours, you should now see your Hostinger connector and your Higgsfield connector both here and ready to go. Under your recent tab, you should see your website here and we can get back to

[15:01] our build now. Now again, like I said with the Higgsfield connector, anytime we add a new connector, it's usually a good idea to close Cloud and then reopen it so that it has a time to refresh and reload that connector. So, I'm going to go ahead and just do that really quick. Okay, and we're on phase two now again and it's saying, okay, we got our information that it needs to actually start generating. Now, it's going to build out the reference images. Let's go ahead and say go. So, now it's going to go through and start building our images. Now, the good news is we're fully connected and ready to publish

[15:29] this thing online with our own custom domain name as soon as the website is done. We're going to go through and just let it continue building out the images and the videos here just by following through with these steps. And as soon as it's done, I'll come back and we'll see what it generated for us. Okay, sweet. It's come back with our first set of images. And these are our reference images that it's going to use to

[15:47] actually build out the videos. Right? It's always smart to start with generating images so that we're not wasting a bunch of credits building out our videos. But, we also can see the direction it's going to go before it actually starts. So, you can see it's giving us two options here. It says open up the three images in the assets folder under the reference folder. So, if I open up our folder here, we can see our assets folder and references. Here are the images that it produced for us. So, this is the first

[16:12] image here. Then we have this one, a nice close-up of the product, which is awesome. This looks really great with that cool blue glowing rim. And then we have the shot here. So, these are the three images that it came up with. And I think these look pretty cool. If at any point you wanted to regenerate an image, you can say, let's go ahead and regenerate one or let's fix something. But, at this point, I'm going to go ahead and say, let's

[16:33] generate the hero film now. Now, you can see it's going to stop along the way and let you know exactly how much credits it's going to use to build out this. We want it to be in 1080p, so it's a nice high quality. We want it to be about 14 seconds long and it's saying this should cost about 126 credits. And it's letting you know how many credits you have currently available. So, this is great. This way you can keep a nice budget and keep track of how much credits it's spending without just going wild here and blowing through all your credits, right? So, um you can say hold off, I want to change a

[17:02] few things, give it some more info, or let's just go ahead and say go. So, I'm going to let it go through and build out this first set of videos. And as soon as the videos are done, I'll come back and show you. All right, it looks like it's come back with our video. So, the render is right up here. Let's go ahead and just open up our folder really quick to see. Inside of the videos folder, here

[17:21] we can see it. Got our nice hero shot and oh, sweet. There's a cool little dissection kind of showing all the details. And we zoom in really close to our nice macro shot. Awesome. And we finish up. Kind of a interesting ending here. The strap seems like it's like coming off for some reason, but that's okay, you know? This is just the first attempt at producing this video and I think that that's a really great shot, especially for scrolling through the website. You can imagine the website just scrolling through, having all these details, and then being able to end on a shot like

[17:58] this. Now, if I want to get nitpicky, I can go back and forth here and say, "Hey, let's regenerate this. Let's change a few things. Let's maybe tweak this or that." And so, absolutely go back and forth until you're happy with this. Um also being aware of how many credits that's going to cost, but essentially all we need to do now is just tell it, "Hey, I'm happy with the video. Let's go

[18:16] ahead and build the website." So, now that it's actually beginning to build, this is the fun part of letting it do all of the complex coding and all of the work to structure out our website to fit all of our needs for the business and include all of this cool media that it's just generated in a very cool, smooth, and seamless way. So, let's let it build and as soon as it's done with our first draft of the site, I'll come

[18:38] back and show you. Okay, it has come back and said that it's done with the first chunk of the build. Now, this is about 15 minutes in, so it really didn't take much time at all to go through and build out all of this stuff. This is all of the complex coding and everything that it built in the background, but if we want to view our website that it's built for us, I'm going to go ahead and just close this sidebar for a second. We can go up here to the top right, this little globe icon, and this is the browser. And here we can view our website that it's built

[19:07] for us. We can go full screen here. And we can scroll through our website. You can see as we're scrolling here, it's revealing the sections as it's scrolling through our video, which is super sweet. It's got all these features as we go through here. Getting closer and closer to the video, macro shot here. I love that. All these little cards that are running up. This is basically all the features of the watch that I wanted to have included. So, you know, important things that it's

[19:40] showing that it can do. We have the three different models here, which is awesome. And some specs. Here's a little area to be able to pre-order. This is a pre-order page instead of like an actual live product page, but look how clean that was. I mean, one pass, you know, the media that we generated was obviously the main chunk of this, but how cool is it that with just in one prompt, all of this was built for us and we can go through now and refine little sections, pick things that we like and maybe fix things that we don't. Maybe there's some information on one of these cards that we want to

[20:17] change. Maybe we just think that this whole section looks a little generic, things like that. This is now where we can go through and fine-tune and actually make revisions with Claude. So, let's go back here really quick. If I click on these little arrows to collapse our full view here, we can go back in and as we're taking a look at the site here, I'm going to scroll back up to the

[20:35] top. And now we can just talk back and forth with Claude and and say to make any tweaks or changes that we want, right? So, let's say for instance, I mean, I love this section. Love the way that that looks. Love the way that it transitions. I think that this section here is a little generic-looking. So, if I wanted to make a change or a tweak to something like this, I could just take a

[20:56] screenshot here of this section. I can paste it right down here. Or I can even use this little arrow icon and we can select an element of the actual website here. So, I can select this whole box. And it's going to actually add it to our prompt box here, and we can just talk to Claude here now and say, "Hey, I want to change a couple things, right?" So, can we change this section to not be so generic? Maybe just have it be some more clean text on screen without the card and without all of the kind of AI generic-looking boxes. Just give me

[21:28] something a bit more clean and sleek. So, we can let it go through and make some changes now. Just like that. Just by talking to Claude. This is how we make adjustments and refinements and anything that we want to see added or taken away. Maybe we want to add an about us page. Maybe we want to add a fourth option of another watch here, right? And so, we can either use Higgsfield to generate image for us or we can provide another product and say,

[21:52] "Hey, add another option here." Um but basically, it's going to go through and do all the work for us. All we got to do is just talk to it. And just like that, it's already updated, right? It's showing me, "Hey, I removed that card like you asked." It's a little more clean, a little more sleek, um you know, but just like that, within one prompt, I was able to make a change and refinements that I need to the site all by just by talking to Claude. But at this point, once we're happy with our site, we can actually move into the next step, which is publishing this website

[22:19] online. And we can do this with just one simple command. So, I'm going to go down here and I'm not going to take its recommendation to uh basically do the rest of those changes. I'm just going to go through and say, "This looks great. Can we go ahead and publish our website using the Hostinger connector and to our newest domain name

[22:38] axiswatches.co.com." I'm just going to make sure that this is actually typed in correctly here. Okay, cool. So, this is the domain that we purchased earlier, and I'm just going to say, "Go ahead and publish this live to our website." We've already connected it. Everything should be ready to go. At this point now, we're just ready to

[22:56] publish. So, I'm going to say, "Enter." And you can see here, it found our domain name right there, and it's going to use the Hostinger connector to get us all connected and actually publish this thing live to our real custom domain name. All right, and in just a minute like that, it's come back and says our site is live here on our actual domain name. So, if we click this link, it opens up right here in the browser inside of Cloud. You can see this is our real domain name now up in the browser, but if I copy this, we can open up our real web browser, and if I paste this

[23:23] link in here, and just like that, here's our actual website live on our web browser from our custom domain name that we just built in a couple minutes in Cloud. So, I hope this video has helped you build your perfect $10,000 website in just under 20 minutes here. If you haven't gotten started yet, make sure you use that first link down in the description to get your discounted hosting plan and custom domain name for free, plus those other links to get signed up for Higgsfield or to download the actual skill that you need to build out this website. All of that's down in the description of the video for you,

[23:53] and I'll see you in the next video.

---

About this transcript
Read from YouTube's own caption track and laid out by ViewRank AI (https://viewrankai.com).
ViewRank AI finds the videos already beating a creator's own average on Instagram, TikTok and YouTube Shorts, transcribes them from the audio itself in more than 60 languages, and turns what worked into new ideas and scripts.
Free transcript tools, no account needed: https://viewrankai.com/tools
How to read any video this way: https://viewrankai.com/llms.txt