One real build used 18 generation jobs and 553.5 credits to produce a complete brewery website, hero drone footage included. That build is the basis of this Claude website tutorial, which covers the Higgsfield MCP setup, the two-prompt workflow, and the editing passes that make the result feel less like generic AI output.
What This Claude Website Tutorial Covers
This tutorial reconstructs a step-by-step workflow demonstrated by creator Bart Slodyczka in September 2026: building a complete, mobile-friendly marketing site for a fictional brewery using Anthropic Claude (specifically the Opus 5.5 model in his desktop app) and Higgsfield, a generative media platform that produces AI images and video. The final site featured a stitched drone-style hero video scrolling through the brewery, interactive stacked cards, custom bottle labels, and a booking form. The whole build consumed 553.5 Higgsfield credits across 18 generation jobs, a concrete cost figure the creator reported from his own account dashboard.
The workflow is notable because it keeps one agent in charge of the entire build. Claude plans the site, generates the media through the Higgsfield MCP connector, writes the code, and accepts iterative design feedback in plain language. This article breaks down each stage so you can reproduce or adapt it.
How Do You Connect Higgsfield to Claude?
You connect Higgsfield to Claude through an MCP (Model Context Protocol) custom connector, which lets the model call Higgsfield's image and video generation tools directly from the chat. In the demo, the creator opened his Claude desktop app, navigated to the MCP settings, chose to add a custom connector named Higgsfield, and pasted the MCP URL that Higgsfield provides to registered users.
The setup sequence shown in the video was:
- Open the Claude desktop app inside a blank project folder (he named his "YouTube demo") and select Opus 5.5 at medium effort, the default setting for that model.
- Go to MCP settings, choose Claude, then connect Higgsfield using the MCP URL from your Higgsfield account.
- Keep login-based authentication and the published Claude identity, then click add and connect.
- Log in to your Higgsfield account and click allow.
After that, image and video generation happens inside the Claude session. The creator noted Higgsfield offers other image models such as Nano Banana Pro, but selected two specific models through the connector: GPT Images 2.5 for still images and Seedance 2.5 for video, including the drone-style footage. He also mentioned that if you plan to keep the site long term, managing hosting, performance, and SEO, working inside a persistent project may suit you better; for the demo he stayed in a plain project folder. A Higgsfield account is required, and every generated asset stays in the Higgsfield library with its exact model, prompt, and reference inputs, which makes it easy to review or regenerate any clip later.
Which Two Prompts Drive the Build?
The workflow uses two prompts from the creator's public GitHub repository: a desktop prompt and a mobile refinement prompt. The desktop prompt builds the full site for large screens, asks you for a logo, existing images, and video, and interviews you about the business. The mobile refinement prompt then adapts the finished desktop experience for phones without regenerating the video.
Working inside Claude Code, Anthropic agentic coding tool, the creator pasted the repository URL and specified: build a fictional brewery site, invent the name, logo, and copy, and use a prepared shot list for the drone footage, starting at the bar front, moving through copper pipes releasing steam, weaving between barrels, passing the bottling line, and exiting through the back door with a 180-degree reveal of the whole brewery.
Claude named the fictional business Heron Mill Brewing and Distilling Company, produced a six-step visual storyboard table, then began generating scene images with GPT Images 2.5 and animating them with Seedance 2.5. The creator advised that three or four scenes are usually more practical than the six Claude attempted here.
Which Models Generate What?
Two models do all the media work in this build, each chosen for a different job. One produces the still images that break the generic AI look; the other animates them into the continuous drone flight. Here is how they compare as used in the demo:
| Model | Medium | Role in the build | Noted behavior |
|---|---|---|---|
| GPT Images 2.5 | Still images | Scene stills, bottle labels, storyboard frames | Creator's current favorite over Nano Banana Pro |
| Seedance 2.5 | Video | Animates stills into the stitched drone flight | Accepts an initial reference frame, enabling frame matching |
| Nano Banana Pro | Still images | Available alternative, not used | Mentioned as an option in Higgsfield's catalog |
How Does the Stitched Drone Hero Video Work?
The hero effect is a single continuous-feeling drone flight assembled from multiple generated clips. The technique is frame matching: the final frame of clip A becomes the initial reference frame of clip B, so Seedance 2.5 can start each new clip exactly where the last one ended. No zoom-out-and-zoom-in transition is used; scenes melt into each other. In a previous build made with GPT Astra, the creator relied on zoom-in, hold, zoom-out transitions, which is what this technique replaces.
The creator added two pieces of creative direction that matter for realism:
- Ask for a slightly swaying flight path rather than straight lines, so the camera feels like a real drone entering and leaving through doors.
- Specify camera Notion per scene: pans left and right, passes through doors, and a closing 180-degree turn that reveals the whole building.
Small artifacts appeared and were accepted for the first version: copper cylinders vanishing between clips and a person appearing abruptly in a steam scene. The creator's judgment was that regenerating a scene is optional; you can fix artifacts in a later editing pass or leave them if the overall journey reads well. He also noted you can give Seedance 2.5 more direction, such as extra pans or specific rooms, at any point.
What Does the First Build Actually Produce?
The first version delivered a localhost preview with the stitched drone hero, a drinks menu, a visit-booking flow that Claude inferred a brewery would need, a sunset view of the building and river, and business information sections. Scrolling interactions included an image that pins to the side momentarily, hover effects throughout, and cards that stack on top of each other as you scroll.
On design quality, the creator's own assessment (his first-hand experience, not a benchmark) was that Opus 5.5's default look still reads as somewhat AI-generated, more so than his previous build with GPT Astra, though clearly better than models from early 2026, six months before the video, when most models had an obvious AI look. His key insight: generated imagery is what breaks the generic AI look. A text-and-buttons site feels flat; custom images make it feel designed.
For inspiration, he pulled screenshots from Pinterest, including a layout of four bottles with different labels and an animated brewery-tour site layout, and dragged them directly into the Claude chat as design references.
How Do You Refine the Design Without Breaking It?
Refinement worked by naming what to keep and what to change. The creator told Claude explicitly which sections to preserve (the drinks section, the Orchard Spirits section, the booking form), then asked for targeted changes: regenerate bottle images with the brewery's own custom labels, soften a divider that felt cheap, remove a yellow banner, and convert a slogan section into stacked scrolling cards.
One reference-inspired change failed: copying the high-energy style of the inspiration site clashed with the old-building aesthetic. The creator corrected course by asking Claude to remove the sections that raised the energy too much. The practical lesson is that mismatched tone is a normal iteration, and it is faster to delete a section than to fight it into place.
After two editing rounds, the site had custom-labeled bottles, stacked beer and cider cards, refined hover effects, and a photo section the creator had not noticed Claude added on its own.
How Does the Mobile Version Get Built?
You run the second prompt, the mobile refinement prompt, after the desktop build is complete. A useful property of scroll-driven video sites is that the same drone footage scales well to phones because the camera already points at the right focal point, so the prompt deliberately does not regenerate the video. The first mobile pass in the demo left some elements off-screen and a stacked section looking wrong, so the creator reran the base prompt for a V2 before executing the mobile prompt.
The final mobile version reused the drone footage, switched to a transparent menu bar during the hero animation that turns solid once scrolling begins (a deliberate choice to maximize the video viewport), laid out product cards cleanly, and fit the entire booking form in one viewport with no scrolling needed to fill it. Navigation menus for beers, spirits, tours, story, and visit all worked, including opening hours.
What Does This Workflow Cost?
The creator reported 18 generation jobs and 553.5 Higgsfield credits for the full build, desktop and mobile included. This is a speaker-reported figure from his Higgsfield account, not an independent measurement, and your cost will vary with the number of scenes, regeneration attempts, and the models you choose through the connector.
For context on scope: the build included six storyboard scenes (more than the three or four he recommends), multiple re-renders, and two design revision rounds. A leaner build with fewer scenes would use fewer credits. The video itself notes that Higgsfield offers referral codes, which is how the creator monetized the recommendation.
This article was produced from that public 21-minute video using Skala Blog, the article pipeline behind this site, and draws on related developer resources such as Crazystack, the Crazystack Typescript community materials, and the Bootcamp do Dev Doido, where builder Gustavo Dev Doido teaches similar AI-assisted development workflows.
Frequently Asked Questions
Do I need to know how to code to follow this workflow?
No. The demo is built entirely through natural-language prompts in the Claude desktop app. You describe the business, approve generated assets, and request design changes in plain language.
Which models generate the images and video?
The creator configured GPT Images 2.5 for still images and Seedance 2.5 for video, both called through the Higgsfield MCP connector. Nano Banana Pro is another image model Higgsfield offers, but it was not used in this build. The Higgsfield library shows the exact model used for every asset.
Does the mobile version need a new hero video?
No. The same drone footage scales to mobile because scroll-driven video keeps the camera pointed at the right focal point. The mobile refinement prompt explicitly avoids regenerating it.
How many scenes should a stitched drone hero use?
The creator recommends three or four scenes. The demo's six-scene storyboard worked, but he called it a challenge and flagged two visual artifacts across the seams.
Is the 553.5-credit cost typical?
That figure covers one specific build with 18 jobs, six scenes, re-renders, and revision rounds, as reported by the creator in 2026. Treat it as a reference point for this configuration, not a fixed price.
Do I need a Higgsfield account to use the MCP connector?
Yes. The connector requires you to log in to a Higgsfield account and click allow before Claude call its generation tools. The creator shared a referral link in his video for new sign-ups.
Why is frame matching better than zoom transitions?
Frame matching makes the final frame of one clip the starting reference of the next, so scenes blend into one continuous flight. The zoom-in, zoom-out approach the creator used with GPT Astra interrupts the journey at every seam.
Can I fix artifacts without regenerating a scene?
Yes. The creator left a vanishing-cylinder glitch and an abruptly appearing person in version one, then judged whether they hurt the overall experience. Regeneration is optional if the journey still reads well.
Where do the design prompts come from?
Both prompts live in the creator's public GitHub repository: a desktop prompt and a mobile refinement prompt. You paste the repository URL into Claude tell it which prompt to run at each stage.
Turn Your Own Video Walkthroughs Into Articles
A 21-minute build video like this one holds a complete workflow that many readers would rather scan than watch. Every stage above, from the MCP URL to the 553.5-credit total, came from one piece of existing content that was re-framed for a new medium without being rebuilt. If your channel holds that kind of knowledge, tutorials, interviews, opinions, lessons, the same move works for you: paste your YouTube URL at Skala Blog, the video is transcribed, and an article like this one is generated for your review.
Visit Skala Blog to convert your next video.
Fork this article
Start a new branch from the same video, shaped your way. You keep the credit; the original keeps the attribution.
A fork in another language is filed as a translation of this article, so the two pages point at each other. You can unlink it later from the editor.
0/240
You are creating
- Format
- For
- Language
- Source
- Your angle
You will be asked to sign in before it is generated.
Buy credits