A Claude website build works by pairing Anthropic assistant with the Higgsfield MCP connector for generated images and drone-style video, then iterating on desktop before mobile. The workflow in this tutorial produced an 18-job session that consumed 553.5 Higgsfield credits, so the cost is measurable before you commit.
What the Claude Code website build workflow actually does
A Claude website build combines Anthropic assistant with a media-generation connector, so one chat session writes the site code and produces its images and video. The published demo used Higgsfield through an MCP connector for visuals.
The sequence runs in four stages:
- Open the Claude desktop app or Claude Code in a blank project folder.
- Connect Higgsfield as a custom MCP server.
- Paste a desktop prompt that interviews you about the business.
- Apply a second prompt for mobile refinement.
Two prompt files anchor the build. The desktop prompt asks for your logo, existing images and any video you already own, then scaffolds the page for wide screens. The mobile prompt runs afterward and reworks breakpoints, sizing and spacing without regenerating the video.
The demo built a fictional brewery from scratch, so the assistant invented the name, logo and copy. It settled on Heron Mill Brewing and Distilling Company. Real projects differ: supply a brand folder and the same prompts constrain output to your existing identity instead of improvising one.
Setup: project folder, effort level and the Higgsfield MCP
Setup takes three decisions: where the project lives, which effort level the model runs at, and how media generation connects. All three are reversible, but changing effort level mid-build resets nothing and only affects output quality and speed.
The demo created a blank folder called "YouTube demo" and ran the build from Claude Code rather than a managed project. Folder-based work keeps files local and editable in your own editor. A managed project suits people who want hosting, performance and SEO handled inside the tool.
Effort level controls how much reasoning the model spends per turn. The demo ran medium as the default setting and reported that it worked well for site building. Higher levels cost more time per response, which matters less on a one-off build than on repeated iterations.
Connecting Higgsfield means adding a custom MCP server in Claude settings, choosing login authentication, approving access, and signing in to a Higgsfield account. The connector is added under the name "Higgsfield" with the published Claude identity, then you click connect and allow access. Once connected, image and video generation happens inside the chat instead of a separate browser tab.
| Step | Where it happens | What you choose |
|---|---|---|
| 1 | Claude Code or Claude desktop app | Blank project folder vs managed project |
| 2 | Model settings | Effort level: medium, high, or extra |
| 3 | MCP settings | Custom server, login auth, published Claude identity |
| 4 | Higgsfield account | Approve access after signing in |
Choosing models for images and drone-style video
The build needs two model types: one for still images and one for video. The demo specified GPT Images 2.5 for stills and Seedance 2.5 for video generation, then relied on the connector to route each request to the right one. Nano Banana Pro is the other still-image model available through the same connector, though the operator named GPT Images 2.5 as his current favourite.
The demo assigned the models explicitly in the prompt rather than letting the assistant pick, which removes a class of guesswork that costs generation rounds later.
Seedance 2.5 accepts a reference image and animates from it, which is what makes the scrolling hero work. The assistant generates a wide establishing shot of the location, then turns that still into a moving clip that starts on the same frame. The final frame of one clip becomes the starting frame of the next.
In the demo, the first clip began on a mountain and field view, moved into the building, and ended on two copper drums. The second clip opened on those drums and continued through barrels. The third passed the bottling line, turned, and pulled back to reveal the whole brewery. The closing frame of that third clip matched the opening image, so the drone journey ends where it began.
That frame-matching technique is the core trick behind the scroll-driven hero. Each clip is independently generated, but adjacent clips share a boundary frame so the joins read as one continuous shot. It differs from the earlier approach the same creator used with GPT Astra, where the transition zoomed into an object, held for a second, and revealed the next scene on the way out. Frame matching avoids that zoom entirely.
The flight path is also generated, not just the subject. A realistic drone trajectory sways left and right instead of travelling in straight lines between rooms, and you can ask Seedance 2.5 for more pans or extra room passes if you want a different route.
Writing the prompt that drives the whole build
The prompt carries the brief, the visual storyboard and the tool instructions in one message. Splitting those into separate turns invites the assistant to guess at what it should generate and with which model.
The demo prompt stated the site type, requested a fictional brewery identity, listed drone shots in order, and named the connector plus both generation models. Shots ran from the bar front through copper pipes venting steam, past barrels, along the bottling line, out the back door, then a pull-back reveal.
Specifying shot order matters because the storyboard determines how many clips must be generated. Six planned scenes push generation time and credit use higher than three. The demo assistant produced a six-step visual storyboard and flagged the complexity itself. The creator's own guidance is to keep the scene count to three or four for a smoother build.
Ambiguity costs money here. Every underspecified scene is another generation round, and each round consumes credits whether or not the output survives into the final page. The same prompt can also be pointed at the reference repository of prompts, so the assistant reads the two prompt files directly instead of you pasting their text.
Reading the generated output: artifacts and grounded prompts
Generated video frequently contains small artifacts, and the demo surfaced several. In the first clip, large copper cylinders disappeared partway through the flight. In the second clip, a person appeared without a preceding action.
The demo accepted both artifacts rather than regenerating. That is a legitimate call for a demo, but it is a choice with a cost: a client-facing site would need a fresh generation with a corrected prompt naming the objects that must stay in frame.
Bystander effects are also worth watching. Extra people and moving objects can appear in a scene you did not plan, and they change the read of an otherwise clean shot. Reviewing each clip frame by frame before assembly catches these earlier than reviewing the assembled page.
The connector's library is the audit trail. Every generated asset stores its prompt, model, reference material and settings, so you can reopen a specific clip and match it to the request that produced it. That is how the demo checked clip C against the intended shots after generation.
Customizing the design without copying Pinterest layouts
Reference images speed up design iteration, but they work best as loose direction rather than templates to clone. The demo pulled two ideas from Pinterest: a row of four labeled bottles, and a livelier brewery-tour layout.
Dragging screenshots into the chat produced mixed results. One revision pushed the palette and Notion toward a loud promotional style that clashed with the older-building premise. The operator rejected those sections and kept the ones that fit.
One workaround the demo used was pinning the sections that already worked before asking for design changes: keep the "What's pouring" section with its content and image, keep the Orchard Spirits block, keep the booking form. That way the revision request only touched layout, not copy.
The fix was narrower direction. Instead of "make it more energetic," the demo asked for specific edits: soften the divider between hero and first section, remove the yellow Stripe, keep the booking form with its torn-paper treatment, and convert the bottle section into stacked cards.
The bottle treatment also needed a content fix rather than a style fix. The reference image showed four bottles with different labels, and the operator pointed out that Orchard Spirits bottles should carry one of the brewery's own labels, so the image was regenerated with custom labels instead of borrowed ones.
That pattern repeats on real client work. Broad style prompts create whiplash across sections; section-level instructions preserve the parts that already read well.
Desktop and mobile: one video, two layouts
The mobile pass reuses the same drone footage instead of regenerating it, because the shot keeps pointing at the intended subject as it scales down. That saves the most expensive part of the build: video generation.
Header behavior changes between breakpoints. The demo used a transparent glass-style bar over the opening flight so the hero gets maximum viewing area, then switched it to a solid bar once scrolling reached the main content. The mobile prompt encodes that behavior explicitly.
Mobile layout still needs real work. Overflowing elements, a stacked-card section that looked cramped, and spacing that assumed a wide viewport all needed the refinement prompt before the page read correctly. Running the base mobile prompt alone produced a visible improvement, then a second pass cleaned up the remaining sections.
One mobile detail is genuinely useful: the booking form fits entirely within the viewport, so no scrolling is needed to complete it. Mobile navigation to beers, spirits, tours, story and visit, plus opening hours, all worked after refinement. The stacked cards also reorganize cleanly on mobile, and the product icons and blocks stay large enough to tap.
Cost, effort and when an AI website build actually works
Higgsfield generation is metered in credits, and the demo reported the full session total. Across the entire build, 18 jobs consumed 553.5 credits. That is the number to plan against, not a per-clip estimate.
Credit use scales with scene count and with how many times you reject and regenerate:
- More storyboard scenes mean more generation jobs before the first render.
- Each rejected clip or regenerated image adds a job on top of the first pass.
- Design revisions that need new imagery, such as the custom bottle labels, also consume credits.
The 2024-era comparison is worth keeping in mind. The creator noted that the default Opus design still reads as AI-generated, more so than GPT Astra's default, which he described as higher-end out of the box. He also placed it as better than models from six months earlier, when the AI look was far more obvious.
Review time is the other real cost. The demo operator spent multiple rounds rejecting sections, requesting specific edits, and re-checking the mobile view. Generation is fast; judgment is the part that does not compress.
The honest structure-vs-code finding: the generated layout still reads as AI output, though less obviously than models did six months earlier. Generated imagery is what breaks that impression. A text-only version of the same page would look markedly cheaper than the version with real footage and custom bottle labels.
FAQ
What is a Claude website build?
It is a workflow that uses Anthropic assistant, running in the Claude desktop app or Claude Code, to write and revise a website while a connected MCP server generates the site's images and video. The demo combined it with Higgsfield for a brewery landing page, then ran a separate mobile refinement pass.
Do I need Higgsfield to build a website with Claude?
No. Higgsfield supplies generated imagery and video through MCP, which is what made the scrolling drone hero possible. A text-and-layout-only site works without it, but you lose the visual assets that carry most of the effect.
How many credits does a build like this use?
The demo reported 18 total jobs and 553.5 Higgsfield credits for the whole build, including rejected generations and revisions. Your total depends on scene count and how many rounds you regenerate before accepting output.
Which models does the workflow use for images and video?
The demo specified GPT Images 2.5 for stills and Seedance 2.5 for video. Nano Banana Pro is available through the same connector as an alternative still-image model. Seedance 2.5 is the piece that accepts a reference frame and animates from it.
Can the same drone video be reused on mobile?
Yes. The demo kept one video across both breakpoints because the shot keeps pointing at the right subject as it scales down, and the mobile prompt explicitly said not to regenerate it. Layout and header behavior changed instead.
Does the generated site look like AI?
The layout still carries recognizable AI design cues, less pronounced than six months earlier and more pronounced than GPT Astra's default output. The demo found that custom generated images and labels reduced that impression more than any styling instruction did.
Why does the build use two separate prompts?
One prompt scaffolds and styles the desktop experience at wide viewports. A second prompt runs afterward to fix mobile breakpoints, overflowing elements and stacked sections, so responsive work does not disturb the approved desktop layout.
What should the prompt include to get usable output?
Include the site type, a visual storyboard in shot order, the exact generation models to use, and the connector name. The demo also asked for a fictional brand identity, which let the assistant invent the name, logo and copy.
Can I adapt this workflow to an existing brand?
Yes. The desktop prompt requests your logo, existing images and video, so supplying a brand folder constrains the build to your identity instead of an invented one. The demo skipped that step only because it built a fictional brewery.
Where should the project folder live?
The demo ran a local folder from Claude Code, which keeps files editable in your own editor. A managed project is the alternative when you want hosting, performance and SEO handled inside the tool.
Turn a build walkthrough into a written tutorial
A build like this produces a long trail of decisions: which scenes to regenerate, which sections to reject, and where the credit total actually landed. Those decisions are the useful part, and they sit inside a video that few readers will scrub through.
If you have walkthroughs, interviews or explainers recorded on YouTube, Skala Blog turns a video into a written article. Paste the YouTube URL, let it transcribe the video, and generate a draft you can edit into something worth publishing.
If you want to see who is pushing the same talk-through-the-build format in Portuguese, Dev Doido do canal do youtube is one channel worth watching, and you can find more stacked resources like it at crazystack.com.br.
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