Big Idea

The argument in one line.

Claude Code can now run a full website build end to end, brand kit, AI-generated 3D hero media, interactive layout, and live publishing, when a pre-written skill file and connected tools replace manual prompting and hand-written code.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A freelancer or agency owner who wants to pitch premium-looking 3D sites without hiring a developer or a 3D artist.
A creator or small business owner with a physical product who wants a cinematic hero section instead of stock photography.
Someone already comfortable paying for Claude Pro, Higgsfield credits, and hosting who wants a repeatable AI website workflow, not a free weekend project.

SKIP IF…

You need pixel-perfect control over code or a CMS your team already knows, this workflow hands structural decisions to Claude.
You're not willing to pay for three separate services (Claude Pro, Higgsfield, Hostinger) on top of following the skill file.

TL;DR

The full version, fast.

Josh Butcher builds a complete 3D website for a fictional e-bike brand using only Claude Code, Higgsfield, and Hostinger, no hand-written code. He loads a pre-made skill file into a project folder so Claude already knows the six-phase build process, then answers brand-kit questions in plain language. Claude uses the connected Higgsfield MCP tool to generate hero images, a 3D bike model, and a short hero film, each gated by a credit-cost preview before it spends anything. Once the images are approved, Claude builds the interactive site itself: scroll animations, spec comparisons, and a booking CTA. After a short revision pass on a shadow-rendering bug, Claude publishes the finished site directly to a connected Hostinger domain.

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:03

01 · Cold open: the pitch

Josh previews the finished Sierra Volt e-bike site and promises a complete beginning-to-end walkthrough, no code, ending with publishing to a custom domain.

01:03 – 03:31

02 · Step 1: Getting Set Up

Sets up the three required tools: Claude Desktop with a Pro plan ($17/mo) for Claude Code, the Higgsfield MCP connector for AI media generation, and a one-time Node.js install.

03:31 – 05:28

03 · Step 2: Project Setup

Creates a new project folder, opens it in Claude Code, trusts the workspace, and drops in a pre-written skill file (a CLAUDE.md download) that contains the entire six-phase build process.

05:28 – 07:20

04 · Step 3: The Build

Switches Claude from 'accept edits' to full bypass-permissions mode, selects the Opus 5.5 model, and describes the e-bike brand in one spoken prompt that references the skill file.

07:20 – 08:36

05 · Phase 1: Brand Kit

Claude runs a preflight tool check, then asks an 11-question brand-kit questionnaire covering slogan, audience, color palette, fonts, bike specs, and goals before building anything.

08:36 – 11:27

06 · Phase 2: Hero Image

Claude generates three hero-image candidates through the Higgsfield connector for a 20-credit cost, Josh picks a wet-mountain-road shot, and that image seeds every asset generated afterward.

11:27 – 12:35

07 · Phase 3: Hero Film

Claude prices and generates two 3D bike model candidates and a six-second hero film, with Josh giving plain-language direction to show the bike transitioning from road to rocky terrain.

12:35 – 15:16

08 · Step 4: Hosting & Custom Domain

While the AI assets render, Josh sets up Hostinger's Unlimited plan, which bundles a free one-year custom domain with hosting, and pays for a year up front at about $53 with a coupon.

15:16 – 16:35

09 · Free Custom Domain Name

Claims the free domain name, sierravoltbikes.com, inside Hostinger's onboarding flow, skipping the manual file-upload step since Claude will handle deployment later.

16:35 – 17:37

10 · Hostinger Connector

Connects Hostinger to Claude Code as a second MCP connector, the same way Higgsfield was connected, so Claude can publish directly to the hosting account later.

17:37 – 19:19

11 · Reviewing the 3D Bike & Hero Film

Reviews and picks between two generated 3D bike models, inspects the finished hero film showing the bike transitioning from wet road to rocky trail, and approves both for the build.

19:19 – 19:46

12 · Phase 4: Website Build

With the brand kit and all media assets locked, Claude starts building the actual website pages and interactions, the phase that runs longest unattended.

19:46 – 23:19

13 · First Site Reveal

After roughly 25 minutes, Claude returns a finished site: scroll-triggered 3D bike animation, a 'Four Modes, One Button' feature section, spec comparison cards, and a mobile-responsive layout, all from the single original prompt.

23:19 – 24:34

14 · Step 5: Revisions

Josh flags one visual bug, a shadow that pops in abruptly instead of fading, by screenshotting the moment and describing it in chat; Claude finds and fixes the render-order cause.

