The argument in one line.
A structured seven-step skill that keeps every design decision inside Anthropic's models and delegates only mechanical execution to cheaper tools turns a single prompt into an animated, client-ready website for about $10.
Read if. Skip if.
READ IF YOU ARE…
- You use Claude Code (or want to) and want a repeatable system for generating polished, animated marketing sites instead of hand-coding or paying a designer.
- You're burning AI credits fast on design work and want a cost-control pattern that doesn't sacrifice output quality.
- You sell websites or landing pages to clients and want a faster, cheaper production pipeline.
- You're curious how to chain multiple AI models (Claude, GPT, Higgsfield) into one build process without losing design coherence.
SKIP IF…
- You need pixel-perfect, hand-editable control over layout and code — this is a one-shot generative workflow, not a design system you tweak line by line.
- You don't have a Higgsfield or ChatGPT subscription and aren't willing to add either — the pipeline depends on both.
- You're looking for a coding walkthrough — this is a prompting/orchestration workflow, not an explanation of the generated code.
The full version, fast.
Jack Roberts open-sources a Claude Code skill that turns a single prompt into an animated, agency-grade product website for about $10. The system enforces a strict division of labor: Anthropic's Fable 5 and Opus own every design decision — art direction, brand, layout, the shot list, the code — while cheaper rented models (Higgsfield for motion, GPT-5.6 for scaffolding and checks) only execute, never decide. Before any expensive render happens, one Anthropic model proposes the concept and another critiques it, catching weak ideas for free. The build runs seven steps — spec, direct, render, gate, build, review, verify — ending in a printed cost receipt. The lesson generalizes past web design: keep judgment calls on the expensive model, push repetitive execution onto the cheap ones.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 01:10
01 · Intro
Cold open states the promise directly: Fable 5 builds websites that sell for thousands, and this video shows the exact system.
01:10 – 02:20
02 · What Fable 5 actually produces
Montage of prior Fable 5 sites — scroll-driven reveals, a descent-into-mountain narrative, filling animations — all built in one shot.
02:20 – 03:15
03 · Why the driver matters as much as the model
The 'best driver, fastest car' framing: a skilled operator with a weaker model beats a top model with weak prompting.
03:15 – 04:00
04 · Grabbing the free skill
Downloads the Fable 5 Website Skill from his community classroom and drops it into Claude Code.
04:00 – 04:45
05 · Full mode vs cost saving mode
The skill asks whether to run no-holds-barred on the best models throughout, or a cost-saving mode that mixes in cheaper models.
04:45 – 06:30
06 · Connecting Higgsfield to Claude
Authorizes Higgsfield via CLI so Claude Code can call its image/video generation models directly.
06:30 – 08:00
07 · Answering the setup questions
Walks through the skill's intake questions: site type, single most important visitor action, brand direction, logos/fonts.
08:00 – 09:45
08 · Building three websites simultaneously
Describes a fruit smoothie brand in one prompt; the skill returns three distinct design directions and builds all three at once.
09:45 – 11:20
09 · Website showcase and results
Tours the finished sites — Pulp (fruit brand), Nocturne (perfume), Alpenglow (alpine retreat) — plus a confession about overspending Anthropic credits before landing on the cost system.
11:20 – 12:30
10 · The model split system explained
Names the 'two lanes never cross' rule and the seven-step pipeline (spec, direct, render, gate, build, review, verify) that keeps Anthropic owning every decision.
12:30 – 13:12
11 · What it actually costs per site
Breaks down the roughly $10 total cost — almost all of it video generation — and closes with a pitch to a follow-up video on hosting and client handoff.
Lines worth screenshotting.
- Keeping every design decision inside one frontier model while delegating only mechanical execution to cheaper models is what makes a $10 website build possible without sacrificing quality.
- The model matters less than the operator — a well-prompted system beats a top-tier model used without one.
- Running a second model as an adversarial reviewer before generation happens catches bad concepts for free, instead of paying to render a bad idea.
- Turning off audio generation is a simple lever that meaningfully cuts AI video credit costs when audio isn't essential to the output.
- A full animated, client-ready product website was generated for around $10 in AI credits, with most of that cost going to video generation rather than design or code.
- Design decisions were the cheapest part of the build; rendering the cinematic motion assets was the expensive part.
- Never let a rented or cheaper model make a creative decision — only let it execute recon, scaffolding, or mechanical checks.
- A repeatable seven-step pipeline — spec, direct, render, gate, build, review, verify — turns a one-shot AI generation into something closer to a QA'd production process.
- Printing a cost receipt (models used, tokens, dollars, credits) at the end of every build makes AI spend visible instead of a surprise bill.
- Getting the first prompt right matters more than any later step, because it's the biggest lever on both output quality and total cost.
The real lesson isn't the model — it's the system around it.
WHAT TO LEARN
A frontier design model only pays off inside a system that keeps every creative decision on the expensive model and pushes all repetitive execution onto cheaper ones.
02What Fable 5 actually produces
- A single well-structured prompt to a top-tier design model can produce a fully animated, scroll-driven website — not just a static layout.
- The variety worth noticing isn't visual polish alone; the same underlying model produced structurally different interaction patterns (progressive reveal, journey/descent narrative, filling animation) from different prompts.
03Why the driver matters as much as the model
- The best available model loses to a weaker model paired with a skilled operator who understands prompting and skills — the operator is a multiplier, not a formality.
- Treat model choice and prompting skill as two separate levers; most people only ever upgrade the first one.
09Website showcase and results
- Overspending on a frontier model happens easily when there's no cost-tracking system in place — the fix is architectural, not willpower.
- A single design system, once locked, can be reskinned into multiple visually distinct sites without redoing the underlying structure — the leverage is in the system, not the one-off output.
10The model split system explained
- Split every AI workflow into two lanes: one model allowed to make judgment calls, and other models only allowed to execute — never let a cheaper model touch a decision.
- Run a proposal against a second, independent model as an adversarial check before spending real generation cost — bad ideas get caught in text, not in a rendered asset.
- A repeatable named pipeline (spec, direct, render, gate, build, review, verify) turns a one-shot generation into something with actual quality gates.
- The cheap model's job is prompt scaffolding, cost math, and consistency checking — not creative direction; letting it make creative calls breaks the cost savings.
11What it actually costs per site
- Getting the first prompt right the first time is the single biggest lever on total cost — rework compounds through every downstream generation step.
- Video and motion generation, not design or code, is where the real cost sits in an AI-assisted creative pipeline — budget accordingly.
- Turning off unnecessary generation features, like audio, is a free cost reduction when that feature wasn't needed anyway.
Terms worth knowing.
- Fable 5
- The design-specialized Claude model Jack calls the best design AI available; it owns all creative decisions in this workflow — art direction, layout, and code.
- Studio Line
- The four-stage pipeline diagram for the build: Fable 5 (design) leads into Design Skills (the packaged prompt), then Higgsfield (motion rendering), then The Jury (adversarial review) before a site ships.
- Two lanes that never cross
- The rule that Anthropic models hold all design authority while rented models like Higgsfield and GPT-5.6 only execute — they never make creative decisions.
- The Jury
- An adversarial review step where a second AI model critiques a proposed design concept before any expensive rendering happens, catching weak ideas for free.
- Sol (GPT-5.6)
- The nickname given to GPT-5.6 in this system, used as a cheap workhorse for prompt scaffolding, cost math, and mechanical consistency checks — never for design decisions.
- Higgsfield
- A third-party AI media platform used to generate the cinematic video and motion assets embedded in the websites, connected to Claude Code via its CLI.
- Cost receipt
- An end-of-build summary the skill prints showing which models were used, tokens consumed, dollar cost, and remaining credits.
- SSIM-checked gate
- A pipeline step that compares rendered frames using the Structural Similarity Index to catch visual drift before a site ships.
Things they pointed at.
Lines you could clip.
00:00
“Claude Fable 5 is the world's best design agent. It builds beautiful, stunning websites that sell for thousands of dollars.”
01:22
“Both the driver and the vehicle matter — the best model in the world still loses to a weaker model with a skilled operator behind it.”
08:33
“Two lanes, they never cross. Anthropic builds — art direction, brand, fonts, layout, the shot list, the code. The rented models only execute.”
10:44
“Opus runs the room, and the cheap models do the reps.”
10:20
“The idea gets punched first — before a single frame renders, we run the concept against a second model to sharpen it before a credit is spent.”
12:30
“This whole website here cost about $10 — and getting the first prompt right the first time is the most important, most cost-heavy part of the whole process.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
00:00Call of Paper five is the world's best design agent. It builds beautiful, stunning websites that sell for thousands of dollars.
00:07And I just found a new school that lets you build beautiful websites in one shot, whilst also keeping your costs low. And in this video, I'm gonna 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 knew, I'm Jack.
00:22I built in some of my life tech startup with a gazillion customers. I've sold websites for over $10,000, and here on this channel, I show the stuff that actually works.
00:30So if you haven't 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.
00:43It 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.
00:53It 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 five and the system that I'm gonna show you in this video.
01:09So this is the Fable five Skull Machine. It is just freaking incredible. And just so you know, like, is the best design model on the planet right now that does exist.
01:18It's fantastic. But there's one thing that we have to understand if you're gonna build anything in Fable five, even websites.
01:23And that's the fact that . The best vehicle we have access to is Fable five, 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 five.
01:40The great news is I'm gonna show you the system, and I spent so much money building the system and hours and hours and hours perfecting this, so you know exactly how to get this stuff just by one prompt. I'm gonna give the entire skill away completely free. I'll put a link down below and show what that looks like.
01:53So look, all we're gonna do is use literally one skill, and we're gonna be set to rock and roll. And the way that this works is we have Fable five on the left hand side. We're gonna basically give it a prompt.
02:01It 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.
02:16Then we can actually build these beautiful scrolling animations, which we're gonna use with Hicksfield.
02:21And then we're gonna have a jury, an adversarial review. It's basically gonna assess, is this good?
02:27Is this not good? What does that look like? And then we're gonna get a website at the end of it that is gonna be fantastic.
02:32And 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 five website skill.
02:47I'm gonna 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?
02:58And so the first thing that we need to do is open up Clord Code. And by the way, if this sounds like I'm speaking Spanish, I'll put a link down below for the full Clord Code master class. It goes through foundation setups, building websites, strategies, power features, memory systems, all the stuff that I've never shared on YouTube.
03:12This is the most comprehensive living adaptive course that I've ever built. I get messages about it every single day.
03:18I'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 code itself, gonna come down and you're gonna drop in that file.
03:26Because all I've done is just uploaded it. I'm gonna say, hey there, I would like to run this skill. Please run me through the setup.
03:30Or you could just hit enter if you prefer to. So once you've added the skill, a couple of things it's gonna ask you. Do wanna do full Fable five mode?
03:36This is gonna 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 to bring in Opus 4.8 and other models as you go through the system.
03:51So the first thing it does is gonna ask us us how we wanna go ahead and generate the media. For this, we're gonna go ahead and use Higgs Field because they have a panoply, a corn copier, 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.
04:07And what's really cool we can do is we can select where we're installing it. You wanna go ahead to the CLI and you wanna basically screenshot this page like so. Come down, click clipboard like that, bam.
04:17And 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 Higgs Field via the CLI. I already have it connected, but just reauthorized for demonstration purposes.
04:29And obviously, you're not gonna do the demonstration purposes. I'm just doing this to show you exactly how you connect because unbelievably simple. And the cool thing is when we connect Higgs Field to Claude, effectively, get access to all the world's premier best image models, video generation models, all of its features, and we can explain to Claude in English what we want and then essentially goes ahead and builds it for us.
04:50And 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 Higgs field auth login, I come over here, and again, you can just tell Claude to do this. I'm just showing this to understand the process.
05:03We'll open up, you'll get a screen like this, you click on connect, and effectively, you're fully connected now to Higgs Field, and we can go ahead and use it. So coming back, we're gonna go ahead and do the Higgs Field Cinema. Your codec can see light is detected.
05:13So one of the cool things that we're doing here is using ChatGPT 5.6 Sol, which is so efficient, and we can use this with our ChatGPT subscription, meaning there's no additional API keys, and you get a completely different model reviewing our website designs.
05:27So I'm gonna 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.
05:34Every build ends with a cost receipt, models used, tokens, dollars, credits, where do you want it? I'm gonna say just add that, let's say, on the site and also in the chat, which is cool. And then, effectively, we've given it the first batch of questions.
05:44And the idea of 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've built so many of these. I've understood where they fail, where they go wrong, just to kinda cut all of that cost and time out there for you.
05:57Then we get some questions about the website. Just to say, it is gonna be a product launch site. And we say, when someone leads a page, what's the single most important thing they should feel or do?
06:05I wanna 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.
06:12Come on and click on next. And do you have logos, fonts, or brand colors? So you can literally integrate those if you want to.
06:18I'm gonna say, no, I don't. I'm gonna say pure imagination. I call this one imagination mode like that.
06:22And then once it's done that, it's gonna 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 Higgs Field, which will authorize the device. Then we can come back over to Claude.
06:34And Claude asked us for the product, which is great. I'm gonna 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 soon do various different things, and it explodes into one big beautiful fruit smoothie maybe at the bottom.
06:51And maybe on the right hand side, we could have, like, some kind of interesting like like, almost like the smoothie is getting filled up as I scroll down. Obviously, go full imagination, man. Just make it look beautiful.
07:01So 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.
07:06And as you can see, it's come back with three different options it thinks would work well. I'm gonna say, hey, dude. In this case, just go build all three of them separate for me simultaneously.
07:14And I'm just doing that for demonstration purposes. In reality, just pick the one that you resonate with most, or you can click this repitch 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.
07:24So this is Pulp Real Fruit Branded Lads. Let's have look at this looks like. We've got the strawberry dropping down, picked at dawn.
07:30Oh my gosh. This is amazing.
07:33Like, this is actually outrageous. And in the bottom, you have the actual drink, drink the riot, every bottle starts with a fall, midnight crush, green rebellion, bury uprising, mango mayhem, and then we have these different texts down here.
07:43All our socials down there at the bottom. This is absolutely beautiful.
07:48And 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 dropping down, all the fruits is getting blended in.
07:57It's gorgeous, 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.
08:04So I've got this one here, which is the same concept but a slightly different style. So Orchid the Bottle and Broken. This one is a little bit more text heavy.
08:10But as you can see, I really like this one actually, that it's kind of like done a bit of a white frame. That is gorgeous. And then I have these three things I can check out, which are fantastic.
08:19I've got pulp art. 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 pulp labs, it's some kind of lab.
08:26Bit more of a technological one. You can see everything moving in the bottom left, different tech structuring down, specimen approved, and then we're rocking and rolling.
08:34And just to give an example of other kind of styles, had it spin up this one here, which is Nocturne. Let me come to the top and show you. This one is for a perfume.
08:42You can come down and see because scroll in. We've got the actual bloom. The thing being made, it drops in and you scroll out and that's the perfume and you can buy it.
08:49Then we had this really interesting one here for Alpen Glow. And I want you to pay attention that even though this is a video, can you see how we've got the snowdrops coming down to give it that kind of three dimensionality? And we built all of this using Higgs Field and Fable five.
09:03We're come down, and so we're gonna dive in through the clouds, and then we're gonna blow the weather at Valley, fall the River Herm, and then we're at our property. And as you can see, we're down here. We can see the water is already warm.
09:14Let's dive in and have a good time and just effortlessly blend in together. We can zoom out and have a fantastic time. And these are just stunning, guys.
09:20And these are amazing. I've got different versions of them that, like, don't have this. If you don't want the big video, you can see you've got aspects like this.
09:26Look at this. This is just a really cool premium website with a pointer, has a slight delay and a tag on it. It's just absolutely fantastic how it's designed this.
09:34And by the way, guys, quick confession. This system cost me way much more money than it should've done. I spent so much money on Anthropic credits.
09:41What I basically found out, if you can hear some noise in the background, it's because my dog's hanging out with me about, 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.
10:00So save the dollars. Don't let make the same mistakes I did testing that. Anyway, I hope that's helpful to you.
10:06Now 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 actual 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.
10:19Anthropic 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 ChatGeo d 5.6 Sol as almost like a , 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.
10:37And it also goes ahead and validates to find are there any mistakes? Is it working with this? Is it working with that?
10:42We 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.
10:51Basically, 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 orchard to bowl, that was an incredible concept that I don't think you get that level of creative decision directing just by prompting ones.
11:10You need a great system. Then we tag in GBT 5.6 as we call it the . 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 fablefy prices where effectively you don't need to.
11:24And so in seven steps, we spa, we direct the brand shot, we render it, we are using Higgs Field, we do the gate, We build it. We review it. We verify it, and then it's ready to go.
11:32And as you can see, we 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, .
11:42So we have Performant. It's Opus 4.8. Sol, and the sub agents are doing the reconnaissance scaffolding.
11:46And one of the key little hacks as well to reduce down your bill and generating them is leave audio off. If you have audio on that can really increase the price, we're actually gonna 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.
12:03So 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 gonna put the entire system prompt down below so you can build all this stuff. You'll literally include it.
12:15Go 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.
12:29But obviously, using Anthropic, and this is the key thing guys, while 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.
12:39It's just the actual video generation. But for a website that you could basically go on and monetize and will basically represent your brand or you're selling to other agencies, I think is a really, really solid investment. But that's the rough kind of price that you get with these kind of videos.
12:52Now 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.
The Hook
The bait, then the rug-pull.
Jack Roberts opens with the promise printed in the title — a single Claude model that builds websites worth thousands — then spends the next twelve minutes showing the actual system: a free skill that chains Fable 5, Higgsfield, and GPT-5.6 into a seven-step pipeline where only Anthropic ever touches a design decision.
Named ideas worth stealing.
01:57list
The Studio Line
- Fable 5
- Design Skills
- Higgsfield
- The Jury
A four-stage pipeline diagram: the design model, the packaged skill/prompt layer, the animation engine, and an adversarial review jury before a site is called done.
Steal forAny AI creative pipeline that needs a repeatable model-to-skill-to-render-to-review assembly line.
08:33concept
Two lanes that never cross
Anthropic models (Fable 5, Opus) hold 100% of design authority — art direction, brand, fonts, layout, the shot list, the code — while rented models (Higgsfield, GPT-5.6) only execute: render motion, run recon/scaffolding, do mechanical checks.
Steal forAny multi-model pipeline where quality-critical decisions need to stay on the frontier model while commodity work gets delegated to cheaper ones.
10:44concept
The idea gets punched first
Before a single frame renders, one model proposes a creative concept and a second, independent model critiques it — a free pre-generation jury that catches weak ideas before real money is spent.
Steal forAny AI content pipeline where generation costs money; a cheap critique pass before rendering saves real dollars.
11:00list
Seven-step build process
- Spec
- Direct the brand and shot
- Render (Higgsfield)
- Gate (SSIM drift check)
- Build (scrub engine)
- Review (design-principle pass)
- Verify (auto-scrolled, frame-timed)
The full pipeline from prompt to shipped site, alternating Anthropic-owned decision steps with mechanical execution steps.
Steal forStructuring any agentic build pipeline that needs quality gates between generation and shipping.
How they asked for the click.
VERBAL ASK
13:00next-video
“Come and join me on this video right here where I'll show you the straightest line to making all of that possible.”
Soft end-card pitch pointing to a follow-up video on hosting, client handoff, and scaling the sites — positioned as the natural next step rather than a hard sell.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
