Sci-Fi Landing Page: Figma + Claude Code + Higgsfield

Sci-Fi Landing Page: Figma + Claude Code + Higgsfield

The part that made me sit up wasn't the neon. It was the helmet.

Picture a dark, fog-lit hero section — a lone figure in a chrome exosuit, breath visible, a planet hanging low behind them. Then a product row underneath: three isolated helmet shots, each on a clean transparent background, floating in their cards like they'd been photographed in a real studio. And the same character's face, recognizable, carried across every section. No designer. No photographer. No Photoshop pen-tool marathon to cut out backgrounds. The whole thing assembled itself inside a single terminal window while a design file sat open in another tab.

That's the workflow I want to walk you through: building a sci-fi landing page with Figma, Claude Code, and Higgsfield as a connected pipeline, where the design starts in Figma, the development happens in Claude Code, and every image and video asset gets generated and wired in without ever leaving the editor. By the end you'll be able to hand a Figma design to Claude Code, generate consistent characters and isolated product shots on demand, turn a still into a scroll-triggered video, make the whole thing responsive, and push it live on Cloudflare Pages for free.

I'll be straight with you about what's hands-on and what's the documented workflow, because the second half of this — the asset generation tricks and the deploy automation — is where most tutorials wave their hands and you get stuck. We're not doing that. Let me show you why this specific three-tool stack crossed a line in 2026 that it hadn't before.

Why This Figma-to-Live Pipeline Suddenly Works in 2026

Three pieces landed close enough together that the seams between them basically disappeared.

First, Figma's Dev Mode MCP server matured into something Claude Code can actually read. It exposes structured design context — components, variables, layout data, even FigJam content — directly to an agentic coding tool instead of forcing it to guess from a flat screenshot. Demand for it went from essentially zero to roughly 2,400 monthly searches by February 2026, which tells you how fast this handoff pattern is spreading. On March 24, 2026, Figma expanded it further so agents can work directly on the canvas, and the feature is free during beta (it'll move to usage-based pricing later).

Second, on April 30, 2026, Higgsfield shipped its official MCP server — one hosted endpoint exposing 30-plus image and video models through a single connection. Seedance 2.0, Sora 2, Veo 3.1, Kling 3.0 for video; Nano Banana Pro, Soul 2.0, Flux 2, GPT Image 2 for images. No API keys to juggle, no per-model SDKs. You authenticate once with OAuth in the browser, and Claude Code can ask any of those models for a hero image or a cinematic clip from inside the same session it's writing your CSS.

Here's the connection most people miss. The agent writing your markup is the same agent generating the assets that markup needs. The helmet shot gets generated, downloaded into your public/ folder, and referenced in the component — all in one continuous loop, all without you opening a second app. That's the thing that collapses a multi-week design-build-photoshoot timeline into an afternoon.

I've built creative pipelines on this foundation before, and documented an early version in my automated creative agency build with Claude and Higgsfield. What's new here isn't the tools individually — it's that Figma now feeds the design in cleanly at the top, and Cloudflare catches the deploy at the bottom, so the whole chain runs without leaving the terminal.

One naming correction before we go further, because the auto-transcripts mangle this constantly: MCP stands for Model Context Protocol. It's the open standard that lets an AI agent talk to external tools and data sources through a consistent interface. It is not a "multimodal content platform." Both Figma and Higgsfield expose their capabilities to Claude Code through MCP — that shared protocol is the reason this pipeline holds together at all.

So where does the design actually start? In Figma — and how you move it into Claude Code is the first real decision.

Designing the Sci-Fi Layout in Figma First

Everything begins with a layout, not a prompt. That order matters more than it sounds.

When you let Claude Code invent a layout from scratch, you get something plausible — a hero, some cards, a footer — but it drifts toward the generic. A futuristic sci-fi landing page lives or dies on intentional composition: where the negative space sits, how the eye travels from the headline down into the product row, where a video belongs and where it would just be noise. That's a design decision, and design decisions belong in a design tool.

So the workflow opens in Figma with a full layout of the fictional sci-fi landing page mapped out:

