Big Idea

The argument in one line.

Plain-language prompts to Claude Code can now replace CSS, JavaScript, ffmpeg, and Git knowledge entirely, and AI video models give solo designers animated characters that used to require 3D software expertise.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A designer or indie creator who wants to ship polished, animated landing pages without writing code.
Someone already using Claude Code who wants to see how far natural-language prompts can take the build process.
A developer who has Figma designs sitting unused and wants a practical path from mockup to live site quickly.
Anyone exploring how AI image and video generation tools like Higgsfield and Seedance 2.0 can be integrated into a real web project.

SKIP IF…

You need a production-grade codebase with clean architecture -- this workflow produces quick results, not maintainable code.
You are not building a visual hero-section site -- the techniques are specific to landing-page aesthetics.

TL;DR

The full version, fast.

A Figma design or just a screenshot can become a live animated website in under 10 minutes by directing Claude Code with plain-language prompts at every step: typography tweaks, SVG backgrounds, scroll animations, responsive nav, and even video compression. The standout technique is using Seedance 2.0 to animate Pixar-style character PNGs into short controlled video loops, then using DaVinci Resolve darken blend mode to punch out the white background and make them behave like transparent overlays on the page.

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 – 00:55

01 · Intro and design handoff

Promise stated, two paths shown: Figma MCP dev mode (paid) and screenshot method (free). Screenshot dropped into Claude with font and sizing prompts.

00:55 – 02:50

02 · Desktop to terminal, micro-adjustments

Transition from Claude desktop app to terminal. Typography weight fix, star icon fix, SVG background grid added, radial vignette mask applied.

02:50 – 03:35

03 · Asset replacement with real SVGs

Logo, button icon, and star icon exported from Figma and replaced in the site via prompt. Design now matches the Figma mockup.

03:35 – 04:43

04 · AI character image generation

Higgsfield Nano Banana model generates Pixar-style characters. Multiple iterations to refine style. Two characters selected and placed into the site.

04:43 – 06:35

05 · Seedance 2.0 video animation

Character PNGs uploaded to Higgsfield Seedance 2.0. Prompted with static camera, no panning. Videos downloaded and embedded into the site.

06:35 – 07:54

06 · Background removal and video compression

DaVinci Resolve magic mask isolates characters. Darken blend mode used as transparent-video workaround. Claude compresses videos from 6MB to 650KB in terminal.

07:54 – 08:49

07 · Animations, responsive nav, and deploy

Scroll animations added (grid grow-in, word-by-word h1). Responsive nav with burger menu and full-screen popup. Site deployed to Cloudflare Pages via GitHub.

Atomic Insights

Lines worth screenshotting.

Claude Code can compress a 6MB video to 650KB in one plain-English prompt -- no ffmpeg flags required.
Seedance 2.0 precision is the feature: static camera, no panning, no cropping -- the exact control needed for web embeds.
The darken blend mode is a practical workaround for transparent video on the web when you cannot get a true alpha channel.
A Figma screenshot gets you 80% of the way there -- no paid Figma subscription is needed to hand off designs to Claude.
Claude Desktop to terminal is a single prompt: just ask Claude how to continue the same project in terminal.
Responsive nav with burger menu, full-screen popup, and mobile character hiding can be implemented in one descriptive prompt.
Asking Claude to animate elements like grid grow-in and word-by-word h1 reveal is faster than writing CSS keyframes manually.
Cloudflare Pages hosts static sites for free, and Claude can walk you through the GitHub push and publish steps.

Takeaway

Claude Code handles the full build, not just the code.

WHAT TO LEARN

When you treat Claude Code as the entire production environment -- designer, coder, compressor, and deploy guide -- the gap between a Figma file and a live animated website collapses to minutes.

A screenshot is a valid design handoff: dragging a Figma screenshot into Claude with font and sizing notes gets a working page started without any paid subscriptions or dev mode access.
Claude Code can handle tasks far outside code writing -- video compression, file renaming, and deployment instructions are all addressable through plain-language prompts in the terminal.
AI video models need precise prompting for web use: specifying static camera and no panning prevents the subject from being cropped or drifting, which would break the layout.
The darken blend mode is a practical web technique for making white-background video loops behave like transparent overlays when a true alpha channel is not available.
Responsive behavior is a single descriptive prompt away: specifying the burger icon behavior, full-screen nav popup, character hiding, and button width in one message produces working mobile CSS.
Cloudflare Pages provides free static hosting, and asking Claude to generate the GitHub-push-then-Cloudflare-publish steps removes the deployment knowledge barrier entirely.

Glossary

Terms worth knowing.

