The strongest argument for building a sci-fi landing page with Figma, Claude Code, and Higgsfield is not speed. It is that the agent writing your markup is the same agent generating the assets that markup needs. A helmet shot gets generated, background-stripped, dropped into public/, and referenced in the component without you ever leaving the terminal. I run both the Figma and Higgsfield connectors on my own Claude account, and that one-loop property is the thing that actually changed how I build pages — everything else in this stack is detail.
Here is the pipeline end to end: design in Figma, build in Claude Code, generate every image and video through the Higgsfield MCP, and ship free on Cloudflare Pages. Plus the parts polished demos skip.
Why this three-tool stack holds together
Two MCP servers make the seams disappear.
Figma's Dev Mode MCP server exposes structured design context — components, variables, layout data — directly to Claude Code, so the agent reads your spacing tokens instead of guessing them from a screenshot. Higgsfield's hosted MCP server, shipped in spring 2026, exposes 30-plus image and video models (Seedance, Veo, Kling for video; Soul, Flux, Nano Banana Pro for images) through one OAuth connection with no API keys.
One naming correction, because auto-transcripts mangle it constantly: MCP stands for Model Context Protocol, the open standard that lets an agent talk to external tools through a consistent interface. It is not a "multimodal content platform." Both connectors speak it, which is the only reason one agent can read your design and generate your assets in a single session. I covered the one-prompt version of the Higgsfield loop in my award-winning website build with the Higgsfield MCP; this post adds the deliberate design at the top and the deploy at the bottom.
Design the layout in Figma first
Everything begins with a layout, not a prompt. When Claude Code invents a layout from scratch you get something plausible — hero, cards, footer — but it drifts generic. A sci-fi page lives or dies on composition: where the negative space sits, how the eye travels from headline to product row, where video belongs and where it is noise. Those are taste calls, and they belong in a design tool.
Map the structure in Figma: a dark atmospheric hero with one focal point, deliberate type hierarchy, a product row of cards holding isolated objects (helmets, in my build), a section shaped for short video, and a nav that can collapse. You are locking structure and intent — the thing the agent is bad at inventing and good at executing. A rough but deliberate layout beats no layout; you do not need to be a Figma master.
JPEG export vs the Figma MCP
There are two ways to hand the design to Claude Code, and the right one depends on whether you pay for Figma.
JPEG export. Flatten the layout to one image and tell the agent to build it. This works — current Claude models have strong enough vision to reproduce structure from a full-page screenshot. But a JPEG is flat: the agent infers spacing and color instead of reading them, and you spend extra prompts correcting both.
Figma Dev Mode MCP. The better route if your plan includes Dev Mode. Open the file with nothing selected, switch to Dev Mode, enable the MCP server from the right sidebar, and add the connection in Claude Code. Then prompt something like: "Read the selected frame via the MCP and build it as a responsive landing page. Use the design variables for color and spacing — don't invent values." That last sentence earns its keep; left unprompted, agents round your spacing to "nice" numbers.
I went deeper on making Claude honor tokens and components in my AI design system workflow with Claude and Figma, and the day-to-day handoff mechanics in my Claude Code Figma MCP workflow. Short version: if you pay for Figma, use the MCP. If not, budget a few refinement rounds on the JPEG path.
Connect the Higgsfield MCP
The setup is genuinely one line:
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp
Claude Code handles auth through a browser OAuth flow; generations draw credits from your Higgsfield plan. Before you build anything, run claude mcp list and confirm higgsfield shows as connected — debugging a half-connected MCP mid-build is miserable.
The mental model shift: you no longer "go make an image and come back." You stay in the build conversation and ask. "Generate a hero background: dark fog-lit alien cityscape, cold blue rim light, cinematic, 16:9." The agent routes it to the right model, pulls the asset down, and wires it in where you say.
Generating consistent assets
The difference between an amateur AI page and a convincing one is consistency, and this is where model choice stops being trivia. Nano Banana Pro — Google's Gemini-powered image model — is the one to reach for when assets need to relate to each other: same face, same lighting language, same material feel across a set.
The realistic asset run, in order:
- Hero background — wide establishing shot, generated oversized at 16:9 for crop room.
- The character — a figure whose identity holds across generations, so the person in your hero can reappear later without looking recast.
- Isolated product shots — clean studio-style objects for the cards.
- Section accents — supporting textures and small visuals.
The consistency technique that actually works: feed strong reference images and use explicit identity-preservation language — literally "keep the character's face and exosuit exactly the same as the reference." Single-shot generation drifts; iteration against a locked reference holds. And budget a regeneration or two per critical asset. Across a long run you will still get a frame where the jaw is slightly off or the suit paneling shifts. Minutes of work versus a half-day photoshoot, but not zero.
One small thing with outsized impact: isolated objects generated on white backgrounds look wrong on a dark page. Ask the MCP to strip the background and export transparent PNGs. Transparent assets are composable — the same helmet can sit in a card, float in a parallax layer, or take a CSS glow, because no baked-in background fights your effects. Then have Claude Code resize and compress them to display dimensions before deploy; heavy PNGs are how a beautiful page ends up slow.
Scroll-triggered video from a still
This is the move that pushes the page from "nice" to "how did they build this." Take your hero still, run it through a video model — I reached for Seedance — with duration, aspect ratio, and motion specified ("10s, 16:9, slow forward dolly, subtle atmospheric drift"). Download the clip, then tell Claude Code to wire it as a scroll-triggered hero where scroll position drives the playhead.
Two realities: video burns credits faster than images and does not always land on the first try — too fast, too jittery, weirdly literal motion all happen. And scroll-synced playback is fiddly; if the clip stutters against the scrollbar, suspect the frame-mapping logic before the video file. The same generation loop applies: generate, look, refine the prompt.
The responsive pass and the free deploy
Responsiveness is where you do the most manual touch-up. Give the agent explicit instructions — collapse the nav to a burger on mobile, stack the cards, constrain the hero video height, and maintain the spacing scale from the Figma design across breakpoints — that last clause stops it from "fixing" mobile by squishing everything. Then spend twenty minutes dragging the viewport and pointing Claude Code at the specific elements that wrap awkwardly. Every build has a heading that breaks at exactly 768px.
Deployment is the cleanest step. Prompt Claude Code to push the repo to GitHub, connect it to Cloudflare Pages for auto-deploy, and add your domain in the project settings. Cloudflare's free tier covers a landing page comfortably — global CDN, automatic HTTPS — so the only money on the table is the domain itself. Optimize the video and PNGs before you ship, and give DNS and SSL time to propagate before you panic-debug a site that just has not resolved yet.
What the demos don't tell you
"One prompt" is marketing. One strong setup prompt gets you a complete draft; then you spend an hour iterating — regenerating the two helmets that came out off, fixing the odd breakpoint, swapping placeholders. That hour is still absurd against an agency timeline, but anyone selling a literal walk-away workflow is showing you the demo, not the job.
The sci-fi theme is a stress test, not the point. Swap the alien cityscape for a clean product hero and the helmets for real SKUs and this same pipeline ships a legitimate client landing page — the version of it I use for local business sites built with Claude. The bottleneck has moved from "can you execute" to "do you know what good looks like." The tools handle execution; your judgment about composition and which generation is the keeper is now the entire job.
I still run this Figma-first loop on paid work, minus the helmets — the client builds it produced are collected on my projects page. Look through those for where the pipeline holds up, then go sketch one deliberate hero section and run the loop on it yourself.