• A hero section with a dark, atmospheric background and a single strong focal point
• A headline and subhead with deliberate type hierarchy
• A product row — cards holding isolated objects (in the source build, sci-fi helmets)
• One or more sections built to hold short looping or scroll-triggered video
• A navigation bar that'll need to collapse gracefully on smaller screens

You're not finishing the visual design here. You're locking the structure and intent — the thing Claude Code is genuinely bad at inventing and genuinely good at executing once it's given. Think of Figma as where you make the hard taste calls, and Claude Code as the engineer who builds exactly what you specified.

A quick honesty note: you don't need to be a Figma master for this. Even a rough but deliberate layout beats no layout. The goal is to give the agent a clear blueprint, not a pixel-perfect masterpiece.

Now the decision that trips people up — getting that design into Claude Code. There are two paths, and they're not equal.

JPEG Export vs Figma MCP: Which Handoff to Use

There are two ways to move a Figma design into Claude Code, and picking the right one depends entirely on whether you pay for Figma.

Path one — export the whole design as a single JPEG. You flatten the entire layout to one image, drop it into your Claude Code session, and tell the agent to build a website that matches it. This is the basic, cheaper option, and it works. Claude Fable-class models have strong enough vision to look at a full-page screenshot, understand the layout, and reproduce the structure in HTML and CSS. If you're on a free Figma plan or just sketching, this is your route.

The trade-off: a JPEG is flat. The agent sees pixels, not structure. It can't read your exact spacing tokens, your color variables, or which elements are components versus one-offs. It infers all of that — usually well, sometimes not. You'll spend more follow-up prompts correcting spacing and color than you would with the richer path.

Path two — the Figma Dev Mode MCP server. This is the recommended route if you have a Figma subscription that includes Dev Mode. Instead of a flat image, Claude Code reads the structured design context straight from the file: components, variables, layout data, the works. The Figma MCP "turns Figma designs into accurate code by bringing Figma context directly into agentic coding tools," which is exactly what you want — the agent isn't guessing at your spacing, it's reading it.

Setting it up is short. Per Figma's own setup guide:

1. Open your Figma Design file with nothing selected on the canvas.
2. Switch to Dev Mode using the toggle in the toolbar.
3. Enable the MCP server from the right sidebar.
4. In Claude Code, add the Figma MCP connection, then point the agent at the frame you want to build.

Then you tell Claude Code something like: "Read the selected Figma 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 matters. Left unprompted, the agent will sometimes round your spacing to "nice" numbers. Tell it to respect the tokens.

I went deeper on getting Claude to actually honor a design system — tokens, components, and all — in my AI design system workflow with Claude and Figma. If you care about output that doesn't read as generic AI slop, that piece pairs directly with this one.

My honest recommendation: if you pay for Figma, use the MCP path. The fidelity gap on spacing and color is real, and it saves you a dozen correction prompts downstream. If you don't, the JPEG path is completely viable — just budget a few extra refinement rounds. Either way, the design is now in Claude Code. Next we give it a way to make the assets.

Connecting the Higgsfield MCP to Claude Code

This is the bridge that turns "a coded skeleton" into "a finished, image-rich page." And the setup is genuinely a one-liner.

Higgsfield's connector is a hosted MCP server, so you don't self-host anything or manage API keys. Open your terminal and run:

# Add the Higgsfield MCP server to Claude Code at user scope
claude mcp add --transport http --scope user higgsfield https://mcp.higgsfield.ai/mcp

Claude Code handles authentication through a browser OAuth flow — no API keys to paste, no .env file to babysit. Generations draw credits from your Higgsfield plan. Once it's connected, the agent can reach every model on the Higgsfield platform from inside your build session: 30-plus image and video generators, output up to 4K, clips up to 15 seconds in any aspect ratio.

A couple of setup realities worth stating plainly, because the source walkthrough glosses them:

• The exact connector steps beyond this command aren't deeply documented in every tutorial. Higgsfield's official docs and the command above are your source of truth; treat third-party blog steps as a sanity check, not gospel.
• Verify the connection before you build. After adding it, run claude mcp list in your terminal to confirm higgsfield shows up as connected. If OAuth didn't complete, fix it now — debugging a half-connected MCP mid-build is miserable.

Once that's live, here's the mental model that makes the rest click: you no longer "go make an image and come back." You stay in the build conversation and ask for the image. "Generate a hero background: dark fog-lit alien cityscape, cold blue rim light, cinematic, 16:9." Claude Code routes that to the right Higgsfield model, gets the asset back, and you tell it where to wire it in. The platform switching that used to break your focus just... goes away.

If you'd rather have someone build this exact Figma-to-Higgsfield-to-Cloudflare setup for you, I take on AI development and automation engagements — you can see what I've built at fiverr.com/s/EgxYmWD.

Now the fun part: actually generating the sci-fi assets, and the consistency trick that separates a real page from a moodboard.

Generating Consistent Sci-Fi Assets with Nano Banana Pro

The difference between an amateur AI site and a convincing one is consistency. This is where model choice stops being trivia and starts being the whole game.

Nano Banana Pro — Google's Gemini-powered image model, the one the community nicknamed "Nano Banana" — is the one to reach for when assets need to relate to each other. It's specialized in continuity and character consistency: the same face, the same lighting language, the same material feel across a whole set of images. For a landing page where a character appears in the hero and a product appears in three cards, that coherence is what sells the illusion that a single art director made everything.

Here's the realistic asset run for a sci-fi page, in the order it actually happens:

1. Hero background. A wide atmospheric establishing shot — the cityscape, the planet, the fog. Generate it at 16:9 and oversized so you have crop room.
2. The character. A consistent figure you can reuse. Nano Banana Pro holds the identity across generations, so the person in your hero can reappear in a testimonial or a secondary section without looking like a different model.
3. Isolated product shots. The helmets, the gadgets — generated as clean studio-style objects. These are what go in the product cards.
4. Section accents. Smaller supporting visuals, icons-with-depth, background textures.

A practical consistency tip pulled straight from how the model behaves: feed it strong reference images (high resolution, multiple angles) and use explicit identity-preservation language in the prompt — literally tell it to "keep the character's face and exosuit exactly the same as the reference." Single-shot generation drifts; iterative refinement with a locked reference holds. That's not a magic prompt, it's just respecting how the model maintains continuity.

One honest limitation: consistency is strong, not perfect. Across a long run of generations you'll still get the occasional frame where the jaw is slightly off or the suit's paneling shifts. Budget a regeneration or two per critical asset. It's still minutes of work versus a half-day photoshoot — but "set it and forget it" oversells it.

You've got images now. But a flat white-background helmet doesn't drop cleanly into a dark sci-fi card. That's the next problem, and it has a clean fix.

Turning White Backgrounds into Transparent PNGs for Layering

Here's a small thing that makes a disproportionate difference: an isolated product shot generated on a white background looks wrong on a dark page. The white box around the helmet kills the floating-in-space effect instantly.

The fix is to convert those assets to transparent PNGs so the object layers cleanly over whatever's behind it. Inside this pipeline you don't leave the editor to do it — you ask the Higgsfield MCP to process the image, stripping the white background and exporting a transparent PNG. The helmet now sits in its card with the dark page showing through around its edges, exactly like a real cut-out product shot.

Why this matters beyond aesthetics: transparent assets are composable. The same helmet PNG can sit in a card, float in a parallax layer, or get a glow drawn behind it in CSS — because there's no background fighting your effects. Flat JPEGs lock you into whatever background they shipped with. PNGs with alpha give you room to design.

A practical note on file weight: transparent PNGs of large hero objects can get heavy. Once you're happy with the composition, have Claude Code optimize them — resize to the actual display dimensions and compress — so your beautiful page doesn't load like it's 2014. Pretty and slow still bounces.

Static images carry a page a long way. But a sci-fi landing page that moves is a different category of impressive — so let's make a still come alive.

Creating Scroll-Triggered Video from a Still Image

This is the move that pushes the page from "nice" to "how did they build this."

