Big Idea

The argument in one line.

AI-generated websites look cheap because visual assets get made in a separate tool and pasted back in without matching the page, and connecting structure and visuals into one workflow fixes it.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You've used AI website builders before and the result always looked slightly off, mismatched lighting or a pasted-in feel, and you want to know why.
You want a concrete workflow for generating a full set of visually consistent AI images and video for one site, not just a single hero image.
You're comfortable prompting AI tools in a chat interface and want to see an end-to-end build, from blank canvas to a live deployed URL.

SKIP IF…

You're looking for hand-coded or Figma-first design techniques — this entire workflow is AI-prompt driven.
You don't want to sign up for or pay for a separate AI image/video platform (Higgsfield) alongside Claude.

TL;DR

The full version, fast.

AI websites usually look cheap not from bad code but from a broken design system: assets generated elsewhere and pasted back in never quite match the page's lighting and feel. This video connects Claude Design to Higgsfield through an MCP connector so Claude can generate images and video directly inside the canvas, then walks through building two full sites, a cinematic scroll-through-space site and a product store, starting from a gray-box wireframe, generating every visual asset in one connected batch, and deploying straight to a live URL from inside the same chat window.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:30

01 · Intro

Opens on the claim that Claude Design can now call other AI tools from inside the canvas, previews the finished cinematic scroll site, and names the real problem: AI websites look cheap because of a broken design system, not bad code.

01:30 – 02:47

02 · Setup

Signs up for Higgsfield, grabs its MCP URL, and adds it as a custom connector inside Claude so Claude Design can reach Higgsfield's image and video models directly.

02:47 – 03:26

03 · Building Site Structure

Opens Claude Design, sets the model, and requests a pure gray-box wireframe for the Stars site with a full-screen scroll-scrubbing video hero left intentionally empty.

03:26 – 04:49

04 · Generating Assets

Plans the hero's continuous zoom as nine keyframes, window to universe and back, under the rule that each frame must visually contain the one before it, then has Claude prompt Higgsfield to generate all nine in parallel.

04:49 – 05:13

05 · Preview Images

Reviews all nine generated keyframes together to confirm lighting and continuity hold across the full window-to-universe sequence.

05:13 – 05:30

06 · Preview Video Clips

Requests eight video clips, each traveling from one keyframe to the next at constant speed with no cuts, generated in parallel through Higgsfield.

05:30 – 05:43

07 · Final Scroll Animation

Drops the finished stitched zoom sequence into the hero container that had been left empty since the wireframe stage.

05:43 – 07:26

08 · Building Lightup Animation

Builds a team section from two versions of the same office building, one fully dark and one fully lit, stacked so a cursor-tracked radial gradient reveals the lit layer; also pulls a brand color and font palette from the finished site.

07:26 – 08:29

09 · Deployment

Finishes the remaining copy, testimonials, and CTA in one prompt, then shares the design into Claude Code and deploys it to Vercel, producing a live public URL.

08:29 – 09:50

10 · Building a Store

Repeats the exact same wireframe-assets-deploy workflow on a second, unrelated site, a fragrance store called Kai, generating product shots, lifestyle images, and a hover-triggered looping product video.

09:50 – 10:23

11 · Outro

Recaps both finished sites, points to the free Skool community for the exact prompts used, and closes with the standard like/subscribe/bell ask.

Atomic Insights

Lines worth screenshotting.

AI-generated websites look cheap not because of bad code but because assets generated in separate tools and pasted back in never match the site's lighting and design system.
Connecting Higgsfield to Claude Design through an MCP connector lets Claude call image and video generation directly inside the canvas, so nothing gets exported, downloaded, or hand-copied between tools.
Locking a wireframe in pure gray boxes before adding any color or imagery keeps a site's structure decided before its visuals can distract from it.
A continuous zoom shot built from nine separately generated AI images stitches seamlessly only if every image visually contains the one before it.
Generating multiple AI images or video clips in parallel through one connected tool removes the wait time that would exist if each asset had to be requested and reviewed one at a time.
A cursor-tracked reveal, stacking a dark and a lit version of the same image with a radial gradient mask, turns a static team section into an interactive one without a single headshot.
Once a design tool can extract a site's color palette and fonts, that same output can be reused across decks and UI mockups so every asset stays visually consistent.
Exporting a finished AI-designed site straight into a code environment, then deploying it from a single prompt, collapses what used to be a separate manual handoff into one continuous workflow.
The same wireframe-then-assets-then-deploy workflow works for a cinematic scroll site and a product store, meaning the process is niche agnostic and only the prompts change.
A short looping video that plays on hover over a product photo reads as more premium than a static image, generated through the same batch asset step as everything else on the page.

