스크립트
00:00:00Today, I'm going to show you how to build animated websites with AI that don't look like complete
00:00:03slop. I'm going to walk you through a three-step process that takes you from inspiration to a
00:00:08completed build and give you the skills you need to make this a repeatable process. So by the end
00:00:12of this video, you'll know how to find websites that you actually like, how to turn them into your
00:00:16own creation and add animated elements to them. So what you're going to see here is a three-step
00:00:21cycle that we repeat over and over to create these websites. And the steps in that cycle
00:00:26are pretty straightforward. One, find inspiration. Two, make sure we invoke the skills that allow
00:00:31Cloud Code to actually execute what we want to execute. And then three, iterate. We repeat that
00:00:36cycle over and over both at a large scale in terms of like what sort of website do we want to create
00:00:41in terms of inspiration and a very small scale. How do we want this component to work? Do we have
00:00:46inspiration for this component? Do we have a skill to create it? On and on and on. Now for that first
00:00:50step, inspiration, we want to think big picture. What is the sort of general vibe? What is the general
00:00:53aesthetic we are going for with our website? And in order to find stuff that can kind of help us answer
00:00:59that question, we need to know where to look. And some great places include Twitter. Another is
00:01:04Pinterest. And another great one is Landbook. Landbook is really nice because usually it will link you to
00:01:09the actual website itself. And so it was on Landbook that I found this website, finn.com. You can see it
00:01:16right here. Very cool sort of animation it has going on. And it was here on Twitter. I found this website
00:01:21where they kind of have this cool hero section. They have like this almost like statue type figure
00:01:25or some parallax. And I thought these two websites look pretty cool. Now finding websites and aesthetics
00:01:29that sort of speak to you can actually be kind of difficult and somewhat time consuming, especially
00:01:33if you're just getting started. So I highly suggest if you're someone who's going to be doing this a lot,
00:01:38whether that's just front end design in general or whatever, that you start creating your own sort of
00:01:42like taste library. So when you find cool websites like this, you know, it isn't like you just use it once
00:01:47and then you never see it again. You can actually call on these designs later or at least kind of like
00:01:51get your mind turning. And so for myself, I've created an entire taste vault where I sort of list
00:01:56all these cool websites and designs I've found and it just lives on my computer. And I suggest you do
00:02:01something like this as well. It's as simple as just taking screenshots or taking the links of these
00:02:05websites and sort of designs you see and you like, giving it to Cloud Code and say, hey, can you create
00:02:10some sort of library for me? I highly suggest you do this and it takes five minutes. But once I have a
00:02:14website, I actually like, what am I supposed to do with it? Maybe the standard advice is usually like,
00:02:19well, let's just take a bunch of screenshots. And that can work. Like screenshots are totally okay.
00:02:23If I want to dump that into Cloud and say, hey, can we start like using this as sort of a reference
00:02:28for a foundation for what I'm going to build? But we can actually do a lot better than that because
00:02:32all these websites, and again, this only applies if you have the actual URL. This isn't just like
00:02:37a screenshot of some sort of like design you kind of like. If we have the actual URL,
00:02:41we can look at the code under the hood and give that the Cloud Code and pretty much recreate this
00:02:47pixel by pixel. Now, the goal here is not like, oh, you can recreate this website pixel by pixel.
00:02:54Therefore, that's what we're going to do. And then you're just going to call us your own. That's not
00:02:57the goal at all. The idea is we take these websites that look pretty cool that speak to us
00:03:01and use that as a foundation. We're going to take theirs and we're going to turn it into our own.
00:03:06We're going to modify it heavily. But why redo all the work if we kind of like the general setup,
00:03:11the general scaffolding? And doing that is extremely easy with this skill I created called
00:03:15SiteClone. So if you install the skill, all you have to do is invoke the skill, which is
00:03:20slash site clone. And then you point it at a URL and it's essentially going to break down the entire
00:03:25website, including all the animation that's going on and give you essentially a pixel by pixel
00:03:30identical rebuild. For example, here is what that same website looks like on our local dev server
00:03:36when we use the skill. This looks pretty much exactly the same as what we see here, right? Do you notice
00:03:43a huge difference? No. And again, I'm not going to pass this website on as my own, but I can definitely
00:03:48model something off of that and save a ton of time versus just throwing screenshots at cloud code and
00:03:53hoping it can go from vision to an actual build. And again, here's that plinth website. This is our
00:03:59local build using that skill, pretty much a one for one recreation. And again, I can't stress it enough
00:04:05because a hundred percent of people complaining about this. This isn't about ripping off websites.
00:04:09This is about using them as a foundation, using them as inspiration. And it's way easier to take
00:04:14something and turn it into our own when we have a base like this to work from. And so step one is
00:04:18finding inspiration out on the web. Then step two is using a skill like this, the SiteClone, to take that
00:04:24reference and start to build off of it. So let's say for the rest of this demo, we want to model our
00:04:28website sort of in the same vein as this plant website. Like we kind of like what we have here,
00:04:32but we definitely want to make it our own. And we definitely want to add some animation. We don't
00:04:36kind of just want a still image of this thing or parallax. I want like actual movement. Well, in that case,
00:04:41we're talking about adding an actual video as the hero section on our landing page. And to do that,
00:04:47we're going to have to bring in additional skills and outside tools because cloud code just isn't going
00:04:51to be able to do that. And the best tool for that job these days in terms of the AI video realm is
00:04:55going to be seed dance 2.5. Now, the general workflow for creating AI video is relatively
00:05:00simple. You want to start first with some sort of base image, a reference image that is going to act
00:05:05as the first frame of the entire video. So you aren't relying on the prompt that you give the video
00:05:09generator to sort of create it from scratch. Instead, we're going to create that image in either
00:05:13nano banana pro or C dream or something like GPT images too. And so I was thinking, Hey, what if we
00:05:20did something kind of similar to the statue thing, but we're going for like this AI, this like fake AI
00:05:25analytics company, maybe it's holding some sort of like Palantir looking type orb. And we could have
00:05:30this thing sort of like, you know, pulse and give off some light because when we're talking about video
00:05:36for a hero page, you also don't want something too crazy going on. You want to keep it relatively
00:05:41subdued. So first things first is creating that image. And for this one, I used C dream version five,
00:05:47and I'm creating these images and ultimately the video all through Claude code. And it is via the
00:05:52Higgs field MCP. Now, pretty easy to set this up. All you have to do, go to Higgs field dot AI,
00:05:57head to the MCP and CLI section, and simply copy the prompt inside of Claude code. From there,
00:06:02it's going to install it and the requisite skills inside of Claude code. So you don't actually have to go
00:06:07onto something like Higgs field and generate it by hand. Claude code does all of it for you.
00:06:11Now, when we're creating the image and sort of the video, you have to keep in mind sort of the
00:06:15composition of the hero section. So you can see right here, what are we going to do? Well,
00:06:20we're going to have sort of the section on the left is where the text is going to be. I still want to
00:06:24keep that going. So when you create the image, you want to make sure you have a ton of dead space over
00:06:28here on the right. And whatever your sort of like image is going to be in our case, that's kind of that
00:06:32statue thing. We want to push that over to the right. And you can see that reflected here with the image we
00:06:37created. And again, if you want to go for a different composition, like you have the text
00:06:41up top and you had sort of a banner down here on the bottom, then yeah, when you create the image,
00:06:46obviously you would want your hero thing like kind of in the middle, lots of dead space.
00:06:50Biggest thing is giving it that dead space because we don't want to overwhelm the actual hero page.
00:06:55This sort of thing, the animation is just meant to sort of accentuate everything. It's not the whole
00:07:00purpose. Now to go from image to video is relatively simple. All you're going to tell Claude code is I want you to
00:07:05use C dance 2.5. I want you to use the reference image you created to generate a video for our landing
00:07:14page. And then you simply dictate what you want that sort of motion or animation to look like. Like I said,
00:07:19subtle is better. Like you can see, we just have this ball kind of glowing and it gives off, you know,
00:07:23a faint amount of light. If you do any more than that, again, it can kind of be distracting.
00:07:28So now at this stage of the game, we have two things. One, we have our reference website recreated pixel
00:07:34by pixel. So we can edit this in any way we want. And two, we now have our video asset,
00:07:39which is going to act as the primary hero section feature. So what do we do now? We're going to smash
00:07:45these two things together. We're going to insert that video we just created. And then we're going
00:07:50to go through the iteration process where we make this website actually ours. Now, luckily for you,
00:07:55we don't have to just guess how to reiterate this thing. I packed that into the skill I showed you
00:08:00earlier. This GitHub also includes the remix site skill. So what we're going to do is we're first
00:08:04going to tell it, Hey, take that, you know, website we created, throw the video in there for the hero.
00:08:08Then we're going to run the remix site skill. And what it's going to do is it's going to walk us
00:08:12through an iteration process where it's then going to show us a bunch of variations of the website we've
00:08:17created. We're going to choose one of those variations we like, and we can have it output as many
00:08:22variations as we want for here. It's going to be three. And then from there, we're going to go deeper into the
00:08:26iteration process. It's going to bring up this very sort of in-depth tweak panel so we can mess with
00:08:31every single component we want. So again, there's just walks you through the whole process. So I told
00:08:35Claude to smash those things together. And this is what we see now. This obviously needs a ton of work
00:08:39because it still has all this plinth, essentially copy on it. This is exactly the same website,
00:08:44especially as we scroll down to the bottom. And in terms of adding the video on there,
00:08:47yeah, the video is working, but we can see it's sort of like overlaid by the header up here.
00:08:52And it's a pretty hard cut as we go from the video to the actual body. So those are some things we're
00:08:58going to want to change as well. So I want to get all this copy fixed before we move into the actual
00:09:02remix section. So I'll just give it a prompt like, "Hey, so can we edit all the copy and essentially the
00:09:09meat and potatoes of the body here to better reflect what our website is going to be about?"
00:09:14Again, remember, this is for like an AI analytics type company. So you can change the name and the
00:09:21general theme of both the hero copy and what's being showed in the body sections to whatever you
00:09:25think makes the most sense. Now, obviously, if this is for your website and for your product,
00:09:31you're going to have a much more in-depth prompt in terms of what you want to go where. But for this
00:09:37demo, this will do just fine. Now with that prompt, it's gone ahead and updated all the copy. We're now
00:09:41Delphi and everything looks the same, but what's actually written there in the content is completely
00:09:46different. So now we can go ahead and invoke that remix skill. So I'm just going to do forward slash
00:09:52remix site. And now it's going to ask me a few questions. Now, the two questions it's going to
00:09:56ask you is what do you want to do in terms of amplitude and what do you want to do in terms of
00:10:00anchors? When we're talking about amplitude, we're saying how different do you want these three
00:10:04variations to be from the original? And number two, do you have any anchors? Because if you don't give it
00:10:09any anchors and I'm talking like actual aesthetic anchors, like you're saying, Hey, I want this
00:10:13website to look like this. I want to look like that. It's going to keep it pretty similar to the
00:10:18original, right? It's really just going to be tweaking things like color and type and space and
00:10:21maybe a few things on the hero, but it's not going to be drastically different. If I tell it something
00:10:26like, Hey, go look at my taste vault and pick three different variations and styles from what you see
00:10:31here and also use the Higgs field MCP to create different assets. Well, we can get a lot of variation.
00:10:36And so let's actually try that. We're going to say the following.
00:10:39So in terms of amplitude, I want to go big. And in terms of anchors, I want you to take a look at
00:10:45the taste library and pick three very different anchors. You also have access to the Higgs field MCP.
00:10:53So if you need to call on it and use like GPT images to, to create images, to, you know, add additional assets,
00:11:01especially in the body, go ahead and do that as well. So let's see what it comes up with.
00:11:05So here's the three variations it created shown on one page. We can click on these and kind of scroll
00:11:09through them. This first one is monolith. It looks like for these variations, it just kept it as the still image,
00:11:15I think to sort of save on bandwidth, but we can see it's just a lot darker. We can also see here it added
00:11:22new sorts of assets here, which I think look kind of cool. And it's kind of got that same dither
00:11:28mono look. We'd have to change that right here, but you can kind of still see the inspiration,
00:11:33but we've moved in a different direction. I think this one looks kind of cool to be honest. I think
00:11:38we could definitely tweak a lot here and make something we like, but I don't mind the direction.
00:11:42This is the third one calls it Climora. We kind of got a green look. We have sort of this,
00:11:48you know, actually I kind of hate this. I don't mind the color scheme. I think it looks kind of cool
00:11:53with the clouds and the orange, but I don't love sort of this green background we have happening.
00:11:58I like this. I think this looks cool, but not the biggest fan. And then lastly, we have this one.
00:12:07Again, it loves sort of that graph background that I'm a huge fan of, but I do like kind of the
00:12:13different assets that have kind of shown up here, which I think look cool. You know, truth be told,
00:12:20I think out of these three, I kind of liked monolith, although I feel like we could change
00:12:25some stuff here, maybe add, you know, we sort of have like this dither effect over here on the right
00:12:30hand side. If we could somehow bring that into the body, I think it would look cool.
00:12:34And obviously we'd have to change a few things here, but I kind of like this direction. And that's
00:12:40the whole idea here is just like, it is really hard. I think for a lot of us who don't come from a design
00:12:44background to like, even think of these different changes, like we kind of have to see them. That's why I
00:12:49like getting all these different directions all on one page. And you weren't limited to these three,
00:12:55you can throw it as many anchors as you want. You can change the amplitude. The point is to just get
00:12:59you like essentially brainstorming and testing different iterations till you land on something
00:13:04you want. That's what this is all about. So I said, let's go ahead with monolith, make sure to bring
00:13:07the video back into it, not just the still. So it's brought up the monolith version. You can see here
00:13:11over on the right, we now have this tweaks panel and this lets us get very granular with sort of changing
00:13:16individual components. And I would argue that this goes even more in depth than what you're going to get
00:13:20naturally through the Claude desktop app, which I really like. Now we still have the ability to just
00:13:25prompt Claude at any point in time. And if I want to make big sweeping changes, that's going to be the
00:13:30easiest way to do it. But again, just like when we saw with the variations, sometimes it makes it a lot
00:13:34easier if I can actually see what things look like. I mean, in terms of like, again, this goes very,
00:13:40very grainy. Like we can kind of adjust the grain of the video itself. We can adjust even sort of like
00:13:46the reach of this black gradient that's doing stuff. So maybe we want it more or less subtle in terms of
00:13:52what the statue is looking like. I can adjust the brightness of the video. I kind of like turning up
00:13:57the brightness maybe just slightly. I have the ability to shuffle all of these if I kind of want to get
00:14:02crazy. I also have presets for like pitch black, soft studio, loud watermark. So it gives a lot of
00:14:12options. I can adjust kind of this page spacing, sort of the band. I can adjust sort of like the
00:14:18reveal stagger. So even if like we refresh and we come into things, I can change how that actually
00:14:23staggers in. And if there's even more stuff I want to add, I can do that as well. And really quickly,
00:14:27let's talk about adding that sort of dither effect that we talked about earlier to the actual body.
00:14:32So can we add some sort of like dither effect to the body? Because right now it's kind of just pure
00:14:36black. I think that would add quite a bit. And this is just the process you would continue to take.
00:14:40Now we can also bring skills into the equation here. Like a big one that I obviously talk about
00:14:44a lot is impeccable. So we could bring in something like impeccable. We can bring in
00:14:48something like the taste skill. We don't have to save these sort of front end design type skills
00:14:53just for the beginning of a brand new project. At any time we can have these skills applied
00:14:57to some of these big projects as well that we've already done a lot of like iteration and work on.
00:15:01And like I talked about earlier, when it comes to adding animation and video to your websites,
00:15:05I think less is more. Like you said, this isn't something crazy we've added here,
00:15:09but it does give it a little bit more of an oomph. And in terms of motion, I think you'll get the most
00:15:13bang for your buck in terms of like how these things actually come into the page itself. Like this
00:15:19actual sort of like weighty motion where you feel it coming from the top or coming from the side,
00:15:23like you just saw there. Now, another thing you might ask is what about mobile users? Do we want to
00:15:26have a video go through them? Probably not. An easy solution for that is just to have it,
00:15:30if it's a mobile user, it just gives them the image versus the actual video. That way you don't
00:15:35have to worry about someone's phone absolutely struggling if they have something that's a little
00:15:39bit older. And so here was its first pass with sort of that updated sort of dither effect. It kind of
00:15:44almost added it as grain across the whole screen. Now it's something I'm able to adjust inside the
00:15:50actual tweak bar, but I do think this is like a step in the right direction. I probably just reduce
00:15:54this a bit and have it more on the margin. So it's not pure black, but it's also just not
00:15:58like extreme grain like we see right now. But again, like this is as easy as it is in terms
00:16:02of like iterating to get something you like. So that's where I'm going to leave you guys for this
00:16:05video. Biggest thing I think you need to take away from this is sort of that three step cycle of
00:16:09inspiration, making sure you have the right skills for the job, and then iterating. And again,
00:16:13you apply that big picture in terms of what do I want my website to look like in general,
00:16:16what sort of the design direction. And then we do that at a very small scale in terms of components.
00:16:21Plus I gave you those two skills, the clone site, as well as the remix site, which allow you to,
00:16:27when you find that inspiration, bring it on board, see how it works under the hood. So you can create
00:16:32something in that same vein, but give it your own twist with things like tweaks and the different
00:16:35variations I showed you. So as always, let me know what you thought. Make sure to check out
00:16:40Chase AI+ if you want to get your hands on my Cloud Code Masterclass, where we go deeper
00:16:43into stuff like this. And as always, I'll see you around.