Modern Creator
Why Modern Creator?
Jack Roberts · YouTube

Claude Fable 5 Just Changed Website Design Forever

A 17-minute live showdown comparing one-shot website descriptions, award-winning site clones, and design DNA extraction -- making the upgrade case for Fable 5 while showing how to tame its token appetite.

Posted
yesterday
Duration
Format
Tutorial
hype
Views
6.6K
350 likes
Part of the collectionThe Fable 5 PlaybookAll 45 Fable 5 breakdowns, synthesized into one page.
Read the playbook
Big Idea

The argument in one line.

Claude Fable 5 has a wide enough design quality gap over its predecessor that a single unedited prompt now produces sites that previously required multiple iteration rounds, and one effort-dial rule -- Max to plan, Medium to build -- stretches the token budget to match.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You build client landing pages or product sites and want to know if switching to Fable 5 changes your output quality.
  • You use Claude Code for front-end work and default to Max effort for every task, burning tokens you could save.
  • You want a repeatable method for capturing the visual style of any website you admire and rebuilding it for your own brand without copying content.
SKIP IF…
  • You are not using Claude for design or front-end work -- the model comparisons and effort-dial tips only matter in that context.
  • You want a step-by-step code walkthrough; this is a live demo reel that shows results, not implementation details.
TL;DR

The full version, fast.

Claude Fable 5 wins 71 percent of head-to-head design arena matchups and this video proves it with three escalating live tests: a text-only one-shot, an award-winning site clone, and a design-DNA extraction workflow. Fable 5 outperforms Opus 4.8 visibly in every round, often on the first prompt where Opus needed multiple turns. The second half delivers the practical countermeasure to Fable 5's token hunger: a five-tier effort dial where Max is reserved for the initial build only, then Medium handles all subsequent iterations -- and Medium on Fable 5 already outperforms Extra High on the prior model.

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 →
Chapters

Where the time goes.

00:00 – 00:54

01 · Cold open -- Fable 5 as design king

Model intro, design arena benchmarks, 71% win rate claim, promise of token-saving tip.

00:54 – 02:36

02 · Level 1 -- One Shot

Same LaCroix website prompt sent to both models on Max effort. One-shot, no edits.

02:36 – 04:18

03 · Level 1 Results

Side-by-side scroll demo. Fable 5 renders better can visuals, stronger layout, more responsive hover effects.

04:18 – 05:43

04 · Level 2 -- Hard Mode (Igloo site)

Uses awwwards.com to find an award-winning igloo site. Task: recreate its mystical winter aesthetic.

05:43 – 08:18

05 · Igloo challenge results

Fable 5 builds a depth-zooming Monolith experience. Opus 4.8 delivers a decent but flat result.

08:18 – 09:18

06 · Level 2 wrap + course CTA

Brief debrief and mid-video pitch for Claude Code masterclass.

09:18 – 11:59

07 · Level 3 -- Extract the DNA

Philosophy: Claude can codify why a website looks good -- typography, spacing, color ratios -- and rebuild it for any use case.

11:59 – 13:22

08 · Build from the blueprint

Live demo: design blueprint extractor file attached, Fable 5 builds a website-selling site using rocket.new's visual DNA.

13:22 – 14:41

09 · Fable 5 final result

Fable 5 one-shot versus Opus 4.8 multi-turn. Fable 5 wins. Key finding: low text density and crisp micro-animations.

14:41 – 16:01

10 · Small details win

Design critique: nav under five items, spacing, animation quality.

16:01 – 16:50

11 · Token problem + One Dial rule

One Dial. Triple the Mileage. Max to plan, Medium to build. Effort tier chart. Closing next-video CTA.

Atomic Insights

Lines worth screenshotting.

  • Claude Fable 5 wins 71% of head-to-head design comparisons in arena benchmarks, not a marginal lead.
  • A single unedited prompt to Fable 5 produced a website that required multiple back-and-forth rounds to get from Opus 4.8.
  • After reviewing 150+ websites, the single biggest design flaw was text density -- not color choice, not typography.
  • You cannot articulate why a great website looks good, but Claude can extract its design DNA and codify it as a reusable blueprint.
  • Design DNA extraction captures: typography, color ratios, spacing, balance, scroll animations, and structural scaffold HTML.
  • Medium effort on Fable 5 outperforms Extra High effort on Opus 4.8 for front-end code -- model tier beats effort level.
  • Open on Max to set context and design intent, then drop to Medium for every subsequent iteration.
  • Ultra Code (multi-agent) is overkill for website builds -- Max is sufficient for the first generation.
  • Award-winning sites on awwwards.com are the best reference library for steering Claude toward premium design output.
  • Claude Fable 5 applies design heuristics by default -- nav items under five, consistent spacing, micro-animations -- without explicit instruction.