Using a video model — Seedance is the one called out in the source workflow for this — you take a static image and generate a short clip from it. Ten seconds, 16:9, in the cinematic style you specify. The hero still you already made becomes a slow camera push across the cityscape; the character's exosuit catches a flicker of light; the fog drifts. Then you wire that clip into the page as a scroll-triggered animation, so the footage advances as the reader scrolls instead of just autoplaying on a loop.

The full chain, inside Claude Code:

1. Generate or pick the still you want to animate (your hero image).
2. Ask the Higgsfield MCP to run it through the Seedance video model — specify duration (10s), aspect ratio (16:9), and the motion you want ("slow forward dolly, subtle atmospheric drift").
3. Download the clip into your project.
4. Tell Claude Code to wire it as a scroll-triggered hero — the scroll position drives the playhead.

A reality check on cost and quality: video generation burns more credits than images, and not every clip lands on the first try. The motion can come out too fast, too jittery, or weirdly literal. Generate, look, regenerate the prompt — same iterative loop as the images. And scroll-synced video math is genuinely fiddly; if the clip stutters against the scrollbar, it's usually the frame-mapping logic, not the video. I dug into exactly that kind of scroll-locked cinematic effect in my 3D scroll animations with AI and Claude Code breakdown — the technique transfers directly.

The result, when it lands, is the thing people screenshot: a hero where the film responds to the reader. That's the moment the page stops feeling like a template.

Now the part everyone forgets until their phone makes the page look broken: responsiveness.

Making the Sci-Fi Landing Page Responsive

A cinematic desktop hero that turns into an unreadable mess on a phone is a failure, full stop — and 60%-plus of your visitors are on mobile. So responsiveness isn't a polish step, it's a requirement.

The good news: this is one of the things Claude Code handles well with a direct instruction. Tell it explicitly what you want:

"Make the entire page responsive. The nav menu should collapse to a burger icon on tablet and mobile. Stack the product cards vertically on small screens. Keep the hero video, but constrain its height on mobile so it doesn't dominate the fold. Maintain the spacing scale from the Figma design across all breakpoints."

That last clause earns its keep — without it, agents tend to "fix" mobile by squishing everything, and your careful spacing rhythm collapses. Name the breakpoints and name the behavior.

Here's the honest part, though. Responsive is the phase where you'll do the most manual touch-up. Claude Code gets you 90% there — the burger menu works, the cards stack — but you'll catch the small things by eye:

• A heading that wraps awkwardly at exactly 768px wide
• A product card with inconsistent padding versus its siblings
• A video that's technically constrained but still sits too tall above the fold
• Touch targets that are a hair too small for a thumb

None of these are hard fixes. They're "open the dev tools, drag the viewport, point Claude Code at the specific element" fixes. Budget twenty minutes for this pass and you'll be fine. Skip it and your award-worthy desktop site embarrasses you on the device most people will actually open it on.

I covered the broader principle — where AI handles the bulk and a human handles the judgment calls — in my piece on AI web design with human oversight. This responsive pass is that principle in miniature.

The page works on every screen now. Time to put it somewhere real, for free.

Deploying Free on Cloudflare Pages from Claude Code

The deploy is the cleanest part of the whole pipeline, and it's where the "stay in the terminal" promise pays off completely.

You prompt Claude Code to handle the publishing chain, and it automates the steps that used to be a tedious manual checklist:

1. Push the code to GitHub. The agent initializes the repo (if needed), commits, and pushes.
2. Connect the repo to Cloudflare Pages. Cloudflare offers auto-deploy from GitHub with built-in CI/CD.
3. Wire up the domain. Add a custom domain in the Pages project settings; you can attach up to 100 custom domains per project on the free plan.
4. Go live. Cloudflare builds and serves the site.

Why Cloudflare Pages specifically? Because the free tier is genuinely generous, not a crippled trial. You get a global CDN, automatic HTTPS, unlimited bandwidth on the free tier, and 500 builds per month with no compute-time ceiling. For a landing page — even a media-heavy sci-fi one — you will not hit those limits. The hosting, CDN, CI/CD, and SSL are all free; the only money on the table is the domain itself, around $10 a year for a .com.

