Fable 5 — $10K Website in 10 Minutes

• Channel: Zubair
• Video: Watch on YouTube
• Tags: claude fable5 10k website zubair

Overview

Zubair shows how Claude Fable 5 builds stunning multi-page websites from a single prompt, including animations, effects, and exact clones of award-winning designs.

Key Takeaways

• I mean this looks cool so far but oh wow look at that that is incredible that is impressive i can’t believe this is made with one prompt this is mind-blowing let’s see the next one look at this one
• And this is a clone to be honest better than this award winning website i feel like this is way better or at least the look and feel of it oh this one’s nice too look at that it’s got
• At this that’s really cool so i think we finally cracked the code for building incredibly beautiful websites award-winning websites with only two tools claud fable 5 and the hicksfield mcp honestly i’ve been testing this non-stop since yesterday since
• Manual work all you’re doing is using claud fable 5 inside claud code and the hicksfield mcp to generate anything i’m talking about any type of website you can literally clone a website award-winning website or you can generate something
• Them for the cost of one or two dollars and you can see right here this is just one prompt i give it a screenshot one prompt there you go it generated this entire sphere weird-looking website that’s a clone
• To just generate this thing and with one prompt and a screenshot it generated for me and i can update this with the hicksfield mcp to add more images because these are just kind of like placeholders so that’s why
• Background even if you’re a complete beginner you’re able to follow me along all right let’s get started so first things first i’m just going to go to my claud code here so make sure you have claud code you’re
• Opus 4.8 is also very impressive so if you don’t have that that’s fine use the opus 4.8 for now so once you’re inside your claud code step two is going to be installing the hicksfield mcp because like i
• Of doing it manually with the hicksfield mcp again like i said you can just use prompting which is a lot more convenient in my opinion so to add the hicksfield mcp you’re going to come down to the bottom
• This you’re going to click on the plus button you’re going to click on add custom connector so right here you can name it something so just name it whatever hicksfield now remote mcp server url so in order to
• The mcp and on claud and you’re going to come right here in the bottom and just copy this so once you copy this you’re going to go back to claud and you’re going to paste it in this remote
• You authenticate you’re going to come back and it’s going to look like and it’s going to say connected obviously mine says a server with this url already exists since i’ve already connected it so that’s why it’s not going
• Way it doesn’t keep asking you over and over again and then make sure that you have it connected because obviously right now it shows the disconnect because it’s already connected so if yours is not connected make sure you
• There you go it’s toggled on okay so now you have the tools installed now another important thing to do is i’ve also created kind of a skills folder for you guys so that way you can it has all
• Breaks a video down when the hicksfield generates video with a model like sea dance 2.0 or cling it breaks down the video into multiple frames so that way as you can see i’m scrolling right now right so as

Transcript

