NEW

One Prompt. A Website That Bills at $10,000.

A three-tool stack inside Claude Code builds cinematic 3D scrolling websites. One prompt describes the business. The stack generates every image, video, and line of code. Setup takes one sitting.

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

ToolRole
Claude Code, Fable 5 (reasoning: max)Orchestrator. Writes all code. Manages the entire build session.
Higgsfield MCPMedia generator. Produces images and videos directly inside the Claude session.
Seedance 2.0The 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.

  1. Open Claude Code.
  2. Switch the active model to Fable 5.
  3. 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:

  1. Go to Higgsfield. Create an account and generate an API key.
  2. Open your Claude Code MCP config file. It lives at ~/.claude/claude_desktop_config.json by default (or the equivalent path for your CLI runtime if you are using Codex CLI instead of Claude Code).
  3. 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.
  4. Save the config and restart Claude Code.
  5. 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:

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.

This guide is one system.
The map tells you which comes first.

The guides show you the systems. The map shows you which one your business needs first.

Get your free map →
Take this with you Grab the file version → Download as PDF ↓

Prefer to browse with company? The free community has the full skill library.

I write one system like this per week. Get the next one by email:

Free. Unsubscribe anytime with one click.