Fable 5.1 FINALLY Kills AI Website Slop

0:00 This is probably my favorite website I've ever built with Claude. This is the AI Automation Society site. What I think is so cool about this one is look at the layers as I start to scroll. We can see

0:08 the mountains in the background and this like treeine and they are clearly different layers and that adds a really premium feel as well as this whole laptop kind of being dynamic. Right now

0:18 we keep scrolling down and we see a little bit about AI automation society. We see the words come in. We see the words come in down here and we can flip between the classroom live calls events

0:26 and leaderboard. And as we keep scrolling, more text keeps coming in dynamically and these cards start to stack on top of each other, which I think just feels super super dynamic and

0:36 engaging. We can see the pricing section here, free community plus community, as well as our certification cohort. We see some Q&A down here or FAQ, sorry. And look at this animation where the text

0:45 sort of like locks as we switch between these different things. I think that's awesome. We see some YouTube videos and then finally the call to action down here with once again the layering comes

0:54 back in. And I just think that that is so so cool. And I know you guys are probably wondering on mobile. So here it is right here. This is me on my phone. We get the same dynamic laptop screen.

1:02 We get the same layered effect, which I think is just beautiful. We can scroll through this text. We see we get these same animations, but we click through these sections a little bit differently.

1:12 We continue to scroll down. All of this stuff comes in. The cards don't stack the same way it does on desktop, but I'm sure we could engineer that if we wanted to with just one prompt. We keep coming

1:20 through. The point I'm trying to make here is Fable 5.1 is able to take care of this on mobile as well and you get the exact same premium feel. I think that this website is beautiful. Let's

1:30 take a look at another example here. This is my website. You can see we've got the text. We've got the hero section. Those numbers were sort of like ticking up. I've got myself over here

1:38 and this is like a really neat background that I think adds depth and adds another layer, but it's not distracting. These are all clickable links. These numbers are ticking up and

1:46 we can still see consistency with the background animation. We continue to go through these things color up as I highlight. We get into this interesting like dynamic element. You can see when I

1:55 move my mouse, these move, but once again, it's not too overwhelming or distracting. I think it just feels very premium and adds some nice depth here. We have a little bit and background

2:03 information. And this links to the about page, which is um just a little bit of a bio. It's nothing too fancy at all. But anyways, we keep coming down and we have like a little bit of a photo montage.

2:13 These kind of come up as they go into screen. And then we keep coming down. see my book, Becoming AI Native. We have new YouTube videos every week. And then it pulls up um join AIS and a little

2:23 signature, which it just actually found in my um pictures on my local desktop. Now, what I also really like is that the navbar stays with you all the way through. And it also did that within the

2:34 AIS um site, which I really, really like. I don't know why. It just feels a bit more like having it locked there just feels good. Now, let me show you guys this next one, which is Glido. I

2:42 think this one is so cool because look at this little dictation bar. There's so many animations within this. You can see that it's dictating words and putting them into Slack. And this looks very

2:50 similar to the way that you can actually see me talking into my mic right now. And right here, you can see that I'm dictating with Glyo. So, super super cool. We can have the apps right here

2:58 that we already use and it pauses when I'm on it. We get these animations coming in with the holding down a key saying it messy and then it gets dictated and pasted over here. Much

3:08 cleaner. We can keep going down and seeing that we have different apps like we're seeing Glido putting this into Slack. We're seeing Glido put this into cursor. We're seeing it actually sort of

3:16 like have these animations where we can see what it would look like to use GLO in these different apps. Gmail and of course cloud code in the terminal. We have more stuff down here transcribing

3:26 over here or speaking over here as well as just like typing the difference right there. And now this is my favorite part. As we go down, which is this animation, we have the dictation and then we have

3:36 these two things that are going different ways with all of these apps. Some of these logos are obviously off, but hey, for a oneshot prompt, this is pretty solid. I like that animation,

3:44 too. And we have some stuff from us, the founders down here. Anyways, the pricing. Now, what I want to talk about is how do you actually get Fable 5.1 to do stuff like this without giving you AI

3:56 slop. Now, obviously, what I found is having things like scroll animations and having text feel more dynamic. And specifically in this video, I really found out about layering. That helps a