Takeaway

Three moves that close the gap between a prompt and a shipped website.

WHAT TO LEARN

Fable 5's design advantage is real but only pays off when you give it the right input and manage the effort dial deliberately.

  • Before writing a website description from scratch, find an award-winning reference first -- Claude clones an aesthetic far better from a URL than from a text description alone.
  • When you cannot articulate why a site looks good, ask Claude to extract its design DNA: typography, color ratios, spacing, scroll animations -- that codified blueprint becomes your actual prompt.
  • Text density is the single biggest flaw in AI-generated sites -- instruct Claude to keep nav items under five and use wide margins; it knows these rules but will not always apply them by default.
  • The effort dial is a spending decision: Max for the initial build to lock in context and design intent, then Medium for every subsequent iteration -- equivalent or better quality at lower cost.
  • Claude Fable 5 on Medium already outperforms Opus 4.8 on Extra High for front-end work -- model tier matters more than effort level when it comes to design output.
Glossary

Terms worth knowing.

One-shot
Sending a single prompt with no follow-up edits and accepting the output as the result -- used here to compare raw model capability on the same task.
Design DNA extraction
A workflow where Claude analyzes an existing website's visual blueprint -- typography, color ratios, spacing, scroll animations -- and codifies it as a reusable prompt scaffold, without copying any content.
Effort dial
Claude's five-tier thinking budget (Low / Medium / High / Max / Ultra Code) that controls how many tokens the model spends reasoning before it responds.
Ultra Code
The top effort tier that spins up multiple parallel sub-agents; useful for complex refactors but unnecessary and expensive for website generation.
Arena benchmarks
Blind head-to-head evaluations where human raters pick the better output without knowing which model produced it; Fable 5 wins 71% of design matchups by this measure.
Awwwards
A curated directory of award-winning websites -- used here as a reference library for finding high-quality design examples to clone or extract DNA from.
Resources

Things they pointed at.

00:00toolClaude (Fable 5 / Opus 4.8) ↗
04:18linkAwwwards ↗
05:43toolHiggsfield AI ↗
05:43toolKie.ai ↗
10:19linkRocket.new ↗
00:31productGlaido (Voice Dictation) ↗
Quotables

Lines you could clip.

00:14
“It is the world's number one design agent.”
Bold opening claim, no setup needed→ TikTok hook↗ Tweet quote
04:03
“This was one freaking prompt. That's all I gave this.”
Visceral reaction to one-shot quality→ IG reel cold open↗ Tweet quote
13:29
“I reviewed over 150 websites. Text density was the biggest offender by far.”
Specific data-backed design lesson, standalone→ newsletter pull-quote↗ Tweet quote
15:15
“We don't need Albert Einstein mopping off floors. Medium is fine.”
Memorable analogy for the effort dial rule→ TikTok hook↗ Tweet quote
16:01
“Open on max, drop to medium to build.”
Actionable rule in eight words→ newsletter pull-quote↗ Tweet quote
The Script

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.

