YouTube каталог
Claude Code + Seedance 2.0 = $10K Websites (Kling + Sora Are Dead)
💼 Business
en

Claude Code + Seedance 2.0 = $10K Websites (Kling + Sora Are Dead)

Jono Catliff5 днів тому9 квіт. 2026
Опис відео

So, I am losing my freaking mind over here because I've built out some of the most beautiful websites I've ever seen in my entire life in literally like 10 minutes using Cedance 2.0 and Cloud Code. And we're going to be talking about how you can do the exact same thing in this particular video. But the interesting thing is is that these websites put BMW, Notion, and SpaceX to shame. Honestly, what you can build in 10 minutes looks way freaking better than these multi-billion dollar websites. And the competitor to Cedance 2.0, 0 which is Sora. They just went out of business 2 weeks ago, but even if they didn't, they would have been absolutely freaking killed by this new video AI model. A couple other use cases here. We can build beautiful graphics for e-commerce products. We can also have beautiful cover photos for our website. In this example, we got a watch that's exploding all the pieces out and then it's pausing for a second and then all the parts are emerging back together to form the product again on an infinite loop. And we can also do the same thing with a car. Funny enough, this car was actually generated using AI, using Claude, and then I fed that into um into Cedence 2.0, and it built this beautiful graphic that's rotating 360° in an infinite loop. Now, look at this man. Now, back at me. Now, look at this man again. Now, back at me. Now, some of you might recognize this person as a legendary Old Spice man. And this person has been so influential on me that I've decided to give up my career on YouTube and go into a completely new direction where I'm going to be selling deodorant through the new business, New Spice. No, I'm just kidding here. [laughter] But here is the AI ad video that I created using Seenance 2.0. You got to check this out. >> Hello, gentlemen. Look at your woman. Now, back to me. Sadly, she isn't me. But if she switched to New Spice for Women, she could smell like she's me. Look down. Back up. Where are you? You're on a yacht with a woman your woman could smell like. Anything is possible. When your woman smells like New Spice and not a generic Tuesday. >> I'm on a dolphin. >> I'm on a dolphin. And the music, impeccable timing, it just makes me smile. I've probably watched this like 30 times. still cracks me up every single time. So, we're going to be building out absolutely beautiful websites in this video using Cedence 2 and Claude Code. Let's get into it. The first thing is is that there's four major players in the AI large language model market for generating videos. Let's compare all four of these together. Starting with the same prompt and the same input image. So, all I did was I asked it to have the car spin in an infinite loop. And if you look at Sora here, it literally looks like an animated photo. If you look at VO3.1, it looks good, but it doesn't actually accomplish the prompt request, which is spinning 360°. It kind of stops. And it also looks a bit pixelated when you zoom in here. I'm going to mute the volume there cuz it's a bit aggressive. And then we got Cling over here. Okay. And Cling reminds me of somebody that just took like 17 shots of espresso and then jumped in to take this video. like it's just shaking like crazy right now. I don't know if you can see that, but it's quite aggressive. And then we got Cedence over here, which did a perfect job. It rotated 360° and it looks flawless. In order to get started here, we're going to head over to the site Higsfield on Google and create an account. Now, their pricing starts at $15. Obviously, the higher up you go, the more usage you get. And you do get access to cedence on all of these plans. And once inside Higsfield, we'll head over to the video part and then choose Cedence 2.0. Now, there's a couple different settings here. We can add in images as reference points if we want to create certain designs, like a car, for example. And we can also add in a prompt over here. We can choose how long we want the video to be. So, it can be a maximum of 15 seconds. And we can also choose the quality as well. Cool. So, what we're going to do is we are going to mirror this website right over here. I really like the design. So, we're going to create a website selling watches with a similar graphic. Now, in order to do this, instead of just yoloing the prompt here, I'm actually going to go over to Claude and I'm going to ask it to create a mega prompt for me to feed into Higsfield. Can you please create a prompt for me to pass into Higsfield to create a nice AI video? The video is going to be a beautiful, luxurious $10,000 watch on a white background. The watch is going to explode into a bunch of different pieces, then stop for a second or two and then merge all the pieces back into the watch. Cool. So, the prompt is done and we can copy this back in and literally just send it like that. I'm going to change this to 10 seconds here and then we're going to generate the video. So that's one option about going about this. But there's another option as well where we can generate first a reference image. So if we head over to gemini.google.com, we're going to use Nano Banana to build us a beautiful image of a watch. Can you please create a beautiful watch for me on a white background? I want the watch to look like it's a luxurious $10,000 item and it needs to be vertical. So we've got the prompt. Let's go ahead copy that. come back into Higsfield here and replace this one. The reason I'm creating a brand new prompt is because I don't want to tell Higsfield what the watch should look like. I just want the motion effects of it exploding and then coming back together again. We're going to generate this again. All right, so both graphics have been officially created. Let's go ahead and watch these. And that was a pun, not intended, even though that came across as a dad joke, but uh that is also my type of humor. Okay, wow. This first one looks absolutely freaking insane. And keep in mind, this is coming from a text prompt. We didn't add in a photo here. This is just a text prompt creating that. That absolutely blows me away. Imagine hiring a graphic designer and telling them to create something like that. First of all, I don't even think they could, but if they were able to, it would cost you an arm and a leg. Like, you literally have to give them maybe your entire body. I don't know. And then the next graphic was created using that reference image. So, let's watch this. Okay, that's sick as well. It just completely exploded there. Nice. Comes back together. Looks nice and clean on an infinite loop. Okay. Really really cool. Honestly, that's that's quite hard to choose which one I like more. But I'm just going to go with this first one uh because I think I like it like a smidge smidge better. So, we're going to download this and we're going to head over to the second part of the video where we're going to build out a beautiful website using these graphics. And how we do that is using Claude Code. Now, if you are brand new to Cloud Code, the word code in Cloud Code typically scares a lot of people off. You do not need to know a single line of code whatsoever to build this out. I'm going to give you a 10-second crash course on how this actually works. You need to download one of two applications, either anti-gravity or VS Code, not both, just one. And both of them, by the way, are free. Okay? And this is a coding environment. Again, you don't need to know a single line of code, but Claude Code lives as an extension in here. So, if you head over to the extension panel here, you can search Cloud Code for VS Code. It's the same name in both apps. You download this, you activate your account, and you're good to go. You're going to be able to follow along. We need to create a project here. And every project you create in Claude Code needs to start from within a folder. Okay? So, we're going to open up a folder on our computer. And I'm just going to call this um Higs Field demo. Okay. Create that folder. It's completely empty. We're going to load it into our project and we have to create one file which is called the claw.md. All you need to know about this file here is it's an instruction manual on how claude code should behave just like when you hire an employee and you give them standard operating procedures and training on how they should do the role. It's the same kind of stuff. Now, the blueprints are going to be down below for free in this video for you to grab. All you have to do is head over to my free school community links down below. Go over to this video right here and grab this file. Okay? You can copy it in, paste it in here. And that is all we need to be able to build out this entire website. Of course, we need the video as well. So, I'm going to paste that in. So, I have this file right here. I'm going to drop it in the Claude Code project. And then we can go ahead and send our first message to Claude right over here. Now, actually, before we do that, I'm going to type in here slashplugins. We can click manage plugins. And I would definitely recommend downloading this front-end design plugin. All this does, you just have to like install it. It helps you build beautiful websites um very easily. So, I'd recommend installing that. You may need to restart Cloud Code and then it should work properly. And I'm just going to send off our first message. Can you please build out a beautiful website for me? This is for my watch company where we sell watches online. And I dropped in here an MP4 file. I want that to be a background video playing as that a user sees as soon as they land on the website. So the page is up and we can view it at this link right over here. Just so you guys know if you're brand new to cloud code, a local host environment is a development server. It's technically not accessible on the web for anyone to view it. It's just your computer rendering these static sites in a browser. So let's go ahead and take a look at this site here. It uh it looks really really beautiful right away. I love this effect down here. watch looks awesome. The text overlay I don't really like. It's kind of like uh overlaying the graphic, which is not good. And then the rest of the page could use some work for sure. Now, speaking of the rest of the page, a quick little tip here is that we can head over to a website like Dribble and we can type in uh like watch e-commerce website just to grab inspiration from other designers that have created something similar to what we want to build. And so, we can just find something that we like. And uh I'm going to choose maybe yeah, maybe something like this one right here. I'm going to save this image as a file on my computer. And then I'm going to head back to our site in Cloud Code. And we can just literally upload a image here by hitting the plus button. Upload from our computer. I'm going to grab that file. I'm going to say, "Please design the rest of the site uh around this graphic below the fold." I'm going to send that off. When I say below the fold, that's just marketing terms for anything that you see immediately when you land on the page is above the fold and anything below that is below the fold. The page has been redesigned. Let's take a look at the results. So we can see some reviews being added down here. And immediately this looks probably 10 times better than what it did a couple seconds ago. And so even if we just compare this to that that uh image that we used as inspiration, looks very very similar. Especially this part here and then this section right over here. So yeah, looks fantastic. There's just two things that I want to change. Number one is I want the text to not overlap on the graphic here. And I want to have a nice gradient so that this white actually just blends into the graphic here. It doesn't feel like such a sharp contrast. So let's go back to Claude and send off a message. Can we please create two changes on the site? Change number one is that I want the text overlay on top of the hero section to not overlap on the watch icon in the background. So, we need it to go further to the left. And also, I don't like how harsh the white background is between the hero section and the white background. We have a gradient that overlaps both sections where it goes white to transparent so that it feels very smooth rather than jagged. Cool. So, it's all set. Let's take a look at the changes here. The first one, which is really cool, is this gradient here. And so, this is what I was talking about where it doesn't feel like it's so harsh between the two. It goes instead of going from white directly to this gray, there's a gradient that kind of smooths it out. And obviously you can play around with this to get it to the exact width and height that you want. And the second change that we made is that this text is now Oops, I'm trying to draw a straight line here, but I'm incapable of doing it on my computer. This is supposed to be perpendicular to the navigation bar up here. So, we made that change. And it also made the uh the the H1 or the heading smaller so it doesn't overlay on top of the graphic, of course, unless it explodes out. So, yeah, that looks great to me. I'm really happy with this site. The last thing that we have to do is we have to take this site and deploy it live so that anyone can access it and we can sell our goods and services. And how we're going to do that is a twopart approach. The first is we have to upload the code to a platform called GitHub. You can kind of think about this like Google Drive. You just upload all of your code from uh Cloud Code into GitHub. Okay? Okay. And then once it's here, then we're going to use the code in GitHub to deploy it live through an application called Versal. So how we're going to do this is logging into GitHub. If you haven't done so already, create account. We're going to go to repositories, create a new one. I'm going to title this watch. I'd highly recommend making sure this is private so other people can't access your GitHub repo here. And all we need to do is copy this code here. Okay. So I'm going to copy this. head back into GitHub. And I'm going to say, please upload this entire project into GitHub for me. And I'm going to paste that exact code here. And now it's going to take all of these files that we've just created for this project, and it's going to upload it right into GitHub. Cool. So, it's pushed all 13 files over here. Let's refresh the page here. Everything's good to go. Our files have been copied from Cloud Code into GitHub. The next part is to head over to Versil. Create an account if you haven't done so already. And we're going to create a new project here. And you need to link GitHub and Verscell together so that you have access to that repository right here. It should load in by default once you connect them. And we're going to import this in. The only thing that we need to do is just make sure that the application selected is Nex.js. And then we're going to go ahead and deploy this. Sweet. And so our website has been officially deployed and we can continue to the dashboard and then take a look right over here by clicking on the domain. Awesome. So that's it. Now anyone can view this website. And if you guys want to, of course, buy a domain inside of Versell, you can head over to the domain section right over here and then purchase something here. Or you could go ahead and load in a domain from an external website like GoDaddy or like NameCheep, for example. So that's it for this video, guys. Um, all of the resources are going to be down below for free in my free school community. Highly recommend grabbing those. And also in my paid community, there's tons of private courses in here going in-depth into cloud code as well as two transformations. The first is how you can find, close, and fulfill your first aation client within 30 days or less. Then rinse and repeat until you have an agency. And then the second transformation is for those of you who have existing businesses. I give you the exact blueprints that I use to scale to seven figures and automate my whole business. All you have to do is copy, paste, and deploy them into your business. Um, and if you don't want to have to do that, you can take a look at my agency where we can jump on a free 30-inute call and show you exactly how you can automate your business. Thanks guys for watching and I'll see you in the next