05:51metricsmule · Tutorial
The Future Arrives: BIG Magnific Updates + Upscale Recap
A 6-minute inside look at Magnific's triple launch — Agents, MCP, and Flows — straight from the Upscale Conference and the SF office.
June 11thThe argument in one line.
Claude Fable 5 reduces professional web design to a prompt and a folder of reference images, producing scroll-animated, mobile-responsive HTML that would cost tens of thousands of dollars to commission.
Read if. Skip if.
READ IF YOU ARE…
- You have a prompt library, product, or personal brand site and want a polished landing page without hiring a developer.
- You use Claude regularly but have never tried Code mode for front-end output.
- You want to understand the folder-packaging requirement before attempting this workflow yourself.
- You are curious whether a basic one-line prompt or a ChatGPT-expanded super prompt produces better results.
SKIP IF…
- You need production code that ships to a live domain today — the output is a polished rough draft that still requires manual copy-writing and link-wiring.
- You expect to upload individual PNG files; Claude Code requires a collated folder.
The full version, fast.
Claude Fable 5 in Code mode takes a one-sentence brief plus a folder of reference images and returns a scroll-animated, mobile-responsive landing page with interactive prompt cards. The creator tests two methods: a basic prompt submitted directly, and the same prompt expanded into a super prompt via ChatGPT. Both produce striking results; the expanded version wins on visual sophistication. A key emergent behavior is Fable's self-correcting loop — it audits its own output in the preview panel, detects rendering bugs, and fixes them without prompting. The practical workflow ceiling is the asset-packaging rule: images must be in one collated folder, not uploaded individually.
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 – 00:33
01 · Hook + Fable 5 model explainer
Cold open with the finished page, then a brief explainer: Fable 5 is the Mythos-class model above Opus, available to regular Claude users until June 22.
00:34 – 01:22
02 · Desktop app setup and Method 1 brief
Creator navigates to Claude desktop, opens Code mode, shows how to select Fable 5, and introduces the basic one-line prompt.
01:22 – 02:28
03 · ChatGPT super prompt expansion
Creator switches to ChatGPT to expand the basic prompt into a full design spec, then pastes the verbose output back into Claude.
02:28 – 03:41
04 · Asset prep: Magnific references + Canva folder
Downloads style reference images, adds an AI influencer character, packages everything into a Canva PDF folder for Claude Code.
03:41 – 04:46
05 · Method 1 output reveal
Basic prompt + folder submitted. Claude builds an animated landing page with prompt cards, filters, and mobile-responsive layout.
04:46 – 06:23
06 · Self-correcting behavior showcase
Fable audits its own preview, spots invisible elements and negative CSS, fixes them, then auto-renders the mobile view.
06:23 – 07:33
07 · Method 2 (super prompt) output reveal
Expanded prompt produces cinematic hero with portal scroll background, color-shift-on-scroll, and left-right interactive carousels.
07:33 – 09:21
08 · Comparison and refinement workflow
Treat output as rough draft — iterate with specific copy, link targets, and document folders in follow-up turns.
09:21 – 09:43
09 · Subscribe CTA
Links to prompt download, Everything Bundle, and newsletter. Cinematic bedroom shot as outro.
Lines worth screenshotting.
- Claude Fable 5 sits in a new Mythos-class tier above Opus — Fable 5 has safety measures for general use; Mythos 5 is the unfiltered variant restricted to approved orgs.
- Code mode in the Claude desktop app is the correct surface for front-end generation — starting in chat and switching mid-session risks losing context.
- Claude Fable audits its own preview panel output, spotting invisible elements and negative CSS position values, and self-corrects without user intervention.
- The asset-packaging rule is the most common first-attempt failure: Claude Code takes a folder, not individual image files — wrap everything in one folder before attaching.
- Using ChatGPT to expand a basic prompt into a full design spec before feeding it to Claude produces noticeably more cinematic output for the same core brief.
- Fable generated mobile-responsive layout automatically — the creator did not explicitly request it.
- The generated landing page included scroll-triggered animations, a left-right carousel, and color-shift-on-scroll — all from a sub-100-word prompt and three reference images.
- Treat the first Fable output as a rough draft: use it to prove the concept, then iterate with specific copy and link instructions in follow-up turns.
- Style references do not need to be final assets — mood-board images downloaded purely for inspiration still shape Fable's color palette and layout choices.
Five things Fable 5 does that earlier models did not.
WHAT TO LEARN
The step-change in Claude Fable 5 is not output quality alone — it is the model's self-auditing loop, which closes the gap between prompt submission and working code without requiring a second human turn.
- Fable 5 audits its own rendered output in real time, detecting invisible elements and broken CSS, then fixes them without being asked — qualitatively different from earlier models that only reported errors.
- The Mythos-class tier sits above Opus, meaning the most capable publicly accessible Claude model is now available in the standard desktop app, not just via API.
- Prompt quality still matters: a ChatGPT-expanded brief with explicit style directives produced noticeably more cinematic results than the same brief written as a single sentence.
- Claude Code requires a collated folder for multi-asset uploads; individual PNG or JPG attachments are silently ignored, making this the most common first-attempt failure point.
- The recommended workflow is iterative: generate a polished rough draft first, then give specific instructions for copy, links, and exact content in follow-up turns rather than front-loading everything into one prompt.
Terms worth knowing.
- Mythos-class model
- Anthropic's designation for its highest capability tier above Opus. Fable 5 is the safety-filtered public version; Mythos 5 is the unfiltered variant restricted to approved organizations.
- Code mode
- A Claude desktop app context that gives the model filesystem access, a terminal, and a live browser preview panel — the correct mode for generating and running web projects.
- Collated folder
- A single compressed folder containing all reference assets that Claude Code reads as a file system; individual image uploads are not supported in this workflow.
- Super prompt
- A verbose, design-spec-level prompt generated by asking a second LLM to expand a basic one-line brief into full style directives, layout instructions, and interaction specs.
- npx serve
- A Node.js command that spins up a local file server to preview static HTML in the browser, used by Fable as a fallback when the Python HTTP server hits a permissions error.
Things they pointed at.
Lines you could clip.
05:00
“It actually talks to itself almost and finds things you otherwise may have missed.”
07:45
“This is like something that somebody would usually charge tens of thousands of dollars for.”
05:44
“It's like it's its own worst critic, so you can just sit back and let it self correct.”
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.
metaphorstory
00:00Clawed Fable just dropped, and it's like it's breaking the Internet. Look at this. Look how amazing this all turned out.
00:06But first, what exactly is Clawed Fable? Anthropic's newest model, and it's part of a new mythos class tier that sits above opus in capability. We have two versions, Fable five with extra safety measures, Mythos five, same but without those measures.
00:21But it is the most intelligent model anyone can access through the regular cloud apps and API. So what we wanna do specifically for today is create something like this. Subscribed to the moon.
00:34If it's the last Now right now, currently, I am on Claude's website, but we're gonna be using the actual desktop app today. Now the reason I'm here right now is because I've been creating some amazing apps to create the best AI songs specifically for Suno AI. In fact, every song you hear in my videos were generated using Suno.
00:53What we're gonna do specifically is use the Clawd app. And so here we are. Here is the desktop app.
00:58Now, if you don't have this, there is on your screen on the website, there should be a little download button in the bottom left hand corner, and if you click it, it will then take you to this apps and extensions page. There will be an app specifically for desktop. So I'm gonna show you are two specific things.
01:14Okay? Now, the first thing we're gonna do is I could first take a very basic prompt like this. Now, a quick preface, make sure you do actually have Fable five selected.
01:22See it right here? It's available until June 22. Alright?
01:26But I can take a very basic prompt like this or an instruction. Okay? Landing page showcasing some of my favorite prompts.
01:33Basically, fill in the blanks of what you're specifically looking for, and Fable will instantly start that process and do just that. But the other thing we can do, I can come over here into chat g p t specifically. Now the reason I'm in chat g p t and not staying in Claude is I just don't want Claude to get confused, get too assertive, and then just start the building process right away.
01:52So in chat GPT very quickly, now I'm testing this. I put up here in this prompt, now create a prompt I can use in Claude fable to create this.
02:00And what I put was that same exact prompt I just showed you in Claude. And then after I scroll down, there it is. It gives me the full prompt.
02:08Okay. Right here. There's the full prompt.
02:09So it's basically going to make this very basic one and make it a lot more powerful. But let's go ahead and try both methods to see if one actually does work a little bit better. So okay.
02:18Since we have fable here, remember, we're gonna go ahead and remove this prompt. Okay? Because what we're gonna do is open up the menu on the left hand side and we're gonna select code now.
02:28Now that we're in code, now down here at the bottom, we're then gonna paste in instruction. There it is right there.
02:35Once that's in there, let's go ahead and again, right now we're on Sonnet. Let's ensure there we are. Select fable five.
02:41Okay? Sometimes if I go too quickly, I'll forget I wanna select fable five. And so if you try to go ahead and submit it, you'll notice that it's gonna open up your documents folder.
02:50So what we need to actually do is we need to add some assets for it to reference. Okay. So check this out.
02:56Now, I'm over here in Magnific aka formerly Freepik, and what I'm gonna do is I'm gonna bring in some of these images.
03:02I'm gonna download these just as quick style design references. I also am gonna bring in my AI influencer right here and have her sort of be like a feature, a person that may welcome you once you arrive on the landing page. So I'll go ahead and download a few of these images and maybe even some of these cool looks up here that really do make this look like a fantasy realm.
03:23Maybe I'll just download these for inspiration. So then what I did was I put some of these images into a Canva doc right here. You could see a few of them as I scroll.
03:31Then I went ahead and downloaded this as a PDF, and I had them all compressed into one folder. And you can see on the left hand side at the bottom, it just says untitled design seven. Once that's in there with your prompt and that folder, now go ahead and hit that submit button.
03:46So that's the first way. That is with this very basic prompt right here. Down here below, it then says allow Claude to search the web.
03:53So we'll say allow once. Now, one thing to keep in mind, I saw Claude talking to itself saying there are three p n g's in the folder. It's really trying to analyze and determine what they could be used for.
04:03So let me help guide it along and down here at the bottom, I'll say use the woman as someone who welcomes you to the landing page. The other two images are simply for style inspiration. That way I'll submit that one and hopefully Claude can reanalyze and apply those properly.
04:18And now, wow. Instantly, look at this. Look how amazing this all turned out.
04:22Everything is even better than I could have imagined. The specific color range, I mean, everything is just crazy.
04:29Now the thing that we could do is, it gave me like these placeholders, these specific prompts. K.
04:34I can go ahead and copy these just like that, and it says what model they're specifically used for. We have these filters up here. Okay?
04:40But based off of this, the cool thing about it is that this can also be as like a placeholder. So obviously, I might not want all of these in here. I can have my own specific prompts.
04:51That's where the editing process would come into play, and I would just specifically manually type to Claude what I want in each of these specific boxes, etcetera. The other thing I could do is that if I wanted any of these links to work, I would then instruct it to where if you click this link, it goes to this web page.
05:08But look at this very quickly. Do you see on the left hand side? This is why Fable is actually so good.
05:13It actually talks to itself almost and finds things you otherwise may have missed. Look at this over here very closely. The page is live in the preview panel.
05:22Let me take a quick screenshot to verify it renders correctly. That's a game changer. So assertive, it just takes the initiative and does it on its own.
05:30But look at this. Right here, it hits a permission issue. Let me try n p x serve instead.
05:35Now it finally worked. The other thing, look at this over here. It says, hero looks good, but the rotating word after AI video isn't visible.
05:43Let me inspect. It talks to itself. The word exist, but its position reads negative.
05:48Possibly the preview scrolled. Let me check. It checks everything.
05:52It's going to self fix on its own. It's like it's , so you can just sit back and let it self correct. But look now, back over here again, it automatically just rendered this in mobile friendly.
06:05And now, I could simply scroll and look how beautiful and perfect this is gonna look on a phone. Okay?
06:11I mean, everything is just amazing. I mean, in fact, I wish my website looked like this. Now, let's move on to round two and test out that more powerful prompt.
06:21And now here we are back using Claude Fable. Exact sort of a prompt, but this time however, it's gonna be that much longer one. Now we'll go ahead and leave these files right here, that folder I showed you earlier that I created in Canva.
06:33But one thing to keep in mind, if you wanted to add some additional ones, you can't just upload a p m g or a j pg individually. You have to add it in a specific folder and that way Claude will take the full folder. Okay?
06:45So we'll leave everything as is for now, but just keep that in mind. New files need to be in one collated folder. So I'm gonna go ahead and now hit this submit button right here.
06:54Okay? Now what I'll do down here at the bottom is go ahead and give it a few more instructions. Okay?
06:58What I'll say specifically is the woman will welcome you to my page, other images or inspiration, that link for the everything bundle directs to this URL. Okay.
07:07And now this is incredibly impressive. Look at this right here. Here's the preview.
07:10Let's go ahead and refresh this, so you can see the animation from the very beginning. Look at this. Look at this as I scroll down.
07:17Look how amazing these effects are. The text, it even use my portal background as I scroll down.
07:24There it is. There are gonna be those prompts right there. And the cool thing about this is that look, this also scrolls from left to right.
07:32Incredible. Scroll down even more. Beautiful.
07:35Look at this. There's that neon rain one. I could generate copy prompt.
07:39Everything is fully interactive. Both of them look good, but this one with the more details, this is even more impressive.
07:46This is like something that somebody would usually charge tens of thousands of dollars for. Now again, as you scroll, if I really wanted this to be like the real thing, wow. Look at that.
07:56Look how I scroll back and forth. If I scroll down, it's black and white. But the more I scroll down, it becomes more vibrant in color.
08:04Anybody can create things like this. Any single one I select, every option, that same prompt automatically pops up for any info box.
08:12There it is. Now, if I really wanted this to be like the real thing, to really take over from my website, what I would then do is utilize this as a basic rough draft.
08:23Test it out, publish it, come back in here then, and then specifically type in in instructions what I want each portion to be. So for an example, if these prompts aren't exactly what I wanted, I would then like I showed you earlier, I would upload a specific folder.
08:41And in that folder would be documents and the actual prompts, the full JSON prompts, the full c dance prompts with multi shots and movements. Then that way, this could accurately bring in those specific prompts.
08:55So if that makes sense, I just wanted to show you the capabilities of the impressive level of design to really make it yours though.
09:03That's where the fine details would come in. But it's just as simple as just giving Claude what you want and just type it out manually. So let me know what you guys think in the comments below, and don't forget to check the links in the description.
09:16And again, if you like this video, please remember hit that subscribe button. I'll see you next time. Subscribe
The Hook
The bait, then the rug-pull.
The title is a claim, and the video delivers on it — within the first thirty seconds, a scroll-animated fantasy landing page appears on screen, built in real time by Claude Fable 5 from a single sentence and three reference images.
Named ideas worth stealing.
NaN:NaNmodel
Two-Method Prompt Test
Run the same brief as (1) a direct one-line prompt and (2) a ChatGPT-expanded super prompt. The expanded version wins on visual sophistication.
Steal forany AI content or landing page comparison video
NaN:NaNconcept
Asset Packaging Rule
Claude Code requires all reference assets in a single collated folder. Package into Canva, export as PDF, compress into one folder before attaching.
Steal forany Claude Code workflow tutorial or onboarding guide
How they asked for the click.
VERBAL ASK
09:15subscribe
“please remember hit that subscribe button”
Clean verbal CTA after the refinement section, backed by description links to prompt download, Everything Bundle, Magnific affiliate, newsletter, and hourly consultation booking.
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.