4:05 ton. But ultimately what I realized is that you can't just say to Fable 5.1 or any AI model, make this look professional. Make this feel premium. You really have to give it something to

4:14 work off of. So what we did in this video is I got a lot of inspiration from other websites. So for example, with this website which I just absolutely love, I found an example of a website

4:22 that I really loved and I took the elements from it that I liked. So this one is called Fora. You can see it's very similar. You can see it has hero text. It has the layers in the

4:31 background. Then when I started to scroll, I was like, "Wow, I love the layering here." So I told Fable 5.1 how to figure out how we could make a hero section that as I scroll down, there's

4:40 like four layers. There's a back mountain, there's a middle mountain, there's a laptop screen, and then there's a front layer of trees. And I basically just love that feel and I

4:49 wanted to replicate it. So I just had it make all of these separate layers that move when you scroll. Then we of course have like this text thing. I really liked how the cards here stacked. I

4:58 thought that that felt super premium. So, I looked at this website for inspiration and I told Fable 5.1 that I wanted to have mine have the same feel and I explained all the elements of this

5:06 and why I liked it and how I wanted it to use that as inspiration. Now, for my website here, there wasn't exactly a website that I took inspiration from, but instead what I did is I took

5:15 components that I really liked. So, I went to um where is it? I went to something called 21st.dev, which you guys have probably heard of before already if you've been watching me for a

5:23 while making sites. This site basically has a bunch of components that you can find and you can literally give your AI agents the prompts for these animations. So for example, this container scroll,

5:32 you can just copy prompt and then your agent can basically copy that element. So I was looking at backgrounds that I really liked here. I was looking at different gradients. I was looking at

5:41 different interactive elements and I just decided that I liked one. I'm not going to be able to find it right now, but I really liked that one that you see in the background here and I just took

5:48 it and then I started designing with it. And then I just explained to Fable that I wanted all of this text to sort of appear as it enters the screen. And then I said, "Hey, I want this to be 3D. I

5:56 want this to feel dynamic. I want, you know, all this text to come in. I want this to scroll sideways." And of course, I used my scroll craft skill, which you guys can access for completely free. It

6:05 is linked in my free school community, which is in the description. This skill has all of the design elements that you need to understand for layering, for scrolling, for, you know, text appearing

6:13 like this, for text appearing like this. It has basically all these principles inside of that skill. It's completely free. And then for GLO, what I actually did is we looked at a competitor site.

6:21 So we looked at Lemon, which is another dictation app, and I loved how it had these animations that almost give you the feel as if you're already using the product. So I basically just once again

6:29 came through here and said, "Hey, actually, for this one, what I want you to do is go to Glido. I want you to take our brand guidelines and just insert it onto a page like this." And you can see

6:38 this one was, you know, very directly just like cloning it, I would say. But that's what's so cool about Fable 5.1 is it can inspect what's going on here and it can generate you one that feels the

6:48 exact same. It even made the same sort of like it almost feels like watercolor painting in the background as you can see, but it made the same vibe. And now we just have Oh, sorry that was the

6:56 wrong app. And now we just have this that we could go ahead and, you know, push live if we wanted to. And then look at what else I did. I was like, "Okay, this is pretty cool." So I gave it an

7:04 example of a good site. And then I gave it this goal, so one shot prompt. And then I told it to build me two distinctly different but most impressive scrollcraft, which is my skill layered

7:12 sites that you could possibly build me using our skills. I told it to look at the AIS site cuz I really liked that one. I told it to grab components from 21st.dev. I told it to go to

7:21 godly.websites. This is all about giving your agent more specific prompts and inspiration. If I go to actually godly websites, you can see godly.design. We can find trending sites. We can find um

7:33 logos. We can find hero sections. We can give all of this kind of stuff to our AI agents for inspiration of how we want our site to look. CTAs, footers, OG images. There's so much stuff in here.

7:43 There's also another site called awards where you can literally look at websites that are winning awards for design and you can just understand what kind of feel do you want. You know, there's

7:51 different categories in here um you know technology, e-commerce, restaurant, fashion because obviously your site probably is going to convert better if it feels like it's in your niche talking

8:01 to your avatar. So, this kind of stuff helps you get inspiration much better. There's literally another site called Motion Sites that has like these jaw-dropping animated backgrounds that