24:34 – 25:50

15 · Step 6: Publish Website

Josh confirms he's ready, Claude finds the connected Hostinger domain and publishes the site live in one step, no manual upload.

Atomic Insights

Lines worth screenshotting.

A pre-written skill file turns a multi-hour prompting session into a six-phase conversation Claude already knows how to run.
Higgsfield connects to Claude Code as an MCP connector, so image and video generation happens inside the same chat as the code.
Claude previews the credit cost of each AI generation, 20 credits for three hero image candidates, 44 to 73 for a 3D model or film, before spending anything.
Image generation is treated as cheap iteration and video generation as expensive, so the workflow locks the still image first and only generates film once the look is approved.
The same reference image seeds every downstream asset, the hero still, the 3D model, and the hero film all derive from the one selected image.
A free domain name and a year of hosting are bundled into one Hostinger plan purchase, so the domain decision happens inside the hosting checkout, not separately.
Connecting Hostinger to Claude as a second MCP connector lets Claude deploy the finished site directly, skipping any manual file upload.
Revisions happen by describing the bug in plain language and attaching before and after screenshots, not by editing code directly.
The entire build, from blank session to a working local preview, took about 25 minutes once the brand kit and hero assets were locked.
The site ships fully responsive by default, Claude builds and verifies the mobile layout without being asked for a second pass.

Takeaway

A Skill File Replaces Manual Prompting

SIX-PHASE BUILD

Loading a pre-written skill file before the first prompt turns an open-ended AI website build into six approval-gated phases, from brand kit through live publish, with credit costs shown before anything expensive runs.

02Step 1: Getting Set Up

The workflow needs three separate paid or connected tools before the first prompt: a $17/month Claude Pro plan, a Higgsfield account for AI media, and a one-time Node.js install.
Third-party services connect to Claude as MCP connectors through a Customize > Connectors menu, the same mechanism used later for Hostinger, so learning the pattern once covers every tool.

03Step 2: Project Setup

Every new build starts with a dedicated project folder opened and trusted inside Claude Code, before any instructions are given.
Dropping a pre-written instruction file, a CLAUDE.md skill file, into that folder front-loads the entire multi-phase process, so the builder never has to compose prompts from scratch mid-build.

04Step 3: The Build

Switching Claude from step-by-step permission prompts to full bypass-permissions mode is what lets a multi-phase build run unattended instead of stopping for approval on every file change.
One spoken paragraph describing the brand and referencing the skill file is enough to kick off the entire six-phase process, the skill file carries the structure, not the prompt.

05Phase 1: Brand Kit

Claude runs a preflight check on every connected tool, Higgsfield, Node.js, browser, hosting, before starting work, catching missing setup early instead of failing mid-build.
An 11-question brand questionnaire, covering slogan, audience, color palette, fonts, and product specifics, is answered once up front so every later asset and page matches without re-explaining the brand.

06Phase 2: Hero Image

Image generation is priced and previewed in batches, three candidates for 20 credits, before it runs, so the cost of experimentation is visible, not a surprise bill.
The single hero image selected here becomes the visual seed for every asset generated afterward, the 3D model and hero film both inherit its lighting, mood, and composition.

07Phase 3: Hero Film

3D model and video generation cost meaningfully more than stills, 44 to 73 credits per generation, so the workflow deliberately locks the cheap asset before spending on the expensive ones.
Plain-language creative direction, describing a desired camera move or terrain transition, in chat is enough to steer the generated video, no video-editing skill required.

08Step 4: Hosting & Custom Domain

A single hosting plan purchase can bundle a free year of a custom domain name, so the domain decision doesn't need a separate registrar or separate line item.
Paying for a full year of hosting up front, with a coupon code, brought the total cost of hosting plus a custom domain to about $53 for the year.

09Free Custom Domain Name

Claiming the free domain happens inside the host's own onboarding flow, and the file-upload step in that flow can be skipped entirely when Claude will deploy directly later.

10Hostinger Connector

Connecting the hosting provider to Claude as a second MCP connector, mirroring the Higgsfield setup, is what lets Claude publish the finished site itself instead of requiring a manual file transfer.

11Reviewing the 3D Bike & Hero Film

When two AI-generated variants exist, Claude explains its own recommendation, cleaner lines, better file size, stronger end result, rather than leaving the choice entirely unexplained.
A single generated 3D model, reused across multiple scroll-triggered site sections, replaces what would otherwise require a dedicated 3D designer and separate render passes.

