Big Idea

The argument in one line.

Wiring a generative media platform to Claude via MCP collapses a multi-tool production workflow into a single agent session that plans, generates assets, and ships a finished website without switching apps.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You already use Claude Code and want to add AI media generation to the same pipeline rather than juggling separate tools.
You want a concrete end-to-end example of MCP in a real project context, not a hello-world demo.
You are building a product or brand landing page and want scroll-driven video motion without a no-code page-builder.
You want to understand how to use a project skill file to keep a multi-stage Claude session on spec.

SKIP IF…

You need a multi-page production site — this demo produces a single cinematic landing page.
You are not interested in paid AI media tools; Higgsfield credits are consumed for every image and video generated.

TL;DR

The full version, fast.

A four-stage pipeline runs entirely inside Claude: a detailed project skill file anchors the brand spec; Claude orchestrates Higgsfield MCP to produce seven product images and a cinematic background video; Claude Code switches to Fable 5 to build the Vite/React front end with GSAP scroll scrubbing; then Claude verifies the result in the browser. The core technical insight is that the background video is controlled frame-by-frame via scroll position rather than autoplaying, which is what gives the site a premium feel over a static landing page.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:17

01 · Hook + pipeline overview

Finished website shown first, then the seven-job pipeline laid out: plan, organize, generate images, generate video, prepare scroll scrubbing, build front end, verify result.

01:18 – 03:44

02 · Higgsfield MCP connection

Step-by-step: open MCP section in Higgsfield, copy the MCP URL, add a custom connector in Claude Desktop, authorize, confirm with a balance check. Notes the /model claude-fable-5 command for users who don't see it in Claude Code yet.

03:45 – 06:09

03 · Workspace setup + skill file

Loads a project skill file into Claude Code using Opus 4.8 for cheap setup work. Claude creates folder structure and planning files: brand kit, asset plan, image prompts, video prompt, website brief.

06:09 – 07:00

04 · Image generation via Higgsfield MCP

Claude generates seven images in dependency order: hero burger first, then exploded-layers using hero as reference, then ingredient detail and four catalog burgers. Consistent dark premium food advertising style.

07:00 – 08:09

05 · Background video generation

Seedance 2.0 via Higgsfield generates the scroll-scrub background video: burger assembles with cinematic camera movement, then layers separate vertically in the second half.

08:09 – 09:35

06 · Website build with Fable 5

Switches to Fable 5. Vite + React + GSAP + Lenis + ScrollTrigger. Scroll scrubbing wired via video.currentTime = scrollProgress * video.duration. Fable 5 also autonomously generates supporting images and removes backgrounds.

09:35 – 11:35

07 · Result walkthrough + CTA

Live browser demo: hero section, exploded ingredient story, product cards (Four experiments. All approved.), ordering panel, CTA. Host notes the premium food campaign feel vs. generic restaurant template.

Atomic Insights

Lines worth screenshotting.

A project skill file loaded before any Claude session starts is what keeps a six-stage pipeline aligned to the same spec without re-prompting at every stage.
MCP connectors eliminate the manual file-transfer step between generate-here and use-there — Claude calls the API directly and the assets land in the project folder.
Use a cheaper model (Opus 4.8) for setup and organization tasks, then switch to the most capable model only when the work becomes computationally demanding.
Scroll-scrub a background video by setting video.currentTime = scrollProgress * video.duration inside a ScrollTrigger callback — the video becomes interactive content, not passive decoration.
Generate dependent assets in dependency order: produce the hero image first, then pass it as a reference for all derivative assets so visual identity carries through without re-prompting for consistency.
Claude Fable 5 went beyond its spec during the build — it autonomously generated supporting images and removed backgrounds from assets where the layout needed them.
Higgsfield MCP consolidates image generation (GPT Image 2), video generation (Seedance 2.0), and asset organization into one platform callable from inside Claude.
The scroll-controlled video is what separates this from a static landing page — the premium feel comes from interactivity, not from the quality of the imagery alone.
A fictional brand project is a valid benchmark for an AI model: it demands brand coherence, technical correctness, and multi-step planning simultaneously.
If Claude Fable 5 does not appear in Claude Code's model list on first launch, use /model claude-fable-5 to force the switch.

Takeaway