Seedance 2.0: An AI video generation model available on Higgsfield that animates still images into short video clips, known for precise control over camera movement and subject positioning.
Higgsfield: An AI asset generation platform with access to multiple image and video models, used here for both image generation (Nano Banana) and video animation (Seedance 2.0).
Magic Mask: A DaVinci Resolve tool that uses AI to isolate a subject from its background, creating a matte used to remove the background from video footage.
Darken blend mode: A video or CSS blend mode that keeps only pixels darker than the layer below, effectively making white or near-white areas transparent without a true alpha channel.
MCP (Figma): A Figma developer mode integration that generates a prompt-ready context for Claude, allowing precise design handoff without manual screenshots.
Nano Banana: A Higgsfield image generation model used to create stylized character illustrations, available in standard and Pro variants for more generation variety.

Resources

Things they pointed at.

00:00productHiggsfield AI ↗

00:16toolFigma ↗

00:00toolClaude Code ↗

05:51toolDaVinci Resolve ↗

07:57productCloudflare Pages ↗

00:16linkKyle Skelly Figma File (Patreon) ↗

Quotables

Lines you could clip.

07:49

“So in literally less than ten minutes, we've managed to build out this entire website with some complex animation, some animated characters.”

Claims completion of a high-quality result in an improbably short time→ TikTok hook↗ Tweet quote

06:32

“You can literally ask it to compress it in the terminal.”

Captures the unexpected range of what Claude can handle→ IG reel cold open↗ Tweet quote

04:42

“This is why Seedance 2.0 is really good for this because it keeps things controlled.”

Concise product differentiation claim→ newsletter pull-quote↗ 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.

story

00:00In today's video, I'm gonna show you guys how to create really impressive websites using Claude code and to bring it to life we're gonna use cdence two point o which is a new model available on Higgs Field and Higgs Field are also the sponsor of today's video. Let's go.

00:16You guys can either follow along with this video with your own design or I'll put the link for this design in the description so you could use this specifically. If you pay for Figma, you can go down here and then you can click on dev mode and then right over here where it says MCP, you can just copy this example prompt.

00:32But to make this as inclusive as possible, let's say you don't have a Figma subscription, then we can just do it this way. We'll just take a screenshot of our design like this and we'll pull this into Claude.

00:43So we'll drag this screenshot into here, and we'll give it this prompt here. Make this into a full screen hero sectional website. The font is Monroe.

00:50The h one's 80 pixel size. We'll make sure that Opus 4.6 is selected, and we'll run it.

00:56And this here is what it's given us. So this has done a pretty good job. You know, it's even managed to kinda make a button and where we didn't have a natural icon file, it's kinda just made one.

01:05Now at this point in my workflow, this is typically where I go from the desktop app into terminal using Claude. Now you can simply just ask Claude, I want to continue this with Claude in the terminal. How do I do that?

01:15So now we've got our website on the left and we've got Claude on the right. This here is where we can make micro adjustments. So, like, for example, the h one should be regular and semi bold weight, and then the star icon at the end of the three d magic is not showing correctly.

01:28Let's run this. So now we can refresh the page and that's looking pretty good.

01:32Now it's actually using an emoji, but we'll keep that for now. So in the Figma, I've got this SVG, this sort grid type thing. Well, we're gonna export this out as an SVG.

01:42In our project folder, we'll make a new folder called images and then we'll save this as grid dot SVG. Now we'll ask it add the grid dot SVG that's in the images folder to the full screen background.

01:54It should sit behind everything filling the entire page. And look at that. Instantly, we've got this and it scales appropriately.

02:02How cool is that? Now what I think would be quite cool is if we start to blur out the edges so this is less intense. Let's add a radial mask to this to create a Vignette mask.

02:11And then how cool is that? You can see it's literally fading off from the edge and let's just say tighten it up a bit because we wanna kinda bring that mask in a little bit.

02:21I don't quite like how the lanes are coming over to the navigation links up there. So we'll refresh it and then now you can see it's a little bit tighter.

02:31Now the design doesn't quite match our Figma yet so we can take our logo file and we can save that out. Just gotta make sure it's in in the right folder. We could take this icon down here and we'll say we'll call this button icon and then we'll take this one here and we'll call that star.

02:48Then we'll just say replace our logo file with logo SVG and images, the button icon with SVG and then the star icon. Then we'll refresh it and then now we can see our logo is in there, our icon is down there and we've got our star icon there.

03:02So now for the part that's really gonna bring this together and look really unique. We're gonna use Higgs field to generate some images and then we're gonna turn those images into videos using CDN two point o. So let's do that.

03:13This is Higgs field here and Higgs field is really good because they have access to all these different AI models. And what we're gonna do to start this off, we're gonna click on nano banana two, and we're gonna go down here and we wanna create these two sort of Pixar style characters. So we're gonna give it this prompt here.

