Fable 5.1 FINALLY Kills AI Website Slop transcript

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 the mountains in the background and this like tree line 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. We keep scrolling down and we see a little bit about AI Automation Society.

We see the words come in. We see the words coming down here and we can flip between the classroom, live calls, events, 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 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 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 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.

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. 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 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 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 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 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 I 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 of a background 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. These kind of come up as they go into screen. And then, we keep coming down, we see my book Becoming AI Native. We have new YouTube videos every week, and then it pulls up um Join AIS and a little signature, which it just actually found in my um pictures on my local desktop. Now, what I also really like is that the nav bar stays with you all the way through, and it also did that within the 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 Glydo. I 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 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 Glydo. It's super, super cool. We can have the apps right here 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 cleaner. We can keep going down and seeing that we have different apps. Like, we're seeing Glydo putting this into Slack. We're seeing Glydo put this into Cursor.

We're seeing it actually sort of like have these animations where we can see what it would look like to use Glydo in these different apps, Gmail, and of course, Cloud Code in the terminal. We have more stuff down here, transcribing 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 these two things that are going different ways with all of these apps.

Some of these logos are obviously off, but hey, for a one-shot prompt, this is pretty solid. I like that animation, 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 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 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 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 absolutely love, I found an example of a website 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 background. And 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 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 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 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 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 components that I really liked. So, I went to 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 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, 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 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 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 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 ScrollCraft skill, which you guys can access for completely free. It 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 like this, for text appearing like this. It has basically all of these principles inside of that skill. It's completely free. And then for Glido, what I actually did is we looked at a competitor site. 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 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, 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 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 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 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 sites that you could possibly build me using our skills. I told it to look at the AIS site cuz I really like that one. I told it to grab components from 21st.dev. I told it to go to 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, 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 sites to look, CTAs, footers, OG images. There's so much stuff in here. 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 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 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 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, 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 your hero section. Okay, so then what I did is I gave it the {slash} gold prompt and I said, "Hey, I need you to build me two distinctly different but most impressive scroll craft which is my 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 that it could generate the assets that it needed. It could use key, it could use Higgsfield, it could use whatever it wants, but I need it to be subtle but premium and I just said, "Go make me these sites." So, let's take a look at what it actually built. So, this first one's called Ferna. Fresh herbs without the windowsill. You can already see right away from the beginning we have 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 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 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 can see the plants in the background are are 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. That was a one-shot prompt with ScrollCraft. Okay, and then the second one it made, this one is called low-key. It's a keyboard. Let me just refresh this so we see the text comes in like 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 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 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 is a one-shot prompt.

Anyways, text comes down here. 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 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 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 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 baked into my ScrollCraft 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 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 P's, which is what I 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 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 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 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 because I 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 video was like, "Oh, I hate this 3D world where I scroll and it makes me fly and I get that. I get that. It depends on the business. It depends on the three P's like I just said. But I do 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 project and just tell it what you want and expect that it's going to come back and not feel like AI slop because unless you're using some sort of skill or unless you're building off of some sort 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 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. 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 buttons. This one literally has like a section for FAQs.

You can get inspiration on how you want every single like little element of your site to look. Even like the text, all of this 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 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 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 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 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, 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 experiments I did between Fable 5 and Fable 5.1. I had to 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 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 because they had the same prompts, the same assets, the same brand guidelines, excuse me, and they used the same skill. They all used ScrollCraft. There was a few minor minor differences, 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. 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 was 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, you guys remember, in the release blog, they basically said Anthropic 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 coding and multi-step, 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 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 experience and websites that you guys saw me build, but then also a 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 for like, you know, 5 to 6 hours of work, but I've blown through Fable weekly limit in like 1 to 2 hours before just using Fable 5, driving work, building some things, building some 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, 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, 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 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 learned something new, please give it a like. It helps me out a ton. 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.