analogy
00:00Cloud Fable five just dropped and it changes websites forever. Not only is it the best model, it is also the world's number one design agent. And in this video, I'm gonna show you exactly how good it is at creating beautiful websites by comparing it with Opus 4.8 across three levels of difficulty.
00:20Starting simple and building to the best website creation strategy that I have ever seen. So you can build beautiful websites in minutes even if you're starting from completely zero.
00:31And I'm also gonna show you how you can reduce your token spend with this brand new model. And if you're new, I'm Jack. I built and sold my last tech startup with a gazillion customers.
00:40Now I run 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 dive straight in.
00:50So when we're using Claude Fable to create beautiful websites, there's one thing that you have to be aware of. And this is the fact that it has become the world's number one design agent because Anthropic and the Claude models are exceptional at design.
01:03As you can see, it is taking over quite a lot. It is number one design arena. It wins 71% of times in head to heads and it's done really well.
01:11And here's some benchmarks. I know anything looks good on paper, fish and chips looks great on paper, doesn't mean that it's the best, but you can see from yourself, it is a premier model that is set to crush it. And that takes us nicely onto the fact that power burns tokens.
01:24I'm gonna show you exactly how you mitigate that inside this video. And if you make it to the end, not only will you see how good it is, you'll also be able to build any beautiful website that you want to. So we're gonna start off with level one, which is describing the thing.
01:35So we're gonna have Opus 4.8, gonna have this brand new model, and basically just describe the website that we would like. So what I'm gonna do, I'm gonna come down here, click on Fable five, which is the one that we want, we can do the 1,000,000 contacts window, come down to medium. I'm gonna set the effort level here to max.
01:48We don't need UltraCode for this. Max will be fine. I'm gonna give it both the same prompts.
01:52It's gonna be, hey, there. Go ahead and sign for me a beautiful website that sells Lacroix.
01:57Let's put it natural, and the flavor's gonna be strawberry and peach. Maybe three different sections. Make it look visually beautiful and engaging with the very best softwares, integrations, and all of the best kind of like design elements.
02:09And then I'm gonna give the same prompt over to 4.8. And just to keep this fair, I'm actually gonna go ahead and put it on the same levels. It's coming down to Opus 4.8, 1,000,000 context.
02:17Put that on max as well, come down, and send this one off. And so what this is called is one shotting. We give it one prompt and see exactly how well it performs.
02:24Then we're gonna see exactly how to build it with the best website design building strategies and how good it actually looks. Beautiful. And both models have finished.
02:32This is Opus 4.8. I am partially inspired by the Lacroix hype I've been going on recently. They captured me, guys.
02:38I am a captured agent for Lacroix right now. Let's see how Opus four point eight did this one. I click on it.
02:43Dude, very, very cool. I love this floating. Like, I hover over it.
02:47It's decent. Let's get natural. Let's scroll down.
02:49Have a look. I think it's got a good scrolling animation as I come down here. A flavor you can taste from there, from here.
02:54This is really beautiful. Like, this is a one shot. I haven't edited this at all.
02:59We've done all this together. Together, they get natural. I scroll down, innocent by the numbers.
03:03It can't be pronounced. It doesn't belong in the can. What I do like is the fact that I've got kind of what I'd call traditionally non Claudi fonts in this.
03:10And I think that is freaking gorgeous. To be honest with you, this is pretty exceptional. This is Opus 4.8.
03:15Let's see how we did now with Fable. Wow. I mean, first of all, that is freaking a lot better.
03:20Mean, look at the difference in the cans, right, from this to this. Completely new level, multipack, five ninety nine. I scroll down.
03:26Innocent by nature. So I get these different zero calories, zero ish twenty, zero sodium. What's cool to me is it's kind of emphasized the selling points of it.
03:34I think that's gorgeous. This is fantastic. Stock the fridge.
03:36Oh, dude. You've got to be kidding me. This is freaking crisp, and look what is built into this.
03:41Like, I am genuinely super freaking impressed. Let's compare that to what would this is one shot, by way.
03:46Literally one shot. So this is what four point eight did. Again, that's not bad.
03:50This is not bad. But when you compare it with this, the fact that it's got a border outlet around it, the fact that we've got something on the left. Could we group these together?
03:58Yeah. Of course, we could. There's little dicks we can do.
04:00Eight cans, 12 cans, 24 cans. This guy is freaking exceptional, and this was one freaking prompt.
04:06That's all I gave this was one prompt. And the bottom, Laquire at the bottom, we're now ready to rock and roll. This is really freaking impressive.
04:13I'd probably just also do a little bit of adjustment here, but again, it's one shot and it's hyper responsive when I move my mouse over. So level one was about describing it. Level two is about showing a fantastic website.
04:24Now, we're gonna do this on what I will call hard mode. We're not gonna pull any punches here on the channel. What we're gonna do is I've shot over to this website called awards.com.
04:34And what we can do on this website is basically find out what are all the award winning websites that have existed. Right? So I can see all the ones that have won incredible awards, like this dog one here looks really cool.
04:43Don't board me. I think it's really fun, really enjoyable. You can see we've got dogs doing various different things.
04:49I've actually gone ahead, guys, and I've picked, like, would call an expert level difficulty for this one. What we're gonna be doing is this Igloo website, which is freaking amazing. Check this out.
04:58I visited the site because there's so much thing now about Fable five actually designing video games. We may actually have GTA six before they said, look at this. This is exceptional.
05:08Again, I've got this hyper responsive thing here. But I can click on this. We're getting audio.
05:14This is pretty freaking exceptional. If I scroll down, look at this scroll animation. I come down.
05:19I mean, this has been built with love. This is a masterpiece. This is absolutely gorgeous.
05:24I can click on this. I can explore it. I can go deep.
05:28And there we go. We got some interesting information. Almost like a video game, essentially.
05:32And what we're gonna do is we're gonna ask basically, we're gonna ask it to build this exact thing and we're gonna see how both models get on with this. And even look at this. I scroll down.
05:42This is just fantastic. There we go. Check this guy out.
05:45And go down to LinkedIn. This is exceptional. So this is the prompt that I gave it.
05:49I want it go ahead and recreate this website. It is a visual masterpiece. Of creating videos.
05:54You need to go ahead and use basically, I've said go ahead and use video generative software. Like, you give it your API keys to Higgs Field or the Keyera AI, and it'll go ahead and do that. I want it to be beautiful and visually fantastic.
06:04You don't have to use an inkle up. You can use any object that you want to, but it needs to have this kind of mystical winter almost interstellar vibe that is gorgeous. I want you to be close attention to all the different design elements, scroll animations, learning, blah blah blah.
06:15Here's the website. That's literally all I've done. It's come back.
06:18Now, Opus 4.8 is asked as a question here. What should the centerpiece and setting be? You said I could talk for an igloo.
06:23Let's just go for glowing igloo. That's fine. How should it be branded?
06:26Let's just go with keeping it igloo. I think it's absolutely fine. And let it do its work in the background, and we can compare how they both do together.
06:33Beautiful. And now they finished, we're gonna check out both of them. And bear in mind, I gave them a very, very difficult task.
06:38So let's go ahead and check out what Opus 4.8 did for us. So I brought a little ink. This is really nice.
06:44This is crisp. Bear mind, one shot. I've not touched this.
06:46We can even turn on the sound. Let's do that. Okay.
06:50Do we have any sound? Kind of like, yes, but it's not crazy. Building web three's first mainstream IP.
06:56The sound's a bit meh. I can scroll down a little bit. This is interesting.
07:00Okay. It's got someone literally frozen in the ice. I'm not sure what's going on there.
07:03Pudgy penguins. I'm gonna turn the sound off because it's not perfect on this one. But this is really freaking you know, for a first crack, not too bad from Opus, but you can see things going up.
07:13Let's scroll down, see the rest of the website, different images. I would say, okay. There's I mean, I love this animation effect here.
07:20So this is four point o. Let's see exactly what happened with the latest version five. And then this is what we got from Claude Fable five.
07:27Let's open this up and see Monolith. Okay. Click to descend.
07:31The structure is awake. Let's have a look at this. Wow.
07:34This is pretty and then we can zoom in, I'm guessing. Wow. Okay.
07:38Cool. With it, this is all one shot. I gave it one simple prompt and it's done that.
07:41That is crazy. I can then zoom in a little bit more. The Observatory.
07:47Guys, this is actually freaking wild. I'm gonna mute the actual tab because getting to watch it.
07:52We zoom in a little bit, then we've got Beacon, a warm reply. Guys, this is some of the I have never seen something like this on first shot. This is freaking gorgeous.
08:00Look at the depth. And again, this beautiful animation, can scroll backwards and forwards. And then I've got this here, and what do I see?
08:07The eyes remembers. Chris, contacts. Oh my gosh.
08:11Genuinely, what am I watching right now? This is ridiculous. I am actually really this is insane.
08:16I think I can just zoom all the way back out right to the top, and I've the monolith. I've got Drift. This was just one freaking shot.
08:23I just said, hey. Here's the actual original ad basically, original website, and it's done it. Really freaking impressive.
08:28Like, actually nuts. And it's done a much better job, and it really feels like you're immersed with going in. Like, imagine if I gave it two prompts.
08:34Like, this is actually outrageous. There's no doubt this is the best. One thing I would change, I think, is getting it looped in some respect so I can loop back and forward a little bit.
08:42So the basically, the end frame and the start frame are the same, but this is crazy. And full enough, this is just the basically, the beginning of the kind of things that you can do with Claude. And if Claude sounds like Jack, this sounds like you're speaking Spanish to me, I'm gonna put down below here for you a a link to my full Claude Code masterclass, takes you from foundation, building websites, stuff I've never shared online, power features, memory systems, all the stuff that I don't share on YouTube.
09:04Is the best course I've ever created. It shows you everything. I'll put a link down below so you can go ahead and access that if you wanna go and check that out.
09:10And go in more detail because this is literally outrageous, and it leads us nicely onto the third challenge. And bear in mind, level two was just giving it a website.
09:20That's all I did. Now level three takes it one step further, which we call extracting the DNA of a website. And what I mean by this is, essentially, one of the things that the philosophy here is that basically, Claude can build anything, but it doesn't know natively what the best design looks like.
09:36So if you find a website you think is gorgeous or just any website in general, what Claude can actually physically do is understand the DNA, the blueprints, the typography, the logos, the color scheme, the balance, the spacing, and all these different ratios, and kind of extract if you like an essence of the website.
09:53And so the idea here is very simple. If we can analyze the actual blueprint of a website, we can then essentially write down and codify what is design excellence based on all these websites that we like, and then we can rebuild it for our own individual website without taking anything from the website because you can't necessarily articulate why a certain website looks good, but we can use Clawd to go ahead and do that for us.
10:14So in one of my very last videos, I actually showed you, we took this website as an example, okay, which is rocket.new. And effectively, I did the exact same process. I extracted the design elements from it, and then I did and I built my own version, which was this one here.
10:27And this was built with Opus 4.8, just like this. And so what I've done is I've gone over to now basically Fable.
10:34I've extracted it. But to do that, I need to grab one very quick thing. And so I'm just gonna shoot over to my community and come down here and just grab my design blueprint extractor and just go ahead and download this one.
10:44If you don't have that, basically, you can just say to Claude, hey, go ahead and analyze it. This one's little bit more detailed because it uses lots of different individual skills. And then to come down here, I'm just gonna attach the file real quick.
10:53And then I'm gonna give it a prompt using Glider. Hey there. So I'd like to go ahead and use my skill to extract the design DNA of this website.
11:00And then I'd like to go ahead and create for me an alternative version of it. That's gonna look gorgeous. I'd like some kind of like rocket video at the top of the website.
11:09But I want the web video basically, the website to be about let's do it about websites. I wanna be about selling websites, make it look beautiful. Okay?
11:16Put that prompt in there. Come over. Let's just make sure now that we are on Fable five, and then we are ready to rock and roll.
11:22And now over in the school, Fable's gone ahead and created all this stuff for me. So what it does is go down and understands many things about the website. So let's have a look.
11:29It's got a preview image of this is what the original DNA looks like for zone references. So it knows exactly what it's looking at. It's got previous examples if you feed it that.
11:38It's got a scaffold HTML. Like, HTML essentially just details the kind of structure of what the website looks like. Now bear in mind, you can build any website you want to.
11:46The task here specifically is reimagining an existing design style. Right?
11:52So it's not right or wrong. It's just kinda actually reimagine the existing design style. Okay.
11:56So it's now finished. Now bear in mind, this is what I I just took multiple backs and forth on Opus 4.8.
12:02This is what Opus 4.8 delivered. Looks good. Looks fine.
12:05I mean, I can click on things. It's decent. Again, it's kinda like, you know, fair enough.
12:08I think it's a decent website. Looks okay. This is the original.
12:11A little bit a lot of text density here. Let me show you what Fable five just built. Okay.
12:16Check this out. So this is Fable five. Look at this.
12:20Look at the smoothness of this rocket. Completely different design direction.
12:25Like, actually crazy. I come down and look how it's kinda blended in the white at the bottom. It has crushed the blinks, the basically, the actual logos themselves.
12:35I had to go back and forth with 4.8 to do that. This is radically better.
12:39I come down. I can see these different bits here. It's got it's got the actual lines, which is perfect.
12:44Watch your build start to live. This is really freaking impressive. Goes through the brief, builds out the wireframe, really freaking cool.
12:50And it's just happening on the screen. Goes through the design and then pushes live. It did this all by itself.
12:55Really freaking impressive. Gonna come down, build a business like yours. Do know what I would say, guys, honestly?
13:00It's not really the big things. To me, it's actually the small details. Like, for example, we didn't even have this on this page here.
13:08Right? But if we come back to the Rocket page, which you got the information off, you can see it's got describe the plan, get recommendation, blah blah blah. Like, you know, it's got some things going on.
13:15It is nothing genuinely compared to what we now have here. And look at this. Just nice little details.
13:20It's just crisp. It's clean. It's easy to understand.
13:23They've gotten text density. I reviewed over a 150 websites. The people inside my community give them direct feedback to help their business.
13:30Text density was the biggest offender by far. Easy to understand, beautiful, crisp.
13:36I come down, and again, look at these beautiful natural animations and graphics. The brief coming over, the design coming over. I can click to the build launch.
13:43It's just such a beautiful easy way to describe this. And it's an all this by itself. It's also got this beautiful toggle menu in the middle.
13:51It's basically closer things together. It just I'm telling you right now, has an eye for design and what design looks like. It knows not to have any more than five things.
13:59It's gorgeous. Gonna come down here. We have this.
14:02This page probably could do a little bit of improvement, but for a one shot, this is insane. What I wanna say, again, everything's in this beautiful box, which is fantastic and very modern design right now. And then I can come down and have a look at all these different things.
14:13Flashable to the bottom, tell us what you sell, and then we have rocket at the bottom, which changes colors. Outstanding. Literally, very, very, very impressive.
14:21And it's gone ahead and it's built the entire rocket and everything like that. And this does bring us on to the biggest problem with Fable that I want you to make sure that you crush. And that's essentially the it's token hungry.
14:31She's very hungry. She's at a buffet. She wants to eat all the Chinese food.
14:34How do we actually stop it? Well, all this is solved in the dark. And what it's about is leveraging when we bring out our big guns, our bazookas, and when we don't.
14:43So think about it from this point of view. Okay? You got low, medium, high, max, and then you've got ultra code, which is spinning up multiple, many different agents.
14:50So here's a really simple way to think about it. Okay? I want you to do this.
14:53So first of all, low. So if you're doing things like typos, copy swaps, renames, one line CSS tweaks, either just use like Sonnet or use the low mode if you really have to use Fable. But, ideally, you don't need to do that.
15:04Now Medium is your daily driver. Okay? This is building sections, iterating UI, normal feature work.
15:11High is gonna be for the hard and tricky parts. Okay? Gnarly debugging, tricky refactors, design, judgment calls.
15:17And then we have max. Now I want you to reserve max for your first move. Max is like it's the big book.
15:24It's it's the super intelligent part. And the way you'll make your token stretch further and get the best results is we use Max initially. Give it as much context as possible, then let Max do the initial build, and then we move over to medium to move it left and right.
15:38You will get so much more out of favor by doing that, especially on the API. You if you have unlimited budget, you just Max all day. The reality is it's token hungry, and honestly, you don't need Max for everything.
15:50We don't need Albert Einstein mopping off floors. Medium is fine. Use max initially.
15:55So the general rule, open on max, drop to medium to build. That's the that's my recommendation. That's what I'm suggesting we do right now.
16:01And as you can see, medium, okay, on Fable five is kind of equivalent to extra high on Opus four point m.
16:08Anthropic lower effort on Fable five often exceeds x high on prior models, and medium still tops every frontier model on frontier code. Absolutely crazy. I've got a couple of graphs so you can see compatibility versus effort.
16:21Got some information there on the list price and what this is looking at from a on from a kind of pricing point of view and same build dial then so you can make an informed decision. So Fablefire for design and Medium for the mileage. But that brings us on to a really cool question.
16:35And now we've built these beautiful websites. What we now need to know is how to host the SEO optimizer and actually enable our clients to make edits by themselves, our team to make edits by themselves. And we're gonna learn all of that by watching this video right here.
The Hook

