Enjoying this issue?
Get tomorrow's AI & engineering digest in your inbox — hand-picked, summarized, and always spam-free.
TLDR
Claude's Fable 5 design agent combined with a free skill system can build stunning, interactive websites in one shot, costing around $10 each. The system uses Fable 5 for design, Higgsfield for media generation, and a mix of models (Opus 4.8, GPT-5.6 Sol) to minimize costs while maximizing quality. The key is to use Anthropic models for design decisions and cheaper models for mechanical tasks, plus adversarial review to improve outputs.
Key points
- Fable 5 is described as the best design agent for building beautiful, interactive scrolling websites that can sell for thousands of dollars.
- A new skill system is provided free that includes setup questions, adversarial review, and integration with Higgsfield for media generation.
- The system uses a cost-saving mode that defaults to Opus 4.8 and other models to reduce expenses while maintaining quality.
- Higgsfield is connected via CLI to Claude, allowing generation of images and videos directly from prompts.
- The workflow includes seven steps: spar, direct brand shot, render, use Higgsfield, gate, build, review, verify.
- Anthropic models (Fable 5, Opus 4.8) handle art direction and design decisions, while cheaper models like GPT-5.6 Sol handle prompt scaffolding, cost math, and logic.
- Turning off audio during generation can significantly reduce costs; the main expense is video generation at about 250 credits per film.
- The speaker emphasizes that getting the first prompt accurate is crucial for cost efficiency, and the entire website cost about $10 to generate.
- tools": [ {"name": "Fable 5", "url": ""}, {"name": "Claude Code", "url": ""}, {"name": "Higgsfield", "url": ""}, {"name": "ChatGPT 5.6 Sol (GPT-5.6)", "url": ""}, {"name": "Opus 4.8", "url": ""} ], "techniques": [ "adversarial review", "cost-saving mode with model switching", "audio off to reduce costs", "pit crew model delegation (different models for different tasks)", "one-shot website generation with guided prompts", "using CLI to connect tools like Higgsfield" ], "takeaways": [
Tools mentioned
Techniques
- adversarial review
- cost-saving mode with model switching
- audio off to reduce costs
- pit crew model delegation (different models for different tasks)
- one-shot website generation with guided prompts
- using CLI to connect tools like Higgsfield
Stop scrolling. Start reading smarter.
Receive the day's most important AI & engineering updates in one concise email. No spam.
Transcript (captions)
Fable 5 is the world's best design agent. It builds beautiful, stunning websites that sell for thousands of dollars. And I just found a new skill that lets you build beautiful websites in one shot whilst also keeping your costs low. And in this video, I'm going to show you exactly how to use it so you can get beautiful websites in minutes. Even if you've never touched this before, and if you're new, I'm Jack.
I built an e-commerce accelerator with a good line customers. I've sold websites for over $10,000. And here on this channel, I share the stuff that actually works. So, if you haven't [music] already, grab that beautiful coffee. And let's dive straight in.
So, this will produce unique, gorgeous websites on so many different designs with different animations and styles that vary from things with basically beautiful animations. It could just be a gorgeous website. It could be something that actually changes as you go down the website and it shows you all these different details and specifics. These beautiful, interactive, scrolling websites that show you things. It could be something that depicts a journey where we have this beautiful idea of descending into a mountain and it gives you details about everything that's happening.
There are a million different things. Every website I'm showing you right now, by the way, was done in one shot using Fable 5 and the system that I'm going to show you in this video. So, this is the Fable 5 skill machine. It is just freaking incredible. And just so you know, like it is the best design model on the planet right now that does exist.
It's fantastic. But there's one thing that we have to understand if you're going to build anything in Fable 5, even websites. It's not the fact that both the driver and the vehicle matter. The best vehicle we have access to is Fable 5. But also the person driving it who understands skills and prompting also really, really matters.
So, if you had Opus 4.8 with the best prompt engineer, that would generally beat Fable 5. The great news is I'm going to show you the system and I spent so much money building this system and hours and hours and hours perfecting this so you know exactly how to get the stuff just by one prompt. I'm going to give the entire skill away completely free. I'll put a link down below and show you what that looks like. So, look, all we're going to do is use literally one skill and we're going to be set to rock and roll.
And the way that this works is we have Fable 5 on the left-hand side. We're going to basically give it a prompt. It has access to essentially center online. And my idea was like, well, let's just give it access to all of the best design repos and skills and any any library of skills, any library of assets, everything. Give it access to everything it could possibly need and explain what's good.
Then we can actually build these beautiful scrolling animations, which we're going to use with Hicksfield. And then we're going to have a jewelry and adversarial review. This basically going to assess, is this good? Is this not good? What does that look like?
And now we're going to get a website at the end of it that is going to be fantastic. And one of the cool things that you do in the system, as I'll show you, is actually a lot of adversarial review at the beginning of the process. That will make sense when we download the skill. So, first of all, let's go ahead and grab the skill. I'll put a link down below for you to go grab this from the community and the Fable 5 website skill.
I'm going to go ahead and download this one here. And this is after lots of trial and error. My philosophy was, how can I get the best website design possible whilst also minimizing any cost that we have. And you'll see exactly how this actually works. And so, the first thing that we need to do is open up Claude code.
And by the way, if this sounds like I'm speaking Spanish, I'll put a link down below for the full Claude code masterclass. It goes through foundation setups, building websites, strategies, power features, memory systems, all the stuff that I've never shared on YouTube. It is the most comprehensive living adaptive course that I've ever built. I get messages about it every single day. I'll put a link down below and you also get the full agentic operating system too.
So, you go from zero to hero. Now, in Claude itself, you're going to come down and you're going to drop in that file. Because all I've done is just uploaded it. I'm going to say, "Hey there, I would like to run this skill. Please run me through the setup." Or you could just hit enter if you prefer to.
So, once you've added the skill, a couple of things it's going to ask you, do you want to do full Fable 5 mode? This is going to be basically no holds barred, the best design thing ever, but we're using the best model all the way through. Or you can go through cost-saving mode. Now, there is maximize the output whilst also reducing your cost. This will basically default default to bring in Opus 4.8 and other models as you go through the system.
So, the first thing it does is going to ask us how we want to go ahead and generate the media. For this, we're going to go ahead and use Higgsfield because they have a panoply a cornucopia, if you like, of ways to do this. If you're not familiar with the brand, basically, you can generate images, videos, bazillions of different things. And they make the setup super duper easy. And what's really cool we can do is we can select where we're installing it.
You want to go ahead to the CLI and you want to basically screenshot this page like so. Come down, click clipboard like that. Bam. And then what we can do is go straight back over to Claude. You can paste in the screenshot like this and say, "Hey there, I'd like it to connect to Higgsfield via the CLI." I already have it connected, but just for your authorized for demonstration purposes.
Now, obviously, you're not going to leave it demonstration purposes. I'm just doing this to show you exactly how you connect cuz it's unbelievably simple. And the cool thing is when we connect Higgsfield to Claude, effectively, we get access to all the world's premier best image models, um video generation models, all of its features, and we can explain to Claude in English what we want, and then essentially it goes ahead and builds it for us. And this is something you can also do with terminal by doing command T to get this terminal bar, and you can literally copy these commands like so, come over, and enter them in. If I do Higgsfield auth login, I come over here and again, you can just tell Claude to do this.
I'm just showing this so you understand the process. It will open up. You'll get a screen like this. You click on connect, and effectively, you're fully connected now to Higgsfield, and we can go ahead and use it. So, coming back, we're going to go ahead and do the Higgsfield cinema.
Your code in CLI detected some One of the cool things that we're doing here is using chat GPT 5.6 Sol, which is so efficient, and we can use this with our chat GPT subscription, meaning there's no additional API keys, and we get a completely different model reviewing our website designs. So, I'm going to say that's great. If you don't, I just include it in here as a question just to make sure that your designs are super robust. Beautiful. Every build ends with a cost receipt, models used, tokens sold, credits.
Where do you want it? I'm going to say just add that, let's say, on the site and also in the chat, which is cool. And then, effectively, we're given the first batch of questions. And the idea with this is that it will literally go through the questions. You just answer what you want, and it goes ahead and physically builds it.
And I built so many of these, I've understood where they fail, where they go wrong, just to kind of cut all of that cost and time out there for you. Then we get some questions about the website. Just to say it is going to be a product launch site. And we say when someone leaves the page, what's the single most important thing they should feel or do? Uh I want to go ahead and say remember the brand for this one.
Any design direction that you want to, bold and vibrant, let's go for that. That sounds great. Come on and click on next. And do you have logos, fonts, or brand colors? So, you can literally integrate those if you want to.
I'm going to say no, I don't. I'm going to say pure imagination. I call this one imagination mode like that. And then once it's done that, it's going to ask us for details on what we want the website to be. And then you may also get this CLI, this command line interface prompt connecting it to Higgsfield, which will authorize the device.
Then we can come back over to Claude. And Claude's asked us for the product, which is great. I'm going to say, I would love a website to launch my beautiful fruit smoothie business. What would be cool is as you scroll down, there's different fruits, and you see them doing various different things, and it explodes into one big beautiful fruit smoothie maybe at the bottom. And maybe on the right-hand side, we could have like some kind of um interesting like like almost like the smoothie is getting filled up as I scroll down.
Obviously, go full imagination mode. Just make it look beautiful. So, you basically describe the thing that you want to. You don't even need to tell it to look beautiful. It will just do that by itself.
And as you can see, it's come back with three different options it thinks would work well. I'm going to say, hey dude, in this case, just go build all three of them separate for me simultaneously. And I'm just doing that for demonstration purposes. In reality, just pick the one that you resonate with most, or you can click this re-pitch to get a better idea for your design, and go ahead and click on submit. And then once it's complete, we get these websites.
So, this is Pulp Real Fruit Branded Line. So, let's have a look at what this looks like. We've got the strawberry dropping down, Picked at Dawn. Oh my gosh, blending again. This is amazing.
Like this is actually outrageous. And at the bottom, you have the actual drink, Drink the Riot, Every Bottle Starts with a Fall, Been Like Crushed Groenland Bayan, Berry Uprising, Mango Mayhem. And then we have these different texts down here, all our socials down there at the bottom. This is absolutely beautiful. And I love the fact that it really actually tells a story from the literal It's from the orchard, and as you can see the strawberry wrapping down all the fruits, it's getting blended in, it's going all these crazy things are happening, come down, and then we're rocking and rolling.
And what I actually did is built three different versions of the same website here. So, I've got this one here, which is the same concept but in a slightly different style. So, all good the bottle and broken. This one is a little bit more tech savvy. But as you can see, I really like this one actually, that it's kind of like done a little bit of a wireframe.
That is gorgeous. And then I have these three things I can check out, which are fantastic. And we've got pull apart. I like the fact that it blends two different kind of styles. Then the third one we have is this one here with the kind of almost like pull apart, like it's some kind of lab.
Bit more of a technological one. You can see everything moving in the bottom left. Different text structuring down. Specimen approved. And then we're rocking and rolling.
And just give an example of other kind of styles, I had it spin up this one here, which is Nocturne. So, let me come to the top and show you. This one is for a perfume. You can come down and see because you scroll down. We've got the actual balloon, the thing being made, it drops in, and it scroll out, and that's the perfume, and you can buy it.
Then we had this really interesting one here for Alpine Glow. And I want to pay attention that even though it's this is a video, can you see how we've got the snow drops coming down to give it that kind of three-dimensionality? And we built all of this using Higgs Field and Fable 5. You can come down, and so we're going to dive in through the clouds, and then we're going to blow the weather at Valley for the river home, and then we're at our property. And as you can see, we're down here, we can see the water is already warm.
Let's dive in and have a good time. And just effortlessly blends in together. We can zoom out and have a fantastic time. And these are just stunning, guys. And these are amazing.
I've got different versions of them that like don't have this. So, if you don't want the big video, you can see you've got aspects like this. Look at this. This is just a really cool premium website with a pointer. Has a slight delay and a slight tug on it.
It's just absolutely fantastic how we've designed this. And by the way, guys, quick confession, this system cost me way much more money than it should have done. I spent so much money on Anthropic credits. What I basically found out, I'm going to hear some noise in the background, it's cuz my dog's hanging out with me now. Is that when it comes to design, Anthropic just has a stronger hold on the market.
They build the best design models out there. What you can do is build anything with Anthropic, like a Claude model, and then once that design system is built, you can tag in any of the other models. So, save the dollars, don't let make the same mistakes I did testing that. Anyway, I hope that's helpful to you. Now, let's go back to the video.
And so, the way that I accomplished this in terms of my objective being to minimize your spend, whilst also maximizing natural quality, this is a system that we landed on. Now, one key thing that I found, as I explained earlier, is that two lines they never cross. Anthropic is to build its art direction, brand, fonts, layout, the shot list for every prompt, the scrub engine, and then we bring in the crew. We bring in ChatGPT 5.6 sole as almost like a pit stop crew, which can help with other tasks that we can just delegate that we don't need to go ahead and spend our huge precious credits on. And it also goes ahead and validates to find are there any mistakes?
Is it working with this? Is it working with that? We don't give them any design decisions, but we will have the design cross-validated by another Anthropic model. So, the first thing that happens is the idea gets created first. Basically, Fable will propose it, and it just runs that against Opus to validate it and check it.
This is just a way to improve the actual decision-making quality, so we get a better output on the first run. And as you'll probably agree with that, like actual Auckland to Bohl, that was an incredible concept that I don't think you get that level of creative decision directing just by prompting once. You need a great system. Then we tag in GPT 5.6, as we call it the cheap muscle. It may not like being called that, but basically, referencing prompt scaffolding, cost math, logic and consistency, we bring that out.
So, you're not paying Fable 5 prices, where effectively, you don't need to. And so, in seven steps, we spar, we direct the brand shot, we render it, we use Higgsfield, we do the gate, we build it, we review it, we verify it, and then it's ready to go. And as you can see, we've split this down between Anthropic and what is mechanical, basically taking everything we don't need to from the high-performance models. Said another way, Opus runs the room, and its cheap models do the rap. So, we have beforeman, it's Opus 4.8, Saul, and the sub-agents are doing the recon and scaffolding.
And one of the key little hacks as well to reduce down your bill in generating them is leave audio off. If you have audio on, that can really increase the price. We're actually going to save quite a bit by not having audio where we don't need to. And so, the only real cost is the actual film itself, which is around 250 credits, but you can reduce that drastically using these strategies. So, when we live in a world now where the best models cost more money, you need to think about it as a pit crew, different roles for different models doing different things.
And I'm going to put the entire system prompt down below so you can build all this stuff. You literally include it, go through the whole process, and you'll get gorgeous websites that look absolutely exceptional like this. And as well, if you're looking at what would this actually cost to generate, this whole website here cost about $10. Most of it actually is all the individual videos that blend together into one seamless generation. But obviously, using Anthropic, and this is the key thing, guys, why getting the first prompt correctly accurate the first time is the most important.
And it's basically that is the most cost of the website. It's just the actual video generation. But for a website that you could basically go on and monetize and would basically represent your brand or you're selling to other agencies, I think it's a really, really solid investment. But that's the rough kind of price that you get with these kind of videos. Now, building beautiful websites is one thing, but if you don't know how to pass them to clients for them to edit them, for your team to edit them, to make multiple at scale, how to host them, how to do all the boring stuff behind that actually gets you ahead, makes you money, and makes your life easier, you need to come and join me on this video right here where I'll show you the straightest line to making all of that possible.