# How to Make Sites 10X More Beautiful with Claude (Claude + Higgsfield)

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

---

[0:00] Hey, check this out. This is a real website for a local business that's live on the internet right now. And this is what it looks like after I pasted the link into Claude and said, "Redesign this." Same business, same information, same services, completely different website, all done with Claude in just about half an hour. No designer, no

[0:17] developer, no coding needed whatsoever. Now, look, every small business has a website that looks something like this. Built 10 years ago, completely outdated, and it's quietly costing them customers every single day. Now, the old way was to pay like five grand to some developer to come in and actually fix these problems. But now with AI, anybody can fix and build their own website from the ground up in just a few minutes. But here's the problem. If you went and pasted this website into cloud code and just said to redesign it, you would not get a website that looks like the one that I'm showing you here. You get

[0:45] something boring with generic fonts, generic media, with some generic AI slop. And that's not a cloud problem. It's a workflow problem. And there are three major keys that you need to actually get something that's usable in high premium quality like this website. So that's what I'm going to show you how to do in this video right here. So if

[1:02] you're ready, let's hop in. The first thing you need is to have a clear goal for your website. So if we're going to be redesigning something or making something more premium, we need to know what is our goal for this final version of the website going to be. Are we just trying to make things look beautiful and show off a really stunning looking website? Are we trying to increase more sales or more conversions or more people getting in contact with you? What is that overall goal we're trying to accomplish? The second thing we need is to use the proper skills for

[1:31] Claude to build this website properly. As I said before, if you just enter in a generic prompt like build me a website for my business, you're often going to get pretty generic results. What makes a boring and generic website different than a premium beautiful website made with Claude is the skills that you use or the instructions that you give to Claude to actually build your website with. So, in this video, I'm going to be including two specific skills that are going to absolutely increase the quality of your websites that are going to be built using this whole process. And the third thing that we need to really stand

[2:03] out from the crowd is to have some premium media. So things like highquality images and videos that can display our best quality work right on our website. Within a moment's notice of going to the site, you can just feel the premium and the quality of our business based on the media that we're using. So I'm going to show you how to get all three of these things implemented into our website as we begin building. And to begin building, all we need are two specific things. The first is Claude Code. And the version of Cloud Code we're going to be using is Claude desktop app. So if you go over to

[2:36] cloud.com/d download here, you'll be able to download the desktop version of Claude, which is by far the easiest way to access Cloud Code. And then you're just going to want to make sure that you're signed up for at least their pro plan because you can see with their pro plan for about $17 a month, you have access to Cloud Code, which is what we're going to be using to redesign and build out our website today. Now, once you have Cloud Code desktop app installed and you're signed up for their pro plan, we can then add the most important asset for building out our media, which is

[3:07] going to be Higsfield. And Higfield is by far my favorite option when it comes to building out both images and videos all in one place because it has access to all of the top quality image generation tools and video generation models. But the coolest part about Higsfield is that it can connect directly to Claude so that we can have Claude control all of this. So if you're wanting to follow along with this tutorial and use this exact same workflow, you're just going to want to make sure you're signed up for Higsfield and you have an account. And then you just can go right up here to this top

[3:37] bar where it says MCP. And here under the Cloud tab, you'll see we can actually connect Higsfield using this simple URL connector. So, all we have to do is just copy this URL right here and then open up Claude desktop app that you've installed and downloaded and go on over here to the code tab. On the code tab, we can click customize

[3:58] and we can go over here to connectors. Now, here up in the top right corner where it says add, we can add the Higsfield connector right here. Just add the name and you can paste the URL right here. And that's all you need to do. Just click continue and that'll connect Higsfield here to your Cloud account. All you need to do if it's your first time connecting Higsfield is make sure that you log in to your Higsfield account. It'll ask you to do that one time. And once you're logged in, you'll now be connected and Claude will have full access to your Higsfield account to generate images and videos and

[4:30] everything for you all within Claude Code, which is really, really awesome. Now, anytime you add a new connector to Claude, it's always a good habit to go ahead and close Claude and reopen it up so that it can reconfigure and refind that new connector that we just added. So, I'm going to go ahead and close Claude. And we'll just open it right back up. All right. And now that we have Claude all connected to Higsfield and we have everything we need to start building, we can go ahead and install the two skills that we need to make our websites look premium and beautiful. So, if you go down to the description of

