Claude Fable 5.1 - Huge Upgrade in App and Web Design

0:00 Fable 5.1 is out and it now can build beautiful fully animated websites. And not only that, it gives you better quality, but it also uses less tokens. And I created all this with just one

0:10 prompt. So in this video, I'm going to show you exactly how to do that. And I'm going to build three different things. A fully functional web application, an animated website, and a fun game

0:19 simulation to really test out the model. And I'm actually going to use the same exact prompt to test both models so you can see the differences. And I'm also going to share a few tricks to make your

0:27 output 10 times better. Let's dive in. Now, before I show you what I've built, I want to quickly go through what this Fable 5.1 release is about. I don't want to spend too much time on the benchmarks

0:36 here because I want to put this to the test and see if it actually makes a difference for the things that we actually use it for. Now, I've been using Fable 5 for most of the apps that

0:43 I'm building. And I got to say, it's already more than capable for building apps and websites, but 5.1 is just a step above in terms of quality of output. But not only that, you get a

0:53 bump in quality, but it also costs less. you're going to see that Fable 5.1 will cost an estimated 25% less than Fable 5 for typical workloads. Now, this is not because the model is more efficient, but

1:04 they're actually reducing their pricing on the cache reads. And to put it simply, if you are having a long back and forth in a long continuous chat, it's going to cost you less and they're

1:13 basically discounting the cost of rereading all the inputs by 95% or something like this. Now, this is not going to matter as much if you are on the monthly subscription. the monthly

1:22 price does not change cuz you're just going to be bound by your usage limit which resets every 5 hours. But of course with less token usage, the more that you're going to get with your

1:30 subscription. And I just want to show you real quick on what people have been building with Fable 5.1 here. So this is a simulation game and you can see how detailed this can get with apparently

1:39 just three prompts. And someone just built a GTA style game as well here with so much detail on the buildings and the trees and just look at the shape of the cars here. It's not one of those boxes

1:49 that you get, but these are actual cars, vans, and trucks. So, that is pretty cool. And we also have this guy who used Fable 5.1 to generate a cinematic walkthrough of a house. And I think this

2:00 looks realistic with all the shadowing. And you can just look at the detail on the reflection on the windows as well. I think this looks pretty sick. All right, so let's get to the apps that I built.

2:09 So, the first app that I built was this pizza ordering system. And I got this idea from this user in Dribble. And it's not just a simple food ordering system, but you can actually customize your

2:18 pizza. You can add more toppings, add some ingredients. So there's some logic involved there. So I just took this and fed it to Claude as a reference. And I actually made it a bit harder cuz I

2:28 asked it to make this more interactive. So as I add more toppings, I want to see the toppings displayed on the pizza. So I went to clot and I gave it this prompt here. It is actually a very simple

2:39 prompt. What I basically gave it was this URL of the dribble website and then I did slashdesign to invoke the claw design skill and I said I want you to rebuild this pizza ordering system. Come

2:50 up with your own name but use their design elements to build our website. And I did ask it to change the green button to red. So I want this button here to change to red. And I want to see

3:00 three different pizza templates like a Hawaiian diavola and bianca. I want to be able to select two other toppings for each template. And the image should change according to the topping

3:09 selected. and also said use Hicksfield MCP to generate any images because it needs to generate the image of the pizza and all these ingredients. Now, I'm going to make this prompt available in

3:18 the description below. So, you can just grab it. You want to recreate your own website, you can do that. But what I did is I took this same exact prompt and ask Fable 5 to also recreate the same

3:27 website. And for the effort level, I put it as high. And I do think this is the sweet spot cuz I can always go ultra code or max, but that's going to be overkill. And it's not something that we

3:38 actually use on a daily basis. So I think this is kind of the sweet spot. And to make it fair, I use this effort level for all my tests today. And here is what Fable 5.1 gave me. So, and this

3:50 is, by the way, just the first version. I didn't ask it to tweak anything. And I think this looks amazing. If you want to do a quick comparison with the reference image, I think this looks actually a lot

3:59 better. And now I can choose the pizza templates. And you've got the toppings here as well where if I click on add proushut here, it will actually add the topping on the actual pizza. So that is

4:11 cool. And if I add maybe spinach also gave me that spinach as well. And it updated the price. And I can select the size as well. And let's check Hawaiian. Can I add ham? Yep. Add fresh rocket.

4:24 That is cool. And if I click add to cart, it goes to the cart. And I can probably order this if I want to. Just going to fill this out real quick. And then pay on delivery. Let's place order.

