Modern Creator
Leonardo Grigorio | Build & Ship with AI · YouTube

Fable 5 vs Opus 4.8: I Let Both Rebuild a Site for 35 min

A 13-minute head-to-head where two Claude models race to clone the same landing page — one burns $30 and 35 minutes, the other $2.70 and 5, and the gap in quality tells you exactly when the expensive model earns its keep.

Posted
yesterday
Duration
Format
Tutorial
educational
Views
301
17 likes
Big Idea

The argument in one line.

Fable 5 earns its steep price premium specifically in visual-verification loops: when Claude in Chrome can see the live site, Fable 5 self-corrects across 35 minutes of autonomous iteration while Opus 4.8 stalls after 5, producing a result that would otherwise require a human an afternoon of manual feedback.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A developer or AI builder who uses Claude Code daily and wants to know whether Fable 5 is worth 10x the cost of Opus 4.8 for UI work.
  • Someone building landing pages or replicating designs from Figma, screenshots, or competitor sites using an AI coding agent.
  • Anyone curious how the Claude in Chrome extension integrates with Claude Code for end-to-end visual validation.
  • A solo builder deciding between burning time on manual iteration vs. paying for a model that closes its own feedback loop.
SKIP IF…
  • You work on backend or logic-heavy code — this test is specifically about pixel-fidelity UI replication.
  • Budget is a hard constraint: the Fable 5 run cost $30.41 for a single landing page clone.
TL;DR

The full version, fast.

Fable 5 introduces a self-verifying coding loop: it implements code, opens the browser via Claude in Chrome, screenshots the result, compares it to the original, and iterates — all without a human in the middle. In a direct race to clone modash.io, Fable 5 took 35 minutes and $30.41 but produced a result that scraped real images, replicated animations, and matched section layouts closely. Opus 4.8 took 5 minutes and $2.70 in round two and barely changed from its generic first pass. The conclusion: use Fable 5 when fidelity matters and the task is complex enough to justify the cost; use Opus 4.8 everywhere else.

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:0002:12

01 · What makes Fable 5 different

Overview of Fable 5's key differentiator: end-to-end verification via vision. Introduces the implement-validate-prompt loop and Claude in Chrome. Sets up the test.

02:1204:01

02 · Setting up the race

Two Claude Code sessions configured — Fable 5 and Opus 4.8 in separate folders. Same prompt sent to both: replicate modash.io from a full-page screenshot.

04:0105:04

03 · Round 1 results — Opus 4.8

Opus 4.8 finishes in ~2:50. Colors roughly right, fonts wrong, testimonial and footer sections generic. Side-by-side comparison reveals the gaps.

05:0405:58

04 · Round 1 results — Fable 5

Fable 5 finishes in ~4 min. Hero weaker, navbar off, customer section better, FAQ worse, footer closer. Mixed first impression.

05:5807:44

05 · Round 2 setup — Claude in Chrome

Claude in Chrome activated. New prompt uses --goal flag: verify against live site, iterate until identical. Cost check: Fable at $1.60, Opus at $0.61 so far.

07:4409:22

06 · Fable 5 runs for 35 minutes

Fable 5 takes the Claude in Chrome slot and runs autonomously at x50 timelapse speed. The --goal flag keeps it iterating. Discussion of what a good objective goal looks like.

09:2210:23

07 · Round 2 results — Opus 4.8

Opus 4.8 takes ~5 minutes in round 2 and barely changes. Generic cards unchanged. Confirms Fable 5's advantage is specifically in longer autonomous runs.

10:2313:02

08 · Round 2 results — Fable 5 deep-dive

Section-by-section comparison. Customer section near-identical, resources cards very close, FAQ aligned, scroll-jacking animation implemented with a minor footer overlap bug. Images scraped from live URLs.

13:0213:34

09 · Final verdict and cost breakdown

Fable 5: $30.41 / 31% context. Opus 4.8: $2.70 / 10% context. Recommendation: trim CLAUDE.md skills for Fable 5, use specific end-result prompts.