The skill file is what keeps multi-stage Claude sessions on spec.

WHAT TO LEARN

A project production guide loaded into Claude before any work begins is what prevents drift across six sequential tasks — without it, every stage requires manual re-prompting to stay aligned.

Write a project skill file before any multi-stage Claude Code session — brand direction, folder structure, asset names, prompts, tech stack, and a verification checklist in one markdown file.
Assign models proportionally to task complexity: use a cheaper model (Opus 4.8) for setup and file organization, then switch to the most capable model only when the work becomes demanding.
Scroll-scrub a background video by setting video.currentTime = scrollProgress * video.duration inside a ScrollTrigger callback — the video becomes interactive content rather than passive decoration.
Generate dependent visual assets in dependency order: define the hero image first, then use it as a reference for all derivative assets so visual identity carries through without re-prompting for consistency.
MCP connectors eliminate the manual file-transfer gap between AI media generation and code use — Claude calls the API, the assets land in the project folder, and the build proceeds without switching tools.

Glossary

Terms worth knowing.

MCP (Model Context Protocol): A protocol that lets Claude make calls to external tools and APIs during a session. Instead of Claude only generating text, MCP connectors allow it to trigger real actions — generating images, fetching data, writing files — inside external platforms.
Higgsfield MCP: An MCP connector for Higgsfield, an AI creative platform, that lets Claude generate images and videos via Higgsfield's tools (including GPT Image 2 and Seedance 2.0) directly from inside a Claude session.
Scroll scrubbing: A technique where a video's playback position is driven by the user's scroll position rather than time. As the user scrolls down, the video advances; scrolling up rewinds it. Implemented here via ScrollTrigger and video.currentTime.
Skill file: A project-specific markdown document used as a persistent production guide inside Claude Code. It encodes brand direction, folder structure, asset lists, prompts, tech stack, and verification criteria so all stages of a multi-step session stay aligned.
Seedance 2.0: A video generation model available through Higgsfield, used here to produce the cinematic background video. The host refers to it as Cdance 2.0 in the transcript.
Lenis: A smooth-scroll library for the web that normalizes scroll behavior across browsers, used here in combination with GSAP and ScrollTrigger to drive the scroll-scrubbed video effect.

Resources

Things they pointed at.

00:25toolHiggsfield MCP ↗

00:33toolGPT Image 2 (via Higgsfield)

00:33toolSeedance 2.0 (via Higgsfield)

00:44toolGSAP ↗

00:44toolLenis

00:44toolScrollTrigger

04:53toolOpus 4.8

00:00linkBurgerLab Skill File (Notion) ↗

Quotables

Lines you could clip.

00:44

“Claude is not only writing a few React components — it has to plan the project, organize the files, generate the assets, prepare the video for scroll scrubbing, build the front end, wire the motion system, and then verify that the final website actually works.”

Tight summary of the full scope — lands the agentic pitch without jargon→ TikTok hook↗ Tweet quote

10:29

“Fable 5 did more than just assemble the page. It also generated a few extra supporting images where the layout needed them, and it removed backgrounds from some assets.”

Concrete proof of autonomous action beyond the spec — shareable without context→ IG reel cold open↗ 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.

00:00This website was built with Claude's newest model Claude Fable five also known as its new Mythos class model. Anthropic is positioning it as their most capable public Claude model so far especially for coding, long running agentic workflows, reasoning, vision, and complex project execution.

00:19So in this video, I don't wanna test it with a simple prompt. I wanna give it a real production style workflow. We're going to connect Higgs Field MCP directly inside Claude Code and use it to create the visual system for this website.

00:33The burger product images are generated with GPT image two. The cinematic background video is generated with Cdance two point o and then Claude Code uses those assets to build the actual website. The final page is a scroll driven motion website built with GSAP, Lenis, and scroll trigger.

00:50So as I scroll, the background video is not just playing normally. It is being controlled frame by frame by the scroll position. And that's what makes this a much better test for Fable five because Claude is not only writing a few React components, it has to plan the project, organize the files, generate the assets through Higgs sealed MCP, prepare the video for scroll scrubbing, build the front end, wire the motion system, and then verify that the final website actually works.

