Big Idea

The argument in one line.

Claude Code can produce a polished, non-generic website in one long session, but only if you install two design skills and hand it a reference image and brand assets before the first prompt.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A solo creator, freelancer, or small-business owner who wants a real, non-generic website without hiring a developer.
Someone comfortable installing a desktop app and following on-screen steps, but new to AI coding tools like Claude Code.
A person willing to pay roughly $17/month for Claude Pro plus $40-160/year for hosting to get a site they fully own.

SKIP IF…

You need a complex web app with logins, databases, or payment processing — this workflow targets a simple marketing site.
You already have a developer or website builder (Squarespace, Webflow) you're happy with.

TL;DR

The full version, fast.

Claude Code's desktop app can turn a folder of brand assets and a single prompt into a working marketing website, but the default output looks like every other AI-generated site unless you prime it first. The creator installs two free skills — Anthropic's front-end-design skill and a community UI/UX Pro Max skill — then feeds Claude a screenshot of a reference site plus his own logo, colors, and images before writing one detailed prompt. Claude asks clarifying questions, builds a single-file HTML site, and lets him iterate visually with draw-to-comment and click-to-select tools. The final step is exporting the files, zipping them, and uploading to Hostinger to go live on a custom domain — a process that took roughly 30 minutes end to end.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:09

01 · Intro

Cold open promising a full build-to-launch workflow using Claude Code, positioned against generic-looking AI websites.

01:09 – 02:58

02 · Step 1: What you need to start

Requires the ~$17/month Claude Pro plan (the free tier excludes Claude Code) and a folder of brand assets/images gathered ahead of time, generated via Higgsfield when none exist.

02:58 – 05:02

03 · Step 2: Set up the project

Creates a project folder with a media subfolder, opens it in Claude Code via 'Open Folder,' and trusts the workspace to start a new session.

05:02 – 07:34

04 · Step 3: Adding the skills

Installs Anthropic's front-end-design skill and a third-party UI/UX Pro Max skill (via npm) globally, restarting Claude to activate them before design work begins.

07:34 – 09:45

05 · Step 4: Building the website

Sources visual inspiration from Awwwards and Dribbble, screenshots a favorite reference site, and pastes it into Claude alongside the UI/UX skill invocation.

09:45 – 16:35

06 · Prompt for building the website

Writes one detailed prompt naming the business and referencing the screenshot, asking Claude to ask clarifying questions; Claude asks about brand colors, sections, file structure, and services before generating the first draft, which the creator reveals in the live preview.

16:35 – 19:55

07 · Making adjustments

Iterates on the draft: fixes the cropped hero section, swaps a static hero image for a scroll-scrubbing background video, and uses draw/click-to-select tools to simplify an image gallery section.

19:55 – 23:34

08 · Step 5: Publishing the website

Explains that the Claude Code preview is local-only, then walks through a Hostinger hosting plan, pricing tiers, and a coupon-discounted checkout.

23:34 – 24:07

09 · Free custom domain name

Registers a free custom domain (summitridgeatx.com) bundled with the hosting plan during migration setup.

24:07 – 26:00

10 · Copying website files

Zips the contents of the project folder (not the folder itself), uploads the archive through the host's migration tool, and confirms the site is live on the custom domain.

Atomic Insights

Lines worth screenshotting.

Claude's free plan doesn't include Claude Code at all — using it on the desktop app requires the roughly $17/month Pro plan.
Installing two design skills before the first prompt is what separates a non-generic AI website from the boilerplate look everyone recognizes.
Gathering brand colors, logos, and AI-generated images before opening Claude Code prevents a mid-build scramble for assets.
Pasting a screenshot of a reference website from Awwwards or Dribbble gives Claude a concrete visual target instead of guessing at layout.
Ending a build prompt with 'ask me any questions you need' forces Claude to gather missing information instead of guessing and rebuilding later.
A single static HTML file was Claude's own recommendation for a small business site — no React or Next.js needed.
Claude located the company logo and extracted brand colors from a media folder on its own, without being told the exact file path.
Built-in draw and click-to-select tools let you leave visual feedback directly on the live preview instead of describing sections in text.
The entire site build, from first prompt to a working local preview, took about 10-15 minutes.
A scroll-triggered background video in the hero section replaced a static image with one follow-up prompt, no extra tooling required.
Hostinger's roughly $2.69/month premium plan, billed annually, is positioned as sufficient for a simple site with a contact form and no backend.
A one-year free domain and two free email mailboxes are bundled into the Hostinger plan the creator recommends.
Publishing requires zipping only the contents of the project folder, not the folder itself, then uploading that archive through the host's migration flow.
The whole path from empty folder to a live custom-domain website ran about $43 for a year of hosting, on top of the existing Claude Pro subscription.