The bait, then the rug-pull.

The title makes a claim this video actually tests. Jack Roberts runs three escalating website builds -- text description, award-winning clone, design-DNA extraction -- against Opus 4.8 on the same prompts, and the gap is visible from the first scroll.

Frameworks

Named ideas worth stealing.

00:54list

Three Levels of Website Creation

  1. Level 1 -- Describe It: text prompt only
  2. Level 2 -- Show It: paste a reference site URL
  3. Level 3 -- Extract the DNA: analyze blueprint, rebuild for your brand

Escalating prompting strategies from pure description to design-DNA extraction.

Steal forAny client brief or landing page build
14:30model

One Dial. Triple the Mileage.

  1. Low -- typos, copy swaps, one-line CSS (use Sonnet)
  2. Medium -- daily driver: building sections, UI iteration
  3. High -- gnarly debugging, design judgment calls
  4. Max -- first build only, set context and design intent
  5. Ultra Code -- multi-agent, overkill for websites

Effort tier framework for stretching token budget: open on Max, then drop to Medium for all subsequent work.

Steal forAny long-session Claude Code workflow
CTA Breakdown

How they asked for the click.

VERBAL ASK
08:18product
“I'll put a link down below for you -- my full Claude Code masterclass.”

Single mid-video pitch, non-pushy, framed as 'if Claude sounds like a foreign language to you' -- good targeting, low pressure.