12Phase 4: Website Build

Once the brand kit and every media asset are locked, the actual page-building phase runs as one long unattended pass, the manual decisions all happened earlier.

13First Site Reveal

A single prompt plus a skill file produced a fully responsive site with scroll-triggered animations, spec comparison cards, and a working booking CTA on the first pass, not after multiple rebuild cycles.
Mobile responsiveness was handled automatically as part of the build, not requested as a separate follow-up task.

14Step 5: Revisions

Visual bugs get fixed by describing the symptom and attaching a screenshot, not by locating and editing code directly; Claude explained the actual cause, a shadow layer render-order issue, after investigating.
Revision requests stay conversational even after the first build is reviewed, treating it as a draft to iterate on, not the final output, is part of the process.

15Step 6: Publish Website

Publishing is a single confirmation step once a domain is already connected through the Hostinger MCP connector, there's no manual export, upload, or DNS configuration required from the builder.

Glossary

Terms worth knowing.

MCP connector: A plug-in that gives Claude Code direct access to an outside service, like image generation or hosting, inside the same chat session, instead of switching tabs to use it manually.
Higgsfield: An AI media platform offering multiple image and video generation models that can be driven from inside Claude once connected as an MCP server.
Skill file: A long instruction document, here a CLAUDE.md, dropped into a project folder that tells Claude the exact phases and questions to run through, so the builder doesn't have to write prompts from scratch.
Hero still: The single reference image that sets the visual direction, lighting, mood, and composition, for every other asset generated afterward, including the 3D model and hero film.
Brand kit: The first phase of the build: slogan, audience, color palette, fonts, and product details, collected up front so every generated asset and page matches the brand.

Resources

Things they pointed at.

01:16productClaude Pro plan ($17/mo)

01:37toolHiggsfield ↗

02:57toolNode.js ↗

04:20tool10K Opus 5.5 Website skill file ↗

12:35toolHostinger ↗

Quotables

Lines you could clip.

00:00

“Claude's newest model Opus 5.5 just dropped and people are going crazy and making some insane websites like this one that you're seeing here.”

cold open hook with an immediate, concrete visual proof point→ TikTok hook↗ Tweet quote

18:29

“We now have a 3D rendered version of our bike, which would have cost thousands of dollars in and of itself to have a designer go through and build this out in some sort of a 3D design software. We had it generated in just a few minutes.”

concrete cost and time comparison, strong proof point mid-video→ IG reel cold open↗ Tweet quote

25:10

“And just like that, here's our website live and online for the whole world to see.”

clean payoff line closing the entire build arc→ 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.

analogy

Claude's newest model Opus 5 .5 just dropped and people are going crazy and making some insane websites like this one that you're seeing here. Now, a few years ago, a website like this would have cost tens of thousands of dollars and a whole team of people to be able to create something this elaborate. I was able to build this website here in just about 20 minutes using Claude without touching any lines of code.

Now, there are tons of videos on YouTube already that are talking about how to do this exact thing. But the problem is a lot of them are really confusing with tons of different prompts and steps involved. Or worse, they leave steps out or just brush right past the important steps.

So you following along end up getting stuck and frustrated and left with just a half -finished website. So in this video, I'm going to clear all that up and show you the entire process from beginning to end. Starting with a blank session inside of Cloud.

to a fully customized website with fully interactive animations and smooth motion graphics. And once we're happy with the site, I'm going to show you how to publish this entire thing live and online with your own custom domain name. So if you're ready to get started, let's hop in.

All right, in order to get started with this entire process, we're just going to need to get a few things set up. So the very first thing we need is Cloud Code. And for me, the easiest way to use Cloud Code is by downloading Cloud Desktop.

So if you just head on over to cloud .com slash download. you'll see a link right here where you can download the desktop version of cloud. And once you have that downloaded, you do want to make sure that you're signed up at least for their pro plan for $17 a month.

It gives you full access to cloud code, and that's going to give you everything that we need to start building out our website today. So once you have cloud desktop installed and you're signed up for their pro plan, the next big thing we're going to need to make this whole thing work smoothly is going to be. Higgs field and Higgs field is our main key player for generating all of the media.

They have tons of different image and video generation models that are all available in one place. And the best part is this can all work right inside of Claude. So if you do want to follow along with this tutorial and have the same type of media and workflow that I'm using, you do want to make sure that you sign up for Higgs field and have a plan with them as well.