Takeaway

One workflow, wireframe first, generate visuals in one connected tool, deploy in one prompt.

WHAT TO LEARN

AI websites stop looking cheap once the site's structure and its generated visuals come from one connected workflow instead of separate tools stitched together by hand.

02Setup

Signing up for Higgsfield and adding its MCP URL as a custom connector inside Claude lets Claude call Higgsfield's image and video models directly, with no repeated setup after the one-time authorization.

03Building Site Structure

Requesting a wireframe first, gray boxes only with no color, imagery, or icons, locks a site's section order and structure before any visual decision gets made.
Naming a specific hero requirement, like a full-screen video that scrubs with scroll position, inside the wireframe stage reserves the space for that asset before it exists.

04Generating Assets

A continuous zoom shot gets planned as nine still keyframes first, window to universe and back, with the rule that each frame must visually contain the one before it, and all nine generate in parallel in about a minute.
Once the images are approved, requesting eight video clips, each traveling from one keyframe to the next at constant speed, turns the still sequence into one continuous shot.

05Preview Images

Reviewing all nine generated keyframes together, rather than one at a time, is what makes it possible to catch lighting or continuity mismatches before committing to video generation.

06Preview Video Clips

Requesting all eight transition clips as one batch, rather than clip by clip, keeps the same lighting and pacing consistent across the whole sequence.

07Final Scroll Animation

Dropping a finished asset straight into a wireframe container that was left empty since the structure stage means the layout never has to be rebuilt around the final visual.

08Building Lightup Animation

Two versions of the same image, one fully dark and one fully lit, stacked with the lit layer masked by a cursor-following radial gradient, turns a static team photo into an interactive reveal.
On touch devices the same reveal animates along a slow wandering path instead of following a cursor, since there's no pointer to track.

09Deployment

Sharing a finished design and choosing 'more formats and apps' can import it directly into a code environment, skipping a manual rebuild from scratch.
Deploying straight from that code environment, rather than from the design tool itself, makes it easier to make future changes to the live site.

10Building a Store

The exact same wireframe-then-assets-then-deploy workflow applies to a completely different site type, a product store, proving the process isn't tied to one visual style.
A short looping video that plays on hover over each product photo reads as more premium than a static image, generated through the same batch asset step as everything else.

Glossary

Terms worth knowing.

Claude Design: An AI design tool inside Claude that generates wireframes, layouts, and full websites from text prompts, and can call external image/video generators without leaving the canvas.
Higgsfield: A third-party AI image and video generation platform that plugs into Claude Design via an MCP connector, providing the visual assets, photos and video clips, that a design calls for.
MCP connector: A protocol connection inside Claude that lets an external service, like Higgsfield, be added as a custom connector so it can be called mid-workflow without exporting files or switching apps.
Wireframe: A gray-box layout draft with no color, imagery, or icons, used to lock a page's structure and section order before any visual asset is generated.

Resources

Things they pointed at.

01:44toolHiggsfield AI ↗

08:01toolVercel

09:50linkAI Launchpad (Skool community) ↗

Quotables

Lines you could clip.

00:32

“Every asset that you generate somewhere else and copy back, it just looks a little out of place.”

names the exact reason AI websites look cheap, in one plain sentence→ TikTok hook↗ Tweet quote

03:51

“Every picture has to contain the one before it.”

the single rule the whole technique hinges on, short enough to stand alone→ IG reel cold open↗ Tweet quote

07:19

“These are the kinds of effects that make a thousand dollar website.”

punchy value claim right after showing the technique work→ newsletter pull-quote↗ Tweet quote

08:37

“This is now live.”

the payoff moment, short and quotable→ TikTok hook↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphoranalogy

Claw Design can now call other tools directly from inside the canvas. So here's what that means in practice. You simply just type in a prompt inside Claw Design, and then an average image gets made right there while your layout sits open in front of you.

There's no export, no color matching. Chain that to video generation and you get a stunning website kinda like this one. One continuous shot, a window, building, city, planet, a galaxy.