8:09 you can actually go ahead and grab and just bring right into your websites. I think the one that I actually used was very similar to this one. If you, as you can see, if I put this into a new page,

8:19 this one is just kind of like a really nice animated background. It's obviously not the same because ours is sort of interactive, but this is also a really cool feel to have in the background of

8:28 your hero section. Okay. Okay. So then what I did is I gave it this /goal prompt and I said, "Hey, I need you to build me two distinctly different but most impressive scrollcraft, which is my

8:36 skill type of sites that you could using these skills, using layering, looking at these components for inspiration, right? Like godly websites, 21st.dev, looking at all this type of stuff." I told her

8:48 it could generate the assets that it needed. It could use key, it could use Higsfield, it can use whatever it wants, but I need it to be subtle but premium. And I just said, "Go make me these

8:56 sites." So let's take a look at what it actually built. So, this first one's called Ferna, fresh herbs without the window sill. You can already see right away from the beginning, we have

9:04 layering. We can literally tell that this plant PNG as well as I think even this leaf in the background and these leaves, they're all on different planes. And the background image is on a

9:14 different layer as well. So, that gives it a really nice immersive feel. We can see the text comes through right here. This text pops through. This text fades in. These cards stack, which I think

9:23 looks amazing. We can see right here we have a little scroll video now where this literally grows over time and we can go backwards. I like how this feels. Once again, we get more layering. You

9:33 can see the plants in the background are moving to the left as well, but not at the same rate. And then finally, we end off with this video where the light basically turns on and that is the site.

9:42 That was a oneshot prompt with Scrollcraft. Okay. And then the second one it made, this one is called Lowkey. It's a keyboard. Let me just refresh this. So we see the text comes in like

9:51 that. We can see there's a little animation here. It looks like there was like some of the keys were being pressed. If you watch right here, yep, they look like they're being pressed. We

9:58 can keep scrolling and now we get more elements of layering because the background is moving as well as the actual keyboard. Now, this is something I don't like. You can see there's like a

10:06 hard cut right here. So, on more of a verification loop and on more of like a iteration, it would probably we'd be able to fix that, but this was a oneshot prompt. Anyways, text comes down here.

10:16 Text comes through here. I like how it comes in like that. Same thing. Now, open it. The keyboard keeps coming down. And now the keyboard like comes out, right? So it literally like takes it

10:25 apart itself and we can see inside of it. And then we have different colors to pick from. The desk is still scrolling down this whole time. The keyboard comes back and now we could also have our call

10:34 to action down here. So all things considered, one shot prompts these two sites. I think that it gives you a really good base to work from. So after showing you guys those examples and

10:42 talking about all that, here's what I think is the most important that you need to actually be doing when you're building websites. And all of these things that I'm going to talk about are

10:49 baked into my scroll craft skill, which you can grab, like I said, in my free school community. So, the first thing that I think is really important is to actually have some sort of brand

10:57 guidelines, right? You want this to feel consistent as far as, you know, your logo, your colors, things like that. From there, I think that you need to give it your three Ps, which is what I

11:07 call sort of like the AI monetization readiness assessment. Meaning, does your business have a pain that you're solving? Do you have a person that you're solving that pain for? And do you

11:16 have a promise of how your product or service is solving that pain? Promising how it solves that pain for that specific person. Now, from there, what I think you need is you need some sort of

11:25 scroll um lock. And maybe lock wasn't the right word, but you need responsiveness. You need the user to feel that they're controlling the site because as they scroll, they're getting

11:36 some sort of feedback. And it doesn't have to be anything super super flashy. But like even just having the text go like this, even just having, you know, words appear. And I have to refresh this

11:47 because they already did. Even having the words appear like this, just something that subtle, I think makes the website feel so much more premium because some feedback I got on my last

11:55 video was like, "Oh, I hate these 3D world where I scroll and it makes me fly through." And I get that. I get that. It depends on the business. It depends on the three Ps like I just said. But I do

12:06 think that having a scroll element in something is just really, really important. Anyways, from there, I think that you need inspiration. I think it's very hard to go into a website design

12:16 project and just tell it what you want and expect that it's going to come back and not feel like AI slot because unless you're using some sort of skill or unless you're building off of some sort