Takeaway

Skills and inputs decide if AI sites look generic

WORKFLOW BLUEPRINT

The gap between a generic AI-built website and a professional one comes down to what you feed Claude before the first prompt, not the prompt itself.

02Step 1: What you need to start

Claude Code isn't included in Claude's free plan — using it on the desktop app requires the roughly $17/month Pro plan.
Gather brand colors, a logo, and product or location images before you start, so you're not searching for assets mid-build.
If you have no images, AI image/video tools can fill the gap before you ever open Claude.

03Step 2: Set up the project

Create one dedicated folder for the whole project, and put a media subfolder with your logo and images inside it before opening Claude Code.
Point Claude Code at that folder explicitly ('Open Folder') rather than starting a session with no defined workspace.
Trusting the workspace is what lets Claude read and use the assets already sitting in that folder.

04Step 3: Adding the skills

A generic-looking AI website is often a symptom of skipping the skill-installation step, not a limitation of the model itself.
An official design skill widens the font and layout choices Claude reaches for beyond its default palette.
A third-party UI/UX skill installed globally adds a much larger library of color palettes and font pairings to pull from.

05Step 4: Building the website

Reference sites from design-inspiration galleries give Claude a concrete visual target instead of an abstract description of 'modern' or 'clean.'
Searching a reference library by industry keyword surfaces sites closer to your actual business than generic templates.
A single reference screenshot pasted into the prompt does more design work than paragraphs of written description.

06Prompt for building the website

Ending a build prompt with 'ask me any questions you need' shifts missing-information risk onto Claude instead of onto guesswork.
Naming the business, location, and desired sections up front lets Claude search the media folder and match assets to sections without further guidance.
When given a choice, Claude recommended the simplest viable architecture (a single HTML file) over React/Next.js for a small business site.
A first-draft build from one detailed prompt took roughly 10-15 minutes to produce a working local preview.

07Making adjustments

Visual bugs, like a cropped hero section, are fixed fastest by describing the visual symptom, not the underlying code.
A scroll-triggered background video replaced a static hero image with a single follow-up prompt — no separate video tooling needed.
Draw-to-comment and click-to-select tools let you flag a specific section on the live preview instead of describing its location in text.

08Step 5: Publishing the website

A local preview is only visible on your own machine — nobody else can load that URL, so publishing is a separate required step.
Entry-level hosting plans are positioned as sufficient for a simple marketing site with no backend or payment processing.
Coupon codes tied to an affiliate link were shown taking a real chunk off list price for the year of hosting.

09Free custom domain name

Annual hosting plans commonly bundle a free domain for the first year, avoiding a separate domain-purchase step.
Checking domain availability directly inside the hosting checkout flow saves a trip to a separate registrar.

10Copying website files

When zipping a project for upload, compress the contents of the folder, not the folder itself — a common mistake that breaks the upload.
A host's 'migrate an existing site' flow, versus 'create new,' is the correct path when a site was already built locally.
The entire path from local build to a live custom domain required no separate developer, deploy pipeline, or CLI step — just a zip upload.

Glossary

Terms worth knowing.

Claude Code: Anthropic's AI coding tool, available as a desktop app or in the terminal, that can write and edit real project files from natural-language prompts.
Skill (Claude): A pre-written instruction set installed into Claude that changes how it approaches a task — here, two skills teach Claude better design taste.
Front-End Design skill: An official skill built by Anthropic that expands the fonts, layouts, and design choices Claude reaches for beyond its default generic palette.
UI/UX Pro Max skill: A third-party Claude skill, installed via npm, that adds a large library of color palettes, font pairings, and UI style references for Claude to pull from.
Single-file HTML site: A website built as one self-contained HTML file with inline styling and scripts, simple enough to not require a database or server framework.
Migration (hosting): A hosting provider's onboarding flow for uploading an already-built website as a zip archive, rather than starting from one of their templates.