You can use the link down in the description to get signed up if you're not already a member, but once you're signed in and you have an account, All we need to do is go right up here to this top tab that says MCP. Click on that.

And once we're here, you just want to select Claude up here at the top. And here you can just click on Connect Higgs Field if you want to do an instant connection right here inside of your browser. For me, I'm going to show you how to do this manually because it's just as easy.

If we just copy this link right here and we head on over to Claude Desktop. Inside of Claude, all we need to do is go on over here to the Code tab. And here's where we're going to be doing all of our building today.

But in order to add that Higgs field connector, all we need to do is go right over here to customize and then click on connectors. And here you can either just search for Higgs field or we can go up here to add and we can add a custom connector. And here we can paste in that link that we got from Higgs field website and just give it a name.

And we'll click continue. Now, once you've connected Higgs field under this yours tab here, you'll see all of your connectors here and you should see Higgs field right here. Now if it's your first time connecting, it will ask you to log into your Higgsfield account so that it can basically connect your specific account to Clod.

Once you're connected, now we have the power of Higgsfield right inside of Clod code. Now the last thing we need is to have Node .js. Now Node .js is just a tool that we need to make sure this whole entire process works smoothly, and you just need to install it one time, and it's completely free.

All we do is just go right here to click Get Node .js, and here you can click on the Mac installer, and we just install this just like anything else. Once it's installed, we're all ready to go and start building out our website. So now that we've got everything set up, we can move into step two, which is to actually start building out our website.

So back here inside of cloud, let's go back up here and we can create a new session. Now, anytime we create a new session or a new project inside of cloud code, we always need to create a folder to save all of our files inside of for this specific project. So in order to do that, you can just go right down here to this little folder icon.

And if you click on that, we can click open folder. Now here on my computer I have a folder called Claude Code and in this folder I've created another folder called Websites. So inside of this folder is where I'm going to place a new folder for this project.

For me I'm going to be building a website for an e -bike company that I'm using as an example here and so that is called Sierra Volt e -bikes and I'm going to click Create. So now we have a folder here specifically for this project and we can click on Open. Now here, Claude is just asking to trust the workspace so that we can make sure that we want to use this folder to transfer all of our files for this project.

So let's go ahead and just click trust workspace. Before we start building or enter any prompts, there is one file that we're going to download from the description of this video. And that is our skill file, which contains all the technical info for this website to be built so that we don't have to enter in a bunch of prompts and go back and forth.

We're going to enter in this one skill and Claude will go through and read that and basically give you all the instructions to build your website step by step. It's incredibly simple. So here in my finder, here's the folder that I just created called Sierra Volt eBikes.

And you can see that there's nothing in here right now. So again, down in the description of this video, you can download this file right here, which is called the ClaudeMD. And this is basically just a long set of instructions for Claude to follow in order to build our website to the specs that we want and to give you the full layout of this whole thing just step by step so it's not overwhelming and you don't have to worry about copying in all these prompts one at a time.

So all we're going to do is just take this file that you download and pop it right over here into your folder that you're building today. All we need is that skill file inside of this folder and we are ready to start building. So once your project folder is set up and you've copied over that skill and any other assets that you want, we can move into step three, which is actually start building out the website.

Now this is the fun part because all we need to do is just tell Claude in very normal language what we're trying to build here. So for this example, I'm building this brand for an e -bike company, and I want to show off how cool this e -bike is, some features about it, and really just how unique this product is with a very cool, interactive, kind of immersive website.

So that's what I'm going to tell Claude right here. If we go down here, we can either type in our prompt. If you have something that you've thought out and that you want to just paste in here, you can, or we can just simply talk to Claude.

So before we get started, I want to make sure that I've switched this from accepts edits to bypass permission. And by doing so, now Claude can go through and build without having to ask permission every single step of the way. And then you just want to make sure that we selected our model, which today we're testing out the brand new Opus 5 .5 to see the full power of Claude.

Now, if we just click on this little microphone icon, we can actually start talking directly to Claude and let it know what we want to build.

Hey, I'm looking to build a website for my new e -bike company called Sierra Volt. These e -bikes are great for all terrains from street to sierra type of trends i want to show off the versatility of this e -bike i want to show off the quality of it with a really immersive and high -tech looking website i provided a skill file for you to follow along with help me build out my website so literally that's all i have to say and you can obviously say as much as you want and give it as much information but it's going to actually go through and start asking you questions that it needs to fill out all the website info and get all the info it needs to generate the right media So all we need to do is just basically tell it a gist of what we're trying to start with and go ahead and push enter.

