Fable 5 Builds STUNNING Animated Websites (in minutes)

Claude Fable 5 is back and it is phenomenal when it comes to generating animated websites like these. So, in this video, I'm going to share with you an animated website skill that you could plug directly into Claude. I'm going to show you how to generate stunning visual videos inside of Claude with the Higgsfield MCP and then turn them into stunning websites that you could either build for yourself, your clients, or sell for thousands of dollars. I've been geeking out about this since Fable 5 came back and I'm absolutely stunned with what it could do. So, without further ado, let's dive into this. There are three different things that you're going to need in order to create animated websites like you just saw. And I can guarantee you that it is much simpler than you could probably imagine. The first thing we need is the Claude desktop app. We're going to be using Claude Code inside of it. And if you've never used Claude Code before, do not worry cuz I'm going to make it very simple. The second thing you're going to need is this animated website Claude skill that I created. And here's how you could get it for free. There's going to be a link in the description called animated website skill. You're then going to see this page. You're simply going to add in $0 because it's completely free. And if you want to pay me for this, just subscribe to the channel for more videos like this. Then click I want this. And from here, you're just going to type in your email address, click get, and then you will be prompted to this page right here. Just download this skill, save this as zip folder to your desktop, and then I'm going to show you how to upload this to Claude Code in just a second. Now, the third thing we're going to be using is a platform called Higgsfield. If you don't know what it is, it is basically an all-in-one creative AI platform with all the best image and video models at our disposal. And this is how we're going to generate these scroll-stopping animations that we're going to embed into our website. And do not worry, this is going to be very simple because we're going to use the Higgsfield MCP in order to plug this directly into Claude Code. So, that way we don't need to leave the Claude desktop app in order to generate these stunning visuals. And I'm going to show you how to set this up here shortly. I'm going to show you how to set this up right now, and it's only going to take like 30 seconds. First of all, we do need a Higgsfield account. There will be a link in the description to sign up if you want to try it out. All right, so now let's move on to the next step where we add Higgs Field to Claude. And this is going to be very simple to do, so let's follow along with this step-by-step. So, go to the link in the description and we're going to see this Higgs Field MCP page. From here, we're just simply going to click copy right here on this link, as you could see right here. Then, pull up the Claude desktop app and we're going to come over here and select Claude code. Once you click on this, then come down to customize. Click on customize. Click on this connectors button. And then from here, we're going to add a connector. So, click add connector. Key thing I want to point out here is you're not going to click on browse connectors like you're probably used to. We need to add a custom connector and I'm going to show you how to do that right now. So, click on this, then we're going to give this a name. I'm just going to call this Higgs Field, but name it whatever you would like. And then I'm simply going to paste in that MCP URL that it gave us and then I'm going to click add. Now, it's going to say that you're not connected to Higgs Field yet, so click this connect button. It's going to pull us back to our account and we simply just need to authorize our Higgs Field account. So, I'm going to click on allow and then it's going to ask me to open up Claude and we should now see that Higgs Field is connected right here. And if I scroll down my list of connectors, I could click on Higgs Field MCP. Personally, what I'm going to do is I'm going to select always approve, so that way Claude doesn't always need to ask me if it can go and generate images because if I tell it to generate an image or a video, it should know that it could already do that. And now, just like that, we have Higgs Field connected directly to Claude and we could begin leveraging the power of the best creative platform out there. Now, let me show you exactly how to upload that animated website skill that I shared with you for free and then we're going to get into generating these assets with Claude code and Higgs Field. All right, so what we're going to do now is come back over to customize on the left-hand side. Instead of clicking on connectors like we just did, we're going to click on skills. Now, we're going to click add skill and we're going to click upload a skill. Then, I'm going to take the zip file that I saved from that Gumroad link and again, if you didn't already download it, you could grab it. It is completely free, and I created this for you guys. Next, I'm just going to drag this in here. Key thing is we don't want to unzip that file while we're uploading it, because then Claude won't recognize the format. And now, just like that, at the very top of our Claude skills, we now have one called animated website. And if I click on this, we don't need to go through all the details, but it is very in-depth, basically explaining exactly how to create this animated website from a video. Long story short, it's going to process and analyze the video that we upload. It's then going to extract and optimize the specific frames of the video and turn it into images, and that will turn it into a specific format. So, that way when you're scrolling, the website shows each individual frame as opposed to a full entire video. And then from there, it's going to use the exact design system that I've crafted, so that way they always look pretty similar. And again, you could customize a skill if you would like. All right, so now back inside of Claude Code, I'm going to show you how we could begin generating images and videos using the Higgs field MCP in order to create this animated website. Now, first of all, I always like to grab a reference image. So, what I'm going to generate is a Porsche website. So, I'm going to come over to the pre-existing Porsche website, and I'm just going to grab a couple of different images that I want to use as references. So, I want to make the animated website about this exact specific model. So, what I'm going to do is I'm just going to take a screenshot of this, and then I'm going to take a screenshot of this one as well, as well as this one. So, this is really important, cuz we want to give the proper reference images to go off, otherwise we'd have to create these from scratch, which can be a bit of a pain. Then, I think it would be cool to also grab this image of the Porsche logo and icon that we could also add to the website at the bottom of it. Now, I'm simply just going to drag in these reference images of the car. So, as you could see, we now have these three images uploaded. Now, one important thing is we want to make sure we have stable five enabled, because stable five is obviously the new model from Anthropic, and it is phenomenal when it comes to generating websites, and it will actually help us generate better images and videos with the Higgs field MCP as well. So, make sure to toggle on table five, and for this purpose, I'm simply just going to leave it on high mode, which is the default mode. However, we could toggle this on to ultra code, but that'll just be overboard. So, let's keep that on effort level high. All right, and now on to generating this video. This is the prompt that I gave it. It's pretty simple. I said, "Take these reference images. Generate a video with the Higgs field MCP that we can use for an animated website. I want a video that pans from the back of the car to the front slowly while also showing the landscape around it." So, this should be good. I'm going to send this off, and one cool thing is that Higgs field automatically takes your prompt and will make it better because obviously prompt engineering is really important when it comes to generating good images and videos. So, we don't need to worry about that cuz Higgs field's going to do that in the background. Now, one thing I do want to mention is we can use Claude Co-work in order to generate these images and videos as well, and the process is pretty similar. To show you what I mean, I tested this exact workflow before filming this video, and this is what it looks like. You could generate these videos, and it automatically will pull up inside of Claude. But, I've noticed I've been able to customize it more and get a little bit better outputs when I'm using Claude code. All right, so let's look at this. This is the first output that we got from Higgs field in Claude code. So, I could come here and simply just view this directly inside of Claude. And as we could see, it used Seed Dance 2.0 fast model, which Seed Dance 2.0, if you don't know, is the best video model out there by far in my opinion. So, Claude and Higgs field knew this would be the best model to use in order to generate this video. And that really takes out the guessing that you have to do in order to pick which model you should be using. All right, so let's take a look at this. I mean, that's pretty solid so far. I mean, you could see it's a um like 180 turn around um panning of this Porsche, which is going to look really perfect for this website because it's going to scroll as the car is, you know, rotating. So, I could either download this here or I could generate another. So, let's just come here and generate one more so we have options. I want you to generate another one. I want it to zoom out a little bit of the car so it's not always on the same level vertically. And you can see how vague I am with these prompts cuz again, Stable 5 and Higgs Field are going to optimize this prompt and take my gibberish and turn it into like an actual well-thought-out prompt. All right, so here's the output of this one. As you can see, it's a bit more zoomed out. It kind of focuses a little bit more on the landscape as opposed to like an up-close of the car. I think this looks pretty cool, but I really think that the other one is better just cuz it, you know, is more visually appealing when it comes to showing details of the car. But I mean, this looks so good. This literally like I I can't even tell this is made with AI. SeaArt 2.0 is actually phenomenal. And so, what I'm going to do is I'm going to go back to our original one. I'm simply going to click this download button. I'm going to click open link. And what this will do is this will take us here where we could just select this little button and click download. I think this is going to look really good on an animated website, guys. I'm really excited to see what this looks like. All right, so now I have this idea to take this Porsche logo and turn this into an animation where it kind of expands and all the different elements of the logo kind of come apart and zoom out like you've probably seen. So, I want to add this to the website. So, I uploaded this logo and then I gave it this pretty comprehensive prompt that I had Claude help me with basically breaking down the 3D motion design. So, I'm going to send this off. This is going to be a cool addition to the rest of the website. So, I'm excited to see what the output of this is going to look like. All right, so here's the output of our logo. This looks pretty cool. I mean, that's solid. This is going to look really good on an animated website. Now, real quick, let's say there's an app you want to connect to inside of Claude or Claude code specifically. And when you click on browse connectors, you do not see it in this list. Well, I'm going to show you a hack that allows you to connect to 9,000 plus different apps with something called the Zapier MCP. Now, if you don't know what Zapier is, it's an automation platform that has been around for years. It connects to 9,000 plus different apps, and you can plug this MCP server directly inside of Claude, so you can interact with all those different applications. Now, in order to set this up, it's extremely simple. You're just going to select new MCP server, then you're going to come down to either Claude or Claude Code. I'm just going to go to Claude for this use case. I'm going to copy this prompt, I'm going to come back to Claude, paste this in. Claude will then walk you through a couple quick steps in order to set it up. It's very simple. And then once you have your MCP server configured, you can now begin adding different applications. So, for example, I could come here and look up Beehiiv, which is an email marketing platform, and you can't connect to Beehiiv directly inside of Claude, but you can with the Zapier MCP. So, I just select all these different tools here, click connect, and now we will see Beehiiv is connected to our MCP server. So, you can do this with all these different apps. You could also see I connected School, because I'm not able to connect to School directly inside of Claude. And if you guys want to try this out, there is a link in the description. Now, before generating this animated website, to now show you this cool visual that I created with Higgsfield. So, I took this image right here on the Porsche website, and what I did is I basically told Higgsfield to animate it. So, we now have this video, which we could also add to our website, which I think is going to look really cool and add a cool touch. So, we now have three videos we're going to be adding to this website. All right, so now inside of Claude, here's the prompt that I'm giving it. So, I'm just basically typing in forward/website with these three videos. The first one I want at the top is this one. And what I did is I copy and pasted the file names of all the videos. So, for example, this one right here, I just referenced it, and I gave it the exact file name, so that way Claude Code can go and source it, and then, you know, pull that onto our website. This is a very simple prompt I'm going to give it, but we're going to make iterations from this, because odds are it probably won't be perfect the first time around. All right, so here is the output, and this took probably about like 15 solid minutes, and that's how you know that Claude Fable 5 is really doing some work on the back end in order to make this as, you know, good of a website as possible. So, here we go. 911 GT3. We If we scroll through, you could see that, you know, obviously it's panning around our car. We then have our second animation here with the GT3. And this is all accurate information in regards to like what a, you know, Porsche GT3 is and all the different specifications and whatnot. So, I think this looks really solid and then I really like the way this logo looks. As well as I added this little gallery here. So, I mean, I think this is absolutely incredible from a one-shot prompt. We literally gave it one prompt and used the animated website skill. And depending on how fast you scroll, like the more smooth animations are actually going to look. So, if I go quicker, obviously it's going to look smoother. But, you know, if you want to go and read the stuff, you know, it's not going to look as smooth, but it looks really incredible. Now, as you can see, I'm viewing this in localhost, so I'm not able to like share this online and, you know, my friends can't go and look at it. But, if you do want to turn this into an actual website, we could use something like the Vercel MCP, which we can plug directly into Claude to hook this up to a URL. Or, we could even add our own custom domain if we really want to get fancy with it. But, guys, this is how you could create an animated website with Fable 5 and Higgsfield MCP directly inside of Claude in just a couple of minutes. I'd say end-to-end, if you begin installing this system and testing this out, you should be able to do this in probably about 30 minutes and some very basic prompts. If you guys got some value, leave a like, subscribe to this channel for more content, and if you want to use Higgsfield, there is a link in the description in the top pinned comment. Thanks for staying till the end. I'll see you in the next one and peace.