4:36 There you go. And I can also track my order. All right. So, that's good. I mean, design-wise, I feel like this is really good. But now, let's see what Fable 5 actually did. All right. So,

4:44 this is Fable 5, and I think it's okay. But to be honest, I really don't like the empty space in the middle here. So, if I go back to Fable 5.1 again, you can see the difference, right? This is a bit

4:55 nicer to look at with all the colors here and everything is just spaced out nicely. And if I go to Fable 5, you got this huge space here and the pizza options are on the left side here. But

5:05 we do have that interactive uh image here. Can I add olives? Yep. So, the functionality works, but I think the design is a bit lacking here. And I would argue that this overlay for the

5:17 topping here could be bigger. Cuz if I go back to what Fable 5.1 gave me, this is much better. It's not too small or too big. is just right and everything is very clear and even the buttons are

5:28 nicely done. So if you compare the buttons here with this one, you can see that this one feels more premium. But let's check the functionality of this add to cart check out. Okay, let's place

5:39 order. All right, so I think the functionality works, but I think design-wise I would definitely give it to Fable 5.1, especially with this animation that it gave me, which makes

5:47 the whole thing more premium. All right, so let's move on to the second thing that I built. Quick ad break from our sponsor, Omniscent. If you're running a small business right now, you know how

5:54 important it is to have an email list. It's a direct line to your audience. But actually managing that email list can be timeconuming. Even for my own newsletter, I have to keep checking my

6:03 open rates, figure out how to analyze all the data. Plus, I still have to find time to write the content. Well, Omnisan just fixed all of that and help you manage everything on one single

6:13 platform. And what's interesting is that they just released Namcp connector for claude and CHBT, which means that you can manage your entire email operation directly from the EI tool that you use

6:23 every day. So instead of going through a separate dashboard trying to figure things out yourself, you can just go to Claude and ask, "Hey, how did my email campaigns perform last month?" And

6:30 because Claude is connected to Omniscent, it knows exactly how many emails were sent, the open rate, the click rate, and how much revenue you made. Or you can ask, "Which automation

6:37 is making me the most money?" And it now gives you all the data without you having to look it up yourself. Or you can also ask, "Are my subscribers growing or dropping off?" And it gives

6:45 you a full snapshot of what's been happening with your subscribers and even gives you recommendations. And if you go to their website, you can even grab all these prompts that you can immediately

6:53 use to see some of the interesting things that you can do with this connection. And by the way, there's already 150,000 brands that use Omnisand. And even if you're on another

7:00 platform, they'll help you migrate everything in just about 5 days. And if you guys want to try this out, you want to click the link in the description below and use code Jason Lee and you'll

7:08 get 30% off for the first 3 months. Thanks again Omnisan for sponsoring this video. Now back to the content. All right, so this is basically a website that I found on awards.com and basically

7:18 I want to ask Fable to clone this website but change the product. But let me show you how cool this website really is. So this product here is basically like a audio mixer something like this.

7:28 And if I scroll down the background kind of moves behind it and if I scroll down more the product actually moves away and it reveals this text on the left side here which looks really clean and it

7:38 moves back to the center. And then if I scroll down more, it will actually dock to the top of the page here. This text also slowly appears like that. And we get more of that animation. And if I

7:50 scroll more, you will see some testimonials here. And then the product comes back to the center. And then that is the button of the website there. So I want to replicate this website, but I

8:00 want to change the product and replace it with this mechanical keyboard here, which looks really cool. So, I want to take the same design, all the UI elements here, the colors, but I want to

8:10 adapt it for this product. So, instead of this audio mixer, I want this to be a keyboard. Now, this is a test that will show if Fable 5.1 is able to understand the user interface here, how the

8:22 scrolling works and everything like that. And again, I'm going to give Fable 5 and Fable 5.1 the same exact prompt, and I will show you the results. So, really quick on the prompt. So I just

8:31 gave it the URL of this website here and I said take reference from this website and design a landing page for the new keyboard. I'm attaching an image of the keyboard and also a link to the actual

8:41 page which is this URL here. And by the way I saved that image of the keyboard inside of this folder. And I want you to use the design theme from Midlife Engineering to redesign the landing page

8:50 just for this keyboard. And again use Hickfield MCP to fix the image of the keyboard cuz you see that this keyboard is shot at an angle here. But what we want is something that is kind of like a

8:59 top down shot. And I say I don't want any animation on the keyboard. I just want the scrolling effect of the reference website to be applied to our website. Same font, same color palette.

9:07 Make sure that you also replace the copy of this website here with the details of the product and put it on our website. And here is what Fable 5.1 produced for us. So I think this looks really good.

