There is a three-tool stack running inside Claude Code that builds cinematic 3D scrolling websites. The kind web design agencies bill at $10,000. You write one prompt. The tools handle everything else. No Figma. No design team. No revision cycles with a freelancer who misread your brief.
This guide covers the exact stack, how the tools connect, and the prompt structure that produces a deployable site in a single session.
Until recently, a cinematic website with 3D scroll effects, full-screen video backgrounds, and custom-generated imagery required at least one designer and a developer. Three weeks. Around $5,000 for production time before a single revision.
That math no longer holds.
With Claude Code running on Fable 5, a connected Higgsfield MCP, and Seedance 2.0 for video, you build that site in a single session. One prompt describes the business. The stack builds the whole site: code, images, video, scroll behavior. You get a deployable set of files at the end. The client never needs to know how it was built.
What Fable 5 Actually Changed
Earlier Claude models could write site code. What they could not do reliably was orchestrate external media generation mid-build, hold design consistency across many sections, and produce finished, deployable output in one pass.
Fable 5 at maximum reasoning can do all three.
The reasoning setting is not cosmetic. At lower levels the model loses track of the brief partway through. Sections drift from the original aesthetic. Media calls get skipped. What comes back is structurally complete but visually inconsistent. Set reasoning to Max before you start. Do not change it.
The Stack: Three Tools, One Job Each
| Tool | Role |
|---|---|
| Claude Code, Fable 5 (reasoning: max) | Orchestrator. Writes all code. Manages the entire build session. |
| Higgsfield MCP | Media generator. Produces images and videos directly inside the Claude session. |
| Seedance 2.0 | The model Higgsfield uses for video generation. |
The mechanic that makes this different from earlier AI site builders: Higgsfield connects to Claude Code as an MCP (Model Context Protocol) server. Claude calls Higgsfield directly during the build. No manual downloads. No switching tabs to export an asset, then re-uploading it. Claude generates a hero video, places it in the page code, and continues without breaking stride.
Seedance 2.0 handles cinematic video output. Name it explicitly in your prompt ("generate video using Seedance 2.0") rather than leaving it to defaults. Specificity in the media instruction produces better cinematic output.
Step One: Switch Claude Code to Fable 5
What you need: Claude Code installed and working.
- Open Claude Code.
- Switch the active model to Fable 5.
- Set reasoning level to Max.
That is the whole step.
Your First Real Run: Open a new session. Confirm Fable 5 is the active model. Close the session. You are checking the switch held before investing time in a full build. Take this step seriously. A session that starts on the wrong model wastes the entire build.
The Mistake That Makes It Fail: Using the default reasoning level because the max setting feels like overkill for a website. It is not. At lower settings the model cuts corners around the midpoint of a complex build. By the time the inconsistency is visible, the session context is partially committed and corrections cost more time than starting clean. Set it to max once.
Step Two: Connect Higgsfield MCP
What you need: A Higgsfield account and an API key.
MCP servers plug into Claude Code via a config file. The general approach:
- Go to Higgsfield. Create an account and generate an API key.
- Open your Claude Code MCP config file. It lives at
~/.claude/claude_desktop_config.jsonby default (or the equivalent path for your CLI runtime if you are using Codex CLI instead of Claude Code). - Add Higgsfield as a named entry under
mcpServers. Pass your API key as an environment variable. The exact install command for the Higgsfield MCP package is in the full setup guide linked with this article. Use it rather than guessing the package name. A mistyped entry fails silently at build time, not at setup time. - Save the config and restart Claude Code.
- Confirm Higgsfield appears in your active tools list before running anything.
Done.
Your First Real Run: Ask Claude to generate one test image through Higgsfield before building any client site. Use this prompt:
Copy this.
Copy: MCP Connection Test Use Higgsfield to generate a photorealistic image of a luxury wristwatch on a dark marble surface, cinematic lighting, high contrast.
If an image returns, the connection works. If you get an error, check your API key. Fix it now, not mid-build.
The Mistake That Makes It Fail: Skipping the connection test and going straight to the full build. An invalid API key returns a vague error inside a live session, not a clean diagnostic. A two-minute test before the first real build is the cheapest insurance available.
Step Three: Write the Brief
The brief is your only real input. Every other decision in the build follows from it.
A brief that produces a complete, consistent site has four parts:
1. Business name and type. Give the model something specific. "Luxury watch brand" outperforms "a brand." "AXIOM, a fictional luxury watch brand with a dark editorial identity" gives the model even more to work with.
2. Aesthetic direction. One concrete reference is enough. "Apple-level precision, dark editorial" works. "Modern and clean" does not. The model has no way to resolve "modern and clean" consistently across 10 sections. Give it a comparison or a color palette. Be specific about what the site should feel like.
3. Content sections. List what must exist. The model builds to your list. Anything not on the list may not appear.
4. Media instruction. This is the line that triggers Higgsfield. Without it, the model may insert placeholder text instead of calling the MCP. The instruction must name both Higgsfield and Seedance 2.0.
Use this template:
Copy this.
Copy: The Full Build Brief Build a complete website for [BUSINESS NAME], a [BUSINESS TYPE]. Aesthetic: [ONE REFERENCE POINT, e.g. "dark editorial, Apple-level precision, angular product photography on black marble"]. Include: [LIST SECTIONS, e.g. "Hero section with full-screen video background. Three product feature sections. An about section. A contact form."] Generate every image and video using Higgsfield MCP and Seedance 2.0. Output complete, deployable HTML, CSS, and JavaScript. No placeholder assets.
The phrase "no placeholder assets" is not optional. It is the instruction that forces Higgsfield calls instead of text substitutes. Keep it in every brief.
Your First Real Run: Build a fictional business site before billing anyone. Something with no stakes. "A fictional espresso bar in Milan" or "a fictional architectural studio in Copenhagen." Run the full brief. Let it complete. Review the output. You need to see what a finished build looks like before you promise a client a delivery date.
The Mistake That Makes It Fail: Writing a vague aesthetic direction and expecting the model to fill in the gaps. It will. Just not consistently. "A completely fictional business" from the brief description works precisely because it pairs with a concrete aesthetic reference. The model extrapolates from one anchor. Give it one you actually like.
Step Four: Run the Build
Paste the brief into Claude Code. Start the session. Do not touch it while it runs.
The build orchestrates several things in sequence: site structure, section-by-section code generation, Higgsfield calls for each image and video asset, CSS animation and scroll behavior, and a final assembly pass. Interrupting the session breaks the working context. A partial interruption usually means starting over.
When the build finishes, you receive a file set. Before showing anyone, open index.html in a browser and check three things:
- All videos load. Higgsfield returns asset URLs. Confirm every URL resolves and the video plays.
- Scroll animations fire on scroll, not on page load. This is the detail that makes the site feel premium. If it fires on load, there is a JavaScript timing issue in the output.
- The contact form has an action attribute, or make a note to the client that form submission requires separate backend wiring.
Those three checks take a few minutes. Do them before presenting the site to anyone.
Done. That is the full build.
Honest Limits: What to Know Before You Price This
The $10,000 figure is a market price, not a guarantee. Web design agencies charge that for cinematic sites because the creative direction, client communication, and revision cycles take weeks of human time. This stack removes the production time. It does not remove the sales conversation, the client relationship, or the positioning work. What you bill depends on how you frame and sell the deliverable, not on what the tool can build.
Static output only. This build produces HTML, CSS, and JavaScript files. There is no CMS, no database, no admin panel. A client who wants to update their own content later needs a CMS integration built separately, or a different approach entirely.
Hosting is on you. The build does not deploy anything. You take the files and host them. Netlify, Vercel, and GitHub Pages handle static files at low or no cost. Domain setup and SSL configuration are separate steps.
Higgsfield bills per asset. Video generation in particular adds up. Run one full fictional build, count the assets generated, and check your credit usage before pricing a client project. Build that cost into your rate. Do not discover the bill after the fact.
Long builds can lose consistency. A site with a large number of sections may see the model drift from the original aesthetic near the end. If you are building something that exceeds what a single context window can hold comfortably, consider breaking it into two sessions with a review checkpoint between them.
This requires a CLI with MCP tool support. Pasting this brief into a standard AI chat interface produces site code but nothing from Higgsfield. The MCP connection works only in a runtime that supports live tool calls. Claude Code and Codex CLI both qualify.
The One Thing to Do Today
Four steps. One order. One action that matters most right now.
Set the model. Wire the MCP. Write the brief. Then run the fictional build before you commit to any client.
The fictional build is the only step that shows you what the output actually looks like. Everything before it is setup. Everything after it is pricing and sales. The build itself takes one session.
If you do one thing today: pick a fictional business name, fill in the brief template, and let it run to completion. See what comes back. Decide what you want to charge.
That is the homework. The rest is pricing.