A few honest deployment notes:

• DNS and SSL aren't instant. After you point your nameservers at Cloudflare, DNS propagation and SSL provisioning happen automatically, but give it time — minutes to a couple of hours. Don't panic-debug a site that just hasn't propagated yet.
• Media-heavy pages need an optimization pass before deploy. That hero video and those transparent PNGs are the bulk of your page weight. Optimize them (the step I flagged earlier) before you ship, or your gorgeous page scores poorly on real-world load.
• The free tier is real, but read the limits. For one landing page you're nowhere near them. If you're deploying twenty client sites, re-read Cloudflare's current limits — they evolve.

That's the entire pipeline: Figma design → Claude Code build → Higgsfield assets → responsive pass → live on Cloudflare. Now let me tell you the parts the polished demos quietly skip.

What the Demos Don't Tell You

I want to give you the unglamorous truth, because the highlight-reel version of this workflow sets you up to feel like you failed when you actually didn't.

"One prompt" is marketing. You'll see this stack pitched as near-instant. The reality is closer to: one strong setup prompt gets you a complete draft, and then you spend an hour in iteration — swapping placeholder assets for real ones, regenerating the two helmets that came out slightly off, fixing the heading that wraps weird at one breakpoint. That hour is still absurdly fast compared to the weeks an agency quotes. But anyone selling you a literal walk-away workflow is showing you the demo, not the job.

Asset consistency is strong, not flawless. Nano Banana Pro genuinely holds a character across a set — better than anything that existed eighteen months ago. But across a long generation run you'll still get drift. Plan for regenerations on your hero and your key product shots. The model gives you a huge head start; it doesn't give you a free pass on judgment.

Cost is real and worth watching. The source build was demonstrated on roughly a $20/month plan with a usage window of about five hours — and that's a legitimately cost-effective setup. But video generation eats credits faster than images, and if you regenerate carelessly you'll burn through your window. Be deliberate. Generate with intent, not by spraying prompts.

This is for real projects, not just demos. The genuinely exciting part isn't the sci-fi novelty — it's that the same pipeline builds a real landing page for a local business or a startup. Swap the alien cityscape for a clean product hero and the helmets for actual SKUs, and you've got a legitimate client deliverable. The sci-fi theme is just a stress test that proves the pipeline can handle hard cases.

That last point is the one I'd tattoo on a sticky note. Let me close on why.

The Real Shift Here Isn't Speed — It's Who Can Build

Go back to the helmet for a second.

A year ago, that single transparent product shot — generated, background-stripped, color-consistent with a character in the hero — would have meant a photographer, a studio, a Photoshop session, and a designer to place it. Four people, or one very tired generalist and a long week. The sci-fi landing page on top of it? Add a developer and a video editor. That's a team and a budget and a timeline measured in weeks.

The shift this Figma-plus-Claude-Code-plus-Higgsfield pipeline represents isn't that it makes that team faster. It's that it lets one person with taste do the whole thing in an afternoon — and the bottleneck moves from "can you execute" to "do you know what good looks like." The tools handle the execution. Your judgment about composition, about which generation is the keeper, about where a video belongs and where it's noise — that's the part that's now the entire job.

So here's your challenge for the next 24 hours: open Figma, sketch one deliberate hero section — just the hero — for any idea you've got sitting in a notes app. Then connect the Higgsfield MCP to Claude Code with that one command, generate a single hero image, and wire it in. Don't build the whole page. Build the proof that the loop works in your own hands. Everything after that is just repetition.

The first time you watch an asset you described in plain English appear in your project folder and snap into a layout you designed — that's the moment this stops being a tutorial you read and starts being a thing you can do.

Let's Work Together

Looking to build AI systems, automate workflows, or scale your tech infrastructure? I'd love to help.

• Fiverr (custom builds & integrations): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (enterprise solutions): ramlit.com
• ColorPark (design & branding): colorpark.io
• xCyberSecurity (security services): xcybersecurity.io