I mean this looks cool so far but oh wow look at that that is incredible that is impressive I can’t believe this is made with one prompt this is mind-blowing let’s see the next one look at this one oh wow that’s cool too oh yeah there you go that blowing effect yeah I mean this is crazy honestly the fact that this is an exact clone of another wow look at that this water effect that’s really cool and this is a clone to be honest better than this award winning website I feel like this is way better or at least the look and feel of it oh this one’s nice too look at that it’s got this 3d sphere wow that is impressive so this is the one with cloth that we built the look the local host and this is the original website I mean that’s about as close as it could get right look at this that’s really cool so I think we finally cracked the code for building incredibly beautiful websites award-winning websites with only two tools claud fable 5 and the hicksfield mcp honestly I’ve been testing this non-stop since yesterday since fable came out and with the combination of mcp to give you all an access to all of the models that are capable of generating images and incredible videos you no longer have to use multiple tools and do any manual work all you’re doing is using claud fable 5 inside claud code and the hicksfield mcp to generate anything I’m talking about any type of website you can literally clone a website award-winning website or you can generate something original from your own imagination at this point honestly the only thing stopping you is just what’s in your mind that’s it and these are the type of websites that agencies charge thousands of dollars and now you can generate them for the cost of one or two dollars and you can see right here this is just one prompt I give it a screenshot one prompt there you go it generated this entire sphere weird-looking website that’s a clone of this other website called phantom.land right which is the same exact thing it’s kind of this really cool kind of sphere scrolling thing going on so all I did was just basically gave claud fable 5 and told it to just generate this thing and with one prompt and a screenshot it generated for me and I can update this with the hicksfield mcp to add more images because these are just kind of like placeholders so that’s why I went ahead and created multiple other websites with videos and kind of the scroll animation with different frames all again using prompting that’s it so I’m going to show you all of this step by step regardless of your background even if you’re a complete beginner you’re able to follow me along all right let’s get started so first things first I’m just going to go to my claud code here so make sure you have claud code you’re on the paid plan again I’m on the fable 5 model the 1 million context this is definitely better as far as kind of understanding the design and reading screenshot and images a lot better but obviously like I said opus 4.8 is also very impressive so if you don’t have that that’s fine use the opus 4.8 for now so once you’re inside your claud code step two is going to be installing the hicksfield mcp because like I said if you want to create those 3d scrolling effects and those incredible images and videos because those are actually generated videos and you need like cdance 2.0 nano banana pro or cling ai and all of this but instead of doing it manually with the hicksfield mcp again like I said you can just use prompting which is a lot more convenient in my opinion so to add the hicksfield mcp you’re going to come down to the bottom right here click on the plus button you’re going to go to connectors you’re going to go to manage connectors you’re going to come to the top obviously mine’s already there but I’m going to show you how to do this you’re going to click on the plus button you’re going to click on add custom connector so right here you can name it something so just name it whatever hicksfield now remote mcp server url so in order to get this you’re going to click on a link in the description and it’s going to bring you right here so this is the hicksfield mcp custom url that you’re going to grab so right here make sure you’re on the mcp and on claud and you’re going to come right here in the bottom and just copy this so once you copy this you’re going to go back to claud and you’re going to paste it in this remote url and you’re going to click on add and this will automatically add that and it’ll take you to hicksfield obviously you need to make sure you have an account set up with hicksfield and it will authenticate and once you authenticate you’re going to come back and it’s going to look like and it’s going to say connected obviously mine says a server with this url already exists since I’ve already connected it so that’s why it’s not going to allow me to do it again but when you come back it should look something like this right it should say hicksfield and you have all these tool permissions right so you can just say always allow so that way it doesn’t keep asking you over and over again and then make sure that you have it connected because obviously right now it shows the disconnect because it’s already connected so if yours is not connected make sure you click on connect here okay so once you do that you’re going to come back here and you’re going to go back to the plus button here just hover over connectors and make sure that your hicksfield mcp right here there you go it’s toggled on okay so now you have the tools installed now another important thing to do is I’ve also created kind of a skills folder for you guys so that way you can it has all of the instructions for the design again this is optional but this is very important if you want to have the ability to have this uh scrolling 3d effect so if you want to have because this breaks it down breaks a video down when the hicksfield generates video with a model like sea dance 2.0 or cling it breaks down the video into multiple frames so that way as you can see i’m scrolling right now right so as the person comes to the website and they scroll they have this effect that’s coming in there so these skills are important if you want to have it generated generate this type of scrolling animation but obviously you can play around with your uh you know if you have your own ideas you can go ahead and do that so in order to download the zip file you’re going to head over to my this is a free community again you don’t have to pay anything you’re going to go to the classroom section again you can put the click on the link in the description it’s going to bring you right here and all you have to do is just uh go to uh the classroom section youtube resources clod code and on the bottom i’ve put award-winning websites with clod so you’re going to come right here and you can click on this zip file and you’re going to download this file right once you download it it’s going to look something like this called scroll cinematic zip if you just double click on that it’s going to download this thing so then you’re going to take this folder and put it inside your clod code folder and tell it to use it’s very simple and if you you know if you get confused there just go ahead and copy and paste the skill.md file and tell clod code to make sure that it applies all the instructions all right so once you have those two things installed now what you’re going to do is just basically type a prompt similar to this so let me just go ahead and paste this all right so I said use the scroll cinematic skills right and that’s what we just downloaded from the skills files to build a 3d scroll scroll website for again this is where it’s a placeholder I said whatever it is right generate a high end cinematic hero plus two 3d clips with the Hicksfield mcp at 1080p slice them into scroll frames and build a polished brand multi-section site that matches its vibe then launch it on localhost so this is where now you can basically use your imagination for you know to come up with websites so let’s say for a new car brand right with incredible colors or something like that right something simple and this is where you can now play around with the prompt later on if you choose to if you don’t like something so I’m gonna just press enter just to see where this goes so that way I can show you the process and then you can feel free to do whatever whatever you’re doing right so I just said use the scroll cinematic skills to build so now it has access to that right so it’s a running skill scroll cinematic so this is all inside the zip file that you downloaded it’s just basically a set of instructions that we’re giving clod code using the fable five to be able to grab all of those details and give us a website that’s similar to something like this right or or if you again if you want to copy an existing website all you have to do is just kind of take a screenshot and give it a prompt and say hey generate this particular website or something similar to it with these effects using the Hicksfield mcp to generate the images and videos right so play around with that and that’s how you can find out you know the details and make it make it perfect to your own liking and obviously you can go somewhere to like a website like this awards.com right so if you just go to let me just go to awards.com slash sites so these are all of the award-winning sites that are that are out there so you can just go ahead and let’s say you’re in a particular niche so if you’re in architecture right you can just basically click on that and find all of these award-winning websites that are done by actual design agencies that charge thousands of dollars and you can essentially just give them a take a screenshot of this so you can go inside let’s say let’s take a look at this one right go to website and give it also you can just copy the link to the website itself to be honest this is not that impressive I don’t know why but sometimes these award-winning websites are for not necessarily the colors and everything but it might be for some kind of a functionality so let me actually go back to make sure so there you go so now it’s generating a new car brand for us so you can see it’s using the Hicksfield mcp to create generate the image using nano banana pro and it’s going to use the Hicksfield mcp again to use the vid to generate the videos

(Transcript truncated — full length available on YouTube)