[4:58] this video, you'll see a link to download all of the prompts. So, you can easily just copy and paste them in and follow along with me here. So, for this first prompt, the first section of it is going to be two commands right here. This is basically telling us to install these two skills. The first skill we're installing is called UI UX Proax. And this basically just gives Claude access to a whole number of different design skills and common things that aren't always going to be known by default by Claude, but now it will have all the design skills it needs to actually make a premium quality looking website. So

[5:29] after those two commands, just paste in the other part of the prompt here, which is just going to say to download the second skill, which is something that's actually built directly by Claude itself, and it's just the front-end design skill. This is how it's going to differentiate ourselves and give us those extra set of skills that it needs to build things properly. And I'm going to click enter and let this go ahead and install these two skills for us. And if you see this here pop up, just go ahead

[5:52] and say run this in the terminal. Okay, sweet. And just like that, Cloud has come back and said both of these are installed and they are ready to go. All we need to do is just basically close cloud again and reopen it up so that it has access to them for our next session. So, I'm going to close Claude. We'll open it back up. And now we can actually move in to building out our website. So,

[6:16] we're all connected and ready to rock. So, what we're going to do is go on up here and create a new session again. So, a brand new session. And this time, we're going to go ahead and create a folder for our new project, for our new website that we're building here. So, let's click this folder icon. And let's

[6:29] click open folder. And in here, inside my cloud code folder again, I'm going to open my websites folder. And I'm going to create a new folder in here. I'm going to call this baked and sconed redesign because this is a business here in town for me that's local and it's called baked and sconed and I'm doing this redesign for that website. So I'm going to go ahead and just create a folder that we can store all of our files in and click open. So now you can see that folder name showing up right here. So this session is where

[6:57] we're going to be building everything. And now that it has access to our Higsfield account and all those skills, it's actually going to be able to build something really awesome. So again, down in the description of the video, you will find all these prompts that you can paste in. So we're going to paste in this first prompt here. And this first prompt is just going to say that we're looking to redesign this website. So this is if you already have a site live and online, we're going to be able to just pull all the information from it to do a nice clean redesign. If you don't

[7:21] have something live and online, we basically can just say we're looking to build from scratch at this point, right? But for me, but for me, I'm rebuilding this website. So I'm going to give it the URL here, and I'm basically going to say to go ahead and pull in all of the information here. pull in the images, pull in the data, pull in the services, the about section, the contact section, basically everything it needs to know about the business. I want it to pull all that information and use what's relevant, right? But I also want it to

[7:45] go through and give me an honest audit. So, what looks dated, what's confusing, what's not working, what is basically the part of it that's boring or that could be potentially upgraded, and let's get that all kind of in the mix so we can see exactly what we're going to do for the goal of our website. Right? So, I'm going to let this go and do its audit, and then I'll come back as soon as it's done, and I'll show you what it came up with. Okay, sweet. So, look,

[8:08] it's come back with a full audit here. It's gone through and it's pulled all the images that it needs. It's found everything that it can about what is potentially dated and confusing, right? So, um it's saying that the template is basically out of date. It's using a stock GoDaddy website builder, right? And then then it's got a logo with a word mark. So, it's saying it's got some issues with the logo, the hero section, the typography, the navigation, the menu, basically everything that's built on this website. It's saying that it doesn't really love. It's opened it up over here for us to actually kind of see. And you can see that it's just very

[8:42] basic, right? There's just some very limited use of images. The main hero image is kind of fuzzy. Um, it's not very good quality. Um, there's dead references. There's a wholesale page. Couple typos it's saying. So really, it's just gone through and found everything that it's thinking could be potentially better, and it's giving us even kind of a game plan of what it thinks that it should do. So now that it has a good idea of what's outdated and what it needs to do to kind of improve, we can give it some information saying, "Hey, this is awesome. I really want to make sure that we can kind of move

[9:12] things in this direction, this is when you want to just maybe let it know whatever it is that you're looking to accomplish." At this point, now that you have this audit, you can make sure that it's on brand with what you're thinking and uh, you know, guide it to the direction that you want before we move into this next step. Right? This next step is going to be actually building out a new and modernized brand kit. So, you can go ahead and paste in prompt number two here. And what this is going to do is build us out this brand kit, keeping the original colors, keeping the