01:18Before we move into Claude code, let me quickly show you how the Higgs Field connection works because this is a big part of the workflow. Higgs Field is an AI creative platform for generating media and working with images, videos, campaign assets, product visuals, cinematic clips, and more. So instead of using one tool for images, another for video, and then manually moving everything around, Higgs Field gives us a single creative platform where we can generate the media assets we need for the website.

01:46But for this video, I'm not going to use Higgs Field only from the web interface. I want to connect it directly into Claude using MCP. MCP basically lets Claude communicate with external tools.

01:57So instead of Claude only writing prompts or giving instructions, it can actually call Higgs Field tools from inside the Claude workflow. That means we can generate images and videos, keep the assets organized, and use them later in the project without constantly switching between apps.

02:14To connect it, we open the MCP section inside Higgs Field. Here we can see different options, but for this workflow, we're using Claude. Higgs Field gives us the MCP URL and this is the URL we need to paste into Claude.

02:27Now we open the Claude desktop app. Inside Claude, go to customize, then open connectors.

02:33As you can see, I already have Higgs Field connected here, but I'll still show the setup. We click the plus button, choose add custom connector, enter the name Higgs Field, paste the m c p URL, and then click add. After that, Claude will ask you to connect and sign in with your Higgs Field account.

02:50Once that authorization is complete, Higgs Field is available directly inside Claude. So now we can generate media from the Claude interface instead of going back and forth manually. A simple way to check if the connection is working is to ask Claude for your Higgs field balance.

03:05If Claude returns your balance, that means the MCP connection is working, and Claude can communicate with Higgs field. One quick note about the new model. When Fable five first launched, during the first few hours, it was visible inside Claude chat and Claude co work, but it did not immediately show up inside Claude code for everyone.

03:23So if you open Claude code and don't see Fable five in the model list yet, you can manually call it from the command inside Claude code. Use this command, slash model Claude fable five. After that, the new model should appear and Claude code should switch to Fable five.

03:39Once that is set, we can start the actual project and test the model on a full creative coding workflow. Now let's move into the actual build. Just to quickly remind you what we're making, the goal is to create a cinematic scroll driven website for a fictional premium burger brand called Burgerlad.

03:55Before I ask Claude to generate images, videos, or write the website code, I want to give it a very specific project skill. This skill is basically a detailed production guide for this exact BurgerLab project. It includes the brand direction, folder structure, required assets, image prompts, video prompt, tech stack, scroll animation requirements, and the final verification checklist.

04:18I'm not going to write the full skill from scratch here in the video because it is a long project specific file. I'll leave the link in the description so you can inspect it or reuse the structure. But one important note, this skill is built specifically for this BurgerLab project.

04:33So if you want to use it for your own product, ask AI to adapt the skill first and replace the brand, product, visual direction, assets, prompts, and website sections for your own project. I already have a fresh folder open inside Claude code. Now I'm going to add the BurgerLab skill file into the project and ask Claude to install it properly.

04:53For this step, I'm going to use Opus 4.8 instead of Fable five because this is just setup work. I don't need the newest and most expensive model yet just to place a skill file and prepare the workspace.

05:04Now that the skill is installed, we can start the actual workspace setup. At this stage, I still don't want Claude to generate any media or build the website yet. First, I want the project to be organized properly because once we start generating images and video, file structure becomes really important.

05:22So the first real task is simple, create the working folders and the planning files. The skill already knows the structure we need for this Burger Lab website. Claude has now created the initial workspace for the Burger Lab project.

05:36We have the main assets folder and inside that we have separate folders for images, videos, and references. We also have a copy folder where all the planning documents and prompts are stored, plus a scripts folder with the helper script we'll use later to prepare the background video for scroll scrubbing.

05:53Inside the copy folder, Claude created the core planning files, the brand kit, the asset plan, the image prompts, the video prompt, and the website brief. So before generating anything, the project already has a clear visual direction, a defined file structure, a list of required assets, and the exact prompts we'll use for the still images and the final video.

06:16For the website, we need seven still images. First, we generate the main hero burger because that image defines the final look of the lab burger. Then we use that hero burger image as the reference for the exploded burger image, so the exploded version feels like the same product separated into layers, not a different burger.

06:36After those two core images are ready, Claude can generate the ingredient detail image and the four catalog burgers for the product cards. The image generation is finished, so now let's quickly review what Claude created through Higgs Field MCP. We have the main hero burger, the exploded burger reference, the ingredient detail image, and the four catalog burgers for the menu cards.

