Claude Fable 5 Just Changed Website Design Forever

called Fable 5 just dropped and it changes websites forever. Not only is it the best model, it is also the world's number one design agent. And in this video, I'm going to show you exactly how good it is at creating beautiful websites by comparing it with Opus 4.8 across three levels of difficulty, starting simple and building to the best website creation strategy that I have ever seen. So you can build beautiful websites in minutes, even if you're starting from completely zero. And I'm also going to show you how you can reduce your token spend with this brand new model. And if you're new, I'm Jack. I built and sold my last tech startup with a gazillion customers. Now I run my own AI startups and I share here the stuff that actually works. So if you haven't already, grab that beautiful coffee and let's dive straight in. So when we're using Claude Fable to create beautiful websites, there's one thing that you have to be aware of and this is the fact that it has become the world's number one design agent because Anthropic and the Claude models are exceptional at design. As you can see, it is taking over quite a lot. It is number one design arena. It wins 71% of times in head-to-heads and it's done really well. And here's some benchmarks. Now, I know anything looks good on paper. The fish and chips looks great on paper. Doesn't mean that it's the best, but you can see from yourself it is a premier model that is set to crush it. And that takes us nicely onto the fact that power burns tokens. I'm going to show you exactly how you mitigate that inside this video. And if you make it to the end, not only will we see how good it is, you'll also be able to build any beautiful website that you want to. So, we're going to start off with level one, which is describing the thing. So, we're going to have Opus 4.8, going to have this brand new model, and basically just describe the website that we would like. So, what I'm going to do, I'm going to come down here, click on Fable 5, which is the one that we want. We can do the $1 million context wonder. Come down to medium. I'm going to set the effort level here to max. We don't need ultra code for this. Max will be fine. I'm going to give it both the same prompts. It's going to be, hey there, go ahead and design for me a beautiful website that sells Laqua. Let's get natural. And the flavor is going to be strawberry and peach. Maybe three different sections and make it look visually beautiful and engaging with the very best um softwares integrations and all of the best kind of like design elements. And then I'm going to give the same prompt over to 4.8. And just to keep this fair, I'm actually going to go ahead and put it on the same uh level. So let's come down to open 4.8 1 million context. Put that on max as well. Come down and send this one off. And so what this is called is one shoting. We give it one prompt and see exactly how well it performs. Then we're going to see exactly how to build it with the best website design building strategies and how good it actually looks. Beautiful. And both models have finished. This is Opus 4.8. I am partially inspired by the Laqua hype I've been going on recently. They captured me, guys. I am a captured agent for Laqua right now. Let's see how Opus 4.8 did this one. I click on it. Dude, very, very cool. I love this floating. Look, I hover over it. It's decent. Let's get natural. Let's scroll down. Have a look. I think it's got a good scrolling animation. As I come down here, a flavor you can taste from there. From here, this is really beautiful. Like, this is a one shot. I haven't edited this at all. We've done all this together. Together, they get natural. I scroll down. Innocent by the numbers. It can't be pronounced. It doesn't belong in the can. What I do like is the fact that I've got kind of what I'd call traditionally nonclord um fonts in this. And I think that is freaking gorgeous to be honest with you. This is pretty exceptional. This is Opus 4.8. Let's see how we did now with Fable. Wow. I mean, first of all, that is freaking a lot better. I mean, look at the difference in the cans right from this to this. Completely new level. Multiack 599. I scroll down. Innocent by Nature. So, I get these different zero calories, 020, zero sodium. What's cool to me is it's kind of emphasized the selling points of it. I think that's gorgeous. This is fantastic. Stock the fridge. Oh, dude. You've got to be kidding me. This is freaking crisp. And look what it's built into this. Like, I am genuinely super freaking impressed. Let's compare that to what we This is one shot, by the way. Literally one shot. So, this is what 4.8 did. Again, that's not bad. This is not bad. But when you compare it with this, the fact that it's got a border outlay around it, the fact that we've got something on the left. Could we group these together? Yeah, of course we could. As little as we can do. Eight cans, 12 cans, 24 cans. This guys is freaking exceptional. And this was one freaking prompt. That's all I gave this was one prompt. And the bottom Laqua at the bottom. We're now ready to rock and roll. This is really freaking impressive. I'd probably just also do a little bit of adjustment here. But again, it's one shot and it's hyper responsive when I move my mouse over. So level one was about describing it. Level two is about showing a fantastic website. Now, we're going to do this on what I will call hard mode. We're not going to pull any punches here on the channel. What we're going to do is I've shot over to this website called awards.com. And what we can do on this website is basically find out what are all the awardwinning websites that have existed, right? So I can see all the ones that have won incredible awards. Like this dog one here looks really cool. Don't bore me. I think it's really fun, really enjoyable. You can see we've got dogs doing various different things. I've actually gone ahead, guys, and I've picked like I would call an expert level difficulty for this one. What we're going to be doing is this igloo website, which is freaking amazing. Check this out. I visited the site because there's so much thing now about Fable 5 actually designing video games. We may actually have GTA 6 before they said. Look at this. This is exceptional. Again, I've got this hyper responsive thing here. If I I can click on this, we're getting audio. This is pretty freaking exceptional. If I scroll down, look at this scroll animation. I come down. I mean, this has been built with love. This is a masterpiece. This is absolutely gorgeous. I can click on this. I can explore it. I can go deep. And there we go. We got some interesting information. Almost like a video game essentially. And what we're going to do is we're going to ask basically we're going to ask it to build this exact thing and we're going to see how both models get on with this. And even look at this. I scroll down. This is just fantastic. There we go. Check this guy out and go down to LinkedIn. This is exceptional. So this is the prompt that I gave it. I want to go ahead and recreate this website. It is a visual masterpiece of creating videos. need to go ahead and use basically I've said go ahead and use video generative software like you give it your API keys to Higsfield or the Kia AI and it'll go ahead and do that. I want it to be beautiful and visually fantastic. You don't have to use an Inglope. You can use any object that you want to but it needs to have this kind of mystical winter almost interstellar vibe that is gorgeous. I want you to pay close attention to all the different design elements, the scroll animations, the loading blah blah blah. Here's the website. That's literally all I've done. It's come back now. Opus 4.8 has asked us a question here. What should the centerpiece and setting be? You said I could swap for an igloo. Let's just go for glowing ingloop. That's fine. How should it be branded? Let's just go with keeping it igloo. I think that's absolutely fine. And let it do its work in the background and we can compare how they both do together. Beautiful. And now they finished. We're going to check out both of them. And bear in mind, I gave them a very, very difficult task. So, let's go ahead and check out what Opus 4.8 did for us. So, open up a little ink. This is really nice. This is crisp. Bear in mind, one shot. I've not touched this. We can even turn on the sound. Let's do that. Okay. Okay. Do we have any sound? Kind of like yes, but it's not crazy. Building web 3's first mainstream IP. The sound's a bit meh. I can scroll down a little bit. This is interesting. Okay, it's got someone literally frozen in the ice. Not sure what's going on there. Pudgy penguins. I'm going to turn the sound off cuz it's not perfect on this one, but this is really freaking, you know, for a first crack, not too bad from Opus, but you can see things going up. Let's scroll down, see the rest of the website, different images, I would say. Okay, there's I mean I love this uh animation effect here. So this is 4.8. Let's see exactly what happened with um the latest version 5. And then this is what we got from Claude Fable 5. Let's open this up and see monolith. Okay, click to descend. The structure is awake. Let's have a look at this. Wow, this is pretty. And then we can zoom in, I'm guessing. Wow. Okay, cool. With it, this is all one shot. I gave it one simple prompt and it's done that. That is crazy. And then we zoom in a little bit more. the observatory. Guys, this is actually freaking wild. I'm going to mute the actual uh tab because it's getting it. We zoom in a little bit. Then we've got beacon a warm reply. Guys, this is some of I have never seen something like this on first shot. This is freaking gorgeous. Look at the depth. And again, this beautiful animation. I can scroll backwards and forwards and then I've got this here and what do I see? The ice remembers careers contacts. Oh my gosh. Genuinely, what am I watching right now? This is ridiculous. I am actually really This is insane. I mean, I can just zoom all the way back out right to the top and I got the monolith. I got Drift. This was just one freaking shot. I just said, "Hey, here's the actual original basically the original website and it's done it really freaking impressive." Like actually nuts and it's done a much better job and it really feels like you're immersively going in. Imagine if I gave it two prompts. Like this is actually outrageous. There's no doubt this is the best. One thing I would change I think is getting it looped in some respect so I can loop back and forward a little bit. So the basically the end frame and the start frame are the same. But this is crazy. And funny enough, this is just the basically the beginning of the kind of things that you can do with Claude. And if Claude sounds like Jack, this sounds like you're speaking Spanish to me. I'm going to put down below here for you a link to my full Claude Code master class. Takes you from foundation building websites, stuff I've never shared online, power features, memory systems, all the stuff that I don't share on YouTube. It is the best course I've ever created. It shows you everything. I'll put a link down below so you can go ahead and access that if you want to go and check that out and go in more detail because this is literally outrageous and it leads us nicely onto the third challenge. And bear in mind level two was just giving it a website. That's all I did. Now level three takes it one step further which is we call extracting the DNA of a website. And what I mean by this is essentially one of the things that the philosophy here is that basically cloud can build anything but it doesn't know natively what the best design looks like. So if you find a website you think is gorgeous or just any website in general, what Claude can actually physically do is understand the DNA, the blueprints, the typography, the logos, the color scheme, the balance, the spacing, and all these different ratios and kind of extract if you like an essence of the website. And so the idea here is very simple. If we can analyze the actual blueprint of a website, we can essentially write down and codify what is design excellence based on all these websites that we like and then we can rebuild it for our own individual website without taking anything from the website because you can't necessarily articulate why a certain website looks good. But we can use claude to go ahead and do that for us. So in one of my very last videos, I actually showed you we took this website as an example, okay, which is rocket. And effectively I did the exact same process. I extracted the design elements from it and then I did and I built my own version which was this one here. And this was built with Opus 4.8 just like this. And so what I've done is I've gone over to now basically Fable. I've extracted it. But to do that I need to grab one very quick thing. And so I'm just going to shoot over to my community. Going to come down here and just grab my design blueprint extractor and just go ahead and download this one. If you don't have that basically you can just say to Claude, "Hey, go ahead and analyze it." This one's a little bit more detailed uses lots of different individual skills. And then to come down here, I'm just going to attach the file real quick. And then I'm going to give it a prompt using Glider. Hey, that. So, I'd like to go ahead and use my skill to extract the design DNA of this website. And then I'd like to go ahead and create for me an alternative version of it. Um, that's going to look gorgeous. I'd like some kind of like rocket video at the top of the website. And but I want the video, basically the website to be about uh let's do it about websites. So, I want to be about selling websites. Make it look beautiful. Okay. Put that prompt in there. Come over. Let's just make sure now that we are on Fable 5 and then we are ready to rock and roll. And now over in the skill fable's gone ahead and created all this stuff for me. So what it does is go down and understands many things about the website. So let's have a look. It's got a preview image of this is what the original DNA looks like for it own references. So it knows exactly what it's looking at. It's got previous examples if you feed it that. It's got a scaffold HTML. That HTML essentially just details the kind of structure of what the website looks like. Now bear in mind you can build any website you want to. task here specifically is reimagining an existing design style. Right? So, it's not right or wrong. It's just can I actually reimagine the existing design style. Okay. So, it's now finished. Now, bear in mind this is what I This took multiple backs and forths on Opus 4.8. This is what Opus 4.8 delivered. Looks good. Looks fine. I mean, I can click on things. It's decent. Again, it's kind of like, you know, fair enough. I think it's a decent website. Looks okay. This is the original. A little bit a lot of text density here. Let me show you what Fable 5 just built. Okay, check this out. So, this is Fable 5. Look at this. Look at the smoothness of this rocket. Completely different design direction. Like actually crazy. I come down and look how it's kind of blended in the white at the bottom. It has crushed the blinks, the basically the actual um logos themselves. I had to go back and forth with 4.8 to do that. This is radically better. I come down, I can see these different bits here. It's got it's got the actual lines which is perfect. Watch it build start to live. This is really freaking impressive. Goes through the brief, builds out the wireframe. Really freaking cool. And it's just happening on the screen. Goes through the design and then pushes live. It did this all by itself. Really freaking impressive. Going to come down build a business like yours. Do you know what I would say guys? Honestly, it's not really the big things to me. It's actually the small details. Like for example, um we didn't even have this on this page here, right? But if we come back to the rocket page which I got the information of, you can see it's got describe the plan, get recommendation, blah blah blah. Like you know, it's got some things going on. It is nothing genuinely compared to what we now have here. And look at this, just nice little details. It's just crisp. It's clean. It's easy to understand. They've gotten text density. I reviewed over 150 websites for people inside my community, giving them direct feedback to help their business. Text dynasty was the biggest offender by far. Easy to understand, beautiful, crisp. I come down and again look at these beautiful natural animations and graphics. The brief coming over, the design coming over. I can click to the build, the launch. It's just such a beautiful easy way to describe this. And it's done all this by itself. It's also got this beautiful toggle menu in the middle. It's basically clusters things together. It just, I'm telling you right now, has an eye for design and what design looks like. It knows not to have any more than five things. It's gorgeous. Going to come down here. We have this. This bait probably could do a little bit of improvement, but for a oneshot, this is insane. What owners say again, everything's in this beautiful box, which is fantastic and very modern design right now. And then I can come down and have a look at all these different things. And I scroll to the bottom, tells us what you sell. And then we have rocket at the bottom, which changes colors. Outstanding. Literally very, very, very impressive. And it's gone ahead and it's built the entire rocket and everything like that. And this does bring us on to the biggest problem with Fable that I want you to make sure that you crush. And that's essentially that it's token hungry. She's very hungry. She's at a buffet. She wants to eat all the Chinese food. How do we actually stop it? Well, all this is solved in the dial. And what it's about is leveraging when we bring out our big guns, our bazookas, and when we don't. So, think about it from this point of view. Okay, you got low, medium, high, max, and then you've got ultra code, which is spinning up multiple many different agents. So, here's a really simple way to think about it. Okay, I want you to do this. So, first of all, low. So if you're doing things like typos, copy swaps, renames, oneline, CSS tweaks, either just use like sonnet or use the low mode if you really have to use fable, but ideally you don't need to be doing that. Now medium is your daily driver. Okay, this is building sections, iterating UI, normal feature work. High is going to be for the hard and tricky parts. Okay, gnarly debugging, tricky refactors, design, judgment calls, and then we have max. Now I want you to reserve max for your first move. Max is like it's the big butt. It's it's the super intelligent part. And the way you'll make your token stretch further and get the best results is we use Max initially. Give it as much context as possible. Then let Max do the initial build and then we move over to medium to move it left and right. You will get so much more out of favorable by doing that especially on the API. You if you have unlimited budget, you just max all day. The reality is it's token hungry and honestly you don't need max for everything. We don't need Albert Einstein mopping our off floors. Medium is fine. Use max initially. So, the general rule, open on max, drop to medium to build. That's the that's my recommendation. That's what I'm suggesting we do right now. And as you can see, medium, okay, on Fable 5 is kind of equivalent to extra high um on Opus 4. Anthropic lower effort on Fable 5 often exceeds X high on Prime models and medium still tops every Frontier model on Frontier Code. Absolutely crazy. I've got a couple of graphs so you can see compatibility versus effort. Got some information there on the list price and what this is looking at from a on from a kind of pricing point of view and same build dialed in so you can make an informed decision. So fable for design and medium for the mileage. But that brings us on to a really cool question and now we've built these beautiful websites. What we now need to know is how to host a SEO optimizer and actually enable our clients to make edits by themselves, our team to make edits by themselves. And we're going to learn all of that by watching this video right