There's no cuts, no stock, VFX theme, just one plant inside claw design. And here's why AI websites usually look cheap. It's not the code or the layout, it's the design system.

Every asset that you generate somewhere else and copy back, it just looks a little out of place. Now it could be the wrong lighting, it could be the wrong feeling. You can't see it on any single image, but the thing is you can feel it across the whole page.

And that's the problem that this video is going to solve. So today, I'm gonna be building two full sites with it. Stars, a cinematic scroll through universe, and Kai, which is a product store.

It's gonna have the same workflow, but completely different results. And also all of the prompts that we're be using, it's all inside the free school community. The link is now in the description below.

Go and check it out right now. But now, let's get started.

Now to make our designs 10 times better, we need to connect it to Higgs Field because that's the tool that lets claw design access all of the latest AI image and video models. So if you haven't already, just go and check out the link in the description and make sure that you sign up for Higgs field.

Everything in this build is basically running through it. So make sure that you get that done first. Right now, that you're done with that, once you are signed up, go and grab your MCP URL from Higgs field, and I'll leave the exact link also in the description below so that you can simply just copy it.

And then what you're gonna do is you're gonna head into Claude, and you're gonna go to your connectors, and then you're gonna add a custom connector and you're gonna paste that URL right over there. And you see, that's basically it.

You'll just be prompted to authorize your Higgs field account, and now Higgs field turns up inside design ready to use, and you never actually even have to ever think about that ever again. So from this point on, Claude can now generate images and videos without you ever leaving the canvas. Claude handles the site, the structure, the layout, the code, and then Hicksfield on the other hand handles everything that you can actually look at, which basically means that nothing gets passed between them by hand.

Stucture always comes first. Okay? It always does.

So now I'm going to open up Claw Design and then I'm gonna set the model to Fable five and I'm gonna ask for a wireframe. So gray boxes, no color, no imagery, and just basically the bones of the thing.

And while everything's still gray, I'm gonna ask for one specific piece. Okay? That's gonna be the hero.

That's a full screen video that scrubs with your skull, so scrolling down basically plays it forward and then scrolling back up kind of rewinds it. Okay? So there's no video in it yet and that's pretty deliberate because we are going to now prompt inside Claw Design to generate the video using Higgs field.

Now here's exactly what I want. Okay? One continuous zoom that it runs from a lit window all the way out to the universe, and then it should go back again.

Now the way I'm gonna be bolding this is with nine pictures first. Okay? The window, the bolding, the city, the atmosphere, the planet, the solar system, the galaxy, the universe, and then one final frame that brings you back to the window.

You see the thinking over there? Now there's a single little that makes the whole thing work, and it's literally this. Every picture has to contain the one before it.

Small and also make sure that it's dead center. So I'm gonna plant it, and I'm gonna make sure that I'm doing it in simple words, and it's basically just to use Higgs field to generate all nine key frames for the hero zoom.

Okay? So that's basically the thinking behind it. Claude then prompts Higgs field, and it fires off all nine, and then waits for them to come back.

And then it takes roughly about a minute or so, and in that time, nothing basically gets exported or downloaded. There are just nine renders running in parallel with each other while the design still sits open in front of me. And while we've been talking, all of those light images are now ready and this is the best part about Higgs field.

You get the best image and best video models all in one place. And I didn't even have to think about which model should I be using. Like, Liticlaw just finds the best one for me and then it generates it using Higgs field.

Now as we can see all the pictures look good so I'm gonna ask it to generate the clips and I want eight of them each one traveling from one picture to the next at a constant speed and film one picture to the next and then Higgs field basically just handles the list. And I mean, there we go. Everything is now done and that's the coolest thing about Higgs field, that he builds all of them in parallel, which means you don't have to wait whatsoever.

And now what I'm gonna do is let's ask claw design to add these to our hero section, and then we are done. So now it goes straight into the container that's been sitting there empty since the wireframe, and that's a VFX artist and weeks of it in the time, and it literally just happened in a chat window while I was talking to you.

So there, the header was now done. So now let's build our next section. So this one is for the team, and I don't want a grid of headshots.

I want the building that they're working at night, and I want you to go and find them yourself. So we are gonna be generating two versions of the same building, one completely dark and one completely lit, and then we are stacking them so that your cursor decides which one you are looking at. Okay?

So let's start off with the dark one first. Use hex field to generate an office building at night, every window unlit and black, and the shape only just readable against a slightly lighter sky.