Atomic Insights

Lines worth screenshotting.

  • Fable 5 scraped actual images from the target website by URL rather than using placeholders — something Opus 4.8 never attempted.
  • Claude in Chrome can only run in one session at a time, forcing sequential rather than parallel round-2 testing.
  • Fable 5 took 35 minutes and 31% of the context window; Opus 4.8 took 5 minutes and 10% — the cost difference was $30.41 vs $2.70.
  • Vague goals like 'make it look identical' cause the model to loop without a stop condition; objective goals like 'all tests pass, lint is clean' give it a binary exit signal.
  • The implement-validate-implement loop is not new — what Fable 5 adds is a model trained to exploit it across dozens of autonomous iterations without human prompting.
  • Opus 4.8 defaults to generic card layouts regardless of how specific the reference image is; Fable 5 identifies and copies site-specific components like scroll-jacking animations.
  • Updating skills to be less prescriptive is the key prompt-engineering adjustment for Fable 5 — it finds the how itself, so spelling it out constrains it.
  • A scroll-jacking animation was autonomously identified and implemented by Fable 5 with just one bug: a footer overlap the model did not self-catch.
Takeaway

When the model closes its own feedback loop, the human bottleneck shifts.

WHAT TO LEARN

Fable 5's advantage is not raw intelligence — it is the number of self-correction cycles it will run without being asked.

  • A model that can see the live website and compare it to its own output eliminates the most tedious part of UI iteration: sending screenshots back manually and re-prompting.
  • Vague goal conditions like 'look identical' cause long-running agents to loop without exit; an objective condition like 'all tests pass' gives the model a binary stop signal it can actually verify.
  • Fable 5 costs roughly 11x more than Opus 4.8 per session, but replaces hours of human feedback rounds — the ROI depends on how much your time is worth.
  • Keeping CLAUDE.md skills concise matters more with capable models: over-prescribing the how constrains a model that can figure it out better on its own.
  • Fable 5 retrieved actual image URLs from the target site rather than using placeholders — behavior that was never explicitly instructed, emerging from the model's broader goal interpretation.
Glossary

Terms worth knowing.

Claude in Chrome
A browser extension that gives Claude Code the ability to open URLs, take screenshots, and click around a live website, enabling visual validation without human intervention.
--goal flag
A Claude Code CLI parameter that sets an objective exit condition; the agent keeps iterating until the condition is met rather than stopping after one pass.
Context window
The total amount of text a model can hold in memory during one session. Fable 5 used 31% of its window on this task; Opus 4.8 used 10%.
Scroll-jacking
A UI technique where page elements animate in sync with the user scrolling rather than following the natural scroll behavior.
CLAUDE.md / skills
Project-level instruction files that pre-load context and behavior rules into Claude Code sessions. Over-specified skills constrain newer models that can reason about the how on their own.
Resources

Things they pointed at.

00:53toolClaude in Chrome
01:12toolLoop (Claude Code tool)
02:25productmodash.io
Quotables

Lines you could clip.

01:30
This is the golden phrase that made me consider that this model might be an exceptional model for copying other websites.
Teaser line that reframes a technical feature as a practical use caseTikTok hook↗ Tweet quote
06:47
Honestly, for the price, I would just take Opus 4.8 for this specific example.
Counterintuitive mid-video reversal that sets up the round 2 revealIG reel cold open↗ Tweet quote
12:33
If I'd need to iterate with the OPUS 4.8 model, I'd probably be spending the whole afternoon sending it images of sections of the website that should be improved.
Concrete human cost comparison — the real ROI of the model upgradenewsletter 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.