Now, cloud's going to go through and actually read that skill file that we provided. And it's going to go through and start actually asking us what it needs to build out this site. All right, cool.

So it's coming back and you can see here it's saying it has everything it needs to start building. And it's saying we can start out here with phase one, which is going to be establishing our brand kit. Now, if you have a brand that you're building your website for, you can just say, I already have a brand and you're going to see.

And it says, cool. So if we have a brand already, we're going to go ahead and basically give it all the information. What is our slogan?

Who is this for? What's the brand personality, color palette, fonts, logos, things like that, right? So I prepared this little bit of text here with my brand, my slogan, a little information about the pricing of the products and just everything it should need to know about my brand in order to start basically making this website.

So take your time to fill out all the questions that it asks you here in this step because this is really important to make sure that it builds the website for the brand that you're looking to build. All right, sweet. And it's come back with phase one complete.

Our brand kit is completely built. And if we open up our finder folder again, you'll see inside of here now it's got a couple of folders and it's got our branding kit right here. So now it knows exactly how to follow along with our specific brand and all the information it needs to go along and start building things.

So you can see here, it's basically just saying to go ahead and check through the brand kit, make sure everything looks good and just reply next to move through to the next step. So I'm going to go ahead and just say next. All right.

And here we are now into phase two, which is going to be creating our hero image or the main kind of graphics for the website. So it's giving us a couple options, right? It's saying, do we want cinematic film plus images?

Do we want real 3D products? Do we want both? So this is pretty cool.

We can actually create a cool 3D model of our bike or whatever product you're trying to represent. Maybe we just want cinematic video and images throughout the website without the 3D models, or we can have a mixture of both here. And so to show off the power, I'm going to go ahead and say, let's do both.

Now Higgs field has the power to do all of this. So it's going through now and actually checking the Higgs field connector and going through and going to start building out our assets that it needs for the website. But it does this in incremental steps to make sure that you're approving things along the way and making sure you're checking how much credits it's going to spend along the way as well, which is important.

So that Claude doesn't just go and spend a ton of credits for you without you realizing. So here you go. It says I'm going to generate three hero candidates from the brief.

So it's going to kind of give us a few options to choose from. And it's going to cost about 20 credits. So you want to go ahead and do that and we'll say yes.

So let's let this come up with those reference images. And whenever it comes back, we'll take a look at what it came up with. All right, sweet.

And it's come back with our first three generations. Now it's asking, which of these options do you like better? Do we like the puddle reflection?

Do we like the wet mountain road? Do we want to re -roll all three? Now these are kind of small previews here, so actually if we open up our Finder window again, inside of Assets here, we should see our reference images in the Reference folder.

And so here's the first image it created, which looks pretty awesome if you ask me. Here's the second option here with more of like mountainy roads, a little bit more rain kind of coming down. And then here's the third option, like this green light like this.

I think I like the first one best though. I think this looks pretty sweet. This looks like, you know, more intense, I guess.

So I'm going to select option one right here, the number one wet mountain road. Now it's going to go through and start generating stuff based on that first selection that I made. So now based on our selection for our reference image, it's going to go through and build out the rest of the media or images that it needs for the site.

So let's give it a second to cook up that and we'll be back in a sec. All right, it's come back and it's got a couple more images now. So some more reference stuff that fits the kind of branding that we just established from that first reference image.

And it's created this little bike, which is just a much more detailed version of the actual bike product itself so that it can create the 3D model of our bike here. So it has all the assets and basically media it needs to start cooking. Now we can tell it, let's go ahead and move to phase three, which is generating the 3D bike and the actual film or the video section.

So let's go ahead and do that. We can also tell it to redo any images at this point if you're not happy with anything. And this is really where you want to just take your time to get things just right before moving into.

this 3d and or film section which costs a bit more credits images are very cheap to generate new versions of but videos can be a little more so it's always smart to just start with images make sure you're happy and then move forward so i'm going to move us into phase 3 now to generate the 3d bike and film now it's asking a couple questions before it generates the third phase here basically it's saying do we want to have two different 3d models to have basically an option to choose from or do we want to just create one and it's going to cost either 62 credits or 44 credits.