12:24 of template, it's probably going to feel that way because AI is AI. So, inspiration can come in the form of looking at other websites and finding out what you like about it, like the

12:33 layering. I think the layering is super important like that. Maybe it's the way that the pricing section feels. Maybe it's the way that the background is like interactive and responsive to the mouse.

12:42 Whatever it is, you need at least a little bit of inspiration. And what's cool about something like 21st.dev is you can get inspiration on your borders. You can get inspiration on your actual

12:51 buttons. This one literally has like a section for features. It has a section for FAQs. You can get inspiration on how you want every single like little element of your site to look, even like

13:01 the text, all of the stuff. And then that's basically part five, which is understanding what components can you grab that already exist somewhere that you can use in order to make your site

13:10 feel more dynamic and feel more branded. And then really the most important thing at the end of the day besides actually no number six, you need to make sure it works on mobile too. It has to look good

13:18 on mobile. So many people are looking you up on mobile, clicking links on mobile. Make sure it's verified on mobile. Claude can do that well. Anyways, the last thing ties into that,

13:26 which is verification. Now, by this I mean have it screenshot everything, especially when you're doing scroll animations. have it screenshot frame by frame or pixel by pixel as it's, you

13:35 know, scrolling down. That way, it's essentially watching a video of how you will experience it. So, if you don't have a verification loop, if it's not taking screenshots and saying, "Oh, wow.

13:43 This looks bad. This looks out of bounds. This color's off. Let me fix that." Then what are you doing? Now, the last part of this video was I was going to run through a bunch of these other

13:50 experiments I did between Fable 5 and Fable 5.1. I had it build a bunch of different sites for me. As you can see, I did like, you know, these perk form sites right here. This one was Fable

14:00 5.1. This one was Fable 5. This one was Fable 5. This one was Fable 5.1. They just felt very similar. Like none of them clearly blew the other one out of the water. They were very similar

14:09 because they had the same prompts, the same assets, the same brand brand guidelines, excuse me. And they use the same skill. They all use Scrollcraft. There was a few minor minor differences,

14:18 but not enough for me to be like, "Wow, Fable 5.1 crushes Fable 5. Those seven things that I just talked about are more important than explicitly using which model." But here's what's interesting.

14:27 Around the board, Fable 5.1 was actually cheaper. Here's an example. Fable 5.1 was 1824. Fable 5 was 2022. Here's another one where Fable 5.1 was 1452. Fable 5 was 1467. So, that one's

14:40 actually pretty similar. Here's another one where Fable 5.1 was 1283 and Fable 5 was 2164. Here's another one where Fable 5.1 was 1118 and Fable 5 was 1737. So if you guys remember in the release blog

14:53 they basically said enthropic said hey you know Fable 5 is going to be 25% more efficient which is cheaper on some like you know knowledge work and and regular type of work and then on heavy agentic

15:02 coding and multistep fable 5 might be as much as 45% cheaper or sorry fable 5.1 might be as much as 45% cheaper than fable 5 because of how much more efficient it is with its tokens and so

15:13 far that actually is what I've seen out of all these experiments and all the knowledge work that I've done you know all of the experiments and websites that you guys saw me build but then also a

15:21 bunch of testing that I've done on my own that I haven't showed you guys, I've only used about 45% of my weekly Fable limit, which yes, I know a lot of you guys might think like, oh, that's a lot

15:28 for like, you know, 5 to 6 hours of work, but I've blown through Fable weekly limit in like 1 to two hours before just using Fable 5, driving work, building some things, building some

15:39 websites. I was actually really surprised that I didn't crush through my weekly Fable limit already, just based on how much I've been sitting here using it for the past multiple hours. So

15:47 anyways guys, I was going to break that down more, but honestly I thought that it would just get a little bit boring and feel repetitive. So I just wanted to bring you guys those results. Overall,

15:53 Fable 5.1 feels a little bit faster and a little bit cheaper. But that is going to do it for today. Don't forget to go into my free school community linked in the description if you want that scroll

16:00 craft skill because it's what I'm constantly updating as I'm learning more about AI design. So if you enjoyed the video or you learn something new, please give it a like. It helps me out a ton.

16:08 And as always, I appreciate you guys making it to the end of the video and I will see you all in the next one. Thanks everyone.