Resources

Things they pointed at.

01:22productClaude Pro plan (claude.com) ↗

02:00toolHiggsfield

05:02toolFront-End Design skill (Anthropic)

06:09toolUI/UX Pro Max skill

07:52toolAwwwards.com ↗

08:25toolDribbble.com ↗

20:01productHostinger (creator's affiliate link)

Quotables

Lines you could clip.

00:08

“That is until you try it yourself. Suddenly, now you're dealing with prompts and skills and UI frameworks and deployment and all these technical terms.”

names the exact friction point beginners feel, strong cold-open hook→ TikTok hook↗ Tweet quote

08:58

“I can kind of build a Frankenstein of my favorite website.”

vivid, memorable phrase for a common reference-gathering technique→ IG reel cold open↗ Tweet quote

17:35

“It would have taken me far longer to build from scratch than this went and did in about maybe ten, fifteen minutes total.”

concrete time-savings claim→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphor

00:00In this video, I'm gonna show you the fast and easy way to build a beautiful looking website using Cloud Code. Now, if you're online at all recently, you've probably seen the hype around Cloud Code. People are building these crazy elaborate websites in a few minutes.

00:13They're launching businesses, creating portfolios, building web apps, and it all just looks so ridiculously easy. That is until you try it yourself.

00:21Suddenly, now you're dealing with prompts and skills and UI frameworks and deployment and all these technical terms that are really confusing especially as a beginner. So in this video, I'm gonna clear all of that up. I'm gonna walk you through my exact process that I use to build this professional looking website here.

00:37And I'm gonna give you all the tools and resources that I used personally to make it stand out and not just look like any of these generic AI built websites. And by the end, we're gonna have built this entire website together with just a few prompts. Then I'm gonna show you how to launch it online with your own custom domain name so that you can share it with anybody in the world.

00:55Now, everything that you'll need to follow along with this video is down in the description of the video. So if you're ready to get started, let's go. So what exactly are you gonna need to actually get started building a website using Cloud Code?

01:05Well, we're gonna need two things. One, you're gonna need a Cloud account. So if you head on over to cloud.com and you check out their pricing plans, you can see that the free plan doesn't include Cloud Code and you'll have to step up to the pro plan which is about $17 a month in order to access Cloud Code directly on the desktop app.

01:21You also get access to Claude design and Claude co work which are some really powerful tools that are also built in to the pro plan of Claude. So in my opinion, this is a great price for the power that it provides. So if you haven't already, make sure you're signed up for the pro plan of Claude in order to actually follow along with the rest of this tutorial.

01:38Now, the second thing that you're gonna need is media and images and graphics and things for your actual website. So if you're building this website for your business, you just wanna make sure you have all of your business information, any logos or branding colors that you use, and maybe any pictures, professional videos or anything else that you want included on your actual website.

01:57Now, if you don't have professional images or graphics, don't worry. There are a lot of cool ways that we can go about generating these using AI as well.

02:04I personally generated all of this media here for the website I'm gonna be building today using Higgs field, which is a powerful AI platform that combines both AI image and video generation allowing me to generate all of these different images and this cool video that I'm gonna use for the hero section of our website. So you'll wanna make sure to have all of this stuff gathered up before we get started so that you don't have to go and try to find all of it later or if you want you can generate it with AI down the road.

02:30I just wanna make sure to gather all of these assets beforehand. This way when I'm in the designing process, I can just go and find everything I need really quickly without having to go and search for all this stuff later. So make sure you've signed up for Cloud's Pro Plan and you've downloaded and installed the desktop application on your computer.

02:44And then once you have all your media assets, logos and things like that that you need to actually build this website, let's move on to actually setting up the project. Alright. Now once you've downloaded and installed the Claude desktop application, you open it up and this is what you'll be looking at.

02:58Now you can see up here in the top left corner, we have the chat tab, we have the co work tab, and we have the Claude code tab. So if you click on code, this is where we can actually get started building out our project.

03:09Now before we actually get started putting in any prompts or doing anything like that, we actually need to get a few things set up. So before you start any project with Cloud Code, the very first thing we need to do is build a folder to store all of our files in. So I'm just gonna open up my finder here.

03:23I'm gonna create a new folder here on my desktop.

03:27I'm gonna call this landscaping website.

03:32And this is where we're gonna store all the files for the code that we're building within our website. Now in this folder below here, this media folder, this is where I have all of the images that I've generated as well as my logo and a few other assets that I wanna include on the website itself. So if you have a folder like this that you've got everything combined together, you can go ahead and add this folder inside of this landscaping website folder.

03:55Now we just need to tell Cloud Code this is the folder that we're using for this new project. So let's go back over to Cloud Code. And up in the top, you can just click new session to start a brand new project.

04:05And you'll be looking at this window here which looks very similar to the chat window where we can just start typing in prompts. But right above that, you'll see this little tab here where we can select a folder. So if you go here and click open folder, I'll just navigate here to my desktop and I'm I'm gonna select this landscaping website folder and click open.

04:26Now you can just go ahead and right here and click trust workspace. This is just saying that we're gonna have Claude trust that they can access all the files within this folder. And just like that, we've got the project set up with a folder set up for all of the files for the project.

04:39Now that the project is set up, we wanna go ahead and add a couple more things to make Claude even more powerful and even better at designing stuff. So if you skip this step, this is how you're gonna get a lot of those generic and boring looking websites that may come out of most AI generated website builders. The way we get around this is by installing skills into Claude.

04:57And skills are basically just prewritten instruction that we want Claude to follow whenever it's designing or building things for us. So there are two skills that we're gonna install and it's really simple. The first skill is called front end design and this is actually built by Anthropic, the same people who built Claude app itself.

05:14And basically what this does is just gives it more ability to access more fonts and more of a creative design skill set than just the generic built in palette that it would normally reach from. So instead of using overused fonts that are used on all of the generic AI sites you see, it'll start to reach for more creative font choices and different layouts that aren't necessarily used in all of the generic, uh, vibe coded websites that you see.

05:38So to install the skill, it's really easy. All we need to do is just grab the link right here, copy that.

05:44And again, I'll have all these links down in the description of this video. And we head back over here to Claude. And inside of our project, let's just say install this skill globally.

05:58And I'm just gonna paste that link here and hit enter. Then just accept all these edits that Claude's asking for And just like that, we've installed this first skill.

06:09Now the second skill here is called UI UX pro max skill. And what this skill does is basically give Claude a bunch of more UI and UX design inspiration. So a bunch of color palettes, tons of different font pairings, UI styles, text stacks, everything that it needs to pull from when it comes to getting creative design elements.

06:31This skill right here is gonna give it much more of a palette to be able to pull from than its generic built in abilities. So again, to install this, we're just gonna copy the link. And this time, you wanna type this in very specifically.

06:45Let's say install this plugin globally again using NPM and then paste in the link.

06:55And that NPM is just gonna ensure that it installs this plugin cleanly across all of clot. Now again, we're just gonna allow access and allow it to install globally across all of our projects. Just be sure to go through all of these different allowances and make sure that you click allow every time and it'll get through the installation process here.

07:13Okay. And it's saying it's all done but it says restart is needed. So just go ahead and restart Claude so that when it boots back up, this skill will be fully installed and ready to use.

07:22Alright. Now that we have our skill set up and our project fully ready to go, we can actually start building out our website. Now before you build anything, it's always great to start with a little inspiration and have some sort of direction that we wanna go.

07:34So instead of just blindly asking this thing to build a website from scratch, it's usually smart to give it some sort of reference image or a link to another website that you think looks really great. So that at least has a good starting place to go from and then we can tweak and kind of customize from there.

07:49So a few websites that I like to use for inspiration are awards.com. That's awards with three w's and this is a huge library of award winning websites that you can get inspiration from.

07:59You can click through and check out these websites and you can actually even open up the live link to visit the website. So this is really cool. We can get a live preview of some of these really cool websites and see what people are up to and how they are building these things like this website here is insane.

08:17And this is something we can absolutely ask Claude to help us design. So awards is a really cool place to get some inspiration or dribble.com. Dribble with three b's.

08:26This is another great site that has a ton of different websites here that you can click through and get inspiration from. And they have the search bar here where can actually even search for some things. So I'm gonna type in landscape to see if I can find the inspiration for this landscaping company that we're building.

08:43And just like that from searching landscaping, you can see all these different sites start populating. And this is great because this has given me a really good inspiration or a good starting place to kind of pick from and say, I really like what they did here, I really like some of the design elements here. And this way I can take screenshots from different parts and I can kind of build a Frankenstein of my favorite website or I can just take one of these that I like the best like let's say this one here.

09:07And I'm just gonna take a screenshot here of this actual site, this whole thing right here just so I can of show Claude the general direction that I'm going far as far as like the layout and the type of sections that I want included on the site. Now, I'm gonna head back over here to Claude and I'm gonna paste this image right here and I'm gonna type a backslash and start typing UI and you can see this UI UX Pro Max, this is that new skill we just installed.

09:33I wanna actually have Claude access this skill for this first prompt here. Now, for the actual prompt to build the website, this is the easy part. Right?

09:42You can actually just describe exactly what you want to Claude and we'll go through and ask you some questions to help you refine it. So the exact prompt that I'm gonna use here is this. Please build me a website for Summit Ridge Landscaping Company here in Austin, Texas.

09:57I'd like this website to use this reference image as inspiration but using my own branding, colors, and logos. I'd also like to include a few specific sections on my website.

10:10Please ask me any questions that you need to complete this job. Now that last sentence is really important because I want Claude to actually come back and ask me what it needs to build this website properly so that I know that it has all the information it needs without me having to guess what exactly it wants. So you can see this little microphone down here.

10:27I can actually talk directly into the prompt box so I don't have to type all this out. I can just talk in my normal language and give my ideas directly to Claude like that. So I've got my reference image in here.

10:37I've got the skill being called the UI UX pro max skill. And I've got this prompt just explaining what the company is, what my goal is for building this website, and asking it to ask me any questions that it needs. Now down here, you also have the option where it says auto.

10:52I've gone ahead and set mine to auto mode. By default, it'll be set to accept edits. And basically what this is doing is just asking if you want Claude to ask you permission before it does every single step.

11:03A lot of times I'll switch to auto mode just so that it automatically will start going through and just completing the task that it needs. But if you really wanna be diligent about making sure that you're controlling exactly what Claude is doing before it does stuff, uh, you can just leave that on accept edits mode. I'm gonna go ahead and leave mine on auto mode for now and I'm gonna click enter here.

11:21So now Claude's gonna analyze that image. It's gonna take in my skill that I asked it to reference and it's gonna come back and ask me a series of questions that I can fill out and give it all the information I need so that it knows what to do to build my site. So you can see here it's starting to ask me a couple questions.

11:35Right? So it's saying, do you already have brand colors and a logo for this company or should I design them for you? So you can have it actually build things out for you.

11:43Or in this case, I'm gonna say I have a logo and colors. Question two is asking, which sections do you want on the site? The reference has a hero, trust bar, about, services, blog, contact.

11:54On my other section here, I wanna include a before and after section to kinda show what these people have done before with their landscaping company. Right? So here's like a before one of our jobs is done and then here's like an after.

12:05So I wanna have a section for that. So under this other tab here, I said I'd like to add a before and after section as well as an our process section to show the four different steps involved with getting started with the job. And then just along with the rest of the sections that it recommended here, uh, from the reference.

12:20So let's click next. Now it's asking how it wants us to build this. Do I wanna do a single HTML file, a multi file static site, or a react slash next JS project?

12:30And if you don't know, you can just always skip this, um, but it does recommend here to just do a single HTML file for this type of site. This is probably gonna be all that we need so we don't need to get that complicated. Let's just stick with what it's recommending here.

12:44And last but not least, it's asking me what kind of services that I wanna offer here. So do I have full service landscaping, lawn care, and maintenance, or maybe I have some very specific services that I offer.

12:54So just be sure to go and fill this all out according to what kind of site you're building and the details that it needs to know specifically for your website. In this instance, I'm gonna say that we're a full service landscaping company. Cool.

13:05So now you can see that it's actually searching our folder here for the logo that we mentioned. So it's gonna go through those media files and see if it can find that logo. And you can see here there's a media folder with assets.

13:16Let me look to see if we can find a logo and extract your brand colors. Cool. And you can see that it's pulled up the logo here right out of that folder.

13:23It's already determined the colors and everything from that. And it's even found the before and after pictures that I have in the folder so that it's already building out that section as well. So you can see because I provided a lot of this information upfront, it knows exactly what to go search for and how to go about building this.

13:39So I'm gonna let this do its thing and once it's done generating our first draft of the website, I'll come back and we'll do a reveal of what it's come up with. Alright. And just like that, it looks like it's all done.

13:49It's come back and let me know all of the stuff that it's done. It's went and built all the different sections. It's checked all of its work.

13:56Here's all the different sections that it's actually went and added. Now, how do you actually view the website? Well, if you just go right up here to the top right corner, you can click on preview.

14:05And in preview mode, you should be able to see your website. Wow. This is actually pretty impressive.

14:11So you can see this top hero section here, all of our branding colors. We got our logo up in the corner. We got a whole little navigation section here, called the action with a phone number.

14:21We've got a get a free quote button. And if you actually click that, it looks like it actually works and brings you to the section. So that's great.

14:30Let's see the actual sections. So down here, looks like this section kinda got cut off a little bit here at the bottom of our hero, so we need to make sure we adjust that.

14:39Really cool. It's basically mimicking the reference image pretty well. We got our services here and a pretty cool little zooming effect when you hover over these cards.

14:47I'm surprised it actually knew exactly which images to use too for each of these sections. It's pretty much matched them up the way I would imagine to do that. You can see Rudy here in Austin built on craftsmanship.

14:59So it's went ahead and drafted all of the copy and everything for us. This meet our team photo is maybe not in the right section. I might wanna switch that around too.

15:08But this is really cool. Looks like we've got different blogs. So maybe it's actually created individual blog posts for us.

15:15We'll have to see. We've got a review section, some of our recent projects.

15:20That's great. Oh, and then cool. Our before after section.

15:23Let's see if this oh, nice. It's like a slider bar.

15:27Very cool. So you can see like the before picture here. Again, all these are generated with Higgs field but I just generated a before of what a yard might look like and after nice and cleaned up with landscaping.

15:37So this is really cool way to show that completed in eleven days. I like that it's went ahead and generated some information about this story.

15:45So yeah, overall I'm really impressed. I really like the way that it looks. There are a few things obviously I wanna go through and tweak and change and that's what we can go through and do but for one pass from one prompt, this is pretty dang impressive And honestly, it would have taken me far longer to build from scratch than this went and did in about maybe ten, fifteen minutes total.

16:06Each of these sections here at the top just go right to the sections on the website which is really awesome. I wanna see if this blog actually loads into a blog page. It doesn't look like it.

16:17So this is just kind of like placeholder. Obviously, if we wanted to add content, we can go through and do that or we can actually tell it to remove the blog section entirely if that's something we didn't want. But for now, I wanna go ahead and adjust this hero section and get this looking right.

16:30So I'm gonna go ahead and just say the hero section is getting cut off at here at the bottom. Let's make sure all the elements fit above the fold. Also, let's swap out the image of this hero to this video file to play as you scroll down the page.

16:43The playing of the video will be triggered by the scroll. So I'm gonna actually go ahead and add from our media file here.

16:51We have this hero video that I generated. So this video here would be a lot cooler to have playing in the background instead of just that still image and I really want it so that it plays as you scroll down the website, it plays to the video smoothly as you scroll. Right?

17:04It would scrub through. You can scroll back and forth up and down the website and it would kinda move through the video. So let's see if it can do this for us by adding in this video here which it already had access to but just making sure that it knows the exact video file and then giving it this prompt and let's see what it does.

17:20And just like that it says that it's already made the changes and let me verify in the browser now. So it's just making sure that it actually made them. Over here in our actual preview, we can click refresh up here in the top right corner at any time to refresh the preview and see our hero section is a little different.

17:35And these cards are actually now in the fold, which is nice. And if I scroll, oh, nice. You can see it's playing the video back.

17:44Now that may not be exactly what you want. This is just something I was experimenting with to see if it looks cool. If we want, we can just have this looping video play over and over or we can get rid of that scrolling effect altogether.

17:55But for now I actually think that looks cool. Now also within Cloud Code, up at the top here you'll see this local host link. This is actually a link that we can go to to actually test out our website live on a web browser.

18:05So if I paste in this link here and push enter, you can see here on our local device, we'll actually have access to the website. And as I scroll, there's that video scrolling which is pretty sweet. And we have our sections just like we did here in our actual web browser now.

18:19So this is really awesome. I'm actually really liking the way that this is coming out. Um, there's obviously a bunch of tweaks we can continue to do to get nitpicky if we wanna swap out some of these images or swap out the text.

18:30We can do a lot of that here right within the editor in Cloud Code. So you can see over here in the top right, we also have this little pencil. We have this little select elements.

18:41And if we click the pencil, we can actually draw. So if we wanna say maybe, um, like this section right here, I'm not liking, we can click and draw and we can actually leave a little note.

18:50We can say add this drawing to the chat and we can go in and make an adjustment. I'm gonna cancel this real quick. We can also have this little select button where we can select different sections and say, hey, this section here I'm not liking.

19:02So I'm actually gonna scroll down and do that right here. So for this whole section, I'm gonna click on this and I'm just gonna tell Claude, let's simplify these images here instead of having three images in this section, let's just have the one image of the crew displayed horizontally so we can see the full image without it being cropped out.

19:24And we'll push enter. And you can see that was pretty quick. It actually came back already.

19:28I think this fits a little better than those three images did so that now the picture isn't cropped and we see our full crew. Now, obviously, you wanna make sure to give it any other information that it's gonna need. So this phone number up here, uh, the actual quote information or the contact information that it needs.

19:43Just make sure that you switched out everything that you want to switch out before you actually publish your website live. But I wanna show you actually how you would go about making this live because currently, this is only on a local host.

19:54Meaning, you can only access this currently locally right here within Cloud Code or on your local browser. But if someone else tried to type in this URL, it's not gonna load this website for them. So if we want this to be live and online and with a custom URL, something like summitridgeatx.com or summitridgelandscaping.com, we're gonna need to go through and actually purchase our own custom web hosting and custom URL.

20:17And my favorite platform for doing that is called Hostinger. So if you head on over to createaprowebsite./hosting1fifty, it'll bring you to a site that looks like this.

20:25And this is our special co branded landing page here with Hostinger, which will give you the best discounted price for web hosting and a free custom domain name along with every hosting plan that you purchase. So just go ahead and click start now and you'll be brought down here to this page where we can select the plan that fits your needs best.

20:45Now you can see the premium plan here starts at $2.69 a month and the business plan starts at $3.59 a month. Both are pretty great prices. The difference is is that with the premium plan, this is gonna be more for basic websites.

20:58So websites with basic functionality, you know, just a few pages here and there and really no back end. Just a simple web page with a contact form or something like that like the one we just built would work great for this premium plan.

21:10But if you built something that you're gonna wanna accept payments or have a back end where you actually store users information or more complex things like that, they're gonna wanna select the business plan.

21:21And with either of these plans, can see that you can create a couple of different websites. With the business plan, can actually create up to 50 websites with this one plan. You also get one free domain name for an entire year.

21:32So that means you can get your own custom www.com without having to purchase it separately. So I'm gonna go ahead and choose this premium plan.

21:40Now on this next page is where we can actually check out and choose how long we want to have this plan for. So you can see by default it starts with forty eight months. Well, we can go down to as low as one month or we can have twelve months.

21:52Now, you can see by the longer that you actually sign up, you get a bigger savings. So we're getting the best value if we're gonna go ahead and buy all forty eight months at once. Uh, but in this instance, let's just start with twelve months.

22:03Right? You also get one free year of your domain name, so you might as well have hosting for the entire year as well. And you can see for twelve months of having this whole entire website up, we're gonna get a free domain name along with two free mailboxes.

22:16So that means you can have your own email directly tied to this website as well. And this is all gonna be just for $43. Now, this is also adding our create a pro website coupon here which gives you an even bigger savings.

22:28You can see it's taking off about 5 extra dollars off of the total price here. But instead of being a $160 for this entire package, it's only $43 and we can also claim our free domain name right now too.

22:40So you can go ahead and search for a domain name right here if you want or you can do that here in the next step. I'm gonna go ahead and just click continue for now. Here it's just gonna ask you to register for Hostinger.

22:48So if you have an account already, you can go and just log in. Otherwise, create an account right here with your email address or Google. Alright.

22:56Now once you have an account and you're logged in, you can go ahead and actually check out so we can select your payment information here and to your credit card or whatever payment option that you want down here and click submit payment. Alright. And just like that, you now own your own hosting plan.

23:10So on this next page here, it's gonna ask you if you want to create a new website or are we migrating an existing site. Now in this case, since we've built our website already using Cloud Code, we're gonna hit migrate an existing site. In here, we're gonna choose the upload backup files option and click next.

23:27Now here is where we get to choose our domain name. So if you didn't choose it already, here's where we get to do that and you can see we have one free domain name available. So we can start typing right here in this bar to see if it's available to claim.

23:38So since this example business that I'm building here is called Summit Ridge Landscaping, I'm gonna type summitridgeatx.com. And cool.

23:47It looks like that's available. So I'm gonna go ahead and choose that and it's just gonna ask us to go ahead and verify information here and hit register. It's building out our domain now and you can see our domain name has been added to our site.

23:58Well, let's go ahead and click continue. Alright. Sweet.

24:01Now it's asking for us to actually upload the website. So in order to do that, all we have to do is go back over to our folder here that we set up at the beginning of the video. And these are all the files that we need to actually include on this website.

24:15Now this is really important and you wanna make sure that you do this correctly. You wanna make a compressed zipped folder of all of this content here. But we don't wanna compress this folder here because that would actually be compressing this folder what we only need to compress all of the contents within that folder.

24:31So I'm gonna go ahead and just select all of these files here. And if you have more files just select all of them that are inside of this folder. I'm gonna right click and hit compress.

24:41On a windows computer you would just hit send to compressor. And just like that you can see it's created this archive dot zip file and this is a compressed file of all of these files right here. Now we can actually move this back over here just right onto our desktop.

24:56And this archive dot zip is what we wanna upload here onto our Hostinger. So I'm gonna drag this over here. Alright.

25:03You can see it's uploaded the file right here. Let's go ahead and click next. Alright.

25:08Now it's gonna go ahead and migrate our site or build our actual site from the files here and put it onto our domain name. So we'll just click submit request. It's saying migration complete so we can continue to our dashboard or we can actually click this link here and view our website.

25:23And just like that, Summit Ridge is officially online and just the exact same website that we designed in Claude Code now is officially live and on the internet. And that's all it takes to build your own website using Claude Code. As you can see, this is a huge time saver giving you access to tons of power with just a few clicks and a few simple prompts.

25:44If you want me to cover more in-depth content around Claude code and building even cooler websites, drop a comment down below and let us know. Remember to use that discount code down in the description and download any of the other resources that I mentioned in this video down below, and I'll see you in the next video.

The Hook

The bait, then the rug-pull.

Anyone who's watched someone build an elaborate site with Claude Code in a few minutes knows the letdown of trying it themselves and hitting prompts, skills, and deployment jargon. This walkthrough is built to close that gap — five concrete steps, one real client site, no assumed background.

Frameworks

Named ideas worth stealing.

00:00list

The 5-Step Claude Code Website Workflow

What you need (Pro plan + assets)
Set up the project folder
Install two design skills
Build the website with one detailed prompt
Publish to a custom domain via hosting

The creator's end-to-end structure for going from nothing to a live custom-domain website in a single Claude Code session.

Steal forany 'zero to live site' tutorial or SOP for client website builds

CTA Breakdown

How they asked for the click.

VERBAL ASK

20:01product

“go to createaprowebsite dot com slash hosting one fifty ... remember to use that discount code down in the description”

A dedicated multi-minute segment walking through hosting plan tiers, pricing, and a branded coupon link before returning to finish the build — a soft affiliate pitch embedded in the tutorial's natural 'now make it live' step.

MENTIONED ON CAMERA

01:22productClaude Pro plan (claude.com) ↗

07:52toolAwwwards.com ↗

08:25toolDribbble.com ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.