07:00Overall, this is a very solid result. The images all follow the same dark premium food advertising style, strong cinematic lighting, warm amber highlights, realistic textures, and a clean product focused composition.

07:14Now we can generate the most important media asset in the whole project, the background video. This is the video that will sit behind the website and respond to the user's scroll. So it needs to look impressive, but it also needs to work technically as a scrubbed video layer.

07:30For the final direction, I'm going with a dynamic hyper motion food commercial style. The video should start with the assembled BurgerLab hero burger. Use bold cinematic camera movement around it.

07:42Push in, orbit, rotation, parallax, light sweeps. And then in the second half, the same burger separates vertically into its existing visible layers.

07:53The video generation is finished, so let's quickly check the result before we move into the website built.

08:10This is the main motion asset for the whole page, and overall, it came out really strong. The burger keeps the same premium visual identity, the camera movement feels dynamic and cinematic, and the second half separation gives us the kind of scroll driven reveal that can make the website feel much more polished than a static landing page.

08:30Now we have everything we need for the actual website built. The planning files, the BurgerLab brand direction, the generated product images, and the final background video.

08:41At this point, I'm switching Claude code from Opus 4.8 to the new Fable five model because this is the part where the workflow becomes more demanding. The website itself is a single page cinematic landing page for BurgerLab.

08:54The main experience is the scroll controlled background video where the burger motion responds to the user's scroll. On top of that, we need a polished dark premium UI with a hero section, ingredient story, product cards, ordering style panels, and a final CTA. Technically, we're building it with Vite, React, GSAP, Lenis, and ScrollTrigger.

09:18Claude has finished building the website. So now let's open the project in Versus Code and see what it created. Now I'll open the terminal and run the development server with npm run dev.

09:29Once Vite gives us the local URL, I'll open it in the browser. And here's the final BurgerLab website.

09:57Honestly, this came out really strong. The whole page has that dark premium product campaign look we were aiming for.

10:04The burger visuals feel cinematic, the UI cards fit the brand direction, and the scroll controlled background video gives the site a much more polished feeling than a normal static landing page. What I like here is that the result does not feel like a generic restaurant template.

10:21It feels more like a premium food commerce campaign, dark surfaces, amber accents, product cards, strong typography, and a main visual moment that actually reacts to scroll.

10:32Another interesting detail is that during the build, Fable five did more than just assemble the page. It also generated a few extra supporting images where the layout needed them, and it removed backgrounds from some assets so they could fit better inside the website UI. So overall, I'm genuinely happy with this result.

10:52If you wanna try this workflow yourself, I'll leave the Higgs Field MCP link in the description. You can connect it to Claude, add the connector, and start generating images and videos directly from your AI workflow. That's it for this video.

11:05If you found it useful, leave a like, subscribe to the channel, and let me know in the comments what kind of AI website or creative workflow you want me to build next. Thanks for watching, and I'll see you in the next one.

The Hook

The bait, then the rug-pull.

The finished BurgerLab website appears on screen before a single line of code is explained — scroll-driven cinematic motion, dark premium aesthetics, product cards that feel like a food campaign. Then the host rewinds: this is what one Claude session produced when given a skill file, an MCP connection to a generative media platform, and a clear spec.

Frameworks

Named ideas worth stealing.

00:44model

Four-Stage Agentic Production Pipeline

Skill file / spec
Workspace setup (cheap model)
Asset generation via MCP (capable model)
Front-end build + verification (most capable model)

A structured sequence for multi-stage Claude Code sessions that keeps costs proportional to task complexity and spec coherence high across stages.

Steal forany project requiring both AI-generated media and code output in the same session

CTA Breakdown

How they asked for the click.

VERBAL ASK

10:37subscribe

“If you found it useful, leave a like, subscribe to the channel, and let me know in the comments what kind of AI website or creative workflow you want me to build next.”

Standard YouTube close; preceded by a link drop for Higgsfield MCP. Clean and brief.

MENTIONED ON CAMERA

00:25toolHiggsfield MCP ↗

00:44toolGSAP ↗

00:00linkBurgerLab Skill File (Notion) ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.