A Scrolling WordPress Site with Claude and Kling 4.0

that holy cow, I cannot believe it looks that realistic. That is freaking nuts. Look at that. How cool is that drop in there? Look at that. That is so freaking cool. Every stone where the plans put it. That's cool, man. That is crazy. I can't believe that one prompt did this. Wow, look at that. Got the steam right, too. Look how realistic that looks. Hey, this is Sean. Welcome to AI Builds. So, Kling 4.0 just released and I wanted to test it on a scrolling hero website. So, basically, the hero section of a website is usually just your main image or your main opt-in. And what I'm doing is I'm creating a video with Kling 4.0 inside Higgsfield and we're going to turn that into a scrolling hero to where the mouse scrolls. As you're scrolling, the video plays. So, it either plays forward when you're scrolling down or plays backward when you're scrolling up. It's a really awesome effect and we're going to try it with the new Kling 4.0 release. And I'm pretty excited to see what's going to happen here. So, if you take a look at this prompt pack that I have below, all it's going to have three different builds that you can do inside Claude. You literally just copy the entire prompt for whichever one you want to do. You can customize it by changing the name of the business. Again, you can make this a real project just by just making a few different adjustments inside the prompt. And it'll it'll be real for any business that you need. Here it is. The prompts are pretty long, but I I think I have three in here for you. Yeah, that was the third one. And again, all the notes, everything you need is in this prompt pack. The link's in the description. Next, you're going to need the Claude Code the Claude desktop app. We're going to be working inside Claude Code. For that, you're going to need a paid Claude account, Pro or higher. Pro's like $20 a month. And then, what we're going to do is I'm going to work out of Opus 5.5, which I use 90% of the time. I'll use Fable on like super complicated builds, but I use Opus 5.5 for almost everything now cuz it's it's so powerful. And then, we're going to work out of high. You can work out of extra or max or even ultra code. I think working out of higher extra is fine for this build. So next we're going to connect to Higgsfield. Now for this project we're going to be using the Higgsfield MCP which is basically means we can do everything that you can do inside the Higgsfield interface in the Claude Code desk in the Claude desktop app which is awesome. The interface is great when you have small projects but when you need multiple images and multiple videos so much easier for Claude to figure out what images need to get reference and you you make a lot less mistakes when you work inside of Claude. And it's nice I can work on other projects. I don't have to sit inside Higgsfield. I can just be working in Claude working through Claude here and just not worrying about bouncing back and forth between Claude and Higgsfield and making sure that I'm copying and pasting correctly. It's so much easier for everything just to be done inside of Claude. So in order to connect Higgsfield MCP to Claude we're going to have to go over to Higgsfield. Click on MCP and then click on Claude. And here you click you can grab this link right here mcp.Higgsfield.ai/mcp. Head back over to Claude. And then all you have to do is hit this plus icon and connectors and manage connectors and then click add custom connector. Now you can name this whatever you want. I'm just going to name it Higgsfield. And then I'm going to paste the URL right there. And then hit continue and it tells me no cuz I already have it connected obviously. Once it's connected then all you have to do is log in to Higgsfield which Claude will direct you through all that. But it's super easy and again if you guys don't have a Higgsfield account I have a link in the description. Now that we have the Higgsfield MCP set up inside of Claude that we're going to do is go back to this prompt pack. We're going to grab the barber shop prompt. It's pretty long prompt. And then paste that inside Claude. And you can see here that build a complete WordPress website for a barber shop and research to a live site in this one chat. So instead of doing all work yourself, stop only for the three questions, four if I leave a name blank. Right? So, the business business name I'm going to leave it blank. I'm going to call it uh Let's call it Sean's Barbery. Sean's Barber Shop, we'll do that. Town and state Obviously, we got to go with Boise, Idaho. I think it Yeah, it defaults to Boise, Idaho. And then classic barber shop, anything I leave out, phone phone's fine. And then anti-slop is what makes it not look like uh AI crap. So, uh that's it. We're going to use the money rule so it never spends uh tokens on never spends credits on Higgsfield unless uh I approve it. And again, if you don't have the skills but the link's in the description, uh it just checks if they're installed. If they're not installed, just you can just drag them in this uh chat here. You see all all six skills are installed. It's starting to do the research now. So, I'm actually it just came back and asked for the first question. Um You know, it did all the research. And uh what it found, the name is clear in Boise, right? So, we're not copying anyone. It has all the Boise shops. Like, you grab These are These are all real barber shops in the area. Even says a fade costs 35 to 40 bucks. I like it. A razor shave 35 to 45. So, uh basically, all the research is done in the area for uh for the barber shop. Uh what is the one action every page leads to, right? So, basically, this is this is what your call to action is. The whole point of building a website is to have a call to action to convert a customer or else it's just pointless. Book your chair, I like I like book a cut actually. I think I think book a cut sounds better than book a chair. Yeah, I think book a cut sounds better to me. So, I'm going to go with book a cut. And that it's going to change all the call to actions on the site to that so that uh it all has that. So, all the buttons will have that book a cut instead of book a chair uh call to action. Okay, here's the second question here. We have book a cut on every page. It just found the host login and it wants to deploy for WordPress. So, basically, for WordPress, you have to have it hosted somewhere. A lot of guys use WP Local which I highly recommend. I have a demo site where I'm going to host it too because I think that uh I like I like hosting all my builds in the demo section of my website. So, yeah, I want to use that host. Again, you guys can stay local or use something like WP Local to do this website. Again, this is an entire WordPress build. So, we're going to have a backend login, everything. So, it has to be hosted somewhere. Okay, now it's asking uh I put this rule in uh the prompt cuz I just don't want Claude just to spend my money on Higgsfield without actually asking me. So, basically uh 30 credits for 13 pictures and you can see that we're using GPT image 2.5 for the logo. I think I chose those models. They are the best. You can use whatever models you want. I think GPT image 2.5 is the best for logos, so that's what I'm using. Using SeaDream uh 2.5 for for the scenery. I think that is one of the best models for scenery. I've tested it a lot over the last couple weeks and I I really like that model. And it tells you the output too, right? So, I'm using GPT image uh 2.5. It's the best model for that. A total of 30 credits for all the images. I got plenty in there. So, uh yeah, let's go. 30 credits. So, as you can see, I have, you know, between the skills I have and and just the rules I put in the prompt, you can see that Claude is doing these checks on all these images. So, like it's checking that it spelled Sean's Barber Shop right, which anytime you do image or video generation with AI like text is the first thing that it that it messes up. So, we're checking all the consistency with you can see I have a consistency MD file. It's checking all the consistencies uh between all the images before we do any video generation just to make sure that everything is done is spelled correctly, looks correct, and um it's just making all those checks for us. And as you can see, so like the left half is clean of outside views and has no mirror counter, combs, brush, mug, towel warmer, and strop strobe. I don't know. I'll crop that half to 16 by 9 instead of generating a new image. So, here it is. Claude saving us money. You got to love it. Even though it's only one credit. Uh what's nice is another reason why I like using the Higgsfield MCP inside of Claude is I don't have to worry about the naming of the images or like what I'm using as references cuz Claude has it all dialed in for me. Whenever you use Hicksfield or use any of those image or video generation models is you have to constantly make sure that you're naming things correctly and you're triple checking. Claude does all that for you. Like that's why I just I try to I try to do as many projects unless they're super small inside of Claude with the Hicksfield MCP I don't have to like worry about the naming structure and that I'm referencing the right images. Like Claude is doing that all for us. Like it's referencing image three. Okay, now it's asking us which logos it it likes. Let's see what Claude's pick here is. Claude's picks logo one. I'm kind of torn here. I don't know. I do like the SB. I do like I mean that that has like a luxurious feel, but here I do like the shield better. This is pretty classic, too. I just don't like the font. That's like Anton or some super I don't like the font here. I'm torn. I'm torn. All right, let's go with one. I do like one. Now with that logo, now that it's approved, it's going to go and create entire brand deck. So I would definitely make some changes. Like if this was my real brand, I would make some tweaks. I would change the font, but it's going to create an entire brand deck based on that font and you'll see I upgrade the brand deck for my last build. It's way more in depth. I mean it's pretty incredible. You'll see what what comes out of it. And you can see it built this entire brand deck. How many pages this is? Four times So there's like almost 50 pages. You know, so there's 47 plus pages in this brand deck. And you know, it does mock-ups, things like that. So you can see my brand. This probably wasn't the best logo to to showcase, but you can see he's got a primary logo, brand pattern, mock-ups, more mock-ups, billboard signs. It's just pretty awesome what it can what it can do. It's going to take 80 credits. So look at this. Look how cheap this is compared. If you Any of you have done C Ads 2.5 or 2. like it gets super expensive. Clean 4.0 is so inexpensive. Now again, this is this is probably not going to be their total price. It just launched so it's probably at a discount, but overall it's still it's still a third or a quarter of the price of what Seed Ads 2.5 is. So if it's so if the output is anything close to what Seed Ads outputs, it's it's going to be well worth it. So a 1080p 16 by 9 10 seconds, 15 seconds, 15 seconds, 15 seconds, 10 seconds, 15 seconds. A total of 80 credits. That's I mean that's insane. That's so cheap. That is so sticking cheap. Yes Bendy, let's go. Well, the videos the clips are starting to come back and Claude's just going through them using my skills to check for consistency and things like that and then you can see like right here like D and C passed the check cleanly and A is a clean up of 5.5 seconds. So it was like a 7 second clip but it but only 5.5 seconds was usable. So we cleaned those 5.5 seconds. And it said I'll keep A's clean segment and slow it down to stretch it across the full 10 seconds at no extra cost. So like Claude is trying to again just make it work and save us by just avoiding a regeneration if possible. Now we're so sticking close. This is the part where this is where the real build happens. This is where it's actually being put on the server and I know this last 8 minutes or so is tough, but this is this is it. This is the main build. It's putting it on the server right now. So hopefully uh hopefully done shortly here. It's checking every gate making sure everything's perfect before it goes live and we'll see it in a second. Okay guys, here it is. We are done. I know it took a little bit longer than most builds. Everybody else has a one prompt and it's a shitty site that does nothing. Like this is an actual WordPress build. It's hosted with WordPress. It has an admin login. It's still going to be fast as hell. It's a real site. Like this is real. If I had real customers or real clients information, I could this is a sellable asset that I could give them. So let's take a look. Let's see what it looks like. It's ready for desktop. It's ready for mobile. We have form that actually works. It this took us It cost about 111 credits. And that's for the videos and all the images. Uh we use Fire Crawl to do the research on competitors in the area. It took about 800 830,000 tokens. The site is live, but the scroll is broken. And here's why, right? So, show it locally because it can't break that way. Every real build has some break somewhere. And any YouTuber that tells you that this doesn't happen is full of and they're they're showing you a local build like through a local browser on a local host and it doesn't mean because at the end of the day when you whenever you push it to a real host on real servers, there's going to be issues. So, here's a prompt I'm using. You're going to copy this prompt. Again, this will all be in the prompt pack so that you can see if you have an issue, this this will fix it right away. Basically, this site is going to be your site. Say, "Hey, it's broken. It looks wrong and the scroll film does not play when I scroll. Fix it before you tell me anything else." What I do is I have Claude fix it and don't come back to me until you've tested it and it's fixed. That's my biggest pet peeve with Claude and any LLM is that it says something's fixed, but they haven't actually checked it. So, like, "Hey, I want you to check it and make sure it's fixed before you come back to me and say that it's fixed." What I did is I added to the skill where before the site goes live, it tells the it tells the host speed plugin, which is, you know, LiteSpeed, WP Rocket, SiteGround Optimizer, or AutoOptimize to clear their cache, right? So, that's the problem that happens and that's why the scroll gets weird sometimes. Again, we're building a WordPress site. We have different issues than people with the one prompt listening it locally. So, this uh this is an easy fix. It's built in. By the time you guys When you guys use this skill, this is going to be built in. You shouldn't have the same issue. Okay, it's back. I'm excited to check it out. Let's see what we got here. Okay, we're back in works. Let's look at the front end. That's smooth. It looks good. Look at that. Look at that. Holy cow, clean. That looks good. The shop by the numbers, 24,000 cuts given, 8 years in Boise, three barbers, three chairs. Average review 4.9, looks good. Holy cow, I like that. Look at that, the craft. The hot towel, 10 minutes on every shave. The straight razor the straight razor. That looks That looks so cool, man. Pick your services, the cut, you got a skin fade for 40, beard trim for 25. Again, we have this because we deployed the agents who did that research and created a research brief before before we did the project. Look at that. It tells you it would So, look at this. Look how cool this is. So, this is your cut, the hot towel, the work, and then the mirror. That's cool. Hot towel, kids cut. Look at that. That is awesome. Pick your barber, Jamie, Theo, anyone. Look at that. >> [laughter] >> This is pretty cool, too. I just want to tell them to put the logo right here, and that'd be cool. Wow, man, that looks great. We got services page. See what the services has. Look at that. Services page, you got the cut, skin fade, beard trim, hot towel shave, kids cut, the cut and shave. Look at that. Here's the barbers. We got Jamie, Theo, your name. Here's the about page, I like it. How your hour goes, it just tells you. That looks good. Contact page. Or maybe it's in the map. Other than that, it looks really sticking good. I'd probably put a big map right here if this was a real site. And then book your cut. Man, I love it. Again, we're in WordPress. Let's go to dashboard here. So, we got home, we got services. We got the shop, the barbers. Let's change the name to Sean. Sean the barber. Let's see if it updated on the site. Visit site in a new tab here, the barbers. Sean the barber. Let's go. [laughter] That's awesome. Bookings. It's all there. That's super clean. I love it. Services, the cut. Let's say I just want to capitalize that. Price in dollars, minutes in the chair. I love it. That's awesome. You can edit anything on the back end. Uh the front scroll looks freaking awesome. I think that's huge. I I just think it looks so good. Clink 4.0 did an amazing job. Like I'm just super shocked at the quality. Um and how cheap it was. I mean, this is like a not even This is probably a quarter of the cost or even less than uh Seed and Seed 2.5. So, this is incredible. We got a WordPress site with one prompt. We have one minor issue, which again is in my skills, so I rebuilt it and it should be gone forever. But, anytime you host on a real like hosting service and you cut all that code down, like you're going to have one or two minor issues. We just told Claude the issue and it fixed it right away. It looks so freaking good. I'm so pumped on this build. It just It looks great. I think it's awesome. Uh I'd probably put the logo on the door here. Other than that, I mean, it's fantastic. We got a back end. What I wanted to see is I wanted or I wanted to show you guys is I wanted to show you what the uh Sorry, this looks so good. I want to show you what the brand deck looked like with that logo that we gave it. So, let's take a look at that. Okay, so here's the brand deck that it built and he um you can see that it's all the Devo / brand for this build. And uh holy crap, look at that. 40 pages. So, a customer logo, color, typography, out in the world layout and you just take a look. It looks pretty good. We are plain, warm, steady, slick. We are not slick, loud, pushy. So, I I love that, by the way. That helps with social media. That helps with everything. A Boise man, 25 to 55, getting a cut every few weeks. That That's our ideal That's our avatar. That's our ideal customer. Book a cut, pick a barber. Here's the logo. So, we got Here's original logo and then here it is uh a one-color dark. Here's the logo mark, which looks really freaking good. Like if I was going to build with icon, this is what it would look like. Here's the mark by itself. Here's different logo versions. I could see it up against red. Let's say I wanted to change my branding a little bit. You can look at it in oxblood. God, it looks great. Clear space in the smallest size. Here's the backgrounds, right? So, you you don't want to do busy patterns. You don't want to do full color full color on leather. So, wow, it looks it just it This is the brand deck that you would pay a designer thousands for, right? And it's just done and I think it takes eight or nine minutes to get this done. For any brand to have this kind of information, again, we got this just from the brand deck skill in my in my free Skool just by using the logo that we had chat GPT make. Or in this case, we're using a logo just that we had Higgsfield make for us. And again, we have the back-end guys. You can hand this off to a client. They can make whatever edits they want. This is a sellable asset right away. So, any of you guys are agencies or looking to start an agency like you just saw, you can build a a website and actually hand it off to a customer. This is hosted for like I think I paid 10 or 12 bucks a month for like I don't know how many sites on Hostinger. I don't know what I I spent less than $20 a month for all my emails and all my hosting. I got a ton of different websites on there, so. Right now, again, this is not visible cuz it's I have Google not indexing it. But you can easily fix it right now and make this site public. You can add blog posts if you want to do it. This is awesome. You start changing the cuts. I got 25,000 cuts, 9 years in Boise, whatever it is, right? You can easily update and edit anything on this site. It's it's freaking awesome. One more time, I got to see it. Just hit update, refresh, 25,000, 9 years now cuz I just made those edits. It looks great. I think it looks awesome. Guys, I really appreciate it. Come check out my free Skool community. The link's in the description. And again, if you don't have a Higgsfield account, check it out. It's a lot of fun. Clean 4.0 is fantastic. I highly recommend trying it. Appreciate you guys watching. I'll see you in the next one.