Every Level of Claude Fable 5 Websites Explained

Claude code builds beautiful websites. However, 95% of them are complete garbage. And that's not your fault. It's because Claude doesn't have the correct skills or knowledge. That's like having Mozart with no piano. So, in this video, I'll cover the seven levels of building beautiful Claude code websites. How to make them look stunning. [music] How to make them look amazing every time. The huge mistakes that you need to avoid. And exactly how to progress to the next level so you get a simple replicable system that can build you beautiful websites even if you have never touched this before. And if you're new, my name is Jack. I built and sold my last tech startup with a gargantillian amount of customers. And now I'm building 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 have straight in. [music] So, let's go through every single level of Claude code websites you need to progress to the top. And when you reach level seven in this video, you're going to be able to build Claude code websites like nobody else. It's definitely going to be worth your time investment. I'm going to share stuff that you probably never seen before. Now, here's the thing. Most websites themselves don't look great, especially ones built with Claude. If they don't use and pass the systems that I show you inside this video. I've to built so many of them. I've sold them. This is the stuff that's working right now. Now, we have seven levels. Each is worth more than the last. The big they get better the further they go up. So, they're stronger principles. They just keep compounding. But we have to start with the foundations. And what is that? The foundation is level one. Which effectively is what we call the grab and go. Basically, this user heads over to Claude and he treats it like a chatbot. So, they'll say something like, "Hey there, Claude. I want you to build for me a simple website or just a nice looking website that's cool about iPhones that are yellow. Build me one of those websites." Okay, they just come over there. Yeah, they say, "Claude, build me a website, please." And the issue with this is that it's basically using Claude like a chatbot. The design quality is like three out of a hundred. This is just like grabbing a designer to renovate one of your rooms in your house and saying, "Hey, make the room look nice." And most people use Claude this way, but that's completely okay because this is only level one. And just like that, we get the very first website. As you can see, it's got a floating iPhone. Not too much happening in terms of creativity. It's very, very kind of simple. You can see it's kind of classic AI website design feel to it. It's done it. It's basic. It would kind of do the job, but it's probably the most basic thing possible. And this is done purely with Opus 4.8. Level five is a strong, but this is a very, very basic first draft. But we can radically improve the quality of this by moving on to level two. And this is how you solve level one. You solve level two by giving it screenshots and references. Imagine, for example, having a designer, but instead of saying, "Hey, make it look nice." Instead, we get a beautiful sheet of paper and we say, "Hey, I saw this apartment across the street and I love what they did here with the garden. Could we replicate that?" And here's a few other examples. Effectively, what we do here is for level two user of Claude Code websites, I'm providing screenshots and references to help Claude make that design way better. They're going to show, not tell. Remember they say an image speaks a thousand words? Well, it's certainly true when it comes to Claude Code design as well, I must be honest. Now, your design quality of this level is about 10 out of 100. But wait till you see how much of a difference this actually makes. So, if you come down here and look at this, there's a few different websites you can go ahead and check here. Let's pull them up. We've got Godly, Landbook, Awards, and Dribbble. I'm going to put a link for everything I cover in this video down below in the description so you can use the assets. So, look, you've got godly.io, which is fantastic. And look at this. Like, let's say I look at these gorgeous websites. You can pick one from here. You've got Landbook, which is fantastic. We can search and find different beautiful examples, beautiful videos. These are websites that already look amazing. And we've got these award-winning websites. These are fantastic resources if you want a grab-and-go, find me something like this. Look, if I get if I grab Glido and like dashboard, okay? And I search for dashboards. Now, I'm going to get all these beautiful references of dashboards. That's how freaking cool this is. So, for example, I might really like the work of Halo Lab, right? I can click on this and I can mood board and get inspiration. So, I can copy the image, come back over to Claude like so, and come down to the chat and drop that one in there. Beautiful. And again, you can find different ideas, different things that you like, and it you know, it looks really cool. Grab inspiration and drop it in mood board. Then you can say to Claude, for example, "Hey there, I'd like you to update the website using this image as a reference style for how I'd like the website to look." And as you can see, what Claude's done now is actually looked at the reference image and started to build it on there. Now, you'd never give this website. Of course, you wouldn't. But the idea here is that people at level two are now starting to bring in and use images to actually influence the design architecture of their websites. And that takes us on to one of the biggest upgrades that you're going to have in the early levels, and it is going to be a game changer for you, and that is what we call design skills. So, you think about our design, right? We have got him in a room, which is fantastic. We have given him images to help explain, "Hey, this is the kind of thing that I want to." And we've even given him reference designs. Skills comes down to how good is the artist himself. Oh, is he eating crayons in the corner, or is he creating arts of work, you know, works of art that will be in museums for decades? And you're going to see just how much difference skills mean. Now, if you don't know, skills are Think of them as prepackaged sets of instructions that have been designed by basically design nerds or experts or teams that instruct our wonderful Mozart how to play the piano. It's kind of explained, "This is exactly how you create great design. This is what a website should look like. This is what a website should not look like." It explains all this difference. So, we have the raw intelligence, plus these really cool instructions. Now, what skills do we need to look at? Things like this. Again, I'm going to put a link down below for all of these. So, for example, let's open these up and I'll show you what they look like. So, front end design, we've got this one. Now, if you're not familiar, essentially, these are managed on a place called GitHub. GitHub is basically just fancy speak for place we store files. And a lot of design nerds or people who care about design have sat down and said, "Look, let's actually iterate, find out what works, and codify it into a skill." And look at this, almost 100,000 stars. Doesn't necessarily mean it's amazing, but it's really good. The UI/UX Pro Max skill is freaking awesome. Look at this, goes through loads of stuff, has loads of examples of 67 UI styles, 161 color palettes, font pairings, loads of stuff that make design amazing. And all you're going to do is come down, click on this code button, click on copy, head over to Cloud Code and say, "Hey, I want to go ahead, check out this skill, then download it, and add it to your skills." We're going to be using this when we build websites, okay? And all you can do is literally drop in the URL, come back over, and check out another one here. And essentially, you can go down all the different design skills. Get Cloud to check it out to make sure it's good and decent. Here's another great one of all, this is Shad in UI. This is a really cool system. And when you do that, Cloud will actually go over to that repository, grab the information, and turn it into a skill that you can later activate via Cloud Code. So, then, for example, if we run the test again, I can say, "Hey there, I'd like to use all the best skills and design principles to build me a beautiful website selling yellow iPhones." And I might just say, "Make sure that using all relevant skills that I've given you for building beautiful design." Okay, which is great. And one other skill I'm going to give it is one called power design. I did a lot of deep research on like, "What makes design amazing?" Uh this is for slides, but it applies to websites as well. So, I'm just going to copy this and give it in here as well, and drop this one in. And then, for good measure, why don't you go ahead and also give it a little bit of a screenshot so you can get a good idea of what great design looks like. There we go, copy this bad boy like so, come down, click copy, and then drop that into chat, and send Cloud on its way. And then, just like that, we now have the website from level three. Now, immediately, you can tell the difference between this and what we had on level one. We've even got the Apple logo, we've got the centralized color palette down there, we've got a font that looks a little bit more like a phone. It's floating up and down. It could be a lot better. I'd want a lot more in here. There's some stuff I would definitely change, but you can see that it's going in the right direction. It's even got this thing here from the Apple website, which is exactly the thing we're looking for. And as we scroll the website, you get to see it's a step up and it's got this Bento Box style step in the right direction, but not perfect. But, this I do think looks cool. Daybreak Canary Sunshine Honey Amber, different shades of yellow, bridge rock and roll, and we can buy our phones there. And that takes us nicely onto level four, where things seriously start to take up a step in terms of quality. But, if all this sounds like I'm speaking Spanish, I'm going to put a link down below for the full Hermes Agentic Masterclass and the full Clo Code Agentic Masterclass. It takes you through everything from foundation setup. If you've never used Clo before, this is the most comprehensive system that I've ever built for this topic. I I show you website stuff I've never shown anywhere else. Learn to set everything up, power systems, memory design systems, and even monetization. I'll put a link down below cuz you can grab that as well as the full Clo Code and Hermes Operating System. Just a link down below so you can go ahead and grab that. Now, it's important to bear in mind that when we really want to take a website to a new level, we have to think about things more than text and graphics. We have to think about image and video. And the best way to think about it in this instance is it's giving our wonderful artist tools. It's giving them the ability to add new things into an environment that they just simply did not have before. One of the tools that's caught my eye recently is OpenArt. Now, let me show you a couple of things we can do here. So, obviously, we can generate things like images, right? So, let's say in our website environment, we actually want to go ahead and create an iPhone. So, I'll explain why we're using OpenArt in a second, but let me just go ahead and build something so you can create a model. Click on Nanabanana 2. Let's come down here and I'm going to say something like a beautiful yellow iPhone. Okay, that's cool. And then let's just pick actually the ratio. So, the ratio I'm going to go down here, guys. Let's get a little bit of a wide shot. Let's do 21 by 9. Let's just grab this one here and we're going to put that in 2K. No need for 4K, 1K is way too low. Okay, beautiful. Come down here. Now, I've gone ahead and clicked two separate images I want to create. Usually, you want to do two to four. Now, you can build images directly in the editor itself. You can also connect Claude code to image generators via MCP, which is a real unlock for level four because essentially you can be things like, "Hey, go build me this website and generate for me beautiful images that will slot in and be relevant." And what Claude will do programmatically once you connect it is build out all those images for you. So, you just say it once and you get the programmatic creation of all these incredible assets. So, now we have this. One thing I might do is a little adjustment to this actually as I think I'm going to probably remove it and get a white background. So, let's go ahead and just adjust this and then we can play around with it, get ones that we like, and you can literally copy the image and drop it in. Now, one of the things about very good websites. I've got a couple of examples that we built in previous videos that just shows you how epic this can be. I mean, look at that. This is the kind of thing you can build with image and video with Claude code websites. Again, we have this one here. I'm just going to unmute this one cuz it's got a bit of background noise. We have this rocket website which was done with Fable 5 and we have this one here as well which is done with the model that we use. Funny story but I just went for dinner and my in the little hour that I was away from my desktop, I came back. Fable 5 I said, "Where's my phone right now?" I was like, literally it's crazy. So, I'm going to show you Fable 5 as well integrated in this. These principles apply regardless of the model. The model is just a a multiplier. It's an accelerate to it. Just like this rocket that's accelerating quickly into space. Now, one of the reasons that I really like OpenArt specifically as I want to draw your attention to the video because when you look at these websites, right? Sometimes, okay, it's going to be a video like I've done loads of animated videos on websites just like this for example. So, let's say for example we really like the look of this iPhone. Well, check this out. On the left-hand side, if you come over to video, what we could do is actually create a video with this iPhone in it. Now, if I come over to the homepage on OpenArt, you can see this really cool interface. We can pick anything we want to, replace the background, edit video, lip sync, VFX, smart shot, motion sync, whatever we want to do. I'm going to go ahead and click on video which is really cool. And let's say that I actually want to go ahead and pick a gray model. Let's use the Kling. Let's go ahead and choose Sedan 2.0. And then for the start frame, let's go ahead and grab this one like so and just say, "This is a product shot. Please rotate this phone for the video." All right, very very freaking cool. Come down, we're going to have the enhanced prompt on and then let's get a couple different variations. And again, you can put the outputs down here and the right dimensions that you want to. So, we're going to want this to be 16 by 9. You can pick the duration and also the size. And since I also want this to end on the same thing, let's actually have this one here as the end frame also, which is great. And then click on generate. And look at this, guys. It's now completed. If I just hover over this, for example, >> [music] >> literally perfect. Like the fact that it lands in the exact same location, I know sounds really obvious, but you would not believe usually how much faffery that takes. It is cheap faff activity, I'm telling you. And we've got two versions of it. It did it flawlessly and this could all be done directly with Claude for anything that we're building. So, then OpenArt itself has got some really cool stuff. You can direct loads of models if you want. User interface is freaking beautiful and here's a good sub comparison for brands that you may be familiar with in terms of what you can get in terms of image generation. Very cool. Now, this takes us very nicely onto level five, which is a hack that most people don't know and it is going to seriously level up the quality of any website. And this is called UI Snapping. So, the way that I want you to think about this, okay, is imagine we have our designer over here. We've got a a jeweler and he can go into any design environment that we have, any building you want to. And he can literally say, "Hey, I love the look of that fireplace." And he can just pick up the fireplace and copy and paste it in your environment. It is an exact copy of his own thing. And essentially, there are these libraries on the internet that have built these these sort of lines of code that are like basically publicly available and they share them online for others to use, which means that we don't need to re-engineer the wheel. We don't need to re-engineer this velvet design asset or this jar or this thing on the table. We can literally component, copy and paste and it's freaking beautiful. So, let's open them and check them out. We've got 21st.dev, Codepen, Magic UI, and Mobbin. Very, very, very freaking cool. So, 21st.dev, essentially you can come down and find all of these gorgeous things. So, let's come down and have a look at latest components. What I always recommend that you do, by the way, is you come to the left-hand side. You're looking for, essentially, if you come down to featured, these are usually some of the best ones. So, you see this toolbar, very cool. Side button, very cool. You can search for anything that you want to. These balloons are very cool. Say, for example, you want to have a Let's have a party, and you want these balloons to pop up. We could do that. Codepen is excellent. There's so many places you can get Codepen. Got Magic UI, again, so many great design libraries. And also Mobbin. Again, I'll put all the links so you can go ahead and grab them and start having a wonderful design. I love this website. This is really fresh. But, let's say, as for instance, you want to come over, you can grab this one. Launch balloons. All I'm going to do, literally, is come down to copy code. And head over to Claude. So, we can come back over to Claude and say, "Hey there, I'd like you to integrate this balloons feature at the bottom of the page." Integrate this, exactly. And then, literally, come down and just give it the actual URL itself. And then, Claude can actually integrate that into the website. Guys, and look at this. It's just added in these balloons. Scroll up. And it wants to skip. I think that is a really cool feature. But, the truth is, as cool as it is, none of it means anything if you don't have level six down. And that is data. Now, websites exist for a reason, right? They exist to create a customer, or to educate somebody on a specific thing. Usually, because we want them to take some kind of action. So, a beautiful website that does not actually turn viewers into buyers, it is like having a Ferrari with no engine. Looks freaking amazing on the front of the house, but doesn't really do anything, okay? So, the idea here is that we want to be able to actually find a data. And the cool news is that all the data to create a website that wins and converts is already out there. You just need to know how to find it. Now, to do this, I use a tool called Fire Crawl, which is the best scraper I found for getting information from the internet. It is literally ridiculous. It'll grab for you logos, typography, anything you could possibly imagine. Why is that relevant? Well, I'll give you an example. Hey there, I'd like to go ahead and to apple.com and use my Firecrawl integration. Let's go ahead and grab me the brand identity and then just upgrade this website in accordance with that. And literally, Firecrawl can go ahead and extract brand identities from anything, meaning that you can understand the color scheme and the different fonts that are used by specific websites. But what's even cooler than that is the kind of prompt that you can give it when you connect it with Claude. For example, I could say, "Hey there, I'm launching a roofing business in Leeds in the UK. What I would love you to do is go online and find for me the 10 most successful roofing businesses in London and I want you to find me 10 ones that are not doing very well. And I want you to do for me comprehensive research in terms of what do the winners have that the losers do not? What do they have in common? What is the order of their website? Do they all have an image and then a CTA? What is the CTA? How are they so successful? And you also need to come up with a scoring matrix to determine what a great website is and isn't. The output I would like from you at the end of this is a clear blueprint that I can pass to another model to actually create for me a winning formula for this website. Everything must be evidenced and if required, I also want you to cross-validate this with a different model. Make sure that you use the Firecrawl MCP to do that research. Now, I've done full videos on this breaking down this exact process. I'll put a link on screen if you want to go very deep on this, but literally, you just say this thing to Claude and it uses it and it brings data, guys. And I'm telling you right now, having had businesses that I think we had like 50,000 unique visitors every single month, it was very cool. We You literally need to understand what converts and what doesn't. And level six websites are the ones that are actually using external data, not copying, but looking at external data to build those websites out. And actually, guys, I'm just going to head into Glide on to copy this for you and add this to this resource pack. So, if you do want to get a prompt like that, you can as well. I'll include that in the resources for you. And this takes us onto the strongest level. Now, I'm telling you, I've built so many websites. They call me Dr. Website in this town, I tell you now. The best strategy that I have found to actually create gorgeous websites that convert is to do something called design extraction. I'll explain exactly what that is. So, think of it like this. Imagine our designer, okay, has found or we have found a perfect website, on this case, a building or a room that we like in an analogy, okay? And not only, okay, do we have the tools, the skills, the foresight, the imagery, but we can actually talk to the original creator. We can talk to the architect of it. So, essentially, what this means is that Claude doesn't always understand what great design is. And sometimes we don't even understand what great design is. We can't articulate them. We, you know, not everybody has the vocabulary to explain, you know, I want ample white space. Or there should be a golden ratio between this text Like there's You can codify these rules, but it sometimes it's more difficult for you to explain. So, for example, if you land on a website like, let's use this as an example, okay? Anti-gravity Google, okay? Check out this website. So, if I open this up, in my view, this is a brilliant website, genuinely. It's one page, one thought, which is really nice. It's It's got inter- interactivity, but it doesn't distract. You scroll down, there's animations, there's video, it's really crisp, it's clear. You have these things floating around, you have the text coming down, you have anti-gravity 2.0 here. This is a beautiful, gorgeous website. But maybe you like this website. You think, you know, I've got a tech product. Uh obviously, I don't want to copy anything, but I I like this vibe. Like, how do I get a model to understand what this is? Well, the idea is that we can actually ask Claude to extract the design identity. So, like, what, you know, what are the type What's the typography? What's the colors? What are the general design rules? And I spent hours building this for the specific purpose, and it gets crazy results. For example, even these websites here, this was built like like I'd build it in various different ways, but this whole thing here and here was built in the same way. I mean, look at this. This is gorgeous. This is fantastic. You know, it's subtle. It's got subtleties. It just understands certain design principles. So, to do this, I'm just going to grab a skill from my community that I built specifically for this under every AI automation. And on the left-hand side, I've got my building website sites blueprint. I'm going to come down and grab my design blueprint extractor. Now, if you don't have this, the easiest way to do this is literally explain what I just explained to you to Claude saying, "Hey, I want you to be able to create a blueprint and verify this so that I can do anything I need to." And then, to make this even more powerful, I'm going to show what this looks like with Claude 5. In other words, Fable 5. I'm going to come down here. Where is Fable? Come down to more models. It's not available. I need to restart my instance. Voilà, almost by magic, we should see Fable 5, which is fantastic. And then, you just attach the skill or just explain what you would like. I mean, it's basically prompt like, "Hey there, I'm going to give you a website. I would like to basically understand the design, and I'd like you to follow all the instructions in this file. Namely, go to this website, understand the typography, the design, and get it an extraction blueprint so that I can build a website that levels this up. And our website is going to be on selling beautiful phones." And then, we literally just grab the website, come back over, drop it in, and we're ready to go. And just like that, guys, this is what it's pulled together. And look at the difference compared to what we had earlier. This is night and day. It's chalk and cheese. It's ebony and ivory. It is crazy. It's given it a name. It's even managed to get this orb that is dynamically changing color. And it's got this beautiful text. This is fantastic. Five phones, no wrong answers. I mean, this is ridiculous. This is actually insane. Look at the quality. And this is one shot. I haven't done anything else than the exact system I just showed you. And this is where we're at with it. Very, very, very, very impressive. Now, this is just a fraction of what we can do with Fable 5. So, if you want to learn exactly how to take your website to a new level, you need to check out this video where I'll show you exactly how to do that step-by-step.