08:49Kyle Skelly · Tutorial
Claude Code + Seedance 2.0 = Insane Websites
A 9-minute live build from Figma screenshot to animated, deployed landing page using Claude Code and AI-generated character videos.
April 15thThe argument in one line.
When a client has zero photography, AI image and video generation can produce the entire visual asset set for a real landing page, and a Figma Dev Mode prompt handed to Claude Code turns that design into working code far more reliably than exporting a screenshot.
Read if. Skip if.
READ IF YOU ARE…
- You're a freelance designer or developer who takes on client sites for businesses with no existing photography or brand assets.
- You want to see the actual handoff from a finished Figma design into Claude Code, including the Dev Mode prompt trick.
- You're curious whether an AI video model can drive a scroll-bound animation section on a real website.
- You want a realistic look at AI image/video generation, including the parts that don't work on the first try.
SKIP IF…
- You want a code-first tutorial. Most of the runtime is spent inside Figma and Higgsfield, not reading or reviewing code.
- You want a clean one-pass recipe. The build-timeline video approach gets scrapped and redone mid-video after the first attempt breaks visual consistency.
The full version, fast.
Kyle Skelly designs a landing page for a fictional construction company entirely in Figma, using Geist for type and a dark theme, then generates every piece of photography (an excavator, a luxury house) with Higgsfield's image models since the client has no real photos. For the site's build-timeline section he uses Higgsfield's new Seedance 2.5 video model to animate a house being constructed, first as four separate 5-8 second clips (which breaks visual consistency between stages) and then as one continuous 20-second orbiting flyover generated against a single end-state reference image, which fixes it. He hands the finished Figma frame to Claude Code through Figma's Dev Mode copy-paste prompt rather than exporting a screenshot, picks the Fable 5 model, and gets a close-to-pixel-perfect build on the first pass that he then wires the Seedance video into as a scroll-bound, sticky-positioned animation.
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 →Where the time goes.
00:00 – 00:31
01 · Cold open
States the plan: Figma for design, Higgsfield for images and video, the new Seedance 2.5 model, and Claude Code for the build. Names Higgsfield as the video's sponsor.
00:31 – 01:44
02 · Figma layout and type
Sets up a MacBook Pro 14 frame, a near-black theme with a slight green tint, a 12-column grid, logo and nav placement, and Geist as the site-wide font. Plans the hero around a big excavator with a luxury house in the background since the client has no existing photography.
01:58 – 03:28
03 · Generating hero photography
In Higgsfield, tests the same cinematic-excavator prompt through Nano Banana Pro and GPT Image 2 side by side, picks the strongest result, and drags it into the Figma hero.
03:29 – 05:25
04 · Building the hero text and CTA
Positions the excavator image and a call-to-action box with background blur, sets oversized bold Goldman type with tight letter spacing, and uses Figma's boolean 'subtract' operation to cut the headline out of a shape so it reads over the photo without a heavy overlay. Adds a progressive blur at the frame's bottom edge for depth.
05:25 – 06:40
05 · Fast-forward: rest of the design
Skips ahead a couple hours to a finished design: hero, about section, a storytelling section earmarked for Seedance animation, stats, recent projects, and footer. Every image on the page is AI-generated.
06:41 – 07:32
06 · Handing the design to Claude Code
Explains two handoff options: exporting the whole design as a JPEG (Claude guesses fonts and sizes, assets still need manual export) versus Figma's Dev Mode, which generates a copy-pasteable prompt describing the frame exactly. Pastes that prompt into Claude Code and picks the Fable 5 model over Opus 5 for a better result.
07:32 – 08:53
07 · First Seedance generation: the foundation clip
While Claude Code builds in the background, generates an 8-second Seedance 2.5 orbiting flyover of a house foundation being poured and walls going up, muted, 16:9, high bit rate.
08:54 – 10:07
08 · First build review and wiring the video in
Reviews Claude's first pass, close to the Figma file with a few border-stroke bugs, then instructs Claude to make the hero and build-timeline sections full viewport height and bind the downloaded Seedance clip to scroll-based playback so the section stays sticky while scrolling scrubs the video from 0% to 100%.
10:07 – 10:56
09 · Scroll-bound video confirmed working
Scrolls the live build and confirms the section pins in place, a progress bar tracks scroll position along the bottom, and the video plays through as designed.
10:56 – 12:18
10 · Four-clip attempt breaks consistency
Generates three more Seedance clips as separate stages (framing/roofing, then further stages) referencing the prior clip's end state. Visual consistency degrades between stages, the floor plan shifts and the roof shape changes, undermining the 'luxury build' framing.
12:18 – 14:18
11 · Scrapping the four-clip approach
Abandons the separate-stage videos and instead generates one continuous 20-second, four-stage orbiting flyover referencing a single end-state project image, keeping the finished look consistent throughout instead of drifting between separate generations.
14:18 – 15:39
12 · Final assembly and reveal
Attaches the single 20-second video to Claude Code (5 seconds per stage across the clip), makes final design tweaks, and reveals the finished site with its animations and tidied layout.
15:39 – 17:09
13 · Course pitch and sponsor close
Pitches his paid course (40+ video lessons, 25+ premium templates including this build), thanks Higgsfield as sponsor, and closes with a standard subscribe ask.
Lines worth screenshotting.
- Feeding Claude Code a Figma frame through Dev Mode's copy-pasteable prompt beats exporting a JPEG, because Claude no longer has to guess the font, size, and spacing from a flat image.
- The presenter picked Claude's Fable 5 model over Opus 5 for the landing-page build, calling it 'an even better result.'
- Higgsfield's Seedance 2.5 model can generate up to 30 seconds of continuous video from a single reference image, well beyond the 8-second default clip length.
- Generating four separate 'stage' videos of a house being built broke visual continuity: the floor plan shifted and even the roof shape changed between clips.
- Switching to one continuous 20-second video, with all four construction stages scripted into a single prompt against one end-state reference image, fixed the consistency problem the four-clip approach couldn't solve.
- AI image generation solved a real production constraint: the fictional client has no photos of a finished building, so the hero excavator and luxury-house imagery were generated from scratch, not sourced.
- The build-timeline section binds scroll position directly to video playback: scrolling the page scrubs the Seedance clip from 0% to 100% while the section itself stays pinned (sticky) on screen.
- The same image prompt was run through two different models, Nano Banana Pro and GPT Image 2, side by side, before picking a winner rather than committing to one model up front.
- A hand-drawn triangle sketch is used as an early, asset-free layout placeholder before any real imagery exists, just to block out hero composition.
- Figma's boolean 'subtract' operation cuts bold hero text directly out of a background shape, so oversized type reads legibly over a busy photo without needing a heavy dark overlay.
- Every image used across the finished site, hero shot, about section, recent-projects thumbnails, is AI-generated, not a single stock or client-supplied photo.
- The first Claude Code pass came back visibly close to the Figma file, including a working responsive layout, with only minor border-stroke bugs to clean up by hand.
One continuous reference beats four separate AI video generations.
WHAT TO LEARN
Both halves of this build, the Figma-to-code handoff and the AI video generation, work better when the AI is given one complete, structured reference instead of being asked to guess or to stay consistent across separate calls.
02Figma layout and type
- A near-black theme with a slight color tint, a 12-column grid, and one font used throughout keeps a fast design pass looking deliberate rather than improvised.
03Generating hero photography
- Testing one prompt across multiple image models side by side, rather than committing to a single model up front, is a fast way to find the strongest result.
04Building the hero text and CTA
- A boolean 'subtract' operation can cut oversized headline text directly out of a background shape, keeping it legible over a busy photo without a heavy dark overlay.
06Handing the design to Claude Code
- A structured prompt from Figma Dev Mode gets a more accurate first-pass build from a coding AI than exporting a flat screenshot and letting it guess fonts, sizes, and spacing.
- Model choice matters for a design-to-code handoff: the presenter deliberately picked one Claude model over another for a better result.
07First Seedance generation: the foundation clip
- AI video generation can produce build-timeline animation for a client with no real footage, starting from a single reference image and a precise motion prompt.
08First build review and wiring the video in
- Binding scroll position to video playback, with the section staying sticky while the clip scrubs from 0% to 100%, is a workable pattern for a coding AI to implement from a plain-language instruction.
10Four-clip attempt breaks consistency
- Chaining separate AI video generations stage by stage lets small details drift between clips, floor plans shift, rooflines change, breaking the continuity a single narrative needs.
11Scrapping the four-clip approach
- Generating one longer video against a single end-state reference image keeps a multi-stage animation visually consistent in a way that stitching separate short clips together does not.
Terms worth knowing.
- Seedance 2.5
- A video generation model inside Higgsfield that can animate a still reference image into motion, such as an orbiting camera flyover, for clips up to 30 seconds long.
- Higgsfield
- An AI creative platform bundling multiple image and video generation models (Nano Banana Pro, Seedance 2.5, and others) behind one interface, used here to generate a site's photography and animations.
- Figma Dev Mode
- A mode in Figma that packages a frame's exact structure, spacing, and styles into a copy-pasteable prompt, so a coding AI can rebuild the design precisely instead of guessing from a flat screenshot.
- Reference image/video (in Seedance)
- An existing image or clip fed into a video generation prompt so the new output continues from, or orbits around, the same subject, keeping visual details consistent across separate generations.
- Scroll-bound video playback
- A website interaction pattern where scroll position controls a video's playback progress directly, so scrolling forward or back scrubs the clip instead of it playing on a timer.
Things they pointed at.
01:58toolNano Banana Pro
02:30toolGPT Image 2
07:31toolClaude Code (Fable 5 model)
08:01toolSeedance 2.5
Lines you could clip.
07:10
“We'll simply say, build me out this landing page design.”
08:09
“So this should be an orbiting flyover over our foundations getting built.”
08:31
“Just the house time lapse as if being built by itself.”
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.
In today's video, we are gonna be designing and building this construction website. We're gonna use a mixture of Figma, Quadcode, and Higgs Field, and we're gonna use the new Sedans 2.5 video model that just landed. Higgs Field are also the sponsor of today's video, so let's get started.
Let's go.
Okay. So let's get started with the design. We're here in Figma.
Now I'm gonna choose my frame tool, and let's go to MacBook Pro 14. And we're gonna go this sort of dark theme with this. We don't wanna go, like, full black.
I think let's go, like, a slight black, but then also, like, a slight green with 12 columns. And then let's get our logo position just, like, up here like this. For navigation, let's go with something just like this.
Now this is pretty simple. Here. Now the font that we're gonna go with is this here.
So this is Geist. And so we're gonna use this font, like, throughout the entire design. The client wants a professional level website that they don't currently have any images, and what we want here is to have, like, a big, like, excavator.
That's an excavator there if you, uh, can't see. So we'll have something like this. And then in the back, I wanna have, like, a house, like a luxury house because they build luxury houses.
So let's jump into Hicksfield. So this is Hicksfield here. They have all these different image models, and we're gonna use one of these.
And then later in the video, we're gonna use this CDENS 2.5. But let's go image model, and let's try out a few of these.
We'll first, we'll choose Nano Banana Pro. Ignore all these images. These are ones that have generated before us.
We're gonna give it this prompt here. Now you could pause the video if you wanna read all this, but it's basically cinematic luxury construction at night with large excavator centered in the frame and then stuff like atmospheric haze. And just for comparison as well, let's also run this as GPT image two and see what we get with that.
Okay. So here you can see we've got a ton of different examples, and this is the exact sort of dramatic image I had in mind. Um, and so, really, we just have to choose one of these, but these are all looking really cool.
So we'll go with this image here, and we'll drag this over into Figma. And let's just get that position somewhere centered in our hero, and then let's move it to the bottom. Call to action box here.
So let's just draw one out down, and then let's, uh, let's take that off a little bit. And then you know what? Let's give this a background blur as well.
Something like this, and then let's just get this positioned over here. I wanna have this big bold text that kinda sits up here. So font that we need is, uh, this Goldman, and then let's make it, like, massive.
Something like that. And then we'll go bold, and then letter spacing, let's go, like, minus 10, and we wanna get this positioned somewhere up here like this.
So the way we can get this kind of positioned behind the excavator while staying within Figma, this is, a pretty quick way to do it. For now, reduce the opacity a little bit so we can see behind it. And then let's just draw this shape around here, so something like this.
Go like that. We'll give this a fill just so we could see it. We'll take the stroke off of that as well.
If we select our text and the shape, we can go up here, and then we could just do subtract. Let's increase the opacity of this again, give it a gradient, and then let's just kinda play around with it. And then let's give it a progressive blur just so it blurs it just at the bottom, and that kinda adds a bit of that, like, sort of depth to it.
So if we grab the bottom of our frame, let's extend this out, and then we'll work on the other sections. Fast forward a couple of hours, and this is the design that we've now got. So there is our sort of hero section, our main call to action there.
As you scroll down, you get to the sort of about section, scroll down, and then we get to the sort of storytelling section. Now this is where Seedence 2.5 is really gonna help us. And I have this idea of the sort of interacting scrolling animation to get through this section.
And we go down here. We just have some, like, stats stats about about the the company, company, some sections to get off into the website, recent projects here, and then down here into the footer.
Now every single image we've used on this design is an AI image that we generated from Hakesfield, and, honestly, it's such a lifesaver for when you have a client and they don't already have images. And we can really, like, visualize. We can really concept their entire build process in a really cool way.
Now it's time to get Claude to build this website out for us. Now there's two ways we could do that. The first way is we could just export this out as JPEG, our entire website design, and hand that over to Claude.
And it would do a pretty good job of guessing what the font was and the font size and stuff, but then we'd have to manually go and export out all of our assets. But if you pay for a Figma plan, there's a much faster way. You can just click on your mainframe here.
And if we go down into dev mode, all we need to do is copy this example prompt. So we'll just paste this into Cloud Code, and we'll simply say, build me out this landing page design.
And for the model, we could use Opus five, but for an even better result, let's use Fable five, and let's run it. Whilst Claude's building out our website, I wanna work on our interactive build timeline.
So if we head back into Higgs field and we go up to video and we choose CDN 2.5, then we can add reference here. So this is the sort of foundation.
We want this to be a sort of reference for the video. So we're gonna give it this prompt here. This should be an orbiting flyover over our foundations getting built.
Orbit should be around 90 degrees starting from the dirt and the floor concrete getting poured and the walls going up. End result is a house with foundations and walls up. And then we'll also say no people doing the work, just the house time lapse as if being built by itself.
And then we'll turn the sound off. You can get sound, but for the purposes this being on the website, we don't need it. We're gonna go eight seconds long.
Now the good thing with CDENS 2.5 is you can get all the way up to thirty seconds, which is kinda crazy, but we're gonna have four different videos here. So we're just gonna choose eight seconds for this one.
Ratio, we will keep on 16 by nine. Bit rate, we'll keep high, and then we'll click generate. Okay.
So Claude has said it's done the initial build. Now this is our website here, which is looking a little buggy, but if we just kinda bring this in, it kinda makes sense. This is about the width that we have in our Figma.
It's now looking pretty pretty similar to what we actually had in the Figma. It's done a really good job. A few little bugs with the border strokes there, but stuff that we could easily fix, and it's done a pretty decent job of making it responsive too.
So as a starting point, that's pretty good. Now over in Higgsfield, our video is now done too, and this is our animation of the concrete getting poured and then the walls going up, and this is what we want.
So we'll download this. So I'm gonna say this. Make our hero a 100 viewport height and then also make the build timeline section a 100 viewport height too, and then we'll just drag in a proceedings 2.5 video there.
I want it to be scroll based playback that takes the step one progress from zero to finished as we scroll through all the UI remains sticky for the scroll animation play through. Basically, just saying that when we get to the section, we want it to kinda be, like, full screen. And then as we scroll, we want this to kinda go from zero to a 100% for this first part, and then we're gonna generate videos for the second, third, and fourth part.
And it'll all be, like, scrolling through this sort of, um, timeline. Does that make sense? It will make sense.
And this is what we got now. So if we scroll down to that section, as we get there, it becomes sticky.
Our progress bar starts scrolling along the bottom, and then it plays through just like that. So let's now add the other three steps to this. Now we've got kinda two options how we could do this.
So we could add a reference. We could just add, like, this video as an entire reference. Or what we could do, we could choose just to extend this video so it's, like, the one entire video for all the different parts.
We'll try it as four separate videos. This should be an orbiting flyover, orbiting 90 degrees. Starting with the end state of this video reference, the animation should be all the timber framing, windows, roof, no workers, just the house time lapse.
And then here we have our second video, so let's download this. Let's change the text to say framing and roofing. Phase one and two are in now.
So if we scroll down, we can see phase one gets completed like that. And then there we see the framing and the roofing going on. Okay.
So we've got phase one, two, and three in. So this is phase one, and you can see there. But keep an eye out the floor plan.
As we go into phase two here, we lose some of that consistency, which I'm not a big fan of. It's just not super important because, you know, these are just, like, showing different stages of the build.
But, you know, when we go into stage three there, you know, it's kind of like a different roof shape. Not a big fan of the end result because this is supposed to be, like, a luxury build project, and the house that it's building is, like, okay.
But, like, where's all the freaking windows? We're gonna scrap this idea of separate videos for each stage, and we're just gonna do one big twenty second video. We're gonna take this image that we use in our recent projects.
Now this is just an AI image just to kinda show example, but we're gonna use this as a reference. And we're gonna give it this prompt here. This should be an orbiting three sixty fly flyover.
Step one, this should be the house with dirt and foundation. Step two, this is the timber framing and then the walls and the roof.
Step three, the roof comes on. The interior goes on. Step four, this is where the landscaping does to match the end of this image reference.
Keep it consistent. No workmen. Just the house animated construction.
So the idea is we already know what the finished state should look like, and this is just gonna be a better workflow to do anyway. So we're gonna go seasons 2.5, twenty second, 16 by nine, high bit rate, and then we'll run this.
And this is our final twenty second video here, so we'll download this. And before I show you guys, we'll just get it put straight into Claude. Use this attached video, but the entire video is now twenty seconds, so five seconds for each of the stages.
So the video is now in. I'm gonna make some final little tweaks to the design, and I'll show you guys the final result in three, two, one.
And this is it here now. I think this is looking really cool. We've added in subtle little animations and tidied up the design, and this sequence 2.5 video is insane.
I love this continuous version that we did. There's so much control, and we know it's gonna end at a good result. And this is the rest of the site here, which is all looking really good too.
So, obviously, I fast forwarded here a couple of steps with the design and the build. Now if you guys are interested in the full start to finish of these AI workflows of actually building out real sites like this for clients, then my online course is now officially live and you get access to over 40 video lessons and you get access to over 25 premium templates including this one that we designed in this video today.
So if you're interested in all these extra steps like adding in a CMS, a backend, actually being able to sell these websites to clients, then feel free to check out that link here. Thank you to Hixfield sponsoring this video.
You guys should definitely check out the link in the description and check out Seedence 2.5 because it will honestly blow your mind and it could be so useful for some of these web design projects. Thank you guys for watching. If you like this video, please hit the like button.
Subscribe if you wanna see more stuff like this, and I will catch you guys soon with another video. Bye.
The Hook
The bait, then the rug-pull.
Kyle Skelly opens with the plan stated flat: design and build a construction-company website using Figma, Higgsfield, and the newly landed Seedance 2.5 video model, then hand the whole thing to Claude Code.
Named ideas worth stealing.
00:00model
Design-to-AI-asset-to-code workflow
- Design the layout in Figma
- Generate missing photography with an AI image model
- Generate motion/animation assets with an AI video model
- Hand the finished frame to a coding AI via a structured prompt, not a screenshot
The four-stage pipeline the whole video demonstrates: a client with no assets gets a fully designed, fully animated site without a photographer or a video crew.
Steal forany client site for a business with no existing photography or video
How they asked for the click.
VERBAL ASK
15:39product
“my online course is now officially live and you get access to over 40 video lessons and you get access to over 25 premium templates including this one”
soft-landed after the reveal, tied directly to the template just built, then a separate sponsor thank-you (Higgsfield) and a standard subscribe ask
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
