Claude Design + New Design Skill = $10,000 3D Animated Websites

Wow, that is really cool. And I love how we can actually fly into the cabin as well. That is sick. You've got this cozy corner here and then the bedroom, the bathroom, and back to the cabin. All right, so I'm going to show you guys how to create a beautiful, fully animated website like this that sells for thousands of dollars. I mean, look at all these images here. They're all created by AI with just a couple of prompts. And this really looks like a legit booking website. And I also just found a new design skill that allows you to transform any still image into a drone flyth through video animation like this. And I did this with Claude in just less than three prompts. But I know what you're thinking. Do we have to use Fable 5 all the time? It's expensive and it burns through my limit very very quickly. And you know what? I never use Fable 5 for this project. In fact, you don't even need to use expensive models if you apply the tricks that I'm going to show you in this video. So you can still have the highest quality while keeping your cost low. Yes, this looks like a massive website project. And if you've never done this before, it may look intimidating, but it's actually very, very simple. So, I'm going to approach this tutorial for nontechnical people. Going to make it as simple as possible to follow. So, if you know how to chat with chat GBT, you'll know how to do this. So, let's dive in. Now, before we build a site, I just want to give you guys a brief on what we're trying to build here. So, we got this website for a cabin. So, basically like an Airbnb. It's like a reservation site where somebody can book a cabin for the weekend. But look how this site is actually designed. So, as I scroll my mouse, it's got this fly through animation where the user can not only look at the cabin, but they're going to be able to see all the rooms inside as well. So, imagine having this ability to go through all these rooms and how useful this will be for any type of real estate photography. So, you can let the user see and experience what it's like inside the property before making a decision, right? And I know this looks very complicated to build, but Claude will be doing all the heavy lifting here while you just talk to it in plain English. Now, we're going to use a couple of tools to make everything happen. Number one, we're going to use claw to be a director here and specifically claw design here to come up with the colors, typography, and put everything together nicely. And I'm going to tell you why I'm starting with cloud design and not cloud code. And for this particular website, I actually use obus. And I also try to use the latest GPT 5.6 soul, create the same website, and I was able to get a very, very similar quality. And number two, we're also going to use Hickfield as the tool to generate all the images and the videos in the website. And if you guys are not familiar with Hickfield is where you can access all the latest video models like Nano Banana, Cance, GPT2, all in one place. So you don't need a separate subscription to all these models and you can access everything under one roof. And number three, we're going to use this skill here called Scroll World. It is a free GitHub repo. It's been trending lately and it's basically a scale that allows Claude to be able to use Hicksfield to create this zoomin fly through animation. And this is the cheat code that makes this flying effect work. And this will all make sense when I actually show you how to do it. And finally, once we build everything, I'm going to show you how to deploy this website online. So, whatever website you build, you can get this live on the internet. You can sell this for a client or you can host it for everyone to see. All right, so let's get started. And I'm going to start with Claude Design here. So, if you're seeing this for the first time, you can go to claw.ai/design and it will pull up this platform here. And by the way, this is a separate platform from the desktop app, but whatever you generate here, it's going to use up the same credits from your subscription. Now you can definitely use cloud code to build out the website but I always use cloud design to create any type of design work whether it's websites animations presentations so whatever project that I'm building that has anything to do with design I always come back here and I have experimented with this hundreds of times comparing between cloud code and claw design and claw design is more likely to produce the design that I want because it is a platform built for design work and it already has taste right so this way you're not going waste tokens to keep regenerating. And you don't even have to use the most expensive model to get the result that you want. So, this is kind of my first trick in how I get the design to look really good in the first try by using a good design harness like this. Now, before I paste in the prompt with any type of design work, you always want to give it a reference, right? So, so without giving it a reference, it's like telling a builder, hey, I want you to build me a nice house. You know, nice is very subjective and it's different for everybody. So, you want to have some type of reference. you know, maybe I saw this house on the street and I like this V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V V Victorian style house. It's got these colors, this many bedrooms, and I want it to be this quality. And if you give it that kind of reference, obviously the build is going to have an easier time understanding your taste and it's more likely that it's going to give you something that you want rather than giving you something random. And surprisingly, this is the step that a lot of people don't actually take. They just prompt Claude, hey, give me a beautiful design for a reservation website and come up with all the colors. And that is going to be too broad and too vague. Now, for design inspiration, I like to go to Pinterest or Dribble. And for this particular project, I typed in Airbnb in nature just to get a couple of ideas on just to see if I like any of these ideas. And actually landed on this particular website style that I like here. So, I do like the vibe, the blue and orange color theme, and it even provided the font and all the color palette as well. So, all I need to do is take a screenshot of all this and upload it to Claw Design. Now, of course, we're not going to copy the exact design, but what we're doing here is just to take the colors, the topography, the way that the buttons look, and you want to communicate that to Cloud Design. Now, of course, you're also going to need the prompt. So, I've already prepared the prompt earlier for this. So, it is quite a detailed prompt here, which I'm just going to grab and copy right into Cloud Design. So, I'm going to provide this entire resource here for you guys down in the description. So if you want to recreate this website, you can just follow all the steps here in this landing page. But basically what this prompt is saying is giving Claude instructions on generate the images and videos which is through Hicksfield here and what kind of website am I building. This is basically a cabin reservation website and the colors that I'm looking for and also the type of rooms that I want in the cabin. And by the way, I didn't write all this. I asked Claude to come up with all the descriptions of the rooms here and come up with ideas and it's just me making the final decision whether I want certain styles or not. Next, I've got the hero video. So, this is the video that you see in the top section and also basically the sections that I want to see on the website. So, not very complicated, not super long, but detailed enough for it to have context in what I'm trying to build here. Now, the next thing is you also want to upload that screenshot of the reference here. And then you want to choose the model which is 4.8 and I picked high as the effort. And then you just hit go. Now while we're waiting, what we're trying to build here is just the static website, meaning the hero section does not have any zoomin animation. So we're just trying to build the base structure of the website with this image here and also to build out the entire website like this sections down here to the photo section with all testimonials and another booking page and the footer right here. So basically this is step number one in what we're going to build. And then once this is done, we're going to bring this over to cloud code where we're going to install the scroll roll scale and transform this hero section into a fly through animation. But we're going to start here first. All right. So this is actually what we get after waiting for just about 5 minutes. So it's got this hero section here. And all of these are actually clickable as well. It's got this date selector. And if I scroll down, it's built out everything for me exactly like I wanted. And without Hicksfield, Claude is not going to be able to generate all these images, the room, the kitchen, all the shots because Claude does not have his own image generation model. So that's why we needed Hicksfield to generate all this for us. And notice that I didn't even go to Hicksfield to prompt this images myself cuz we're actually using the Hicksfield MCP connector. So if you click on your profile here under connectors, you can actually see that I have Hicksfield MCP connected here to connect Hicksfield in the background and come up with all the prompts. bring those assets back to claw and stitch everything nicely without us having to manually think about the prompts. Right? So that is a major timesaver and all you need to do is to have enough credits in Hicksfield so that it will generate all these videos and images for us. And if you guys are curious, these are all the images and videos that it was able to create and it was able to pick the best one for our website. And if you're doing this for the first time, you want to go to MCP and CLI here, and you want to just copy this URL here. Go in browse directory, and under connectors, you're going to click add custom connector. And then you want to just type hickfield. Copy the URL here. And you want to hit add. And that's it. I'm not going to do that cuz I already have this hickfield connector up and running. But that's how easy it is to set it up. So I'm going to go back to claw design here. Obviously, you can make changes to this. If you want to make some edits, you can click on edit here. if you don't like the positioning or you want to change some words, you can do that here. I think originally this was not centered. So, you can play around with this alignment as well. So, you can do whatever you want on the website here. But once you're done with this and once you're ready to take this image and transform it into a fly through video, we're going to bring this over to Cloud Code. And we can do that easily by going to share and saving the entire file as a zip file. So, I'm going to just save this and then hit export. and it's going to save it in my computer. Now, you always want to create a new folder for every project that you create with cloud just to make everything organized and it's going to be easier when it comes to deploying your website. So, if you haven't already, just create a folder here. Name it whatever project that you want and then you want to just move that zip file cuz we're going to get cloud code now to to study this file here and start working on the website. Now, before we go to cloud code, we're going to grab this scale file. You want to copy the URL and I'm just going to ask cloud code to install the scale. So we can start creating this animation here. So what I did is basically just type in a very simple prompt here. You don't have to figure out on how to install it. You can just say can you install the scale and provide the URL and that's it. And it's going to study that website and it's going to install everything for you automatically. And once you're done with that you want to open a new session and you want to make sure that you connected to that folder where you save your zip file in. So in this case it's connected to Vesper 2. And what I did is just gave it this simple prompt. Check out the site I created in this folder and use /croll world scale and this is how you would invoke that skill to transform the hero section into a flight scrolling animation. Tell me your plan in what the shot will look like before building anything. Study all the design of the building and all the rooms so all details can be presented accurately in this video. So clock out is actually not going to generate any new images cuz we already did that here, right? And we've got all the rooms here as well. So, it's going to take all this as a reference images of what the interior of the cabin looks like and create that drone fly through video. So, after it studied all the assets, the images, it gave me a plan of how it's going to create that video. And it even gave me that shot of kind of the drone path, what it's going to show scene by scene. So, it's just a matter of me looking through this and see if I approve it or not. And without that scroll world scale that we downloaded, it's not going to be able to easily understand our intent here. So, this makes it a lot easier. And you can actually see what it's doing. It's pulling all the images from Higsfield here. And it's trying to stitch everything together without me having to be involved here. And just in a few minutes, it's done. And it's given me this local host URL that I can click and I can preview it on my machine. And this is what it looks like. Right. So if I scroll down, you will see that it's able to create this video animation with all the rooms here. And then going back to this original shot. And it kept the rest of the website the same with the static one, which is exactly what I want. And that looks perfect to me. Now, of course, there's a bit of back and forth with Claude. I didn't get this great looking video in just one prompt. I've noticed that it's not very consistent in in terms of the images that it generated. It's got the basic idea of what we're trying to achieve. But it added this outdoor sauna here that we didn't ask for. And also because I didn't give it a floor plan of the house, it's not going to be able to know where the rooms are located, right? So, it's doing this randomly. So, I think if you give it a floor plan and you actually dictate on the drone flight path, it should be able to give you a more accurate representation of the actual cabin. But considering that I only did this in about 10 minutes, I think this is already pretty amazing. And one tip I can give you as well, you always want to check what Hicksfield generates for us in the back end. So, you want to approve the images first before you ask it to stitch it into a video. And I actually found out why it added that sauna on the patio is because of this image here that has that sauna here. That's why it's a little bit confused. So this is something that you guys can check before you generate the video. Now if you guys want to recreate this website, I actually provided a resource page here where you can just grab the instructions here and these are all the reference files that I gave Claw Design how to connect to Higsfield. All the tools that I use, the image model, video models that I use in Hicksfield and also the entire prompt is available here. Completely free download in the description below. Now, let's say you want to take your website to the next level. Maybe you want to add a simple animation like this, just like what you see from the notion website here. Or maybe you want to add a scrolling testimonial like this. Or maybe you like this animation in the pricing page here. Where do you actually find these? So, I'm going to show you a couple websites where you can grab this from so you don't have to create them from scratch. I'm going to show you all that. But first, I want to show you how to publish our website first, cuz this is the part where a lot of people get confused on how to set it up. What if you want to make changes to your site, etc. What is the easiest and most seamless way to do this if you're not a technical person? Now, for hosting, I'd personally go with Hostinger. They are the sponsor of today's video, but I've personally built more than 10 websites with them, and they're one of the most reliable and affordable options when it comes to hosting. And they've recently launched an MCP connector to claude. So you can actually have Claude deploy your website without you having to figure out how to set up the back end of your hosting which can get a bit complicated for someone who's not technical. So all you need to do is to set up the connector once and Claude will handle the rest. Set up everything for you and you can just talk to it as if you had a developer friend. So I'm going to show you how ridiculously easy this is. So first you want to go to this website. I'm going to provide the link in the description below. You want to get a plan. Now, if you already have a Host Ninja account, you can skip this part. But if you're new, you'll find two options here. I would pick the left one here if you're just getting started. Is they're actually doing an 80% off discount right now, which is just $3 a month. And that gives you the ability to host 50 websites, which is a lot of websites. So, you want to click on choose plan here. And once you land on this page, you get to pick the period that you want. Obviously, if you go with the longer period, you get the best pricing. You get the lowest price here. And keep in mind that they do have a 30-day money back guarantee. So for any reason if you're not satisfied, you do have that refund option. And also before you check out, you want to enter my coupon code here, Jay Lee. Hit apply, and you actually get an additional 10% off of your order. So it's even cheaper. So you want to hit continue, and you want to finish your payment, and then you will land on this dashboard here. Now, to install the connector is actually very easy. So you want to go back to cloud code here, and you want to go to settings and scroll down. Click on connectors, add custom connector, and you want to call it hostinger. And you want to just paste in this URL mcp.hostinger.com and click add. And then you want to hit connect to authenticate yourself. And then you want to allow that connection to your account. And you're pretty much good to go here. So if I go down here, I click the plus button and I go to connectors. I can verify that my hostinger connection is active. Now let's deploy the website. And it is very simple to do. So you can simply write this prompt here. Hostinger MCP connector is active. Deploy the site to hostinger and hit enter and then it's going to do going to the hostinger back end and it's going to build out and push the site to hostinger. Now fast forward our site is deployed and verified temporary hosting your domain. And if I click on this there is our site with the hostinger URL here. And if I go back to my host ninja dashboard let's verify if the website's actually here. So, if I go to websites here, I can see that this is the website that it just created. And it did that without me having to set it up manually. So, the connector is the key to all this. And if you want to connect a domain, you can just connect a domain from here. But this temporary domain is pretty much all you need if you're just showing this to your client or you just want to have a temporary website. And I think one big advantage of having a connector like this is that whenever you want to make changes to your website, you want to make updates and you don't have to manually upload the files to Hostinger, you can just ask a lot to push all the updates to Hostinger on your behalf, which saves a lot of time. All right, so let's talk about some free resources. I want to show you a couple of websites that I normally go to to find inspiration for design. So we're going to start with the website itself. So if you're a designer, you're probably familiar with this website called awards.com. So this is basically a website where you can see all the websites that has received awards. So these are the best of the best websites out there. So for example, like this one is a pet care service and you've got this awesome animated website which looks really really cool. Or you got this website selling pet food. You can see there's a dog version and a cat version as well. Just really cute. And this is basically the website that I go to whenever I want to get inspiration for what good design looks like. Here you can actually explore by category. So if you want to build e-commerce websites, you can click on e-commerce or or if you want to see something in the fashion category or the mobile apps category, you can filter the results here. And if there's something you like, copy the URL and give it to Claude for reference like how I showed you in the beginning of the video. Now, if you want to add animated illustrations like this, I like to go to Li files here where there's a lot of free pre-made illustrations or animations here. For example, if I click on this one, this looks like a notion style animation that you can use for your website. And the nice thing about Lifiles here is that you're able to actually change the color here. So, you're not stuck with this orange. So, maybe you want to change this to a different color, you can do that here by using the color palette. And if you want to download this and you can click on save animation and you can download the code and hand it over to cloud code to apply it to your website. Now, if you want to add sections, similar section that is scrolling like this, you can go to 21st dev here. They do have some free options and some paid options. So, you can just copy the code here if you like this one and then paste it over the cloud code and it's going to be able to use this style and merge it to your website. And they've got a lot of other things like a pricing section here, which looks really cool, or some button styles like this, which looks really nice, or this cool looking login page. There's a lot of options here and I'm actually surprised that a lot of these are actually free to use. All right, so I hope you guys learned something from this video. If you guys made it this far, thanks again for watching till the end. If you want to watch another video, you want to click here.