[9:37] original kind of overall aesthetic, but giving us something just new and modernized, something that looks much cleaner. And then basically it's gonna say give us a short summary and wait for my approval before doing anything else. So let's go ahead and enter that and let it go. All right, sweet. And it is all done building out our brand kit. So we can actually read through the brand kit here. We have our tagline. We have some address information. So basically it's gone through and it's determined exactly what the colors are from the logo itself and what the original site's colors were using. and it's gone through and also

[10:07] decided, you know, an overall aesthetic that it needs to match, but it's going now to use this as a reference point to then improve anything that it was lacking in. Right? So, this will keep us on brand, but help us fix anything that can be improved. So, now we can enter in our next prompt, which is going to say, hey, let's go through and use that brand kit now, and let's generate some new media. Right? We have media from our original website that maybe is some of it quality, some of it may be usable, but let's use Higsfield now to generate something new using those original

[10:39] images as references so that we can make sure that the generated images are actually accurate to the real products and the real baked goods that are offered here in the store. Now, I went ahead and said I want to generate a hero video and a hero image section for basically each major section of the website. But if you don't want a video,

[10:59] it's actually going to ask you for that. So, let's click enter here. All right, cool. And it's going through and now asking me before it generates anything, what do we want it to actually generate, do we want it to go through and just make the core set of images, or do we want it to also include the wholesale section of this website? And again, it's just showing how many credits that's going to cost, which is awesome because it's just being weary of using our credits without our permission essentially. So, go ahead and select whatever options that you want. I'm going to say go ahead and generate all

[11:24] the images and let's add the 5-second video as well and let it go ahead and cook up something really cool for us. Now, Higsfield usually takes a few seconds to generate all of its media and things like that. So, while it's actually in this step, I'm going to go through and move into the next step, which is actually getting our own hosting plan and our own custom domain name. So, although this website is currently online and live, I want to show you how you would actually go through and connect this thing to a real live hosting plan and get your own custom domain name if you don't have a

[11:53] website live currently. The hosting provider I recommend is called Hostinger. And the best part about Hostinger is they make everything incredibly easy, especially when using cloud code to build out your website. So, if you click the first link down in the description of this video, it'll bring you over to a page that looks like this. And this is our co-branded web page here with Hostinger that it's going to give you the absolute biggest savings when it comes to hosting your website online. So here we can just click on get a plan. And here you can see we have the unlimited plan which is about $359 per

[12:21] month. And there's even a bigger discount when using that link down in the description which will automatically include our discount code creator pro website here. This gives you unlimited amount of websites that you can build with this hosting plan. A free domain name for one year. So you can have a new custom domain name or you can even transfer over old domains that you currently own into this new hosting plan. This will allow us to build anything we need with either WordPress or using AI and Claude like we're doing today. And so this is the best plan for us. All we need to do is just click on

[12:52] choose plan here. And here we can choose how long we want our hosting plan for. Now by default it's going to select the longest period of 48 months which gives us the biggest discount on our pricing. But I'm going to go ahead and just select 12 months here, which is the same amount of time we get our free one-year domain name for. So that's a perfect amount of time to get started with this website. And if we want to adjust things or renew, we can always extend our time later. Now, you can see our coupon code create a pro website here is automatically applied for an additional

[13:21] 10% off. And we can see our total for this website being hosted online with a custom domain is only $53.89. So that's pretty awesome. Once you're all set here, we can just click on continue. And here, it's just going to ask you to basically create an account with Hostinger or log in if you already have an account. And here on this page, all you need to do is just fill out your billing information and select a payment

[13:42] method and click on submit payment. Congrats, your new journey begins. Now, it's that simple. Now, after you completed your purchase, you should be brought here, which is our setup process for actually getting our domain name and everything connected to our new hosting plan. Now, since we're building this using cloud code, we're going to go ahead and just select I'm migrating an