MENTIONED ON CAMERA
00:00toolClaude (Fable 5 / Opus 4.8) ↗
04:18linkAwwwards ↗
05:43toolHiggsfield AI ↗
05:43toolKie.ai ↗
10:19linkRocket.new ↗
00:31productGlaido (Voice Dictation) ↗
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Storyboard

Visual structure at a glance.

cold open
hookcold open00:00
Level 1 setup
promiseLevel 1 setup00:54
LaCroix results
valueLaCroix results02:36
Monolith experience
valueMonolith experience05:43
Level 3 DNA concept
valueLevel 3 DNA concept09:18
Fable 5 blueprint result
valueFable 5 blueprint result13:22
One dial rule
ctaOne dial rule16:01
Frame Gallery

Visual moments.

cold open00:00Frame at 00:14 from Claude Fable 5 Just Changed Website Design Forever00:14Frame at 00:28 from Claude Fable 5 Just Changed Website Design Forever00:28Frame at 00:40 from Claude Fable 5 Just Changed Website Design Forever00:40Frame at 01:00 from Claude Fable 5 Just Changed Website Design Forever01:00Frame at 01:13 from Claude Fable 5 Just Changed Website Design Forever01:13
cold open00:00Frame at 00:14 from Claude Fable 5 Just Changed Website Design Forever00:14Frame at 00:28 from Claude Fable 5 Just Changed Website Design Forever00:28Frame at 00:40 from Claude Fable 5 Just Changed Website Design Forever00:40Frame at 01:00 from Claude Fable 5 Just Changed Website Design Forever01:00Frame at 01:13 from Claude Fable 5 Just Changed Website Design Forever01:13Level 1 setup01:21Frame at 01:39 from Claude Fable 5 Just Changed Website Design Forever01:39Frame at 01:51 from Claude Fable 5 Just Changed Website Design Forever01:51Frame at 02:04 from Claude Fable 5 Just Changed Website Design Forever02:04Frame at 02:16 from Claude Fable 5 Just Changed Website Design Forever02:16Frame at 02:29 from Claude Fable 5 Just Changed Website Design Forever02:29Frame at 02:42 from Claude Fable 5 Just Changed Website Design Forever02:42Frame at 02:55 from Claude Fable 5 Just Changed Website Design Forever02:55Frame at 03:07 from Claude Fable 5 Just Changed Website Design Forever03:07Frame at 03:20 from Claude Fable 5 Just Changed Website Design Forever03:20Frame at 03:33 from Claude Fable 5 Just Changed Website Design Forever03:33Frame at 03:46 from Claude Fable 5 Just Changed Website Design Forever03:46Frame at 03:58 from Claude Fable 5 Just Changed Website Design Forever03:58LaCroix results04:11Frame at 04:19 from Claude Fable 5 Just Changed Website Design Forever04:19Frame at 04:31 from Claude Fable 5 Just Changed Website Design Forever04:31Frame at 04:42 from Claude Fable 5 Just Changed Website Design Forever04:42Frame at 04:55 from Claude Fable 5 Just Changed Website Design Forever04:55Frame at 05:12 from Claude Fable 5 Just Changed Website Design Forever05:12Frame at 05:24 from Claude Fable 5 Just Changed Website Design Forever05:24Frame at 05:36 from Claude Fable 5 Just Changed Website Design Forever05:36Frame at 05:48 from Claude Fable 5 Just Changed Website Design Forever05:48Frame at 06:01 from Claude Fable 5 Just Changed Website Design Forever06:01Frame at 06:14 from Claude Fable 5 Just Changed Website Design Forever06:14Frame at 06:26 from Claude Fable 5 Just Changed Website Design Forever06:26Frame at 06:41 from Claude Fable 5 Just Changed Website Design Forever06:41Frame at 06:52 from Claude Fable 5 Just Changed Website Design Forever06:52Frame at 07:04 from Claude Fable 5 Just Changed Website Design Forever07:04Frame at 07:17 from Claude Fable 5 Just Changed Website Design Forever07:17Frame at 07:25 from Claude Fable 5 Just Changed Website Design Forever07:25Frame at 07:42 from Claude Fable 5 Just Changed Website Design Forever07:42Frame at 07:55 from Claude Fable 5 Just Changed Website Design Forever07:55Frame at 08:08 from Claude Fable 5 Just Changed Website Design Forever08:08Monolith experience08:20Frame at 08:33 from Claude Fable 5 Just Changed Website Design Forever08:33Frame at 08:46 from Claude Fable 5 Just Changed Website Design Forever08:46Frame at 08:54 from Claude Fable 5 Just Changed Website Design Forever08:54Frame at 09:11 from Claude Fable 5 Just Changed Website Design Forever09:11Frame at 09:24 from Claude Fable 5 Just Changed Website Design Forever09:24Frame at 09:36 from Claude Fable 5 Just Changed Website Design Forever09:36Frame at 09:48 from Claude Fable 5 Just Changed Website Design Forever09:48Level 3 DNA concept10:00Frame at 10:14 from Claude Fable 5 Just Changed Website Design Forever10:14Frame at 10:23 from Claude Fable 5 Just Changed Website Design Forever10:23Frame at 10:37 from Claude Fable 5 Just Changed Website Design Forever10:37Frame at 10:50 from Claude Fable 5 Just Changed Website Design Forever10:50Frame at 11:05 from Claude Fable 5 Just Changed Website Design Forever11:05Frame at 11:18 from Claude Fable 5 Just Changed Website Design Forever11:18Frame at 11:31 from Claude Fable 5 Just Changed Website Design Forever11:31Frame at 11:44 from Claude Fable 5 Just Changed Website Design Forever11:44Frame at 11:57 from Claude Fable 5 Just Changed Website Design Forever11:57Frame at 12:04 from Claude Fable 5 Just Changed Website Design Forever12:04Frame at 12:23 from Claude Fable 5 Just Changed Website Design Forever12:23Fable 5 blueprint result12:36Frame at 12:49 from Claude Fable 5 Just Changed Website Design Forever12:49Frame at 13:08 from Claude Fable 5 Just Changed Website Design Forever13:08Frame at 13:16 from Claude Fable 5 Just Changed Website Design Forever13:16Frame at 13:28 from Claude Fable 5 Just Changed Website Design Forever13:28Frame at 13:42 from Claude Fable 5 Just Changed Website Design Forever13:42Frame at 13:56 from Claude Fable 5 Just Changed Website Design Forever13:56Frame at 14:10 from Claude Fable 5 Just Changed Website Design Forever14:10Frame at 14:23 from Claude Fable 5 Just Changed Website Design Forever14:23Frame at 14:34 from Claude Fable 5 Just Changed Website Design Forever14:34One dial rule14:42Frame at 14:49 from Claude Fable 5 Just Changed Website Design Forever14:49Frame at 14:59 from Claude Fable 5 Just Changed Website Design Forever14:59Frame at 15:13 from Claude Fable 5 Just Changed Website Design Forever15:13Frame at 15:27 from Claude Fable 5 Just Changed Website Design Forever15:27Frame at 15:40 from Claude Fable 5 Just Changed Website Design Forever15:40Frame at 15:50 from Claude Fable 5 Just Changed Website Design Forever15:50Frame at 16:07 from Claude Fable 5 Just Changed Website Design Forever16:07Frame at 16:19 from Claude Fable 5 Just Changed Website Design Forever16:19Frame at 16:35 from Claude Fable 5 Just Changed Website Design Forever16:35Frame at 16:43 from Claude Fable 5 Just Changed Website Design Forever16:43
Watch next

More from this channel + related breakdowns.

28:01
Jack Roberts · Tutorial

How I Build $10,000 AI Websites in 17 Mins

A 28-minute walkthrough of the complete AI website pipeline: extract design DNA, brief it into Google AI Studio, refine in Claude Code, then use competitor outlier analysis to wire it for conversion.

May 26th
Chat about this