I'm going to go ahead and generate two so we have the options and see which one we like better. Now here it's suggesting what we want for the video, and I'm going to actually type in something else here. I'm going to tell it, I'd like to have the video cover the different terrains that we're able to experience with this e -bike.

So I want it to transition from the road, the mountain road that we're on, and have the bike actually... roll across and go over down to like more of a rocky kind of mountainy path to show off the versatility of the bike if we can have the film cover that type of a transformation i think that'd be awesome i'm just going to give it a little bit of feedback here and i'm going to copy that into other and just paste it right here so that it basically is using that information to generate everything and i'm just going to say go ahead and start we'll hit submit and we'll let it go Now these videos usually take a little bit of time to actually generate, and so while we're waiting, we can actually go ahead and move into our next step, which is going to be getting our hosting plan and your custom domain all set up so that once our website's built, we can just transfer that over and publish it all with just one simple prompt.

And the service I like to use most for this is called Hostinger. So if you click on the first link down in the description of this video, it'll bring you over to a page that looks like this.

And this here is our co -branded page with Hostinger, which is set up to give you the absolute biggest savings on your hosting plan. So on this page, you can see right here, all we have to do is click on this button that says get a plan. And here you'll be brought down to this section where you can choose the different plan options.

And basically there's only one option and that's our unlimited plan here, which not only gives you the access to unlimited websites, but it gives you one free domain name for an entire year. So that custom domain name that you're looking for will be completely included in this price. And we're going to even give you a bigger savings with our custom create a pro website coupon code applied when you use that link in the description.

So all we need to do is just click on choose plan. And here is where we can actually choose how long we want to have our hosting plan for. So you can see by default, the period is selected up here at 48 months.

And that's going to give you the best savings or the best price point here on your hosting plan. But if you don't want to sign up for a full 48 months, we can actually bring that down to something like 12 months here. And you can see that you still are going to get your free one year domain name with this, which means you'll have hosting and your domain online for one year, all for this one price.

And you do pay all up front. So you can see the entire 12 months is going to be charging you here. But with our additional coupon code, create a pro website, you get an additional 10 % off.

So your entire website is live and online for a full year for about 53 bucks. That's pretty awesome. So once you have everything set up here that you want for your period, just go ahead and just click on continue.

And here it's going to ask you to go ahead and just create an account with Hostinger so that we can log in and access all of your information. So you can go ahead and just create one with Google or enter your email address here. Or if you already have an account, we can just log in.

And then here on this page, we're just going to go ahead and enter in your billing information and select your payment method. And we can click on submit payment. Just like that, we're all signed up for hosting.

Pretty quick and painless. Now, as soon as you're done signing up for hosting, you should be brought to this page right here. And this is Hostinger's onboarding process to get you all set up.

So here we're going to go ahead and just actually say migrate an existing site because we're actually building our site using Cloud. And so we're going to be choosing this option. Now here, when you see these three options, we're going to just choose upload your website files.

And don't worry, we're not going to be uploading any files ourselves. Cloud's going to handle all of this for us. We just want to select this option and click on next.

And here's where we can choose our free custom domain name. So you can see right up here we have one free domain name available and we can just start typing in domain names to try them out and see if they're available for us to purchase or in this case claim for free. So for this example we are doing a company called Sierra Volt e -bikes.

So I did Sierra Volt e -bikes dot com and we can see that is available here. It's free and we get the first year for no money. So we'll select that and click on next.

Here it's just asking us to go ahead and register that domain name. So just click on register. All right, and just like that, our domain has been added to our website.

Perfect. Let's click on Continue. Now here it's asking us to upload the files for our website.

Now our website's not quite done being built yet, but like I said, we're not even going to worry about doing any of this. Claude's going to handle this all for us. So now that we've got our domain name and all that is good, all we have to do right now is just click on the Hostinger logo to actually exit out of this entire setup process.

Go ahead and just click on Leave. And now you'll be brought back here to the Hostinger H panel. This is the back end where you can access all the information about your website and your domain name and even get professional email set up if you'd like.

So if at any time you need to access your website, just click on websites and you should see your unlimited plan that you just purchased here with your new domain name, which is still connecting. So that's perfect. Let's let that have a chance to get connected and do everything it needs while we go back and check on the status of our website.

Let's pop back over here to Claude. And you can see it's asking us a couple more questions here. So we can actually continue on here really quick.

But before I do continue in this session, I want to go ahead and actually finish up this connection with our hosting and Claude. Because there's one final little step that we need to actually get Claude to control our hosting and do all of that for us. So just like we connected Higgs field to Claude, now we're going to connect Hostinger to Claude.