[14:00] existing site. And here with these two options, we're going to select upload backup files. And don't worry, we're not going to be doing any uploading ourselves. This is something that Claude is going to handle all for us. So, we're just going to go ahead and click on next. And now we can actually claim our free domain name. So, here is where we can get that free domain that we got with our hosting plan. And we can see which domain name is available for us to claim. Now, since this website already exists and it has a real name, I'm going to just go ahead and give this a fake domain name. So,

[14:29] for this example, I chose faked and sconed instead of baked and sconed. Get it? Because this is a fake website. I'm just building for example sake here. And I don't want it to actually get confused with their actual real website. So, I'm going to go ahead and just choose this one here. And this is a free domain.

[14:44] Nobody's used this website before. Obviously, I wouldn't imagine anybody really using that name uh in anything other than this example. And once you're happy with your option, just go ahead and click on next. And just go ahead and confirm your information here. So we can register your domain name. And it might ask you to verify your phone number here with your account. So go ahead and just

[15:03] enter in the code there. And just like that, it says our domain name has been added to our website. Sweet. So let's click continue. All right. Now, once you get to this screen, this is asking you to actually upload the files from our website. Now, we actually haven't finished building our website, and we're also not going to be doing any of this ourselves. So, we can actually close out of this entire screen here just by clicking on the Hostinger

[15:24] logo up here. We can just click leave. And now you'll be back here back on your Hostinger dashboard. This is your main H panel of Hostinger where you can access everything for your websites, your domain names, your professional emails, and anything else you need to manage inside of your Hostinger account. But we're actually done here. We don't actually need to do anything else in here because Claude is going to take control from here on out. But there is one more step that we need to make sure that Claude can take control and that's connecting Hostinger to Claude just like we connected Higsfield to Claude earlier. So let's go on over back inside

[15:56] Claude here. We can see that it's just about done generating all of our images and our videos here. But before we get into what it's made, let's go back over to this customize tab and under connectors, we can search for Hostinger. And here you'll see the hostinger connector and we can click connect with cloud. Now this will open up our web browser again and it'll ask us to go ahead and

[16:19] continue connecting. And since you're already logged in to your hostinger account, it should bring this up right here where we can allow access to Claude to our hostinger account. And just like that, it brings us right back over to Claude desktop and it says we are connected to Hostinger. So awesome. We not only have our hosting plan, we have a custom domain name now to launch our website, but we're also connected to Claude so that it can do all of this for us. Meaning in the future, anytime we need to publish stuff to our website or make any changes and have it be updated automatically, Hostinger is going to be able to do this

[16:51] all inside of Claude here. So, if I go back to my recent tab here, we can open back up our session where we were building our website. All right, sweet. Look it, it's come back here and it has generated us a bunch of content. So, it went through and used all the original content here to kind of reference and make its own set of new images that are nice, highquality, well-lit, look like they were taken by a professional photographer here. And it's even generated us a little video, which is just a nice little cinematic shot of a slow camera panning in. Didn't really give it too much information as far as

[17:21] what kind of content I wanted to create. Just wanted to generate some examples here. You can give this obviously as much information as you want, but you can see it was able to access everything it needed all from inside Claude without me going to Higsfield. So now once we have all this media and everything that we need from our brand kit, we've not only got the goal for our website established, we've now got our premium media for our website built. Now the last thing we need is to use those skills that we installed to build the website itself. So that's what this last prompt is going to do here. This prompt

[17:50] is going to say, let's go ahead and redesign the entire website here. And it's saying to make sure to use all of the content that we just generated. Make sure to use our brand kit that we used and our main game plan that we established so that it can basically build us out the perfect website from all of these things working together. So it also says right here to ask any

[18:08] questions it needs to complete this job. But let's go ahead and click enter. And now Claude really begins its real work of building out your website. Let's get one final look at their old website just so that we can remember what it used to look like. Here we have all of this media here which is from their Instagram and probably real media that's generated from people. But you can just see the lowquality images and things that just

[18:29] aren't looking as nice as they could. Um, with this [clears throat] main hero image being right here and on each section of the website, they have a menu. They have some things where you can kind of scroll through, but just very generic. You know, I think that this is going to look so much sweeter once this is done generating. All right, it's come back with its first build and it says it is live here on this localhost link. So, we can copy this and actually open it right up in our browser so we can compare it side by side with this original site here. So, I'm going