Okay. And then for the second one, which will be the lit version of the same exact building and now it's time for Claude to wire it up. Okay?

So I'm gonna say stack these two dark on top and lit hidden underneath, mask the lit layer with a soft radial gradient that follows the cursor. Okay? On touch devices, animate it along a slow wandering path instead.

K. There we go. And here is the result.

The section opens completely dark and then light follows your pointer and inside every window there's something working. Now that's the way to introduce a team. So you are moving a glow across the surface that actually shows real information.

These are the kinds of effects that make a thousand dollar website. And on top of that, the best part about this is that because we are building in Claw Design, I can ask it to build my brand color and font palette from this website. And now it can be used across all media formats from decks to UI mock ups.

One tool is literally the thing that's keeping everything consistent.

And then it's now time for the rest of the page. Okay? So that is the copy, the testimonials, the call to action.

So I have one prompt covering it all since I wanna keep it pretty simple. And again, Higgs field is going to generate it and then Claude is going to bold it in and just like that, our website is ready. So now to make this live, I'm simply just gonna click on a share on the top right and then I'm gonna go into more formats and apps and there I can directly import to Claude code and from there we are just going to go ahead and deploy it to Vercel in one simple prompt just like this.

Okay. And now if you wanna deploy it directly from Claude design to Vercel, you can also do that, but having it in Claude code just makes it easier for any future changes. And there, what you are looking at right now is the live URL that anyone can now access.

Meaning, this is now live.

So now onto our second site. It's gonna be the same workflow, but it's gonna be a completely different site, and I'm gonna show you that in a minute. But I'll keep this one super quick.

Okay? So Kai is going to be a store. Okay?

So it starts the same way. Okay? Wireframe first, the hero, the product, the the product page, the checkout, the gray boxes, no color, no images.

Okay? So you got the gist of that. Then one prompt for the visuals and then Higgs field generates the product shots, the lifestyle images, and a short looping video for the hero.

So it's the same style across all of it and it's going to be inside the canvas and nothing is going to be exported. So Claude then drops them straight into the grid and here is the final result.

Okay? So there's a clean product grid, every item playing a short loop whenever you hover over it just like this, and a hero that moves.

Okay? Which is basically what we're going for. A plotter page that doesn't look like you just found it on some template.

K. So that is two sites. One's a cinematic scroll through universe that I really like.

The other one is a store. So these are different niches but using the same exact workflow.

So now you can build whatever site you want with Claw Design, and also let's not forget about Higgs Field. So get started now by clicking the link in the description below. Plus also, please don't forget this every single prompt from today's build is inside our free school community.

And also, that link is also down below in the description below. So if this video helped you, like I'm pretty sure it did, then what I want you to do is hit that like button, subscribe, and also turn on those bell notifications that you never miss another upload. Drop a comment down below to let me know what you thought about the video.

And as always, I'm gonna be catching you on the next one.

The Hook

The bait, then the rug-pull.

The claim is that Claude Design can now reach into other AI tools without ever leaving its own canvas, and the video sets out to prove it by building two full sites live, without a single manual export.

Frameworks

Named ideas worth stealing.

03:51concept

The Continuity Rule for AI Zoom Sequences

window
building
city
atmosphere
planet
solar system
galaxy
universe
window (final)

To make a continuous AI-generated zoom shot feel like one uninterrupted camera move instead of a slideshow of separate images, plan it as a fixed sequence of keyframes where every image must visually contain the one generated before it.

Steal forany AI-generated hero video or scroll sequence that needs to feel like one continuous shot rather than a stitched-together set of AI images

05:43model

Cursor-Tracked Before/After Reveal

Generate two versions of the same visual, one dark/unlit and one lit, stack them, and mask the lit layer with a soft radial gradient tied to cursor position (or a slow wandering path on touch devices) so the reveal feels discovered rather than displayed.

Steal forteam/about pages or any 'reveal what's happening inside' section that needs interactivity without shooting real photography

CTA Breakdown

How they asked for the click.

VERBAL ASK

09:47product

“get started now by clicking the link in the description below”

Standard end-of-video plug for the sponsor tool (Higgsfield AI) plus the free Skool community holding the exact prompts used in the build, stacked with the usual like/subscribe/bell ask.

MENTIONED ON CAMERA

01:44toolHiggsfield AI ↗

09:50linkAI Launchpad (Skool community) ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.