Same way, all we need to do is go right over here to customize and go to connectors. And here we can search for Hostinger. and we should see the Hostinger connector right here.

Go ahead and just click on that and click Connect to Cloud. It'll bring you here back to your web browser, and all we have to do is click on Continue Connecting. And since you're already logged in to your Hostinger account, it should just bring you right here with your account logged in, and just click on Allow.

That'll bring you back over here to your Cloud desktop app, and you'll see that we are now connected. So if we go back to our connectors under Yours, you should see now your Higgs field connector and your Hostinger connector all connected here. so we can actually publish this website whenever we're ready perfect now let's hop back into our session and keep building out the website so under our recent tab here we should see our website that's being built and let's finish answering these questions for cloud so it's saying which 3d bike should we go for it's come up with our 3d models right here so we can actually take a look at these so if we go up here actually to the top right corner this little browser icon this will usually let you display whatever cloud is currently working on and right now it's displaying our 3d bike So we can kind of see all the angles of the bike here.

And that's pretty cool. So because we have two options, it's basically just saying it recommends this first option here. It's got cleaner lines and it's a little bit bigger of a file.

But overall, it's going to be a nicer yielding result. So I'm going to select that option. So if I open this up in my finder here, I can actually take a look at this 3D render, which is pretty sweet.

This is what was completely generated just from that one image file that we gave it. So that's pretty awesome. We now have a 3D rendered version of our bike, which would have cost thousands of dollars in and of itself to have a designer go through and build this out in some sort of a 3D design software.

We had it generated in just a few minutes. And it's looking like now the video is completely done as well. And we have it right up here.

I'm going to go ahead and actually open this up in our finder again under videos. So just a smooth transition here from our basically our hero shot of the bike on the street. We got someone riding it and it's going up.

getting on this off -road kind of terrain showing that it can handle all these different trains which i love that just simple and we can go back and forth and refine this video as much as we'd like but at this point i think this is a great example exactly kind of what i was picturing in my mind so i'm going to go ahead and just say next let's actually start building out the website which is going to be phase four now so let's say next and have it start building Now all the media is compiled.

It's got the brand kit. It's got everything it needs in that skill file to go through and build out our premium website. And that's where all the magic lives, right?

Without that skill file, it wouldn't know how to go through and use all of these elements properly in a nice, smooth, intricate way. So we're going to go through and let this build and I'll come back as soon as our first version of the website is done. All right, now that took about 25 minutes, and it has come back saying our site's done and ready to take a look.

So in order to do that, again, anytime we want to preview what Claude's been working on, just up here in the top right corner here, this little browser icon, this should show us a live view of our website. All right, this is looking killer. Let's go ahead and open this up in full screen mode.

I'm even going to close down this side tab over here. Let's take a full look at our website here. So first off, I'm noticing as I'm scrolling my mouse or moving my mouse, there's some movement, which is really cool.

It feels like it's nice and interactive. We got our built for the climb, high performance electric mountain bike for street in Sierra, built, tuned, test ridden in Reno, Nevada. Love it.

So let's scroll down. Ooh, that was cool. It's like this electricity kind of went around the bike.

And here's our 3D model. And as we're scrolling, it's moving through all the 3D elements of the bike itself.

Really cool. You can see it looks like it's actually kind of raining, too, a little bit. Now, I'm sure we could tell it to generate some sort of a background here, but this is just really cool how it's kind of just really focusing in on the glowing light here and all of the actual selling points here as we scroll through.

Get down here. We got some specs. This is really cool.

Animated graph. Four modes one button So we got some kind of specs down here more interactive features here on the site, which is awesome Here's that close -up image that it generated earlier This is a really impressive site Especially for just one prompt right so as you scroll get to this section and boom it starts showing you The bike actually rolling up on the rocks, which is super cool Looks really great as a website section And here it says turn it over, look closer.

So now we can actually get the three -dimensional aspect of the bike, moving it around. Check out the specs of each individual component here. That's pretty awesome.

Really cool little details. So these are like the different models, basically.

And more specs. These cards have this nice hover effect as we scroll over them.

Two different bikes to kind of compare the numbers here. Really cool. Kind of like tech specs.

And we have book a test ride. So this is kind of like the main call to action here. We got our two different price points and we've got a little form here to fill out some more information.

And our footer section. So, I mean, that is quite the website. Just overall from one prompt or one pass through.

