How to Build Stunning 3D Websites with Claude Opus 5.5 (Full Tutorial)

0:00Claude'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

0:31or 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 Claude 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

0:57online 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 Claude Code. And for me, the easiest way to use Claude Code is by downloading Claude Desktop. So, if you just head on over to claude.com/download, you'll see a link right here where you can download the desktop version of Claude. 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

1:26full access to Claude Code and that's going to give you everything that we need to start building out our website today. So, once you have Claude 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 Higgsfield. And Higgsfield 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

1:53and workflow that I'm using, you do want to make sure that you sign up for Higgsfield 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 Higgsfield if you want to do an instant connection right here inside of your

2:16browser. 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 Higgsfield connector, all we need to do is go right over here to customize,

2:35and then click on connectors. And here, you can either just search for Higgsfield, 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 Higgsfield website. And just give it a name. And we'll click continue. Now, once you've connected Higgsfield, under this yours tab here, you'll see all of your connectors here, and you should see Higgsfield 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 Claude. Once you're connected, now we have the power of

3:06Higgsfield right inside of Claude 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

3:34out our website. So, back here inside of Claude, 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 Claude 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

3:52click 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

4:13e-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

4:27click 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 of 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

4:49step-by-step. It's incredibly simple. So here in my finder, here's the folder that I just created called Sierra Volt e-bikes, 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 Claude.md. 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

5:18time. 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

5:43this 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

6:02simply talk to Claude. So, before we get started, I want to make sure that I've switched this from accept 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

6:20see 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 terrains. I want to show off the versatility of this e-bike. I want to show off the quality of it with a really

6:45immersive and high-tech looking website. I've 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 of the website info and get all of 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

7:11and go ahead and push enter. Now, Claude'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

7:28our 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 going 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

7:49that, 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

8:08the 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

8:34and 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

8:49we 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

9:04ahead and say let's do both. Now, Higgsfield has the power to do all of this. So, it's going through now and actually checking the Higgsfield 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

9:31going to kind of give us a few options to choose from, and it's going to cost about 20 credits. So, we 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

9:42up 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 reroll 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

10:02folder. And so, here's the first image it created, which looks pretty awesome, if you ask me. Uh 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. I 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

10:25mountain 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

10:49version of the actual bike product itself, so that it can create the 3D model of our bike here. So, it has all of 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

11:04section. 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 three now to generate the 3D bike

11:30and 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

11:59experience 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 mountaineer 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

12:17awesome. So, I'm just going to give it a little bit of feedback here, and I'm going to copy that into other. Uh I'm just pasting it right here. So, that it basically is using that information um 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

12:47just 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

13:04biggest 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, So 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

13:32a 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

14:00free 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

14:20bucks. 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

14:33Google 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. And just like that, we're all signed up

14:48for 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

15:02we'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 is 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

15:29this example, we are doing a company called Sierra Volt e-bikes. So, I did sierravoltebikes.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

15:45click 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

16:07this entire setup process. Go ahead and just click on leave. And now you'll be brought back here to the Hostinger HPanel. This is the back end where you can access all the information about your website and your domain name and even get professional email setup 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

16:34check 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 cuz there's one final little step that we need to actually get Claude to control our hosting and do all of that

16:54for us. So, just like we connected Higgsfield 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 Claude. And 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

17:22allow. 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 Higgsfield 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 for Claude. So, it's saying which 3D bike should we go for? It's come up with our 3D models right here. So, we can

17:51actually 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 Claude 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

18:16select 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

18:40had it generated in just a few minutes. And it's looking like now the video's completely done as well and we have it right up here. Let me 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

19:01different terrains, 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 what 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

19:23building. 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

19:52again, anytime we want to preview what Cloud'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

20:05tab 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. Um we got our Built for the Climb, high-performance electric mountain bike for street and Sierra, built, tuned,

20:23test-ridden in Reno, Nevada. Love it. So, let's scroll down. Ooh, that was cool. It's like this like 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 um 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

20:58through. 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, you get to this section and boom, it starts showing you the bike actually rolling up on the

21:29rocks, 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,

21:49basically. And more specs. These cards that 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 text 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

22:13to fill out for 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. Um for instance, this shadow, I know this when I'm scrolling, it kind of I guess it does kind of fade

22:38in. Um 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

23:03little bit smaller for now. This is also fully mobile responsive as well. It went through and made sure that all of these elements work in mobile view, which is like what we'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

23:26let 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

23:43later, 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?" So, I'm going to close down our preview here for a

24:06second and let's let this do the fix. It's saying the shadow will now be drawn and it's 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,

24:25which 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

24:52basically 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 Sierra Vault ebikes.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 Sierra Vault ebikes.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 and browser

25:20and 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

25:46yourself. I'll see you in the next video.