00:00:00Today you're going to learn how to combine the powers of the brand new Clod design and Seed Dance 2.0
00:00:06to create animated websites just like this one. I'm going to take you through my entire workflow step
00:00:12by step so you can recreate this even if you've never done anything like this before. And along
00:00:17the way I'm going to show you how to get the most out of Anthropix brand new tool with some tips and
00:00:22tricks. Now when it comes to creating a web page like this the first place we need to start is this
00:00:28background video and to get the background video we first need a starting image. Now we are going
00:00:32to create that starting image using Nano Banana Pro and then we will take that starting image
00:00:37and turn it into a video using Seed Dance 2.0 and all that is going to occur here on Higgsfield which
00:00:44is my one-stop shop for any and all AI content creation tools. So to start we're just going to go
00:00:49to image and head to Nano Banana Pro and right away you will see some of the images I've been working
00:00:55on and they should look very familiar to our web page particularly these guys. Now the exact prompt
00:01:01I use can be found inside my free school and there'll be a link to that in the description
00:01:05but what I want to focus on here when we are talking about the image is less about the specific
00:01:11prompt itself because the image you are going to want to create is going to be different than mine
00:01:15but more on the composition. Why is this image set up in the manner it is? Well when we look at the
00:01:21final product here it's kind of obvious right we have this big hero image taking up the right side
00:01:26of the screen but we still needed some dead space on the left for our text and when I had Nano Banana
00:01:31Pro create this image I had that sort of composition in mind I was like okay we're going to have a image
00:01:38where it's kind of cut in half on the right side we'll have our you know flashy image and then on
00:01:44the left this is where the hero text is going to be so this is sort of like the tagline over here
00:01:51we're going to have some sort of banner up top with the nav bar where people can you know hit
00:01:55home or the different pages we'll have some sort of buttons here that are like all right sign up
00:02:00or learn more and then maybe we'll have some sort of ticker on the bottom. I already knew that going
00:02:04in and that's something you need to know going in when you ask Nano Banana Pro to create the image
00:02:10for you because whatever the composition is going to be from this sort of setup that's going to dictate
00:02:17your prompt and now your question probably is well Chase I have no idea what my options even are I
00:02:22don't know what the composition should be in the first place how do I figure that out well the
00:02:25easiest way to do that is to just find some websites you like and start breaking down their hero and
00:02:30landing page composition that way and a great place to see examples of that is Dribbble. So that's
00:02:35Dribbble with three B's if I go ahead and look up landing page sass you can look up landing page
00:02:40whatever you will see what I'm talking about so what do we see here right this one right here well
00:02:47they kind of have the image at the bottom in the text up top we could do something similar with
00:02:52this right we could move him down here to the center maybe we have the clouds beyond the sides
00:02:56instead and then the text goes here again changes the composition entirely or do we want something
00:03:02like this where the image is center stage and the text goes around and we add some other elements
00:03:07you know as you go through and you scroll down you see that there's a million different ways you can
00:03:11do this but you need to know ahead of time or you at least need to have two or three ideas in your
00:03:16back pocket and then when you go to nano banana pro you can then give it prompts that reflect that
00:03:22style so to recap when we are creating our image the number one thing we need to figure out is the
00:03:26composition and by composition where is the dead space going to be where is that text going to be
00:03:32it's going to be on the left center right top doesn't matter you just need to choose and have
00:03:37your prompt reflect that and also when it comes to the prompt lean on stuff like Claude to help
00:03:42write it for you now for our demo today we will be using this image and i will also have a copy of
00:03:47this inside of the community if you want to just copy me step by step and with our still image in
00:03:51hand now we're going to head to claud design and the general flow is going to be image created in
00:03:56nano banana pro we're going to mock up our website here on design and once we get a website we like
00:04:01you know a design we like a landing page and all that then we will take that image and turn it into
00:04:05a video because it's very simple to do that as a final step so if you're brand new to claud design
00:04:10don't worry we will hit the big things you need to worry about in this video but i also have a deep
00:04:14dive that goes into the weeds a bit that you should watch as well and i will link that above but for
00:04:18our purposes what we want to do is we want to head over here to the left go to prototype and we'll
00:04:24just give it some sort of project name i'll call mine sd2 for design system you probably won't have
00:04:30a design system you don't need one in this case for now again if you want to learn more about design
00:04:35systems check out that deep dive video we're going to do high fidelity and then we're going to create
00:04:40that will then take you to this page and the first thing we want to do is we want to add some context
00:04:45and the context we're going to add is the image we downloaded so you can see down here on the left
00:04:49i have uploaded my screenshot next we want to give it a prompt now you can continue to add more
00:04:55screenshots here and i totally advise you do if you had some good examples from someone like dribble so
00:04:59if you found something on dribble you like in terms of the overall composition add that as well
00:05:04now when it comes to the actual prompt itself i highly suggest you lean on something like claud
00:05:09code to write it for you and here's a look at the prompt that claud code came up with that i'm going
00:05:13to paste it into claud design this is for our fake sas company olympus which is a market intelligence
00:05:19platform so it goes into what the company's about it gets pretty detailed with the hero talks about
00:05:25what sections it wants to be on the landing page and then add some stuff with like like motion now
00:05:30very importantly we have this line at the end that says ask me any questions before you begin the cool
00:05:36thing about claud design is it can act sort of like claud code in that it will create a plan mode
00:05:42so i'm going to give it a prompt this exact one you see here and then it's going to ask me a bunch
00:05:46of questions to better drill down on what it is i'm trying to build and the great thing about that
00:05:50plan mode feature where it asks us questions is the fact that if you show up with a bad prompt that
00:05:54isn't even half as detailed as this one you can go into claud design and get a fairly robust first
00:06:01pass because you went through this whole q and a with claud so i pasted it all in there and we're
00:06:06just gonna hit send now a quick call out here on usage with claud design claud design operates on
00:06:11its own usage limits it's separate from your pro limits or your max 5 or your max 20 limits with
00:06:18claud it's on its own thing and it can be kind of a resource hog so always keep an eye on it in my case
00:06:23i've already blown through it because i've been using this a ton so i'm on my extra usage
00:06:28for reference when i ran through this whole thing you're seeing today on my own in terms of extra
00:06:33usage it cost me about five dollars to create the landing page and i could have gotten that even even
00:06:38lower but just so you have an idea of where we're at and so here's the questions it's coming back
00:06:43with so questions typography section what do we want to do let's do modern mythic color palette
00:06:52let's do inverted and ultimately we'll have more options once it actually creates this using tweaks
00:06:58like you'll see later copy voice let's do mythic sprinkled in because in case you didn't realize
00:07:06we're doing like olympus is the company name it's like an intelligence app so this whole picture
00:07:11we've been dealing with is supposed to be like this promethean fire type analogy thing so hero
00:07:17composition full bleed image let's do full bleed image section order boom boom boom boom and you
00:07:26can always decide for me if you just don't even know um social proof decide for me decide for me
00:07:32and here's a here's a cool thing tweaks so tweaks will make more sense here in a second but i always
00:07:39suggest use as many tweaks as possible and we can always add more later so we're gonna hit continue
00:07:45and now it's going to go ahead and create this thing for us now quick lay of the land
00:07:50for a claw design wall builds this up here at the top right where it says share if i click on this
00:07:56we aren't stuck inside claw design forever what's really cool about this and what i'll show you later
00:08:01is that we can export this to clod code and then like once we have like an 89 solution we're done
00:08:07getting crushed in terms of usage we can bring it to clod code and work on it to our you know
00:08:12hearts content we can also export it as html send it to canva export as a powerpoint or pdf for
00:08:17download things so we can also bring teammates in so you can have this be a collaborative thing so
00:08:22lots of options and clod design as a whole is very versatile and here's what claw design came
00:08:27back with and i will be moving this all over the place during this video now first thing to call
00:08:33your attention to tweaks over here on the right so tweaks are a menu on this page that allows us
00:08:40to very quickly change different micro elements of our page so i can change the accents i can change
00:08:48the theme from light to dark which is more obvious down here you can change the headline logo mark
00:08:54pricing names any sort of motion so makes it very very easy to iterate between different versions of
00:09:03our site beyond that i have the ability to edit things on a granular level if i come here to the
00:09:07top right and hit edit i can click on different things like this button up here and i could change
00:09:13the color directly i can change the font you know the padding the opacity everything and i also have
00:09:19the ability to comment so i can click on that same button and instead of actually changing the
00:09:25specific values i could leave a comment like make it bigger make it smaller or i can draw on it so i
00:09:30can draw on this thing you know select all this and say like hey move left and then send that to
00:09:39claud down here and it will actually take a screenshot essentially of what i just wrote it
00:09:44and be like oh okay let's move that left a little bit and we can see it now moved it to the left and
00:09:49it has this hideous thing going on there that we can remove as well but what you should do at this
00:09:55point is first of all you know get a quick look at like okay what do i think of sort of the overall
00:10:02design first pass seems fine most importantly in terms of our image do we need to go back inside
00:10:09of nano banana pro and edit this image do we need to make it smaller bigger whatever if that looks
00:10:14good my suggestion when we're in claud design is we use sort of a two-step process one what i want
00:10:21to do is i want to see different variants of my web page and i'm not talking about little tweaks
00:10:26i want to see at least two more completely different layouts to get an idea of what path i
00:10:32want to go down and once we find a variant we like at a macro level well then we hone in on it and we
00:10:37get more tweaks shown to us not just five weeks i'm talking like 15 tweaks so we can really get
00:10:43something we like because the goal is to get to a 90 solution before we bring the video in and then
00:10:48before we bring it into claud code to make it our own and to do that is really easy all we have to
00:10:53do is prompt claud design so i'm going to say can you create two additional layout variants for our
00:10:58web page that i can click through in addition to this current one so just some new designs we could
00:11:03include and this idea of creating macro variants and then once we decide on a variant creating a ton
00:11:09of tweaks this is what really separates claud design from claud code now straight up prompt
00:11:16for prompt in a vacuum i think design is a little bit better than claud code at front end but this
00:11:20sort of like variation and visual iteration that we can do very very quickly i think that's the big
00:11:27unlock with claud design and that's where the value lies because if we try to do the same thing inside
00:11:32of claud code it's a bit laborious and so here's what i'm talking about up top we have the cinematic
00:11:37version which was the original and now it gave us an archive as well as a terminal version and you can
00:11:45see they're all pretty unique and this also applies to the rest of the page not just the hero section
00:11:53but all of it and honestly looking at this i think the terminal actually looks kind of sick we would
00:12:01have to change the image here and we definitely would have to move away from the video but right
00:12:09away you see this and i i think this looks really cool and definitely looks different than your
00:12:13standard everyday ai created web page so this is what i'm talking about when with when it comes to
00:12:20actually like harnessing the power of claud design is seeing these variations because i would have
00:12:24never thought to do something like this or even know how to prompt it to give me this i really
00:12:29like this but to actually keep this video on track what we're going to do is we will stay with the
00:12:35cinematic but i wanted to show you that because the idea is you do this pick the one you like and then
00:12:40you move on to step two of the claw design process which is tweaks tweaks tweaks and so we have all
00:12:46these tweaks here but just like how i asked claud design earlier to give me some more variations now
00:12:51i'm going to ask it to be very aggressive with the tweaks it gives me i don't have to know what tweaks
00:12:56i want i don't have to know if oh i want to be able to change the theme or the headline or the low i
00:13:00don't know just give me a bunch and we'll figure it out so i wrote down here let's stick with the
00:13:04cinematic you can remove the other two and also aggressively increase the number of tweaks available
00:13:11and we'll see what it comes up with now we can see all of the additional tweaks it added so we
00:13:15went from about five tweaks to about 15 or so which is great so we have these original ones
00:13:22with the accents the theme logo mark that one looks good fonts body font mono font type scale
00:13:36wait the point is i can now rip through all of these over and over and over again i can even
00:13:42change the cta overlay darkness ember glow like it doesn't stop it doesn't stop so i ran through
00:13:51all the tweaks on my end got rid of the embers and this is what we eventually got now i have the
00:13:56ability to look at it full screen if i go to present up top full screen so we can get a better idea of
00:14:02what it will look like and for now for me this looks pretty good remember we don't need a 100
00:14:08solution inside of claw design we want to get as close as possible we want to make all the design
00:14:14decisions we can and then what we want to eventually do is bring it back into claud couldn't do the minor
00:14:18tweaks because remember claw design is a resource hog you only get so much usage so we want to make
00:14:23it count so now we can transition it into the video section where we take this background and actually
00:14:29animate it now side note it is important that we did all this with the still background because
00:14:35when we talk about mobile users we don't want our mobile users to get hit with some giant video that
00:14:39can slow them down so if someone's on mobile and they go to our website that we set up here they're
00:14:43just going to see the still image so we're going to use cdance for this so again i'm back here inside
00:14:47of higgsfield gonna go to cdance 2.0 you don't have to use cdance cdance is just the best one out there
00:14:52right now other options include cling 3.0 you can also use something like vo 3.1 and the video setup
00:14:58is very easy literally you're just going to take your image and you're going to drop it into here
00:15:04so you literally just drag and drop it up here as the starting frame and then we just give it
00:15:08a prompt now the prompt is very basic all i wrote was keep the motion extremely slow clouds barely
00:15:15moving embers from the fire in his hands slowly drifting and we get something like this we want
00:15:21subtle we don't want crazy you don't want it to look like a wild video game you want it to almost
00:15:26just seem like an animated like low-key gif and that's because the hero image just giving us some
00:15:32flair to our site you don't want it to take over everything and secondly as you'll see here it's
00:15:37going to flip because at most you're going to get 15 seconds out of this thing ideally you can create
00:15:43a perfect loop but that can be kind of tough so the best bet is to do what we did here and just have a
00:15:4815 second video which sounds like a lot at the beginning but it's really not too heavy and the
00:15:54other thing when we go for 15 seconds the chances are that someone goes onto your website and they
00:15:59just sit there on your hero page reading for 15 seconds and then they get like startled by
00:16:04the cut when it reverts back on the loop is unlikely what most likely happens is they go to
00:16:10your hero wow looks cool 10 seconds later they're down the rest of the lane page to see what you're
00:16:15all about and so keep the prompt simple keep it subtle if you want to go crazy go ahead make it
00:16:20as long as possible for 15 seconds you want it to be 16 by 9 and you want it to be at least
00:16:261080p some models will give you the option to enhance the prompt where it's like pretty much
00:16:30saying hey you put in your bad prompt and we make it better don't do that you always want full control
00:16:34of your prompt and expect you're going to have to do a couple variations of this until you get it
00:16:40right so likely for to get one that actually works you're going to have to do this four or five times
00:16:45until you finally get the output you're looking for but once we get that output all we need to do is
00:16:50download it and then we hop back into claud design and we are just going to drop that mp4 file into
00:16:57the prompt window so i just uploaded it down here on the left and then i wrote can we swap the still
00:17:01image for the video i just uploaded for the hero background and then we'll give you something like
00:17:05this and it is quite literally that simple and it's at this point that we are pretty much done inside
00:17:12of claud design i mean if you want to do more changes do more tweaks totally up to you but if
00:17:17you're at this place i would say you're ready to actually move out of claud design and now bring
00:17:22this into something like claud code like we talked about early very easy to do we're going to go up to
00:17:26share and we are going to go to hand off the claud code now because this includes a video in an mp4
00:17:34if you try to just do the copy command it might have some trouble actually downloading it so what
00:17:38you're going to want to do instead is you just want to download the zip so it's going to take
00:17:44all the files all that live video all the coding stuff under the hood and just put it into a zip
00:17:49file and so you can do download zip you then want to extract all of this and then you're just going
00:17:56to take that extracted folder drop it into claud code and say download everything we're now going
00:18:03to create a website using all this code and you're pretty much done at that point so i dropped it in
00:18:10and said extract all these files for the web page we are building and then spin up a dev server and
00:18:14here's the web page on the dev server it's been up and with that the transfer to claud code is complete
00:18:19you've set up the animated hero section it has the video it has the still everything is ready to go
00:18:25for you to make minor changes and then push it to github before you push it to vercel and actually
00:18:29host it online so that's where i'm going to leave you guys for today i hope this was able to shed
00:18:33some light on how to combine the power of claud design and see dance 2.0 to create these sort of
00:18:39animated websites as always let me know what you thought make sure to check out chase ai if
00:18:44you want to get your hands on all those resources and i'll see you around