How Claude Opus 5 Builds Animated Product Websites for Half the Price of Fable 5
A three-tool workflow — Higgsfield for visuals, a packaged skill for the scroll effect, Opus 5 to assemble it — turns one reference photo into a finished animated site inside a single Claude window.
Because Claude Opus 5 prices identically to Opus 4.8 but at half of Fable 5's token cost, and because a single packaged skill converts a generated Higgsfield video into a scroll-animated site with one prompt, the entire build-and-generate loop for a premium animated product page now runs inside one Claude window at a fraction of the previous cost.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You build or sell landing pages/product sites and want to test AI-generated scroll animation as a differentiator.
You already use Claude Code and want a concrete example of chaining an MCP connector into a multi-step build.
You're pricing out Opus 5 vs Fable 5 for a token-heavy, iteration-heavy workflow like repeated site generation.
You want a working pattern for connecting Claude to niche or business-specific apps that lack a dedicated connector.
SKIP IF…
You're looking for hand-coded control over layout, typography, or interaction — this is a one-prompt generation flow, not a design tool.
You don't use Claude Code or have no interest in MCP-connected tool chains.
TL;DR
The full version, fast.
Claude Opus 5 is priced at $5/million input and $25/million output tokens, half of Fable 5's $10/$50, while producing comparable animated-website output. The demonstrated workflow uses three tools: Claude Code (Opus 5), the Higgsfield MCP for generating hero images and video from a reference photo, and a free downloadable 'animated-website' skill that breaks the generated video into frames to create scroll-triggered animation. After connecting Higgsfield as a custom MCP connector and installing the skill, one prompt referencing a chosen video variant plus the skill name is enough to generate a full product site with spec sections. The same pattern is reused for a second demo (a bulletproof-vest microsecond breakdown), and a Zapier MCP is shown as a fallback for connecting any of 9,000+ apps that lack a dedicated Claude connector.
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.
Opens on the pricing comparison: Opus 5 at $5/$25 per million tokens vs Fable 5 at $10/$50, framed as the reason to switch.
01:11 – 02:24
02 · The 3 Tools You Need
Introduces the three pieces of the workflow: Claude desktop/Code with Opus 5, the Higgsfield MCP, and a downloadable animated-website skill.
02:24 – 03:01
03 · Download the Animated Website Skill for Free
Shows the Gumroad page for the skill, set to pay-what-you-want with $0 as an accepted price.
03:01 – 04:07
04 · Uploading the Skill Into Claude
Uploads the zipped skill file into Claude via Customize → Skills, without unzipping it first.
04:07 – 05:33
05 · Connecting the Higgsfield MCP
Adds Higgsfield as a custom MCP connector by pasting its connector URL into Claude, then authorizes the connection.
05:33 – 06:38
06 · Testing It With Your First Image
Runs a simple test prompt ('generate an image of a bird at sunset') to confirm the Higgsfield connection is live.
06:38 – 08:06
07 · Generating the Camera Animation
Uploads a reference camera photo and prompts Higgsfield for an exploding-parts product animation; reviews two output variants.
08:06 – 08:33
08 · Turning the Animation Into a Website
One prompt tells Claude to take the chosen video variant and use the animated-website skill to build a full product page.
08:33 – 09:25
09 · Bonus Example: The Bulletproof Vest Site
Shows a second site built the same way — a bullet-vs-vest microsecond breakdown with scroll-triggered data sections.
09:25 – 09:51
10 · Walking Through the Finished Site
Scrolls through the finished camera site, pointing out the spec sheet that updates alongside the hero animation.
09:51 – 10:55
11 · Connect 9,000+ Apps With Zapier MCP
Detour into the Zapier MCP as a fallback for connecting Claude to apps without a dedicated connector, including the creator's own YouTube/Skool/Beehiiv stack.
10:55 – 11:19
12 · The Final Version
Generates one more visual variant for the camera site and shows the finished result.
11:19 – 11:42
13 · Final Thoughts
Wraps with a recap of the cost savings versus Fable 5 and a subscribe ask.
Atomic Insights
Lines worth screenshotting.
Claude Opus 5 is priced at $5 per million input tokens and $25 per million output tokens — the same as Opus 4.8 and exactly half of Fable 5's $10/$50 pricing.
A vague, under-specified prompt can outperform a detailed one, because the Higgsfield MCP optimizes loose prompts internally before generation.
The scroll animation on the finished sites comes from the skill breaking the generated video into individual frames — uploading the raw video file alone produces no scroll effect.
One prompt referencing a chosen video variant plus the skill name ('use the animated-website skill to generate a stunning site') is enough to trigger a full product-page build with spec sections.
Every Higgsfield generation returns multiple variants (A/B) so the cleanest render can be chosen before it gets built into a downstream website.
Third-party tools without a built-in Claude connector are added as a 'custom connector' by pasting a connector URL copied from the provider's own site.
The Zapier MCP is a fallback for connecting Claude to any of 9,000+ apps that lack a dedicated connector, including YouTube, Skool, and Beehiiv in the creator's own stack.
The exact same two-step pattern (generate one hero video, then prompt the skill to build a page around it) was reused for a second, unrelated product concept.
The skill itself is distributed as a pay-what-you-want Gumroad download with $0 explicitly framed as an acceptable price, trading revenue for reach.
Takeaway
Opus 5 halves the cost of animated builds
AI BUILD STACK
Generating a scroll-animated product site now costs half of what Fable 5 charges, because the same three-tool workflow (Higgsfield for visuals, a packaged skill for frame-extraction, Opus 5 for assembly) runs entirely inside Claude.
Claude Opus 5 costs $5 per million input tokens and $25 per million output tokens — the same as Opus 4.8 and exactly half of Fable 5's $10/$50 pricing.
The full animated-website workflow needs only three pieces: Claude Code (Opus 5) as the builder, the Higgsfield MCP for visual generation, and a packaged skill that encodes the build instructions.
A 'skill' is distributed as a zip file and installed by uploading it directly into Claude — it must stay zipped or the upload fails.
The creator prices the skill as pay-what-you-want with $0 explicitly framed as acceptable, trading direct revenue for subscribers and reach.
Skills live under Claude's Customize to Skills menu and are searchable once installed.
Third-party tools without a built-in Claude connector are added as a 'custom connector' by pasting a connector URL copied from the provider's own site.
Setting a connector to 'always allow' removes the per-action confirmation prompt, which matters for workflows that call the same tool repeatedly.
A single plain-language test prompt is enough to confirm an MCP connection is live before committing to a real build.
Vague prompts can outperform detailed ones, because the Higgsfield MCP optimizes loose prompts internally before generating.
Every generation returns multiple variants, and picking the cleanest one before building anything downstream avoids compounding a bad render into the final site.
The scroll animation comes from the skill breaking the source video into individual frames — uploading the raw video file alone produces no scroll effect.
One prompt referencing a chosen video variant plus the skill name is what triggers the entire site build; no manual layout step is shown.
The same two-step pattern (generate one hero video, then prompt the skill to build a page around it) was reused for a second, unrelated product concept, suggesting it generalizes across niches.
A generated site can carry a scroll-synced spec sheet alongside the hero animation, not just a single static hero.
For any app without a dedicated Claude connector, the Zapier MCP bridges to over 9,000 apps, including the creator's own YouTube, Skool, and Beehiiv accounts.
Iterating on a hero animation because the first pass felt 'not super visually appealing' took about two prompts total, underscoring how cheap iteration is at this price point.
Glossary
Terms worth knowing.
MCP (Model Context Protocol)
A connector standard that lets an AI model like Claude call out to a third-party tool's actions directly inside a chat, without the user leaving the interface.
Higgsfield
An AI creative studio combining multiple image and video generation models (including GPT Image 2) behind one interface, reachable from Claude via its MCP connector.
Skill (Claude skill)
A packaged, uploadable instruction set that teaches Claude how to perform a specific repeatable task — here, converting a generated video into a scroll-animated website.
Custom connector
A manually added MCP connection made by pasting a provider's connector URL into Claude, used for tools not listed in Claude's built-in connector browser.
Variant (A/B)
One of multiple alternate outputs a generation tool returns for the same prompt, letting the user pick the cleanest result before using it further.
“Notice how vague my prompt is. This isn't some super hyper specific prompt because Higgs Field is gonna take this prompt and optimize it in order to make the best video possible.”
“Take variant B and use the animated website skill to generate a stunning site to show off this camera along with the specifications.”
the exact one-line prompt that triggers the whole build→ 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.
17px
metaphor
Anthropic just dropped Claude Opus five, and it's phenomenal when it comes to generating animated websites like these. And on top of that, it is much cheaper to use than Fable five with basically the same power. So in this video, I'm gonna share with you an animated website skill that you can plug directly into Claude.
I'm gonna show you how to generate stunning visual animations like these using the Higgs Field MCP, and then turn them into stunning websites that you could either build for yourself or your clients or sell for thousands of dollars. So first of all, let's talk pricing, and then let's begin building. Now let's quickly talk about pricing because this is the key reason why we might switch to Opus five as opposed to Fable five even if Fable is a little bit more capable than Opus.
And the reason why we would use Opus five as opposed to Fable is due to pricing. So right here, Fable five is $10 per million input tokens and 50 per million output tokens. Whereas, Opus five is priced at $5 per million input tokens and 25 per million output tokens, which is the exact same as Opus 4.8.
And if you're thinking, Brock, that's just gibberish, in simple terms, it is half the price of Fable five. So we could still create stunning website designs without having to pay an arm and a leg while using Fable five and eating into your token costs with Claude. Now there are three things we're gonna be using in this video to generate these stunning animated websites in just a couple of minutes.
So let me explain them right now so you could understand what you're gonna need to get started. First of all, we're gonna be using the Claude desktop app, so make sure to download it. And inside of the desktop app, we're gonna be using Claude code.
So come over here on the left hand side once it's opened up. Instead of clicking on home, we wanna click on this code button. And when we click this, we're now going to see this interface right here.
And this is exactly what we're gonna be using. And on the bottom right, along with our little Claude code friend, we get this new button that says Opus five along with being able to choose the effort level. Now the next tool that I'm gonna be using is Higgs Field, and we're gonna be using this via the MCP, which plugs directly into Claude code so we could generate all of the visual video and image assets directly inside of Claude without us having to leave the platform.
If you don't know what Higgs Field is, it's basically an all in one AI creative studio with all the top AI image and video models at your disposal. So we literally never have to leave this platform in order to generate all these crazy stunning visuals that you're gonna see throughout this video. And the third thing we're gonna be using is this animated website skill that I crafted for you guys.
This is exactly how I'm taking those visuals we generate inside of Higgs Field and turn it into a stunning scroll animation website. And you could download this resource for free, so let me show you how to do that. So first of all, there's gonna be a link in the description in order to grab this.
Then what you're gonna do is come here and just name a fair price. Just put $0 and click I want this.
If you guys wanna hypothetically pay me for this resource, just subscribe to the channel for more videos like this. Then you're just gonna put in your email address and click this button that says git. Next up, we're gonna see this site, and all we need to do is download this animated website skill in this zip file format.
From there, take this, and let's just drag this onto our desktop. Make sure not to unzip the file because when we upload it to Claude, it needs to be in this specific format. Now I'm gonna show you how to upload this skill into Claude.
So what we're gonna do is we're gonna come over to the left hand side where it shows customize and click on this. From here, we are going to see all the skills that we have already downloaded. And if you've never added one, let me show you exactly how to add one now.
So come over on the right where it says add. Simply click on this, and then let's click on upload a skill. Now let's take the animated website ZIP file that I downloaded and simply just upload this right here.
I personally already have it downloaded, but right here, you're just gonna see a button that says upload, and make sure to click that. And then just like that, we now have our animated website skill uploaded, and we could go ahead and search it here just to make sure it's there. And here it is.
We click on this. Basically, here is the set of instructions breaking down exactly how to perform this task for us. I don't wanna dive super deep into what this skill consists of, but, basically, it's gonna take the video that we create with Hicksfield.
It's gonna then separate it into multiple different frames in order for it to create the scroll animation that we're gonna see on our website. If we were to just upload the video, it wouldn't have this scrolling animation that we want to add. So it's very important that we have a good animated website skill for us to use in order to replicate this very simply.
Alright. So now let's move on to the fun part, and that is actually generating these animations using the Higgs Field MCP. So I'm gonna quickly show you how to set this up.
It's really simple to do. So that way, we could generate these visuals directly inside of Claude without us needing to leave the platform. First of all, what I'm gonna do is come over to the left hand side where it shows customize.
And then from here, we're gonna come down to where it says connectors on the left right here. Now what I want you to do is come over on the top right where it shows add, and then we're going to come down to add custom connector. You're not gonna find this in the browse connectors, so make sure to select add custom connector, and then I'm just gonna call this Higgs Field.
Next, you're gonna go to the link in the description to come to this web page. And from here, we need to select Claude, and then we want to copy this Higgs Field connector URL. So go ahead.
Click copy. Bring this back into Claude. Simply just paste it in where it says remote MCP URL, and then click add.
And what this is gonna do is it's gonna connect to our account, so we just need to click this connect button. It's gonna bring us into our Higgs Field account, which we need to have one in order to test this out. Then And I'm just gonna click on allow so that way Claude can now generate images, videos, and then even pull those directly back into Claude.
So I click this open Claude button. You can now see that we have Higgs Field connected, and I'm personally just going to click on this button right here that says custom. And I'm just going to select always allow.
So that way, whenever I wanna generate an image or a video or use these different tools that Higgs Field has inside of Claude, it doesn't have to ask me every single time if it can go and perform this task. Now in order to show that this is connected, I came here, and I basically gave it this very simple prompt. I said, generate an image of a bird at sunset with the best image model.
Then I'm just gonna click send after I make sure to select Opus five right here. And then I'm just gonna keep this on high because we don't need it to do super complex task, and that's gonna be enough for us to do this. Now what you could see on screen is that the Higgs Field MCP is now generating a couple of different images.
And what it's doing is it's using GPT image two, which is the best image model from OpenAI. And one of the best parts about using the Higgs Field MCP, since you have access to all the different image and video models, both Higgs field and Opus five are gonna choose whichever model is best for whatever given task that is.
And here we go. We now have this image of this bird flying at sunset. I mean, this is pretty good.
Now what we could do is directly inside of Claude with this Higgs Field connector, we could animate it. We can edit it or download this photo directly right here. So now that we have Higgs Field connected, we generated our first image.
Let's go ahead and now actually take a concept for an animated website, generate the visuals for that, and then let's turn it into a site. Alright. So now let's talk about how to generate the actual animations that go with this website, then we're gonna turn it into a physically animated website.
Now here is the prompt that I'm going to give Claude code, and it's gonna then take this and use this inside of the Hicksfield MCP. So I said generate an animated video of this camera with this reference image, and I uploaded this reference image of this camera right here. Then I said I want this to be an animated product shot of a camera coming apart almost as if it's exploding to show all of the parts of the product.
Use the Higgs Field MCP to do this. So I'm gonna send that off, make sure we have Opus five selected, and I'm just gonna use high mode. And notice how vague my prompt is.
This isn't some super hyper specific prompt because Higgs Field is gonna take this prompt and optimize it in order to make the best video possible. Alright. So now just a couple of minutes later, we now have this output from the Higgs Field MCP.
So let's go ahead and take a look at this. It obviously used c dance two point o as well as a 16 by nine aspect ratio. And on top of that, it's six seconds long, but we could go ahead and make changes to this if we do not like the output.
Alright. So let's watch this. Obviously, the camera is kinda splitting apart, which is pretty cool.
I think that looks good. There's some parts here that don't look perfect. Like, for example, that little lens right there just kind of goes to the right.
That looks slightly odd, but it generated another output as well, which I think this one looks a bit better. Yeah. That's super smooth.
I think adding this to our website is gonna look absolutely phenomenal. And what I could do is I could either download this directly right here, or I could recreate this if I want and make changes to it, but I think this is a really good starting point. Now I'm just gonna come back here, and this is my prompt.
I said take variant b and use the animated website skill to generate a stunning site to show off this camera along with the specifications. I'm gonna click send, obviously, and make sure I'm using Opus five here so it's able to use that model. It's gonna be a lot cheaper.
I mean, it's gonna be half the price of using Fable five in order to generate the websites. And after playing around with this quite a bit myself, I've noticed that the outputs are almost identical. And, again, it's half the price, which is amazing.
Now while that is generating, I wanna show you this other animated website that I created using the exact same process using the animated website skill as well as generating this graphic with Higgs Field. So this is basically just like this bullet that as I scroll is being stopped by this bulletproof, like, vest or bulletproof product.
And the cool part about this is not only this animation that is kind of, like, visually pulling most of the weight for this website, but also take a look over here on the left. It actually breaks down, like, these cool little visuals.
It shows the velocity of the bullet, the first seven microseconds. It then breaks down, you know, this cool little diagram showing what the bullet actually looks like as the speed is increasing. It even shows how the velocity is slowing down as it hits the vest in real time.
I mean, this is a super cool looking site. And, again, we followed the same exact process generating the video with Higgs Field and generating the animated website with Opus five. Alright.
So here's the output of the animated website. I think this looks pretty solid. Obviously, the animation looks really good.
It looks pretty smooth. One key thing here, as I scroll, you could see on the left, it kinda breaks down all the specifications of our camera, which is really cool. And then at the end, it kind of has this, like, little call to action in order to buy the camera.
I think that this looks pretty cool. Honestly, I like the typography that it used for the website. And, again, we generated this in one single prompt, took one prompt in order to generate the animation as well using the Higgs field MCP, and we could get really creative from here.
Now let's say there's an app you wanna connect to inside of Claude, but you do not find it in the menu when you come to connectors. Click on browse connectors, and you scroll through here. And let's say that the app you wanna use isn't in this list of connectors.
Well, I'm gonna show you a quick hack that will allow you to connect to 9,000 plus different applications. So odds are the app that you wanna use, you'll be able to use with this simple hack that I'm gonna show you. Using something called the Zapier MCP, this allows us to easily connect to any of the different tools that we wanna use directly inside of Claude.
And in order to show you exactly what I mean, I have this MCP server that I configured inside of Zapier that connects to my YouTube, so it's able to post and pull information from YouTube for me, which I can't do directly inside of Claude. And then I even have my school community as well as Beehive connected, which are two tools that I use to run my business every single day.
So while using the Zapier MCP, I'm able to now perform actions across those different applications, and this is probably the simplest way to connect your different apps if there's no preset connector inside of Clog. If you guys wanna try it out, there will be a link in the description to sign up, and it's very simple to use.
Alright. So I decided to generate a new visual in order to make it kinda the focus point of the website because I thought the other one was cool, but it wasn't super, like, visually appealing. So I think this one is super solid.
You you could see that the camera comes apart, and it kind of rotates around the different parts, and then it kind of zooms back in and shows the camera put back together. I think this is a super cool looking website. I did this in about two different prompts, and we obviously used the Hicksfield MCP to generate this visual.
Alright, guys. There you have it. Generating animated websites using the Clawd Opus five model.
This gives us some of the power that Fable five has when it comes to amazing website designs at half the price. So I think it's really worth it for you to test this out instead of going straight to Fable and wasting your tokens. If you guys enjoyed this video, make sure to subscribe for more content like this.
Leave a like, comment what you thought, and I look forward to seeing you in the next video. Cheers.
The Hook
The bait, then the rug-pull.
The pitch is pricing, not power: Opus 5 costs half of what Fable 5 charges per token, so the same three-tool loop — Higgsfield for the visuals, a packaged skill for the scroll effect, Claude to assemble it — turns a single reference photo into a finished animated product site for a fraction of the previous cost.
Frameworks
Named ideas worth stealing.
01:11list
The 3 Tools You Need
Claude desktop/Code (Opus 5)
Higgsfield MCP
Animated Website skill
The minimum toolchain for the whole workflow: Claude Code as the builder, Higgsfield as the visual generator reachable via MCP, and a packaged skill that encodes the frame-extraction/scroll-build instructions.
Steal forany 'generate a visual, then build a page around it' AI workflow
CTA Breakdown
How they asked for the click.
VERBAL ASK
02:45product
“Name a fair price, put $0, and click 'I want this' to download the skill — or subscribe to the channel instead of paying.”
Screen-recorded the exact Gumroad checkout flow live, explicitly told viewers $0 is an acceptable price, and reframed payment as an optional subscribe-instead ask rather than a hard paywall.
A 72-minute, screen-by-screen course on turning Claude Cowork into an entire marketing department — voice skills, image and video generation, lead scraping, live dashboards, auto-scheduling, and AI SEO.
00:10
00:20
00:39
00:48
00:57
01:06
01:15
01:24
01:46
01:56
01:59
02:09
02:26
02:37
02:56
03:02
03:13
03:23
03:38
03:46
03:54
04:02
04:11
04:20
04:28
04:45
04:54
05:02
05:11
05:20
05:28
05:46
05:57
06:01
06:13
06:24
06:36
06:42
06:51
06:55
07:21
07:26
07:31
07:44
07:52
08:01
08:15
08:37
08:46
08:54
09:03
09:12
09:20
09:38
09:46
09:51
10:04
10:23
10:32
10:53
10:59
11:07
11:15
11:34
11:39
09:35
1:12:16
13:03
10:57
15:30
30:29