This is incredibly impressive. And if at any point there's anything in here that I want to tweak. or make changes on, now I can go through from this crazy good starting point and make sure that it's looking nice.

For instance, this shadow I noticed when I'm scrolling, it kind of, I guess it does kind of fade in. But there is a point when it kind of just randomly abruptly appears. So I'm going to take a screenshot of that really quick.

And what we can do is actually we can select with this mouse, we can select certain elements of the website and tell Claude to go through and actually fix certain points now, right? So I'm going to go through and open up our side menu here again and actually close down this full screen mode. Let's just make this a little bit smaller for now.

This is also fully mobile responsive as well. I went through and made sure that all of these elements work in mobile view, which is like what you're seeing here. So this looks really clean even on a mobile device, which is awesome.

But essentially now I can go through and start just making revisions, which is the next step, revising our site. So we're happy with the first view of it and everything is looking awesome. But let me just paste in that image here.

And I'm going to go ahead and just say, hey, the site is looking incredible. I did notice on the 3D model when you get to a certain point of scrolling, the shadow just kind of abruptly appears. There's a point when there's no shadow and then basically a few just frames later, a shadow just appears abruptly.

Here's a few frames showing before the shadow appears and right when the shadow appears. If we can just make sure that's nice and smooth. So now this is the game, right?

This is just making revisions, going back and forth, talking to Claude as if it were a human, and we have real revisions that we wanted to say, hey, I like this, but can we change that? Or I don't like this color of green. Can we make that maybe a different shade?

I'm going to close down our preview here for a second. Let's let this do the fix. It's saying the shadow will now be drawn.

I'm just going to go ahead and fix that. All right, cool. And you can see it's come back saying, cool, found it.

The shadow wasn't disappearing. It was just getting rendered under the glow. So if we open this back up here, we can refresh.

As we scroll, we can see that the shadow is now staying there solid the entire time, which looks much better, much cleaner. So those are those little tweaks we can make. And you go through now and make as many changes as you see fit to your site until you're happy with it.

But once you're happy with it, we can move into the final phase, which Claude's already asking us if we're ready to do. So you can see here it's saying, anything else you want to change? Are we ready to publish it?

So let's just say, yes, publish it. And you can see it is now on phase six, the publishing phase. And it's seeing that Hostinger is connected.

And we're going to go ahead and just basically select which domain we want to publish this to. And we will be live. So you can see it's coming back and it said it found our domain name, sierravoltebikes .com.

So we'll go ahead and select that. Just select your domain name here. All right.

And just like that, we are live at our domain name, sierravoltebikes .com. and we can go right up here to our browser and we can see that it's actually loading the website here now in our domain name or we can copy this right here head on over to our actual web browser and paste this in and just like that here's our website live and online for the whole world to see so i hope this video helped you follow along and build the website of your dreams And remember, if you haven't gotten started yet, make sure to use that first link down in the description to get signed up for your hosting plan at that discounted rate and download that skill file that's down in the description so that you can make this whole process incredibly easy for yourself.

I'll see you in the next video.

The Hook

The bait, then the rug-pull.

Josh Butcher opens with the number that makes this watchable: the cinematic, interactive e-bike site he's about to build from a blank Claude session would have cost tens of thousands of dollars and a full production team a few years ago. He built it in about 20 minutes, and this video is the exact replay, start to publish.

Frameworks

Named ideas worth stealing.

07:48list

The Six-Phase AI Website Build

Phase 1: Brand Kit
Phase 2: Hero Image
Phase 3: Hero Film (3D model)
Phase 4: Website Build
Phase 5: Revisions
Phase 6: Publish

The skill file breaks the entire build into six sequential phases, each ending with an explicit approval step before Claude moves to the next, more expensive, one.

Steal forany AI-driven production pipeline where a client or collaborator needs visible checkpoints before the next expensive step runs

CTA Breakdown

How they asked for the click.

VERBAL ASK

25:34product

“If you haven't gotten started yet, make sure to use that first link down in the description to get signed up for your hosting plan at that discounted rate and download that skill file that's down in the description.”

Soft close delivered in the sign-off, pointing to an affiliate hosting link and the free skill-file download, both withheld until the viewer has watched the full process play out.

MENTIONED ON CAMERA

01:37toolHiggsfield ↗

02:57toolNode.js ↗

04:20tool10K Opus 5.5 Website skill file ↗

12:35toolHostinger ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.