analogystory
00:00Alright. So Ontopic just launched Cloud Fable five. And just to get straight to it, I think that this model might be a very good model to copy websites.
00:09And be aware that you should try to be ethical about it and not just blindly copy any website, but actually just take them as inspirations to build your own thing. The first thing that stands out about this model is that they aimed for a long running project execution in a sense of which it should be able to do an end to end verification until the task that it's given is accomplished.
00:30In agent decoding, what we're used to doing is sending over a prompt. The agent then implements and gets back to us with, I'm done implementing that. And then we go over to the website to validate.
00:41And this is especially for UI since if the agent isn't actually seeing what's going on, it doesn't have the full context. So we grab that context and then send that back to continue the implementation.
00:53But now with tools like Claude in Chrome and if you haven't heard about that, it's basically this extension right here that your Claude code has access to and can actually open up your website, take screenshots, click around, and actually see how the website is performing. So now if we prompt something, it could actually implement, then it can validate.
01:14That validation is brought back into its context, and it can just continue the loop. And by the way, there are tools like Loop now. There's also I think it's Goal.
01:24Yeah. So set a goal. Cloud checks before stopping.
01:27So that's the idea. Just work on something until it's done and have the end to end verification so that you can validate if implementation was done correctly. Now this isn't really a new thing.
01:37Cloud and Chrome has been around for a while. But now the difference with this model is that it's actually doubling down to workflows that actually take advantage of these long running projects. And, naturally, to do that, Claude Fable five understands diagrams, charts, and tables nested in files and PDFs, improving work across document heavy work in finance, legal, analytics, and architecture.
02:00The model also uses vision to help evaluate its own coding work, check outputs against the original design or goal. Now this is the golden phrase that made me consider that this model might be an exceptional model for copying other websites. And what we're going to do is have on one side, Opus 4.8, and on the other side, fable five.
02:21In both sessions, I'll send the same exact prompt. It has its own folders up here. The goal will be for it to replicate this same exact landing page.
02:31And at the very end, we'll be able to check how much of the contest window was used, how much would that model cost us if we were to use its API, and finally, how long each will take. And by the way, I think I just noticed that I placed the model in the wrong folder.
02:45So let me switch that out, this one to Fable, and this one to Opus 4.8.
02:52So this right here is my prompt. I need you to create an exact replica of this website. Try to make it look identical for any images you don't have or can't find.
03:01Use a corresponding placeholder. The URL of the website is modash.io, and this is the full image of it.
03:09So let me paste that in here and also grab actually, before I grab that image, let me copy over the prompt there. Let's copy the image, paste it here, paste it there.
03:20Okay. Let's hit enter. Now while that's running, let's go through the prompting Claude Fable five.
03:27And, honestly, instead of reading through everything, let me just give you a TLDR. Overall, this is a much smarter model. And instead of spoon feeding it everything it needs to do, just try to be specific with the end results and not telling it exactly how to do it.
03:42Maybe like, for example, if I wanted it to implement using an XJS, that's something that I should probably add. But if I'm not sure about the how, this model is optimized to find that how in the best way possible. Okay.
03:54And by the way, after two minutes and fifty, Cloud Opus 4.8 is done creating the replica. Let's check it right now. I wasn't expecting it to be so fast, but here it is.
04:07This is the Claude OPUS 4.8 replica. Let's take a look at the original one. So this is how the original one looks like.
04:16This is what Opus 4.8 created. Let's actually place them side by side. So there you go.
04:22It didn't really copy over the font, but, I mean, the colors are right. The form, the border radius seems correct, but it still defaults to this kind of generic card that you can expect in all Cloud models.
04:36This is how the testimonial section looks like. It kind of always defaults to the more generic feel. But by the way, the next step will be iterating with the Cloud in Chrome, which will give Cloud access to actually browse and look into both of the websites and try to code it again so that they look more alike.
04:55The footer, by the way, just really doesn't look like the original one. Alright. Meanwhile, after four minutes, the sable model is done with its replica.
05:05The hero section still doesn't look as good. The nav bar isn't alike at all.
05:10I feel like this customer section is much better than the 4.8 model, but, unfortunately, this section is kind of off. These buttons don't really work, and the overall design does not look alike. In this section, it looks a bit more alike, but I expected that the learn more button would be copied correctly since it's pretty easy to do so.
05:29This part nailed the structure, but it's still too colorful. And then we have this design that does not look alike.
05:38Then the resources part is really not that great as it's extremely generic. The frequently asked questions designed by Fable is actually worse than the 4.8 on regards to copying the original website. Now this footer looks more like it, but it's still far from the original.
05:55Now I'm going to activate Claude in Chrome since it is deactivated. I think I have to reinitialize Claude r Chrome and yeah.
06:06Let's try that. Probably, it'll give me an error. Nope.
06:08It didn't. So Chrome, and now it's enabled. Okay.
06:11Let me do the same thing with Opus 4.8, and it's done. My prompt is a dash goal of use Claude and Chrome to verify the original website, and then I give out the URL for that website against what was designed.
06:24Keep iterating and get to the closest result possible so that the website is eventually identical to the original. Now before I even send that, let's see the prices. For Fable, it costs $1.6, while with Claude Opus 4.8, it would cost us 61¢ of a dollar.
06:42And on the left side, you have Fable, while on the right side, you have Opus 4.8. Honestly, for the price, I would just take Opus 4.8 for this specific example.
06:53And by the way, I don't think the model was created to just be building these simple landing pages, but the end goal with these tests is if this model is actually better than previous models at understanding what is the original production and how close can it get to that.
07:09Again, not for people to just blindly copy over websites like this, but how can you get a Figma template, for example, just send over the image and have Claude produce that entirely? Okay. Let me send this prompt over.
07:20Send this one in Opus 4.8 as well, and let's see how long it'll take and how efficient will these productions get. Okay. So, actually, it can't run two instances of Cloud and Chrome in two different sessions.
07:32So I'll just stop Cloud Opus 4.8, let Fable work on it, and then afterwards, we'll get back to the 4.8.
07:45Just interesting that it says goal not yet met continuing. I'm curious to see what it qualifies as a met goal.
07:55So for example, it won't have the same images from the original modash.io, and I don't know if it can have those images.
08:06So, yeah, I'm curious to see, like, what will it consider a accomplished goal.
08:43Alright. That took thirty five minutes. I was worried because it didn't have a clear objective goal, and that's actually the example that Claude gives us here to use goal.
08:54So goal all tests in test slash off pass, and the Lint step is clean. So that's a more specific objective goal that the AI can use to iterate, and then when all conditions are met, it stops.
09:08You might have kind of seen how the website looks like, but let's actually have Opus work on the website. And after it's done, we'll see which one actually looks closer to the original website.
09:24Alright. Well, this was kind of underwhelming. The Opus 4.8 took around five minutes to complete its task, and, obviously, it really didn't change a lot.
09:35And that's exactly the promise from Fable five in being a better model for longer running tasks. So now let's compare them again. Left side is the original.
09:44Right side is Opus 4.8. As you can see, not much has changed. This section still continues the same, still the generic cards here.
09:54Honestly, since there weren't significant changes, we could just read it through here. So the hero section has a lavender announcement banner, logo workflow tabs, collaboration cards, animated scroll jacking CTA, footer.
10:07Let's actually check that footer because the first result was really underwhelming, and, honestly, it continues to be. But now let's see what thirty five minutes of Fable five got us. Already, this padding or margin is very characteristic of the original, was identified, and now is being used.
10:24The same images were scraped, and I'm just curious to see if it's the same URL from the original one, and it probably is. Yeah.
10:33The customer section looks identical. The only difference is the margin between these components. It didn't really nail this section, but at least this part is clickable.
10:44Now this part, it almost got it right. And you might have noticed that it tries to see the website as mobile and tablet and as a desktop view as well.
10:55And this specific width might just not have been considered. Despite that, I think the learn more button should have been identified and changed. Now this section down here looks more alike, and then we get to connect with Shopify.
11:08Maybe a more fair comparison would be to see them both widescreen. And when they are widescreen, they look much more alike. Now as for the testimonials, the original looks like this.
11:20And what was created from fable five is not really what we expected despite you've probably seen it click through these buttons, but it might have just forgot to place these specific cards.
11:31Now I was really curious about the resources section since these cards are specific. You have an entire image in the first card followed by a blog styled summary card, and the result was very, very, very, very similar. Yeah.
11:45That's pretty cool. And then going down to frequently asked questions, it finally looks much more alike.
11:52Let's see when I click the plus. The sliding effect wasn't copied, and I think that if it got the HTML from the website, it should have identified that this was a feature. But still, visually, it looks very much alike.
12:06Now the section I was most curious about was this one. While you scroll down, these containers kind of slide up until you're down to the footer section. Luckily, Fable identified that and implemented it for us beautifully with just one issue.
12:21When you get to the footer part, you actually can't see the footer since this component is front of the screen. Instead of telling the model to fix it, I just commented out those containers so that we can see how the footer looks like.
12:34It's still missing these paddings, and the section doesn't occupy the full height of the screen, but this result is much, much closer to the original. It also looks pretty good on mobile. Maybe the margins between components are a bit off like this part.
12:48But, if I'd need to iterate with the OPUS 4.8 model, I'd probably be spending the whole afternoon sending it images of sections of the website that should be improved. Now while Fable five costed us $30.41 and took 31% of the context window to produce the website.
13:06Opus 4.8 costed us $2.70 and occupied 10% of the entire context window.
13:13Alright. So that was our task for today. Make sure to update your skills since this model works better with not so specific skills.
13:20And if you're using a bunch of MCPs and skills and everything, make sure to check my latest video where I go through my specific workflow that works pretty well with better models. Thanks for watching. Make sure to leave a like.
13:30Subscribe for more, and I'll see you in the next video. So that's
The Hook