[18:59] to enter in this local host and boom, right away here we are, our new site with the branding applied. We got our nice little video in the background here. Way cleaner looking right off the bat. I mean, just compared this menu here and this hero section to uh our new menu here and our new hero section with open times and everything that's relevant needed to know right here up in the top of the website right above the fold right now. When I'm hovering over this, I'm noticing a few things that I might want to tweak. Like the text is kind of disappearing. But look, as we

[19:32] scroll down here, we have much cleaner images now. We have much cleaner just media across the board. We got more functionality because there's actually real sections now to the website talking about all the things that they have to offer from custom cakes to their baked goods, catering, we have a much cleaner footer section than this here, which is just not even existent. If we go over to the menu here on their original website, we have just a bunch of images on this slideshow up

[20:03] here, which is kind of hard to navigate. And then it's just a very generic text menu. Right? If we go over here and we look at our menu that we developed, we can see that this is much much cleaner. We have drinks with some images up here. We have these little tabs that jump you through different sections with again more clean imagery. Much easier to read, much easier to navigate this. This looks much more robust and like a really premium bakery now, right? Planning

[20:30] bigger things. We can do custom orders. We can do catering. So, there's much more call to actions throughout here. We can also contact have all of their information right here. A real live map showing where they're located. Overall, this is just night and day. 100% better, right? There's still some things we can go through and clean up. And I can go through and ask it to make any revisions that we want at this point. So, at this point, we can go through and have it make any changes that we want. We can go through and say, "Hey, this section when

[20:58] I'm hovering, it doesn't look too good. I'm going to actually take a little screenshot and just show that. I'm also going to say down here. Let's see. This looks like it's not really stacking correctly. And this is again just something I can just tell it really quickly. Hey, the website looks great. I'm loving everything about it except for these

[21:22] title cards here up in the hero section. As I'm hovering over them, the text disappears. It becomes too dark to be able to read on hover. And I'm also noticing down at the footer, those social media icons aren't stacking very nicely. If we can just update that, please. So, we can make those changes. And also, we can check this out inside of mobile view and see what this would look like on a cell phone. And we can see that it's even optimized this for mobile, right? So, this looks really clean and laid out nicely on a mobile device as well, which is perfect because most of

[21:55] the traffic is probably going to come from mobile. So, let's let it go ahead and fix those little changes that I just made here. And we'll see what it does when it's finished up here. All right. Looks like it just kind of refreshed. And as I'm hovering now, this text is much more legible. It's not turning into that dark blue like it was. So, that's already fixed. It's also checking it on mobile for me here. Um, as we scroll down, let's see if the footer section. Yep, footer [clears throat] section now is stacking much cleaner. Right. So, as soon as we're happy with this and we

[22:22] like the way that it looks, we can actually go ahead and deploy it and publish this thing live. Because we've already connected Hostinger to Claude, all we have to do is just ask it to go ahead and publish this thing live to our custom domain name. Now, since I added that connector and I haven't closed and reopened Claude, I'm going to go ahead and do that since we're finished building and everything is done loading over here. Close this out. Going to

[22:42] reopen up Cloud. Reopening our session here. All we have to do now is just paste in prompt number five, which is going to basically just say, "Hey, let's go ahead and deploy our website to our domain name." And in this case, it was faked and sconed, the coolest domain name you've ever heard of. And we'll go ahead and just click enter. It's going to go through and find the hosting or connector, find that domain name, and it's going to publish this thing live and online for

[23:06] us. All right, in just a couple minutes, it's come back and it says our site is live. Here's our domain name. And if we click that, it'll open up inside of our browser right here inside of Claude with our real domain name. But we can also copy that over to here. And instead of this local host link, now we can paste in our real domain name. And boom, here's our website live with our changes that we just asked it to make. All right, here everything working, clickable links, and just much cleaner

[23:35] upgrade from our original site here. from this to this.

[23:48] Much better, much more modern. So, I hope this build your website and completely redesign it to be something beautiful and premium that you can be proud of. Remember, if you need to get your hosting or your own custom domain name, click that first link down in the description to get the absolute cheapest discounted price point. And if you're looking to get the prompts that I was using in this exact video, those are also down in the description. So you can follow along, paste this in, and

[24:13] redesign the website of your dreams. I'll see you in the next

---

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