Transcription
Kind of cool already. But oh wow, I like that. That is beautiful. Look at this. Honestly, I'm shocked that this is made with one prompt. This is incredible.
Okay, now let's look at a portfolio website. Okay, nice. That is cool, man. This is very nice. Wow. So, Claude Fable 5 is back and it is absolutely incredible at building websites. I've been testing this non-stop since yesterday. So, in this video, I'm going to show you step by step how to do this. But on top of that, I'm going to give you this one prompt website pack that you can basically just copy paste depending on whatever niche or whatever you want to build there. You can build portfolio websites. You can build like e-commerce websites, whatever you need. I'm going to give you guys this completely for free in the description of the video so that way you can just follow me along.
We're going to be using this all inside our Claude code and we're going to connect this to a model like Cance 2.0, no, and Nano Banana or GP2 image. So that way we can create everything within Claude code. I'm going to use the Hix feed MCP, but if you guys want to use something else, feel free to do whatever you want. But I'm going to show you all of this step by step. So all you have to do is just follow me along.
So obviously Fable 5 is back, uh, until July 7th and then after it's going to be kind of on a usage-based limit. So go ahead and explore this as much as possible. So I'm inside my Claude code. If you don't have Claude code, just go ahead and install, uh, the Claude app, desktop app. That's what I'm using. And then come to your Claude code brand new session. Make sure you're at Fable 5. Right there it says included until July 7th. So once you select that, I'm using, uh, the effort level at extra. So keep it between extra and max. Obviously, the more you go on the smarter side, the more it's going to use your tokens. So kind of play around with different, but I think max extra is the one that works pretty well.
So in order to create these websites that has these 3D scrolling effects. So like right here as you can see, I mean, this is mind-blowing, right? Like how it's able to do this, it's the accuracy is amazing. And by the way, this is just like a fictitious, um, watch brand it just created from scratch. So as you can see, this is basically scrolling through the different, um, aspects of the video, the different frames. Therefore, it's very important for you to use a model that has a, uh, 4K image quality, right? And Cance 2.0, you know, that we're going to use inside Hixfield does that, right? So, but, but like I said, you can use Cling or some other model in there as well. That's completely up to you. But this scrolling effect that you're seeing here, this is technically a video that's separated into multiple frames and then also images as well. So, same thing with the portfolio website here, right? I uploaded my image and it's able to create all of this on its own. I didn't do anything else. I just gave it one prompt and was able to do that. So that's why if you're lazy like me, you want to be able to attach an MCP. So that way it takes care of all of that itself. Of course, it's going to cost you a little bit of money, but you know, that's kind of the, um, the difference between kind of creating it with one-shot prompt or doing things multiple, in, in multiple different tools. Uh, but I'm going to show you obviously through just creating this with one single prompt from Claude code.
So the first thing we need to do is we need to add an MCP, our Hixfield MCP. That way we can use, uh, models like Cling or Cance 2.0 or Vo 3.1. So as you can see, I've already added it, but it's pretty simple to add. So again, once you're in your Claude code, you're going to press this or click on this plus button. You're going to click on the connectors. You're going to head over to manage connectors. And this is going to open up all of your, uh, uh, connectors in MCP. So the way to add this, you're going to click on the plus button. And instead of, if you click on browse connectors, it's going to show you all of the native ones that are here, but we're going to add a custom one. So you're going to click on the plus button and click on add a custom connector. And here you're going to name this. So you can just name it something like Hixfield alt, whatever. And then for the remote MCP server URL, you're going to get this from the following link. Go ahead. I'm going to put this link in the description. You can click on this. It's going to bring you right here. So this is basically a way to connect Hixfield to your Claude code. So make sure you are in the MCP, uh, tab here and then you are also clicking on the Claude. Obviously, if you click on link in description, it's going to bring you directly here. So, you should be fine.
So, after you do that, you're just going to come to the bottom right here, right? It says copy the Hixfield URL. You're going to click on copy. This is going to copy it. And make sure you're logged in. Obviously, you have to create a Hixfield account because otherwise you won't be authenticated. So, once you create your Hixfield account and since it's going to be using like these models, it's, you have to put a couple of dollars in there. Once you do that, then afterwards, we're going to go back to our Claude code here and just paste this and then click on add. Obviously, it's not going to let me add because this is a server with this URL already exists. But at this point, you're going to be redirected to your Hixfield to authenticate to make sure that you're allowing Claude to have access to, uh, your Hix, Hixfield there. And once you do that, once you give it confirmation and give it access, it's going to look something like this. Hixfield is going to show up here. And all of this is going to be, uh, gen or, uh, enabled for you. So right here it says disconnect because I've already disconnected it. So in order to confirm this before you do anything, you want to make sure you come back to the plus button, click on connectors and make sure your Hixfield is toggled on. You see right here it's toggled on because we're going to be referencing this, uh, inside our Claude code. So we want to make sure that we're, uh, creating that or that that connection is already established. Right? So once you do that, now you're ready to go, right?
So as far as, um, websites that you're planning to build, so you can actually go to a website like awards.com and see actually award-winning websites. And once you find something that you like, again, this depends on what you're trying to build. So let's say you're building some kind of a portfolio website, you're building some kind of a product website, right? Or something completely original out of your imagination, you can actually get some inspiration from here. So let's say you want to build some kind of a, I don't know what this is. Let's just click on it. Serotonin, right? I don't know what this is, but let's just check it. Click on visit site. This is going to bring you to his actual website. So, serotonin.com. I guess this is some kind of a, uh, fashion company or something. There you go. Where glam meets grunge. Okay. Yeah. Yeah. So, so it's like an e-commerce website, right? So, same thing like if you're creating e-commerce websites, you can just copy this and then you can take it to Claude code and say, "Hey, uh, create something, uh, similar to this website." So that's kind of one way to kind of clone a website, right? So you can just give it a reference. So this is a good site to check out, um, um, for, or you can just Google, you know, award-winning sites. That also works as well.
But anyway, so let's go ahead and create something original of our own. I'm not going to copy any of these, uh, award-winning websites or whatever, because this was something, as you see, it says localhost. I actually created this directly inside my Claude. So if I open this up, you can see right here, this is this was called, uh, Orum and Nor Eclipse website, right? So I just gave it this one prompt and I said, "Build me a war. We're a cinematic 3D scroll website for Orum and Nor, a fictional Swiss luxury watch brand." And I said to use the Hixfield MCP to generate all of the, the different images and videos. And as you can see right here, it went ahead and created it. And it says it's live on localhost 48.88. Right? So that's exactly how simple it is. And again, we're going to work on this step by step.
So, let's go ahead and open a new Claude code again. So, make sure again your Hixfield is connected. Right? Hixfield is connected. So now, uh, I'm going to go ahead and grab a prompt from this prompt pack that you guys have access to. So, let me go ahead and paste this big prompt. So, I'm just going to build something completely new. So, I said, "Build me an award-winning cinematic 3D scroll website for Abyssell, a fictional deep sea expedition company that takes civilians, eight civilians per year, to the ocean floor aboard a submarine called the Aribbas, right? Something completely fictional and, uh, from the imagination." And by the way, uh, so let me go ahead and actually enter this and then we're going to talk about the rest. And right here, as you can see, I said visuals generate everything with Cance 2.0 model on the Hixfield MCP, right? And I'm giving it all of the instructions here. So I'm going to go ahead and enter.
So now it's going to make realize that the Hixfield MCP is attached and it's going to go ahead and build this thing out. So as you can see right here, visuals is described, the surface, I'm giving it the sunlight zone. So all of these different, uh, instructions are giving, I'm giving this to Fable 5 to make sure that it follows everything along. But like I said, all of this instruction is inside the prompt pack. So you guys can just based on whatever, uh, niche you're, uh, selecting, you can just copy this prompt and make some changes to it. And as you can see right now, it's starting to build everything. It says ffmpeg is ready. So in the bottom, there you go. Use Hixfield to check balance cinematic hero shot. So now it's generating image and everything else. So let's just go ahead and give this a couple of minutes.
Now, a quick reminder on Fable. Just like I mentioned in the beginning, this is only available till July 7th on your plans, on your Claude plans. So, go ahead and take advantage of that because after that, it's going to get pretty expensive and move to usage. I've been building non-stop. So, I recently built my personal assistant and my second brain. I updated with Claude Fable 5 and it's absolutely incredible. Let me show you guys a quick demo here. Hey, Jarvis. How you doing? >> Working on it, sir. >> Operational and quietly magnificent, sir. Yourself? >> Good, thanks. Uh, by the way, so a new model came out. I'm about to switch your brain. What do you think? >> Arrival brain, sir. I shall try not to take it personally as you rummage for my replacement. >> No, as a matter of fact, right now you're using Opus 4.8 for your brain. Go ahead and switch to Fable 5. One moment, sir. Good evening, sir. The new brain is installed, calibrated, and already mildly concerned about your calendar. So, there you go. Uh, this is obviously my second brain, my operating system, and I recently added Jarvis with it, and I upgraded it with Fable 5 and it's been non-stop fun. If you're interested in checking this out, if you want your own operating system or if you want your own personal assistant like Jarvis, check out the community. Link is going to be in the description where you can create your own. I'll show you exactly what to do step by step. But anyways, let's go back to our build here.
Okay, so looks like it got done. All right, so it says Abyssal is live at localhost 48.90. So let's go ahead and open this up. All right, cool. How deep will you go? So that's the, there you go. Abyssal. It's that, uh, based on. So I'm just scrolling right now. Right, look at this. Oh wow, that is cool. That is nice. So like we mentioned, this underwater vehicle, right? So, very nice. At 200 meters, 99% of sunlight is gone. Nice. And then on the right-hand side, I, I like that it has this little, uh, kind of scroll animation there as I scroll down. Nice. The jellyfish is a very nice touch right there. 1,000 meters, pressure is 100 times the surface. Okay, cool. Oh, nice. Look at this. The light turns on. So, these are different frames obviously, but it's all the same, uh, video that's generated by our Cance through MCP to our Hixfield MCP. So Aribbas, that was the name of the vehicle, right? Based on the prompt. No sun has ever reached this water life. Makes its own light. Nice. Look at this beautiful. Oh, and it does showcase the different animals that, uh, have their own light, right? Because it says the sun doesn't reach here. But very cool. Fewer people have stood here than have walked on the moon. Very nice. That is really cool.
So you can see how incredible this is. Aribbas 2 pilot. And it gives you like a product demo, 96-hour life support, uh, 4,000 meter depth rating, souls on board eight, because we said that the product should have, or this vehicle should have eight people capacity, right? And it says eight seats, $250,000, departing March 2027. That's quite a bit of, uh, expensive ticket. But anyway, so you can see how amazing this thing is, uh, as far as developing these 3D scrolling websites, right, through animation. And like I said, the reason why it's doing this is because it's capable of understanding, um, that it has access to a video generation model like Cance 2.0 and image models like Nano Banana Pro or GP22 image, right? All of that is inside our MCP and therefore Fable 5 is able to generate the knowledge, is, is able to generate the expertise and then it reaches out to Hixfield to generate those clips and then kind of renders everything together and puts it on, uh, a cinematic website. Right? This, as you can see, it says localhost 48.90.
So now you can imagine this is something that could be, uh, on a custom domain, right? So if you're, uh, creating a portfolio website, for instance, like this one, you can certainly put this and have Claude Fable say, "Hey, go ahead and now post this or, uh, publish this into a particular custom domain." So this is something that you can either do it for yourself and like I mentioned, if you are an AI agency owner or somebody who's offering this as a service, this is an incredible opportunity for you to take advantage of this and sell these as services, right? So I mean, portfolio websites is something that everybody needs, right? And now you can just upload one image of yourself.
So if I go to my Claude, let me show you. So this one's the cinematic website that I created. So I said, "Build me an award-winning cinematic 3D scroll personal portfolio website for me." I put my name. Study the style of awards site of the year. Right? So I give it a couple of references. Huge bold topography cinematic scroll visuals. I say generate everything with Cense 2.0 model on the Hixfield MCP. And then, uh, you know, basically similar to what we mentioned in the other one as well. And then I went ahead again, same thing, used Hixfield to generate my images. All I did was just upload an image of myself. And then I went ahead and created all of the videos and images that you're seeing right here. Right? And again, all of this is AI made. I didn't do anything manually. It was just one prompt and it was able to generate all of this.
So like I mentioned, go ahead and play around with the prompt pack here. Right? Take a look at this. If you want to create your own, um, portfolio, personal portfolio website, you can just copy this. Oops, I zoomed in too much. You can just basically copy the portfolio one right here. There you go. It's right here. Right. So, all right. Build me an award-winning cinematic 3D X. And this all you have to do is just replace this with your name, right? And it will create something similar to that. And obviously, you can always go back and forth with Claude and ask Fable to change something if you don't like anything. It's really good at editing, uh, an existing website or whatever it builds for you. So, if you're building anything related to like a product or something like this for fun, right? You can certainly just kind of go back and forth and change everything.
Anyways, well, hopefully you guys found it helpful. Again, if you have any questions, put them in the, uh, comments below. I'll try to get back to you guys. If not, again, uh, you have access to the prompts. And if you're interested in learning how to monetize these or if you're new to Claude and Claude code, check out the community. Link is going to be in the description. Again, hopefully I'll see you guys there. If not, thanks for watching and I'll see you on the next one.