The bait, then the rug-pull.

The claim was simple: Claude Fable 5 uses vision to validate its own code. So the creator set up two Claude Code sessions side by side, gave them the same prompt, and let them race to clone a live SaaS landing page — one model spending freely, one keeping it cheap.

Frameworks

Named ideas worth stealing.

00:27model

Implement-Validate-Prompt loop

  1. Agent implements code
  2. Claude in Chrome screenshots the live result
  3. Visual diff feeds back into context
  4. Agent iterates

The core agentic workflow Fable 5 is designed to exploit — autonomous end-to-end verification without human checkpoints.

Steal forAny UI-heavy coding task where visual correctness is the exit criterion
08:47concept

Objective --goal pattern

Use verifiable conditions as the goal (e.g., all tests pass, lint is clean) rather than subjective ones. Gives the model a binary stop signal.

Steal forAny long-running Claude Code task that needs a clear definition of done
CTA Breakdown

How they asked for the click.

VERBAL ASK
13:15next-video
Make sure to check my latest video where I go through my specific workflow that works pretty well with better models.

Soft verbal CTA with no on-screen graphic. Delivered as a recommendation rather than a pitch.

MENTIONED ON CAMERA
02:25productmodash.io
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
Storyboard

Visual structure at a glance.

Claude Fable announcement page
hookClaude Fable announcement page00:00
implement-validate-prompt diagram
promiseimplement-validate-prompt diagram00:45
two Claude Code sessions side by side
setuptwo Claude Code sessions side by side02:15
Fable 5 side-by-side round 1
valueFable 5 side-by-side round 104:05
Opus 4.8 replica vs original
valueOpus 4.8 replica vs original05:04
Fable 5 running at x50 speed
valueFable 5 running at x50 speed08:10
Fable 5 final — features section
valueFable 5 final — features section10:23
Resources and FAQ sections compared
valueResources and FAQ sections compared11:47
Final cost breakdown in terminal
ctaFinal cost breakdown in terminal13:10
Frame Gallery

Visual moments.

Watch next

More from this channel + related breakdowns.