A free downloadable Claude Skill combined with the Higgsfield MCP lets Fable 5 turn a handful of reference images and generated video clips into a finished, scroll-animated product website from a single slash-command prompt.
Who This Is For
Read if. Skip if.
READ IF YOU ARE…
You build websites or landing pages for clients and want a faster way to produce a cinematic, scroll-animated hero section.
You already use Claude Code and want a concrete example of chaining a custom Skill with an external MCP tool to output a finished product, not just code.
You want a repeatable process for turning a handful of AI-generated video clips into a polished single-page site.
SKIP IF…
You're looking for a from-scratch coding tutorial — this video treats the underlying Skill as a black box the viewer downloads and drags in, not something it teaches you to build.
You need a production-ready deployment walkthrough — the demo ends on localhost, with Vercel only named, not shown.
TL;DR
The full version, fast.
This tutorial chains three tools inside the Claude desktop app to produce a cinematic product website without hand-writing layout code. First, the creator connects Higgsfield — an AI image/video platform — as a custom MCP connector, since it isn't in Claude's built-in directory. Second, he installs a free downloadable Claude Skill called 'animated-website,' uploaded as a ZIP, which contains the instructions for converting video clips into a scroll-driven page. Third, using Fable 5 at high effort, he generates three video clips of a Porsche (a panning shot, a GT3 side-profile shot, and an animated logo) from reference images, then feeds their filenames into one prompt. The Skill outputs a complete site in about fifteen minutes. A tangent demonstrates the Zapier MCP for connecting apps Claude doesn't natively support, before the video closes by naming Vercel as the path to a live domain.
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.
Preview of the finished animated Porsche site and the promise that Claude Code is simple even for first-timers.
00:26 – 01:46
02 · The 3 Things You Need
Lists the prerequisites: the Claude desktop app, the free Animated Website Skill, and a Higgsfield account.
01:46 – 03:25
03 · Connect the Higgsfield MCP to Claude
Walks through adding Higgsfield as a custom connector via its MCP server URL and approving tool permissions.
03:25 – 04:41
04 · Upload the Animated Website Skill
Drags the ZIP skill file into Claude's Skills panel and shows the skill's own documented video-to-website process.
04:41 – 08:45
05 · Generate Videos with Higgsfield in Claude Code
Uploads Porsche reference images, selects Fable 5 at high effort, and generates and compares panning car video clips.
08:45 – 09:18
06 · Animating the Porsche Logo
Feeds the Porsche shield logo image back into Higgsfield to generate a 3D exploding-parts logo animation.
09:18 – 10:34
07 · Zapier MCP: Connect 9,000+ Apps
Tangent showing how to add the Zapier MCP as a connector to reach apps like Beehiiv and Skool that Claude doesn't natively support.
10:34 – 11:23
08 · Building the Animated Website
Types the single build prompt naming the three video files in order plus a styling instruction, and the Skill generates the site.
11:23 – 12:19
09 · The Final Website Reveal
Scrolls through the finished site: hero shot, GT3 profile section, an 'Every Angle' gallery, and a specs section.
12:19 – 13:03
10 · Publish It Live with Vercel
Notes the site currently only runs on localhost and names Vercel as the step to get a real shareable domain, then closes with a subscribe ask.
Atomic Insights
Lines worth screenshotting.
A single slash-command prompt referencing three video filenames produced a full scroll-driven Porsche website in about fifteen minutes.
Fable 5 draws down a Claude usage allowance faster than Opus 4.8 at the same effort setting, per the model's own in-app warning.
Uploading real reference images to a video-generation MCP anchors the output to a specific product instead of a generic stand-in.
Higgsfield's Seedance 2.0 model rewrites vague prompts automatically, so an instruction like 'zoom out a little' becomes a fully engineered production prompt.
Custom Claude Skills are distributed as a ZIP file that must be dragged in unopened — extracting it first breaks the format Claude expects.
A tool missing from Claude's official connector directory can still be linked through 'Add custom connector' by pasting its own remote MCP server URL.
The Zapier MCP exposes over 9,000 apps through one connector, replacing one-off native integrations for tools Claude doesn't support directly.
Effort level is a separate slider from model choice, running Faster-to-Smarter independent of which model is selected.
The entire workflow — generating video, writing the site, connecting third-party accounts — happens inside the Claude desktop app without switching tools.
The finished site was only viewed on localhost during the demo, with Vercel named as the intended step to get a real shareable domain.
Takeaway
Chain a Skill, an MCP, and one prompt to ship a site.
WHAT TO LEARN
A short list of prerequisites, one custom Skill, and a single well-aimed prompt can take reference images all the way to a finished animated website without hand-writing layout code.
02The 3 Things You Need
Listing exactly three prerequisites up front (the app, a packaged Skill, and one outside account) removes ambiguity about how much setup a build actually requires.
A reusable Skill can package an entire multi-step workflow so the same instructions don't need to be re-explained on every project.
03Connect the Higgsfield MCP to Claude
When a tool isn't in a built-in connector directory, a 'custom connector' option still works — it just needs the tool's own remote MCP server URL pasted in.
Approving a connector's permissions once, rather than per action, trades a small trust decision for not being interrupted on every generation request.
04Upload the Animated Website Skill
Skills are distributed as a ZIP file and must be uploaded unopened — extracting it first breaks the format Claude expects.
A well-built Skill documents its own process so the user doesn't need to understand the underlying mechanics to get the result.
05Generate Videos with Higgsfield in Claude Code
Uploading real reference images anchors AI-generated video to a specific subject instead of a generic stand-in.
A model can auto-rewrite a rough, one-line prompt into a fully engineered one, so the value is in specifying the shot, not in wordsmithing.
Generating two variants of the same shot and comparing them before committing catches which framing actually serves the final layout.
Choosing a more capable model trades faster consumption of a usage allowance for materially better creative output, worth it for a one-off asset but not for routine tasks.
06Animating the Porsche Logo
A single static logo image can be turned into its own motion asset using the same reference-image-plus-prompt pattern used for video.
07Zapier MCP: Connect 9,000+ Apps
A single 'meta' connector can stand in for thousands of individual app integrations a platform doesn't natively support, rather than waiting for each one to ship its own connector.
Setting up that meta-connector still means explicitly choosing which sub-apps to expose, not just flipping one master switch.
08Building the Animated Website
A build prompt can be mostly file names in a specific order plus one styling constraint — sequencing and constraints matter more than exhaustive detail.
A multi-minute generation time for a full scroll site is heavier than a typical chat reply and should be budgeted for accordingly.
10Publish It Live with Vercel
A finished build that only exists on localhost isn't shareable yet — going from prototype to a real URL is a distinct, separate step.
Glossary
Terms worth knowing.
Higgsfield MCP
A remote MCP server that plugs an all-in-one AI image and video generation platform directly into Claude, so those models can be called from inside a chat without opening a separate app.
Seedance 2.0
A video-generation model available through Higgsfield, used to create the panning car shots in this video and described as a leading model for realistic motion.
Fable 5
A Claude model favored here for richer, design-heavy output; it consumes a session's usage allowance faster than Opus 4.8 at the same effort setting.
Zapier MCP
An MCP server that exposes the more than 9,000 apps Zapier already integrates with, giving Claude read/write access to tools it has no native connector for.
Custom connector
A manual way to link a tool to Claude when it isn't listed in the built-in connector directory, by pasting the tool's own MCP server URL into an 'Add custom connector' form.
Claude Skill
A packaged, reusable instruction set — uploaded as a file — that gives Claude a repeatable multi-step workflow, triggered by typing its slash command.
Effort slider
A control separate from model selection that trades response speed for output quality on a Faster-to-Smarter scale.
“It connects to 9,000 plus different apps, and you could plug this MCP server directly inside of Claude.”
the single stat that sells the Zapier MCP integration→ 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
00:00Claude Fable five is back, and it is phenomenal when it comes to generating animated websites like these. So in this video, I'm gonna share with you an animated website skill that you could plug directly into Claude. I'm gonna show you how to generate stunning visual videos inside of Claude with the Higgs Field MCP and then turn them into stunning websites that you could either build for yourself, your clients, or sell for thousands of dollars.
00:20I've been geeking out about this since Fable five came back, and I'm absolutely stunned with what I could do. So without further ado, let's dive into this. There are three different things that you're gonna need in order to create animated websites like you just saw, and I can guarantee you that it is much simpler than you could probably imagine.
00:34The first thing we need is the Claude desktop app. We're gonna be using Claude code inside of it. And if you've never used Claude code before, do not worry because I'm gonna make it very simple.
00:42The second thing you're gonna need is this animated website Claude skill that I created, and here's how you could get it for free. There's gonna be a link in the description called animated website skill. You're then gonna see this page.
00:53You're simply going to add in $0 because it's completely free. And if you wanna pay me for this, just subscribe to the channel for more videos like this.
01:01Then click I want this. And from here, you're just gonna type in your email address. Click get, and then you will be prompted to this page right here.
01:08Just download this skill, save this zip folder to your desktop, and then I'm gonna show you how to upload this to Claude Code in just a second. Now the third thing we're gonna be using is a platform called Higgs Field. If you don't know what it is, it is basically an all in one creative AI platform with all the best image and video models at our disposal, and this is how we're gonna generate these scroll stopping animations that we're gonna embed into our website.
01:32And do not worry. This is gonna be very simple because we're gonna use the Higgs Field MCP in order to plug this directly into Claude code.
01:39So that way, we don't need to leave the Claude desktop app in order to generate these stunning visuals. And I'm gonna show you how to set this up here shortly. I'm gonna show you how to set this up right now, and it's only gonna take, like, thirty seconds.
01:50First of all, we do need a Higgs Field account. There will be a link in the description to sign up if you wanna try it out. Alright.
01:55So now let's move on to the next step where we add Higgs Field to Claude. And this is gonna be very simple to do, so let's follow along with this step by step. So go to the link in the description, and we're gonna see this Higgs Field MCP page.
02:06From here, we're just simply gonna click copy right here on this link as you could see right here. Then pull up the Claude desktop app, and we're gonna come over here and select Claude code. Once you click on this, then come down to customize.
02:20Click on customize. Click on this connectors button. And then from here, we're gonna add a connector.
02:25So click add connector. Key thing I wanna point out here is you're not gonna click on browse connectors like you're probably used to. We need to add a custom connector, and I'm gonna show you how to do that right now.
02:35So click on this. Then we're gonna give this a name. I'm just gonna call this Higgs Field, but name it whatever you would like.
02:40And then I'm simply going to paste in that MCP URL that it gave us, and then I'm gonna click add. Now it's gonna say that you're not connected to Higgs Field yet, So click this connect button.
02:50It's gonna pull us back to our account, and we simply just need to authorize our Higgs Field account. So I'm gonna click on allow, and then it's gonna ask me to open up Claude, and we should now see that Higgs Field is connected right here. And if I scroll down my list of connectors, I could click on Higgs Field MCP.
03:07Personally, what I'm gonna do is I'm gonna select always approve. So that way, Claude doesn't always need to ask me if it can go and generate images because if I tell it to generate an image or a video, it should know that it could already do that. And now just like that, we have Higgs Field connected directly to Claude, and we could begin leveraging the power of the best creative platform out there.
03:25Now let me show you exactly how to upload that animated website skill that I shared with you for free, and then we're gonna get into generating these assets with Claude Code and Higgs Field. Alright. So what we're gonna do now is come back over to customize on the left hand side.
03:38Instead of clicking on connectors like we just did, we're gonna click on skills. Now we're gonna click add skill, and we're gonna click upload a skill. Then I'm gonna take the ZIP file that I saved from that Gumroad link.
03:50And, again, if you didn't already download it, you could grab it. It is completely free, and I created this for you guys. Next, I'm just gonna drag this in here.
03:57Key thing is we don't want to unzip that file while we're uploading it because then Claude won't recognize the format. And now just like that, at the very top of our Claude skills, we now have one called animated website. And if I click on this, we don't need to go through all the details, but it is very in-depth, basically explaining exactly how to create this animated website from a video.
04:16Long story short, it's gonna process and analyze the video that we upload. It's then gonna extract and optimize the specific frames of the video and turn it into images, and that will turn it into a specific format. So that way when you're scrolling, the website shows each individual frame as opposed to a full entire video.
04:34And then from there, it's gonna use the exact design system that I've crafted. So that way they always look pretty similar. And, again, you could customize a skill if you would like.
04:41Alright. So now back inside of Claude Code, I'm gonna show you how we could begin generating images and videos using the Higgs Field MCP in order to create this animated website. Now first of all, I always like to grab a reference image.
04:52So what I'm gonna generate is a Porsche website. So I'm gonna come over to the preexisting Porsche website, and I'm just gonna grab a couple of different images that I wanna use as references. So I wanna make the animated website about this exact specific model.
05:08So what I'm gonna do is I'm just gonna take a screenshot of this, and then I'm gonna take a screenshot of this one as well as well as this one. So this is really important because we wanna give the proper reference images to go off. Otherwise, we'd have to create these from scratch, which can be a bit of a pain.
05:22Then I think it would be cool to also grab this image of the Porsche logo and icon that we could also add to the website at the bottom of it. Now I'm simply just gonna drag in these reference images of the car. So as you could see, we now have these three images uploaded.
05:37Now one important thing is we want to make sure we have Fable five enabled because Fable five is obviously the new model for Anthropic, and it is phenomenal when it comes to generating websites. And it will actually help us generate better images and videos with the Hicksfield MCP as well. So make sure to toggle on fable five.
05:55And for this purpose, I'm simply just gonna leave it on high mode, which is the default mode. However, we could toggle this on to ultra code, but that'll just be overboard. So let's keep that on effort level high.
06:05Alright. And now on to generating this video. This is the prompt that I gave it.
06:09It's pretty simple. I said, take these reference images. Generate a video with Higgs Field MCP that we can use for an animated website.
06:16I want a video that pans from the back of the car to the front slowly while also showing the landscape around it. So this should be good. I'm gonna send this off.
06:25And one cool thing is that Higgs Field automatically takes your prompt and will make it better because, obviously, prompt engineering is really important when it comes to generating good images and videos. So we don't need to worry about that because Higgs Field's gonna do that in the background. Now one thing I do wanna mention is we can use Claude Cowork in order to generate these images and videos as well, and the process is pretty similar.
06:45To show you what I mean, I tested this exact work flow before filming this video, and this is what it looks like. You could generate these videos, and it automatically will pull up inside of Claude. But I've noticed I've been able to customize it more and get a little bit better outputs when I'm using Claude code.
06:59Alright. So let's look at this. This is the first output that we got from Higgs Field in Claude code.
07:03So I could come here and simply just view this directly inside of Claude. And as we could see, it used Seedance two point o fast model, which Seedance two point o, if you don't know, is the best video model out there by far in my opinion. So Claude and Higgsfield knew this would be the best model to use in order to generate this video.
07:20And that really takes out the guessing that you have to do in order to pick which model you should be using. Alright. So let's take a look at this.
07:27I mean, that's pretty solid so far. I mean, you could see it's a, like, one eighty turnaround panning of this Porsche, which is gonna look really perfect for this website because it's gonna scroll as the car is, you know, rotating.
07:42So I could either download this here or I could generate another. So let's just come here and generate one more so we have options. I want you to generate another one.
07:49I wanted to zoom out a little bit of the car so it's not always on the same level vertically. And you could see how vague I am with these prompts because, again, Fable five and Higgs Field are going to optimize this prompt and take my gibberish and turn it into, like, an actual well thought out prompt. Alright.
08:05So here's the output of this one. As you could see, it's a bit more zoomed out. It kinda focuses a little bit more on the landscape as opposed to, like, an up close of the car.
08:14I think this looks pretty cool, but I really think that the other one is better just because it, you know, is more visually appealing when it comes to showing details of the car. But, I mean, this looks so good. This literally like, I I can't even tell this is made with AI.
08:26Dance two point o is actually phenomenal. And so what I'm gonna do is I'm gonna go back to our original one. I'm simply going to click this download button.
08:34I'm gonna click open link. And what this will do is this will take us here where we can just select this little button and click download. I think this is gonna look really good on an animated guys.
08:43I'm really excited to see what this looks like. Alright. So now I have this idea to take this Porsche logo and turn this into an animation where it kind of expands in all the different elements of the logo kind of come apart and zoom out like you've probably seen.
08:55So I wanna add this to the website. So I uploaded this logo, and then I gave it this pretty comprehensive prompt that I had Claude help me with, basically breaking down the three d motion design. So I'm gonna send this off.
09:05This is gonna be a cool addition to the rest of the website. So I'm excited to see what the output of this is gonna look like. Alright.
09:12So here's the output of our logo. This looks pretty cool. I mean, that's solid.
09:16This is gonna look really good on an animated website. Now real quick, let's say there's an app you wanna connect to inside of Claude or Claude Code specifically. And when you click on browse connectors, you do not see it in this list.
09:26Well, I'm gonna show you a hack that allows you to connect to 9,000 plus different apps with something called the Zapier MCP. Now if you don't know what Zapier is, it's an automation platform that has been around for years. It it connects to 9,000 plus different apps, and you could plug this MCP server directly inside of Claude so you can interact with all those different applications.
09:44Now in order to set this up, it's extremely simple. You're just gonna select new MCP server, then you're gonna come down to either Claude or Claude code. I'm just gonna go to Claude for this use case.
09:53I'm gonna copy this prompt. I'm gonna come back to Claude, paste this in. Claude will then walk you through a couple quick steps in order to set it up.
10:00It's very simple. And then once you have your MCP server configured, you can now begin adding different applications.
10:06So for example, I could come here and look up Beehive, which is an email marketing platform, and you can't connect to Beehive directly inside of Claude, but you can with the Zapier MCP. So I just select all these different tools here, click connect, and now we will see Beehive is connected to our MCP server.
10:23So you can do this with all these different apps. You could also see I connected school because I'm not able to connect to school directly inside of Claude. If you guys wanna try this out, there is a link Now before generating this animated website, I wanna now show you this cool visual that I created with Higgs Field.
10:37So I took this image right here on the Porsche website, and what I did is I basically told Higgs Field to animate it. So we now have this video, which we could also add to our website, which I think is gonna look really cool and add a cool touch. So we now have three videos we're gonna be adding to this website.
10:54Alright. So now inside of Claude, here's the prompt that I'm giving it. So I'm just basically typing in forward slash website with these three videos.
11:02The first one I want at the top is this one. And what I did is I copy and pasted the file names of all the videos. So for example, this one right here, I just referenced it, and I gave it the exact file name.
11:12So that way Claude Code can go and source it and then, you know, pull that onto our website. This is a very simple prompt I'm gonna give it, but we're gonna make iterations from this because odds are it probably won't be perfect the first time around. Alright.
11:24So here is the output, and this took probably about, like, fifteen solid minutes. And that's how you know that Claude Fable five is really doing some work on the back end in order to make this as, you know, good of a website as possible. So here we go.
11:37Nine eleven GT three. We if we scroll through, you could see that, you know, obviously, it's panning around our car. We then have our second animation here with the GT three.
11:46I mean, this is all accurate information in regards to, like, what a, you know, Porsche GT three is and all the different specifications and whatnot. So I think this looks really solid, and then I really like the way this logo looks as well as it added this little gallery here. So, I mean, I think this is absolutely incredible from a one shot prompt.
12:02We literally gave it one prompt and used the animated website skill. And depending on how fast you scroll, like, the more smooth animations are actually gonna look. So if I go quicker, obviously, it's gonna look smoother.
12:14But, you know, if you wanna go and read this stuff, you know, it's not gonna look as smooth, but it looks really incredible. Now as you can see, I'm viewing this in localhost, so I'm not able to, like, share this online and, you know, my friends can't go and look at it. But if you do wanna turn this into an actual website, we could use something like the Vercel MCP, which we could plug directly into Claude to hook this up to our URL, or we could even add our own custom domain if we really wanna get fancy with it.
12:37But, guys, this is how you could create an animated website with Fable five and Higgs Field MCP directly inside of Claude in just a couple of minutes. I'd say end to end, if you begin installing this system and testing this out, you should be able to do this in probably about thirty minutes and some very basic prompts. If you guys got some value, leave a like.
12:55Subscribe to this channel for more content. And if you wanna use Higgs Field, there is a link in the description in the top pinned comment. Thanks for staying to the end.
A free downloadable Skill and one Higgsfield connection turn a stack of reference images into a scroll-animated Porsche website — the creator claims the whole build, start to finish, takes about thirty minutes.
Frameworks
Named ideas worth stealing.
00:26list
The 3 Things You Need
Claude desktop app (with Claude Code)
The Animated Website Claude Skill (free download)
A Higgsfield account (for AI image/video generation)
The three prerequisites the creator lists before starting the build: the Claude app itself, a free custom Skill he built, and a Higgsfield account for generating the video assets.
Steal forAny tutorial structure that wants to front-load exactly what a viewer needs before diving in
CTA Breakdown
How they asked for the click.
VERBAL ASK
00:51link
“There's gonna be a link in the description called animated website skill... You're then gonna see this page. You're simply going to add in $0 because it's completely free.”
Routes through a Gumroad-style $0-price page that still requires an email address, turning a free download into a lead-capture opt-in.
A 9-minute screen-capture walkthrough of the new Claude Code Artifacts feature: live, shareable dashboards built from your session and auto-synced for your team.
00:09
00:20
00:41
00:51
01:01
01:12
01:21
01:32
01:36
02:00
02:12
02:20
02:35
02:40
02:45
02:56
03:10
03:20
03:29
03:46
03:57
04:07
04:16
04:26
04:36
04:49
04:55
05:05
05:10
05:22
05:34
05:44
06:03
06:13
06:23
06:33
06:43
06:52
06:59
07:12
07:25
07:31
07:39
07:51
08:05
08:10
08:15
08:34
08:35
08:45
09:11
09:18
09:41
09:55
10:00
10:10
10:19
10:29
10:38
10:48
11:05
11:18
11:37
11:46
11:55
12:05
12:14
12:24
12:35
12:46
30:29
10:57
15:30
15:22
09:30
09:40