03:29Create a Pixar style character on a white background. He should be similar style to character from up. He has a miner's helmet on and a knitted jumper.

03:38And then aspect ratio, we'll just keep as it is, and then let's run it. And we'll also run this on Nano Banana Pro just to see more variations of it. And you can see it's generated us images like this and this and these are probably a little bit too close to up.

03:56So after a few prompts, we landed on these two characters here and this is exactly the sort of thing that we're looking for.

04:03We can drag them into the Figma and we can really get an idea how this looks. So let's take each of these characters and export them out. So we're gonna say I wanna add the two character PNG images into the design there in the images folder, position them like this and we're just gonna give it this screenshot and then we refresh the page.

04:23We have our characters in. Now let's head back over into Higgs field and this time let's click on video and we're gonna choose CDENS two point o.

04:32So we'll add in our character PNG here and we'll give it this prompt here. This character is on a solid white background.

04:39He's looking around static camera positioning, no panning. Now the good thing with CDENS two is it's super precise.

04:46So it should do just all of those things because we want a lot of control with these character animations. We can't have things moving around too crazy. So we'll generate that.

04:55And this here is what we get. So you can see our character is just kinda looking around. He's not moving around.

05:01He's not getting cropped at the sides. This is perfect for what we need. And this is why seed in two point o is really good for this because it keeps things controlled.

05:10So let's download that. And then we've also done it for our other character and you can see that he's looking around just like this now and you know there's no cropping at the edges.

05:21So let's download that too. Now if we add both of those videos to our images folder, we'll say let's replace the images with their appropriate video in the images folder. Now you can see our characters are moving around just like that and how cool is that.

05:36But as you can see, we've got this background on them which is not ideal because it's not a true white background. You know, sometimes this will be perfect, sometimes it's just not quite right. As a little extra step, could take your character into DaVinci and you can isolate that background.

05:53I'll show you that quickly. If you drag in your character there, you can see that's got slightly gray background. We click on here and we go magic mask and then we just draw around this guy like this.

06:04Then, you know, you can just draw in little bits that are sort of hidden. This does not need to be perfect because the outside is pretty white anyway And then we click this here to run it.

06:14Then if we go back onto our timeline view, you now you can see it's got isolate background and then we can just add a solid white background behind it. You can see the background is gone, but you can also see it's kinda cropping on this grid.

06:27So we can just say this, make the blend more darken on the videos and what that's gonna do is it's gonna punch out all the white from it, essentially making it look like a transparent video. Right.

06:37At this point in the video, you might be thinking that two videos like this on a hero section that's gonna be really heavy. Well, one really good thing about Claudus, you can literally ask it to compress it in the terminal. So let's just say, can we compress the videos?

06:50You can see their character one m four was six megabytes. Now it's 650. And so, you know, it was still a little bit heavy, but that's a massive reduction there.

07:00You know, we'll lose a little bit of quality, but that still looks really good. So let's add some animation to the actual elements of the site. Let's say let's have the grid come on the screen first, grow in the h one appearing one word at a time.

07:13And now if we refresh, how cool is that? So if you look at the navigation, gets a little bit broken at mobile.

07:22So let's fix that. Let's say let's make it responsive. Nav link should turn into a burger icon show a full screen nav pop up with a cross at the top, hide the characters on mobile, have the login button full width.

07:34So now if we refresh and we resize down you can see that our nav links get turned into here and then now we have this full screen sort of pop up navigation and the full site is completely responsive.

07:49So in literally less than ten minutes, we've managed to build out this entire website with some complex animation, some animated characters and it made a couple of fine little tweaks on my side but I think this is looking really solid. So now let's just say you have your website.

08:03How do you push this live online into a live website? What you could tell Claude at this point is let's push this GitHub repo, then show me the steps of publishing this live on Cloudflare. And this whole process takes literally five minutes and then you can connect to domain name and you can actually host this in most cases for free.

08:20But there we go guys, that is a little bit into my process of how I work with Figma and Claude and go back and forward to make really cool stuff in very little time. If this video was useful for you guys, please hit the like button. Subscribe if you wanna see more stuff like this.

08:35And if you wanna check out Higgs Field and use CDENS two point o for your video generations, you can get unlimited generations for seven days at 70% off using the link in the description. Thank you guys for watching. I'll catch you guys soon.

08:48Bye.

The Hook

The bait, then the rug-pull.

What does a Figma screenshot become when you hand it to Claude Code and do not stop until it is deployed? Kyle Skelly answers that question in real time, spending under ten minutes turning a static mockup into an animated landing page complete with AI-generated Pixar-style characters that move.

Frameworks