9:18 I've got the keyboard in the center here and then it actually moves away and then reveals this scrolling text here. Comes back in the center. And if I scroll down more, we've got this scrolling thing

9:29 here. And everything is the same, including the colors. And if I scroll down more, and actually put the keyboard docked on the top here. So that was nice. And it also gave me the

9:42 testimonials here. And when you look closely, this is actually an actual review from the Nui website. So it took the actual reviews from that website and also the profile photos as well. So that

9:51 was the extra step that it took, which is nice. And I don't see a flaw here. And then this is the footer which is also looks really good. And the scrolling animation is just smooth. I

10:01 don't have any issues here. And let's now take a look at what Fable 5 gave me. All right. So this is Fable 5. So first of all, it didn't get the orientation of the keyboard right. Or maybe it thought

10:11 that this looks better. And let's scroll down. Okay. So it did that animation. Okay. So it is pretty similar. But now the keyboard is in full view which is not exactly the same like this one. But

10:24 let's move on. So if I scroll down, I think all of these are actually not bad. And this is actually quite nice. Even though this is not actually on the original website, it's not a bad design

10:34 by any means, but if the task was to clone the original website, I think 5.1 did a much better job. And if you really pay attention to the details here, it actually took the same exact logo with

10:45 the orange with a white dot here. So that is this one. But on the one that Fable 5 designed is just an orange dot. And if you look closely here to the reviews, you can actually see that. So,

10:56 it didn't populate the photos here, but Fable 5.1 took that extra step and actually do that for us, but not a dealbreaker. You can always add this later on, right? And in terms of the

11:05 hero section, I actually like the 1x 5.1 better. And this is Fable 5. I think this looks a lot cleaner. You have this extra text here that this one does not have. And also, I like this uh button

11:18 here for people who want to make a purchase. So, if I had to give a score, I would probably give this to 5.1 for that extra polish. Now, for the third test, I actually asked it to create a

11:28 snowboarding game, and I just gave it this reference from the app store. And this time, my prompt is even simpler. So, I wanted it to just give me its best shot, but I gave it one reference image

11:38 here. So, it has some design direction of what I want the visuals to look like. And this is what Fable 5.1 was able to come up with. So, I think that looks really cool. It's got the physics right.

11:49 I can it's pretty smooth, you know, left and right. The controls are correct. Um, if I hit a house, then it's going to restart. Okay, cool. So, and the 3D perspective of the mountains behind it

12:01 is also quite nice. Although, you could argue that the white color here is kind of blinding. I think we can pick a different shade, but I think considering that it's just the first version, it is

12:13 super good. Now, this is what Fable 5 gave me. It's completely different. And also I feel like okay so the controls are backwards. So if I click left it actually goes right. Not sure why it's

12:26 doing that. I think that should be a simple fix. But you can just compare the quality between this one and the other one. This one is also a little bit slow. There's no way for me to go in it

12:36 faster. And look at the mountains. It's not as good as the other one. Right. If I go back to 5.1 you can see the major difference there. So with new models, I like to test it on a simulation game

12:47 like this so you can see how far or how deep the model can think and also how it handles physics and 3D rendering like this. So I think this is really good. Now my final thoughts on this. I think

12:57 that Fable 5 is already really good and very capable for most of the things that we're already doing on a daily basis. I think for most people we don't actually need a more powerful model, right? But

13:07 the key to actually getting good results like this is actually number one references. You want to give the model as much context or information as possible about what you actually have in

13:16 mind. And for websites, I like to go to places like Dribble. You can find things like animations, illustrations, web design, or you can go to this website called awards.com, a www.

13:28 And you can actually explore by category of all the websites that has actually won awards. And this is where I found this midlife engineering website. Or you can go to motions.ai here where you can

13:39 find a lot of good design inspirations. I'm not affiliated with any of these websites and you can recreate the entire website and you can see how it's actually built. And number two, I think

13:48 good designs are always based on multiple iterations. I mean, it's good to always have a very capable model to get you to about 80%, but for the remaining 20%, you need to be able to

13:56 polish it and get it over the finish line cuz I still personally believe that having that final touch by a human is going to make all the difference. Now, if you guys want to see the prompt for

14:05 the websites that we built today, I'm going to link up this page in the description below. It's totally free to get. You can copy the prompt I used to build these websites or you can even

14:13 click on the website here to see the actual website that we built. So, I hope you enjoyed this quick update. Again, I appreciate you guys watching till the end of this video. Thanks again, guys.

14:21 Uh we'll see you in the next