Build Gorgeous Websites With Claude Code (FULL COURSE)

I can confidently say that this is the exact video I wish existed when I started building websites with Claude code. My name's Tommy Chris and I've been building with AI before most people knew what it was. I've started and scaled my agency to multiple five-figure months in a row as well as automated over 600,000 calls for real companies using AI agents. Along with that, I create content and have been sponsored by huge companies in the space such as Higgsfield, Retail AI, and more.

I know I say website building in the title, but I want you to know the design principles I teach in here, the development workflow, and the tips and tricks on actually setting up and using Claude code can apply to almost any front-end development, whether you're building a web app, a client project, or just a landing page. Because here's what building with AI really boils down to. It's can you take a tool that has zero context, zero awareness, zero taste, zero really idea of what humans really like or find compelling, and use it to build you something completely extraordinary without knowing how to actually code.

And not only does it have to be something extraordinary, but something someone would actually pay for. Now, doing that with AI is actually a lot harder than most people think, and that's how most of these AI slop websites all end up looking the exact same. And that's what we're avoiding today in this course. And so, what I'm going to do today in this course is give you a complete step-by-step process to go from just an idea or even just a thought to a completely So, what I'm going to do today in this step-by-step course is take you from nothing to a complete professional and deployed website, whether you've never touched Claude code or a line of code in your life, or if you've been using Claude code for months or even over a year, but you keep reaching a ceiling on quality.

And so, let's hop into it. So, this will be the actual course content and tools we'll be covering on actually building websites with Claude code. Now, I specifically want to cover the three Ds, which as I may have mentioned is design, development, and deployment. And this process will help you actually build professional websites consistently with Claude code.

And so, breaking down what each of these actually mean, first we have design, which is the planning stage of what your site actually looks like. So, this is the branding, the colors, the fonts and layout, as well as everything you do before writing a single line of code. Now, why design is one of the most important parts of this process, actually in my opinion might be the most important part, is because of this right here. So, let's say you generally know what website you want to have, but you're just going to, you know, voice to text or prompt dump into Claude code and figure out as you go.

You might have like, you know, three different destinations that you sort of want to get to. So, this is assuming you did no design or planning. So, these are maybe different colors, different fonts, different website layouts that you want, and you're just not sure where you're going to end up. So, you have this starting point of obviously no website, and you want to get to some ending point of a professional good-looking website, you know, that converts and that impresses people.

But since you don't know what you want, maybe you veer towards, you know, option one over here, and then, you know, you come to option two. Maybe you're thinking that one's better as something goes wrong with option one. And then, you continue and you end up all the way at option three. Now, does that look like the most efficient route to you?

Uh no, because it's not. And what you essentially do with design, let me draw this over here, is you draw one big X, and you know that's where you want to go because you did all the planning before. You did all this security this, you know, route running and all these circles, etc. Um in the design phase where you're not actually doing development, you're not waiting, you're not using tokens, etc.

So, you have this start point, you have this end point that you already know exactly where you want to go, so you can just draw a straight line to it. You know, hey, there's a bump in the road or two, but overall, it's going to be way faster than had you done no design at all. Then, moving on to development, this is the actual building of the website with Claude code. And so, the issue with vibe coding websites is that obviously AI is really good at it, but where it really falls off is when you try and go that last 10% to make something really special.

And the reason that is is because AI can't see. It doesn't have doesn't have eyes. Ooh, it's kind of creepy, but that's the issue. However, we can add a couple of different tools, MCP tools like Chrome DevTools, and specific prompting and iterative loops to actually have AI screenshot, see what it's building, iterate based on that, so that you don't have to keep going, looking at the website, and telling it it did something wrong.

It can identify itself, as well as, you know, a couple other tools we'll use in development I'll show you. There's a couple custom Claude skills I built. And lastly, deployment, which I don't see a lot of creators talking about, which is really important because the aspect of taking the site live. So, there's a lot of things to consider here, such as, you know, custom domains are really important, analytics, SEO, as well as scalability.

Now, this won't be super in-depth on deployment, but I will talk about easy free way to actually get your site up and running, as well as view analytics, and a special Claude skill specifically for SEO. Now, moving on here, let's go deeper into exactly what tools we'll be using for design. But before I jump into this, I want to mention I have this full web design toolkit, which has links to every single resource we're going to be using in this course, so that you don't have to keep looking it up and pausing and seeing what my URL is.

You can actually just come here, and I've sorted it all by, you know, design, dev, and deploy, and so that you can follow along with the course very easily, as well as, you know, after you're done using the course, you have one unified place where every single link is. And so, the way you get that is you can join my free community down below. It should be one of the top links for Applied AI Academy. You come here to YouTube resources, you should see this video up towards the top if you're watching this pretty recently.

The title should just be more of the title of this video is. However, if you don't find it right at the top of YouTube resources, I have this video showing how to find any YouTube resource or template in my community right here. So, just watch that and that will give you all the information you need. Now, moving back, on design, we'll cover Claude.md files.

I actually have a specific one I give to you guys for free in this video, design.md files, and how those are actually created and why those are important. Brand asset folders. We'll cover some inspiration sites that I like, as well as a resource to find pretty much any inspiration site you need. I'll show you actually how to steal and inspect a site's HTML, so you could you can directly steal their code and just plug it into Claude code.

I'll show you how to scrape a company's branding using Firecrawl. I'm scared to actually circle things because I found out it makes like a it makes it blue, so I'm going to I'm going to blur this out, but I'll show you how to actually scrape company's websites, grab all of their branding, create a brand assets folder based on that, so that you can easily replicate websites for companies or copy your own companies' branding to build a new website. I'll show you Google Fonts, which is honestly one of the most underrated sites for building really good websites with Claude code.

And then, a specific front-end design Claude skill that will help supercharge it and make it a way better front-end developer. Now, in terms of development, we have an MCP called Chrome DevTools that we'll be using to implement this screenshot loop that is one of the most powerful things you can do when front-end coding with Claude code. I'll show you how to actually iterate with Claude code and how I do it in my own workflow, as well as creating nano banana images and visuals and videos to create really cool animations and graphics on your website.

And then lastly, for deployment, I'll go over GitHub, what it is and how to host your code, Vercel and how to actually deploy your code, as well as Vercel analytics, and how to actually optimize with SEO. Now, before we hop in and actually start coding, I will show you how to actually set up Claude code. Now, first you want to download some sort of IDE, now VS Code, Cursor, etc. All of those do great.

I personally prefer Google Anti-Gravity. It's completely free, so you'd hit download here or download for, you know, whatever computer you have. And then, once downloaded, you should be greeted with a screen that looks like this. I'll actually close out of Claude code to show you how to open that.

Should see a screen that looks like this. To open Claude code, all you have to do is come over to extensions, we're going to look up the Claude code for VS Code extension, and you want to install this. Now, I already have it installed, and so once installed, you'll see this little icon over here, as well as I have one over here, but if I click on this, you'll see a brand new tab opens up with Claude code, and you can start chatting to it. Now, I do want to mention you do need either an API key to Claude and a funded API account, or Um, can get a paid subscription.

Uh, Claude code is not on their free plan. Um, but yeah, that's how you get it set up. Now, I've touched on this briefly, but I want to cover more in depth why design actually matters. So, first, um, the problem.

And the problem is that Claude has no taste, no brand awareness, and no context out of the box as to how to actually build a good website, let alone a good website for your business or a client's business. And so, without any sort of guidance, it just defaults to the same sort of generic purple gradient, um, every time. And most AI-built websites look identical because most people actually skip this phase. Um, and, uh, moving on more, let's think about what actually makes a website feel premium.

Um, now, consistency is a huge part of that, such as the fonts, colors, and spacing all to feel intentional. Ever visited a poorly designed website? It likely didn't feel very even, um, and it didn't feel very consistent. There were a lot of colors jumping out at you.

Um, that's all a problem, and I'll show you how to actually prevent that in the design phase. Um, second is typography or fonts do a lot more for a site than people realize, and it's one of the easiest ways to differentiate yourself from any other site because, uh, especially with more people using AI to build sites, they just keep using the same fonts. And, um, fonts psychologically actually have, you know, a big impact. Uh, also, um, using white space and a good layout uh, to communicate quality is really underrated.

Um, a lot of people think they have to fill every space on a website, which is what ruins this sort of consistency and making the website feel intentional because the more noise you put, um, and the more words, the less people pay attention to what you're actually trying to say. Uh, and so, making sure you use white space and layout and cool animations correctly, um, gives it, uh, a huge boost in terms of the quality and how people perceive your website. And then lastly, um, visual references are really important.

And so, you have to show Claude what good looks like. And so, that's why planning and basically building and designing a website, um, prior to actually developing the website and coding it, uh, is really important so that you have something to show Claude, um, and some reference for what you want to build. And so, um, let's think about also what you're actually trying to achieve and the purpose of this website. Uh, I'm assuming you want a website that actually looks like a human with taste built it, um, which really can't be true unless a human with taste does.

Uh, and so, that's you watching this video. And don't worry, uh, you don't need a ton of taste. The tools I show you will help you with that. Um, you just have to know what you're looking for.

And then, uh, second, you want to build something like a real client would pay money for. And so, you don't want to build something that looks like every other single website out there. Um, I like to think about, uh, if you've ever seen like those new development homes in area where just like every home looks the exact same, and they build the same home over and over and over. You don't want to be one of those homes.

You want to be the cool castle on the hill that everybody thinks about, um, that's completely different. And lastly, you want a design that actually reflects the brand, whether that's yours or a client's or a potential client's, and not just the AI's defaults. Once again, um, that aspect of really standing out and it feeling intentional, and you trying to build, uh, a brand. And, um, in a lot of ways, a website, uh, has a huge part to play with branding for companies as it's sort of like the the face of the company, at least on the internet.

Now, moving on to the tools we're going to be using, and you will see this corresponds, uh, directly with, um, this web design toolkit. Um, first, I want to cover the Claude.md file. So, this is your AI's system prompt and rule set for the entire project. And so, this sets the rules that Claude will actually follow, um, every single session, gives it the context as you start new chats, and tells Claude what to avoid, what to prioritize, and how to behave.

Now, if you come over to the web design toolkit, uh, this Claude.md file is actually a bit hidden. It's actually in the development section because I put it in the exact same, um, GitHub repo as some of the later Claude skills we'll be covering. But, if you come to this repository that is linked under the web animation skill, you can find this Claude.md file I opened here. Now, before you open it, if you do give a star to the repo, that helps me out.

Um, it helps share this with more people, and makes it, uh, easier to find for future viewers. Um, but if you come here to this Claude.md, you can see, um, there's a couple different things we mentioned specifically in here, such as this two-pass screenshot, um, specific tools that it mentions and should be using that lines with the course, as well as some quality principles, um, and, uh, other things in terms of this developing and the working loop. You see, it's not super in-depth. Feel free to actually edit this.

This is just based on the course content and everything in here. So, if your workflow changes or there's other tools you find outside of this, um, feel free to edit your own Claude.md specifically for design. But, what I want to do here is I want to actually copy this file. Then, what I can do is come into, um, back into Google anti-gravity.

I'm actually going to make a brand new, um, .md file. So, I'm going to say this is, uh, Claude.md. And in here, I can paste everything. And then, uh, I'm just going to hit control S to save this.

And then, I'm going to tell Claude that we have a brand new, um, Claude.md file that it should know about and store in the correct place. Hey, I just copy and pasted a custom Claude.md file specifically for designing websites, which is what we're going to do. Um, and I want you to just store this in the right place and understand everything that's in here. Now, while Claude is still working on our Claude.md file, I do want to move on, um, to the next tool in this design workflow, which is the design.md file, which is, um, the actual style and brand direction document that will define the entire visual identity of the website.

So, this will be stuff like the tone, the aesthetic, the actual design goals. And so, Claude will once again read this before writing any front-end code. And, um, this is basically where all of your branding, uh, and specifics for that website will live. So, think of Claude.md as sort of like the main CEO of building the website.

And then, like the design.md file is specific to the actual design that you're going for and the direction you want to take the website. Now, a cool, um, thing I want to mention here, uh, I actually forgot to include in the original doc, so it'll be formatted and all nice in here once you actually look at it. There's this GitHub repo called awesome-design.md that basically lets you, um, copy, uh, any of these design.mds into your project, and you can tell your AI agent to sort of build me a page that looks like this, and it'll actually build a UI that matches that perfectly.

It has a bunch of different, um, companies here that you can take inspiration from, which is really cool. Uh, and this basically allows you to build, you know, a similar website to any of these companies using, um, you know, let's say Airbnb. Uh, it'll build you a travel marketplace website with, uh, that same coral accent. It's going to be photography-driven and have a rounded UI.

So, um, if you want to take inspiration from any of these websites, it'll be really easy, uh, to do so. And so, um, this is just a great place to find some design- uh, .md inspiration. Now, um, we'll actually create the design.md file later using some tools. Uh, I think it's actually tool number nine I cover in here.

Um, but moving on from this, let's cover, uh, the actual brand assets folder, which is similar to design.md, but specific to images and logos. And so, um, this will include your logo, your color palette, which might be, um, duplicated in your design.md file, and font choices. Uh, same here. And it basically stores them all in one place so that, uh, Claude can easily reference your logo and include it anywhere it needs to.

Uh, maybe in your brand assets you include, you know, an image of yourself or employees that you want to put on your website. And, uh, just an easy way to make sure Claude references, uh, everything and keeps it on brand automatically. So, uh, if I wanted to implement this, so let's see, perfect, implement the Claude.md. What I could do, um, is create a new folder, call it, um, brand_assets.

I do want to mention you could tell Claude to do any of this as well. And, uh, let's say I want to insert some of my brand assets here. Okay, so I just went and threw, um, a couple images here into this brand assets folder. You can see, um, two of my logos, one with a black background, one with, um, no background.

And now, I can tell the AI to actually use those images, um, in anything I develop going on. Now, the website I'm actually building won't be a tech website for my company, it'll be a watch website. So, I won't actually use these brand assets, but I wanted to show you how easy it is to create the folder, um, and you can just add, uh, any logos into there. Now, moving back onto tool number four uh, is finding inspiration.

And so, this is where we start to actually use our design thinking brains and find some stuff that we like. So, in terms of finding inspiration, there really is no perfect way to do this. However, I would recommend using some websites online and trying to find a website that you want to replicate at least in the beginning before you develop a ton of taste and build a bunch of websites. This is the easiest way to build a good-looking website using Claude code.

And so, two websites I recommend are godly.website and Pinterest as well as you'll see I have a couple others inside of there. So, this will basically allow you to build taste by seeing what good actually looks like. So, doing this, we can come over here. You can see we have a couple different inspiration sources.

First, let's go to godly. Now, you can see this is basically an infinite scroll page of websites. So, their website design itself is really cool. Um Now, I don't think I'm going to find the type of website I want to find on here.

I want to build sort of like an old-school watch website. So, maybe on Pinterest I can find a good example of that. So, I just searched up watch website on Pinterest and you can see there's a bunch of different options here and a lot of these look like the type of website I would want. I actually think this Japanese website looks really cool.

I would love to build this in English. And so, I'm actually going to um save this for later and you'll see how I plug this into one of the tools we're about to use. Now, next up, we actually have steal like an artist and this could be the headline for the next two tools. So, I actually show these together.

And these two tools are One is just a keyboard shortcut and the other is using a tool called Firecrawl to actually scrape for branding. So, this first one will grab the actual HTML code of a company's website that you like so that you can put that in the Claude code and to can directly reference what that website was built or how it was built. And then the Firecrawl branding scrape will actually let you point Firecrawl at any website to extract its exact colors, font, tone, and design language so you can reverse engineer pretty much any website using these methods.

And the branding scrape will actually help you create a design.md file brand assets folder that you want. So, this is really helpful one if you're trying to copy or replicate a website for yourself or if you're trying to build a new website for a client and you can get all their branding from an existing website. And so, let's just use Rolex as an example. So, let's say we want to rip off Rolex's website.

We really like it. We think that's the key to their brand. To actually steal HTML, all you have to do is hit control U on your keyboard and you will see all this HTML here. Now, their website has a lot of videos and honestly, I don't think a lot of this is written in HTML.

And so, you can see they have a ton of stuff on there, but the HTML really doesn't have a lot of information about what's going on on their website. And so, I don't think I'm going to use this here, but what we can use in this case is Firecrawl. Now, to find Firecrawl, you can just come over to the design section, come to Firecrawl branding scrape. Now, you will have to create an account, but you can use a free account.

Come over here, you'll see branding is selected. And if you just take the website, copy it, paste it back in here and hit start scraping, it'll actually extract all the brand assets. So, sorry about that, my camera just died. But, what I was saying is that we now have all this branding from the official Rolex website.

So, you can see it actually grabs the logos as well as the button colors, the colors used on the website, the typography. So, that's stuff like um the fonts. And so, not only can you use this just to scrape a specific website and copy, you know, everything about the branding, but you could also use this to say like, "Hey, like I really like the font in this website. What actually is it?" And you know, you can easily find that or you can find the exact color codes etc.

Now, once you actually have this, let's say we want to use this exact branding with this image of a website. What I can do is I could download the JSON, which is basically everything in terms of this branding guide and all these brand assets just in a way that a coding agent could read it much easier and we're able to download it. And so, I could download that and if I uh find this path, I could copy the path of this and then come back into Antigravity and I could insert this file. So, now I have all this JSON in here and I won't use this directly right now, but it's good to know that our agent now has access to all those branding guidelines.

And so, if we come back and move onto what our next tool is, if I could grab my my mouse, it is Google Fonts. So, you saw in the branding guidelines, you know, there are already some fonts there. If you see a website and you don't know what particular font you want, but if you're looking for different fonts or trying to see what type of options there are out there, Google Fonts is a great place not only because you can see every single font that's sort of available, but they have great filters based on sort of feeling you want to convey, the appearance of it, you know, calligraphy, serif, and you should get a bit deeper into the different types of font there.

But, I like to try and stay with the sort of feeling or appearance. So, let's say we want a business type of feeling. You know, we can look through here and see all the different fonts they have. Like this Stack Sans Notch, Stack Sans Notch.

It's a bit of a tongue twister. It seems like a bit tacky. You know, it's a bit um I don't know. I don't really know how to describe it.

I guess that's why I don't need to describe it. Technology feeling calm, confident um etc. You can see, you know, you can really examine uh a bunch of different fonts here as well as it can actually help you out. Now, another cool thing that Google Fonts has is it has a bunch of icons for buttons etc.

If you want to include any of those on your website, you can just download these completely for free. And so, there's a ton a ton of stuff that you can look at here as well as there's a couple of things you can actually read up on how fonts affect in this case readability, but also different types of impacts of font if you want to learn more. But, anyways, that's just a great place to actually find different fonts and sort by them. Now, next up, in terms of getting ready to actually design our website, is this actual front-end design skill that is up here.

And so, this is Anthropic's official Claude code skill for building front-end. And so, it encodes design tokens, some aesthetic guidelines, component patterns, and anti-patterns that help you prevent from generating AI slop. And so, I would recommend reading it and implementing it when building any sort of front-end user interface, landing page website like we're doing today. And so, the way you get to it is you can just click this link here.

And this will take you right to the front-end design skill. Now, you will see that this is a big repository. There's a lot more than just this skill. And so, make sure you actually get the right skill when downloading it.

If you're not familiar with what a Claude skill is, it's basically a templatized way of um inputting a set of instructions to the AI so that it'll perform it the exact same way every time. And so, what this skill does specifically is it guides the creation of distinctive production-grade front-end interfaces that avoid generic AI slop aesthetics. And so, it'll help you implement real working code with exceptional attention to aesthetic details and creative choices. Basically, it's a way to make sure um you know, you're actually trying to avoid and using the best practices every time you are doing front-end design with Claude code.

It was created by the Anthropic team. So, it was created by Claude themselves to help aid their own product in front-end design. Now, the way you would actually go about inputting this skill is I like to take the or not inputting, adding the skill to Claude code. I like to take the URL and then I would go back to our Claude code chat.

And now I'm going to open up a brand new chat. So, I'm going to hit clear. I'm going to paste this in. I'm going to say, "Here is a Claude skill for front-end design.

I want you to add this to our Claude skills we're able to use and also update the Claude.md if necessary to let it know it should use this skill whenever doing any front-end design." Going to change that to bypass permissions, and that will go ahead and actually implement that skill for us. Now, moving back to um the next tool because we'll see more of the frying design skill uh once we're actually in the development phase is um Claude design in Google Stitch. So, these will be the two biggest tools we're going to be using uh in this design phase of building uh a website and learning to build a website with Claude Code.

And what these are are they are both um AI-first design tools built to turn a description, um an image, an inspiration, uh a prompt into a polished visual uh in just And I see that my uh Looks like this was cut off somehow. There we go. Um in uh in just seconds. And so, it's really helpful for generating prototypes, pitch decks, landing pages, um anything without an actual designer.

And you'll see in a second once I demo Google Stitch for you, but these are basically a replacement for what previous tools were such as um Figma and Canva that would help you design. These are an AI-assisted version of those. Um it'll help you automatically apply any of your brand's colors, typography, design system from the start. Then you can export it all to HTML and hand it off directly to Claude Code.

Now, I mentioned two different tools here. One is Claude design and one is Google Stitch. If you want to learn more about Claude design specifically, I recently made uh a video on them. But, um in this in today's episode, not today's episode, this not an episode of anything.

But, in today's video, we're going to be focusing on Google Stitch. That is because it's just a more fleshed-out product right now. Just know that these basically do the same things. Claude design currently takes up a ton a ton of tokens when you use it.

You'll run out of usage like instantly. Um so, it's very expensive, and honestly, Google Stitch is a more complete product right now. Uh we can just visit Google Stitch here. It's part of the Google AI Studio.

Here you can see uh we are trying to make a web app, and we want to use, let's say, Thinking with 3.1 Pro. Always want to use our smartest model. And now what we can do is we can come over here. Um I want to get this JSON again.

We can paste it in here. And then we can take uh this image that we have here. Are we able to download this? There we go.

And we can also throw this into the chat, and now it has a full context on the sort of landing page we're looking for, as well as the branding. What I'm going to tell it is I want you to reference this branding guide, as well as the sort of landing page hero image I pasted in um download uh 6.jpeg. I want you to build me a brand new um watch landing page inspired by those, and I want it to be called Tommy's Timepieces. Now, it just generated its first go at a website.

You can see it created two different things for us. So, created this sort of storyboard where it has our original images we pasted in. Uh so, we can just hover over this and then talk to it, and that way we don't have to keep dragging that image in um all the time. So, as we can just see our inspiration, and it created uh this branding guide that we are fully able to edit over here.

So, let's say um I wanted to edit uh the color, I could come over here, drag that around, um change that, and change anything in there. As well as it generated an image. I mean, yes, this is an AI image. This is not actually a coded website uh for a brand new landing page.

Now, there's a bit to be desired with this landing page, but before I go about fixing it, one thing I do want to mention is that I really like Google Stitch because it does use Nano Banana to actually generate a landing page image. This allows the AI to think more outside the box in terms of what's actually possible with a website cuz when the first go around, and you just have it try and code the website from scratch, it's limited to what it recognizes as front-end design code. It's not able to try and um strive or reach for more interesting features.

Now, this website doesn't have any of those interesting features right now, but when you generate an image, you're not limited by the bounds of code um or the amount of time it takes to actually code a website with really cool features. So, that's why I like that generates an image prior um so that you're able to explore more possibilities than if that uh actually just coded a website. But, one thing uh I want to add is that you can click here to generate multiple variations of a landing page so that um you can see as many different uh types as possible, which I do recommend.

And for this, I'm going to tell it So, I'm going to include this original reference image in here. I'm going to say, I want you to recreate the landing page. I want to have more of like a newspaperish feel, like this uh original inspiration landing page did, whereas um the one you created feels a bit more corporate. So, I want uh to have that Japanese newspaper type style.

Obviously, write it in English, but I like the more muted earth-tonish colors uh included in the original image. Just apply my um branding guidelines that I provided you. All right. So, after that not perfect prompt, um we're going to see what this actually creates.

Okay, we can see here um it followed my newspaper instructions a bit too much. I don't like all the black and white in here. It completely sort of ignored the branding guidelines. Uh however, I like the layout of this one.

Like, I think this should make a cool landing page here. And so, um I'm going to favorite that, and then I'm going to say, I like this landing page you created here. However, I want you to add in my branding colors and branding guidelines um that that I gave you before to actually add some pop and some life to it. Now, here's what it generated, but honestly, I haven't loved any of the websites they've created so far.

Um And so, maybe this reference image just isn't a great one. So, something I recommend you guys do is you can come down here, you can start looking for more inspiration. Now, I already mentioned Godly and Pinterest. We'll actually get to 21st.dev in the development part.

Um that's uh for more specific features uh or animations on a website. But, I also recommend you come to this uh Reddit thread I found that was super helpful. And this person basically just listed out a ton a ton a ton um 12 to be exact is what I mean by a ton of uh web design websites. Um and so, there's a bunch of different ones you can check out here.

So, um let's say we want to visit Landing Love and find one that we like. So, as you can see here, these are some insane websites. Um I mean, if we come to this one, uh this animation on the home screen is like a full video. It's pretty insane.

Uh and I think it's just for a coaster. Like So, there's some insane websites here. I'm not saying I could recreate that website cuz um I probably couldn't. That definitely requires some custom development.

But, there are definitely some websites here that uh you know, you can take inspiration from. So, I'm going to try and find one that I think is pretty cool. So, I actually came to a different website, landbook.com. Um that Landing Love one had awesome websites.

They're just all animated, and that's something I want to add after, not right now. So, it's sort of bad to take that as inspiration for Claude Code because it's hard to feed it the entire animation. It can't create it anyways. Um I'll show you how to actually create an animation uh in the development module of this course.

But, I found this um website that I like because I could just see it working with a watch. Um you know, wine, watches, both sort of luxury indulgences. I like the framing of where the pictures are on here, but obviously, we're going a completely different style. And so, if I download this, it's going to prompt me to uh do that, but I could uh save this image, and then save it just in my downloads.

And then I'm going to create a brand new Google Stitch um project where I'm going to paste in uh the Rolex uh design JSON once again. Make sure we're using Thinking with 3.1 Pro. I'm going to try this uh method all over again. So, I like showing you um sort of the the raw and dirty and showing off these extra websites, and that's not always perfect every time, but uh that's what's really good about these tools is it's really easy to get up and going again, and there's multiple ways to sort of explore.

And that's what this um design section is for because if we had just jumped into development with that uh original website, you know, we would find out it wouldn't have really worked out the way we wanted it to. So, now I'm going to tell Google Stitch, I want you to make me a watch website um based on the inspiration landing page and the brand guidelines I gave you. Um I want you to come up with a good name for the watch company as well, and that will just be a placeholder for now. Anyways, uh I'm more interested in making sure the design and everything is correct.

Specifically, what I liked about the landing page I gave you was where the images were located and the text and the copy, not necessarily the colors or the types of images. Obviously, you have to replace the wine with watches, etc. And while that is going, I'll wait here and come back to you when it's done. Okay, so this surprised me a bit.

It actually came in with like an anime character as a hero image, which is fine because we're going to replace the hero image with a watch animation anyways, and I like the layout of this website. Um I just find it really interesting what they're including here. And so maybe um I could redesign I actually You know what I'm going to do is I'm actually going to So generally, I would keep designing until I saw a landing page. I like to start with a bit more than this.

At least like I just think the background image right there is just really throwing me off. Um I have no idea why they added that. But um I think this will actually be a good opportunity to show the iteration phase when you're actually building the website. Um and so I'm actually going to and this is a power of Google Stitch and Claude design has this feature as well.

Is say you find a design you really like. So now it's time to export these. Um I highlighted both the branding guideline as well as the homepage. Just click export and you can copy all this code to your clipboard and then you can come in here and you could just make a new file.

I was going to call it dot md and you can paste it all. Um and then and once you have this code in here, what I'm going to do is I'm going to copy this path, paste it in here. Now you could download it as a zip file and you'd have, you know, these direct files. Um but basically, what I'm going to tell it is in this dot md file, we have um the code and an image for a landing page.

I want you to actually create for me as well as a branding guidelines. I want you to organize these files, create new files um with what's in here to organize it as needed according to what you think will actually be the most neat. And I want you to rebuild this landing page for me um for my new watch company. So now that has all that context, it'll actually get to building the website.

And now that we've done that, we are officially into the development stage of how your website is built and functions. Now we are onto the development section of the course. So the problem is that beautiful design really means nothing if the site doesn't actually work. As well as you can do all the planning in the design mode.

You can dream up, you know, wonderful websites with all these graphics, but if you can't actually implement that, you don't have the the tools or wherewithal to build those amazing designs, nothing none of that actually comes to fruition. It just stays as a design and it never actually goes and gets developed and eventually deployed. And so most people just vibe code their way through development with absolutely no process. I think a lot of this is because website building got so easy when people learned you can just vibe code it and it would build it all for you.

And then you could prompt it again, it would edit whatever you want. The problem is there's just like a cap on what you can tell AI to build. It'll do it correctly without you giving it extra resources or some sort of process to go through. And so because of that, without a proper workflow, you just end up in endless loop of things breaking or not looking quite how you'd want and you'll end up settling on a website that might be okay, it might be something you think is serviceable, but it could be a lot better if you knew some of these tips and tricks I'm about to include here.

I also just want to mention that Claude makes mistakes and so your job is to actually catch those and have a system for catching those and not just like blindly trust and randomly trust Claude. And so moving on, let's think about like what good development actually looks like. And one, it should be a clear iterative loop where you build, review that build, refine that build, and then repeat based on this reviewing and refining. And so Claude can see what it's building if you give it the right tools.

Again, I've spoke about this difference between, you know, Claude actually taking in text and trying to output some sort of visual website. Like there's a disconnect there, right? It's like if you close your eyes and someone told you what to build, assuming you were a great front-end designer, you just have to guess exactly what it looks like. But there's ways we can actually show Claude.

We can show images and give it a lot more context. Um also, the best developers, at least with AI, aren't the ones who write perfect code, but the ones who actually debug the fastest. And so this ability to make a change, you know, verify it's a change you want or not and then keep moving based on that works a lot better than if you tried to just get everything perfect the first time. And then lastly, every visual problem has a technical cause and Claude can actually find pretty much every single one if you ask it right and you know what to show it and how to show it where the issue is, which again, I will show you how to actually do that once we jump into the actual Claude code editor and we're done with this little why development matters section.

And so let's think about what you're actually trying to achieve. You're trying to achieve a site that functions exactly the way it looks like it should. You want to be purposeful and you want it to look good. You don't want broken links, you want any layout issues, you want any console errors, you want it to be blurry or look, you know, like AI slop.

And so a development workflow fast enough to build for clients at scale is really important if you want to make this any meaningful part of your actual business or try making money for this with this. And so yeah, that's the tools I'm going to give you here and so let's move on to that so I can get that out of the way. And let's look at some of these tools. So the very first tool I'm going to recommend you to build is the Chrome DevTools MCP.

And basically, this is a package that turns Chrome DevTools into an MCP server Claude can control. And this gives it a bunch of different functionalities such as being able to open its own Chrome browsers, being able to take screenshots, being able to scroll and view websites as you see I mentioned here. It also allows it to analyze network requests, read any console messages and debug. And it gives us the ability to have that two-pass screenshot loop I'm going to address in a moment that takes automated screenshots so Claude can see exactly what it's building and solve that issue I was talking about earlier.

So to get Chrome DevTools installed, you want to come here to section two. I have this Chrome DevTools MCP. You open up this and I am like 90% sure this is actually created by a Google employee. Um And you can just take this um link go into Claude.

And so obviously, this was the chat we had before where I actually built this HTML landing page. So I'm going to come, open a new instance of Claude, paste this for me? And boom, that's all you have to do. Now, I actually have it already installed on my Claude code instance in my account.

So what I can ask it is can you open that index.html using the Chrome DevTools MCP? And you will see what this actually looks like in action. And you can see it already rebuilt our website from the prompt I gave it earlier and it just opened this own Chrome tab that's being controlled by automated test software. You can see it says that up here.

You see our website um you know, the images really aren't great and again, I said the design could have been a bit better. Google Stitch left us behind a bit. And I didn't actually spend a ton of time doing that. Just for sake of the course, I didn't want to spend, you know, an hour or two on the design section while I showed you everything that I could do.

But you can see it's able to open this window and it can do a bunch of other things. Um such as screenshots, etc. You can read the read me. It'll tell you everything it can do.

But just know this Chrome DevTools MCP is really, really powerful. I actually think I only use one MCP server and it's this. Maybe I have the Gmail or the G Suite one set up as well. But that's it how easy it is to get that installed.

And again, that's a non-negotiable for me when building. So next up, we have tool number two, which is directly related to this first tool. And this is more of a method than a tool I'd say. And this is a two-pass screenshot loop.

So this means that Claude will take screenshots automatically as it builds and these screenshots are then saved to a temporary screenshots folder in the project. And so first pass actually builds it and then the second pass reviews and refine what it built until it gets exactly what you prompted. So this allows Claude to use its own eyes eyes I use in parentheses to catch layout and design issues. What this allows you to do is allows Claude to sort of self-regulate, self-check, and keep developing so that you don't have to keep opening that Chrome browser and seeing if it did exactly what you wanted it to or not.

Now, do I still recommend actually checking the work of Claude? Of course. And it's really easy in front-end design. It's easier to test because a lot of it's visual than if you were doing some sort of back-end design script.

However, this two pass screenshot loop I've seen has made it dramatically faster and more hands-off in terms of designing and using um and building with the front end. And so let me just escape this. And I want to give Claude a prompt. So So when we looked at the website it just built, we saw that a lot of the images were wrong or not sized well.

And so I'm going to tell it I want you to go out and find new stock images for all of the images on the website as well as get rid of all of the images at the very bottom of the website that seem unnecessary. And so this includes a hero header as well as any other images that aren't a watch. And so I want you to go out find quality images of watches that fit our brand and then make sure to use the two pass screenshot loop to ensure that you're actually completing this task correctly. And so this is my prompt for it to actually go in and fix all the images as you saw in the first pass of it building the landing page.

It really didn't perform all that great. It's not something that we could deploy and the images were a big part of that in my opinion. And so I'm telling it to do this using the two pass screenshot loop to ensure it's actually completing it. And now we can see how this performs once it's done.

Okay, so boom it's done running the two pass screenshot. You can actually see through here um everything it did. So you can see using Chrome DevTools actually was able to navigate it to the page, take a screenshot, do a bunch of different web searches, and obviously this is just a native feature of Claude code to do these web searches. And then it got all the URLs, made all the edits, and then it took a second screenshot to actually verify everything went well.

Took a full page shot and made sure it all looked good. You can see as I said before like the hero had a cartoon gang character for some reason. And now it's doing a dark suit. So let's see how this actually worked.

So if we open the brand new website, you can see here we have this dude in a suit with a watch. And this overall just looks like 10 times better than what we had before. This is something you can put out onto the web right now and people think it's a fine website. But I know there's a lot more we can do.

And so let's reach into our sort of tool bag and see what else is there. So next up tool number three is just iterating with Claude code. So prompting is not a one shot process. As you saw if we tried to one shot that website we would end up with a horrible website with like some random anime character as our hero and that's not what we want and iteration is the entire job.

It actually just came to me that Google search probably thought when I said like hero image like an actual hero and not talking about just like what's above the fold on a website and that's maybe why it gave me a character like that. Um but continuing on we need to screenshot problem areas and we can also now just describe it and you Claude code can screenshot it themselves and describe you know exactly what needs to change. We have to be able to combine different visual references with text prompts to actually get the best results and specific feedback produces specific results and vague feedback produces vague results.

You need to remember that. You need to know what you want in these websites. If you don't, it's okay to go back and forth with Claude code and figure out what you want to change before just telling it you don't like something and telling it to change something because then like you're just never going to get the result you want. Can't really guess what you want but can sort of help you come to that conclusion.

And so let's look at this website and let's see what we want to change. I'll show you an example of this. Now this hero image is fine and like I've been hinting to we will actually add like an animated image right here but I feel like the text could be there could be a bit more going on. Now I think the copy is okay.

You know I'm not going to go super in depth into sales copy. It's not really my domain anyways. But I think it'd be cool if we had an element where it said the new standard of like precision and then this would keep rotating to a new word. So it'd be like precision and then maybe like class or whatever.

A bunch of different words to make it sound very professional and make the watches sound cool. So if we go back to our web design toolkit, you'll see there's this website I sort of briefly skipped over before called 21st.dev. Now like I mentioned this is for specific UI or user interface components. You'll see a lot of them here like chat boxes boxes etc.

But there's also hero sections you can use and this is the absolute best website ever. It's really cool and a big reason of that is you can see exactly what it's building here. And if you click on it, you can literally just copy the prompt that you're supposed to put into an AI coding agent to build exactly that. Which is pretty awesome.

It's very it's meant for agentic coding and that's why this product is so great. So I'm going to go look and try and find one that I think fits the vision of what I'm trying to achieve and I'll get back to you when I do that. Okay, I just found this animated hero and you can see it's doing exactly what I was talking about where the text is sort of rotating. So I'm going to come in here hit copy prompt.

And then I'm going to go back into Claude code. I'm going to tell it exactly what I want. Now I am going to do this in brand new chat so I'm going to clear the conversation so that we don't have all that context muddying things up. I'm going to paste this prompt and this prompt will be pretty big.

I recommend adding some extra context on specifically where you want to implement this feature. Hi, I want to implement this animated hero feature for specifically the word Let me go and see exactly what word. I think it's precision right there. For the word precision inside of our hero.

I want you to rotate between four or five, let's say five, different words that all sort of communicate and convey the brand image we're trying to do. So that's stuff like class, obviously like it being timeless etc. But they also all have to fit and make sense in the sentence that's already written out. I trust you to figure out what words work best and just make sure to use a two pass screenshot loop to make sure you know it doesn't look weird on the hero image, it's not pushing or covering any images and everything looks smooth.

And so that will be my prompt. Obviously I can run this and you know we don't want it to say things that don't fit the new standard of and then say like you know some word that just won't fit into that sentence. Thankfully it's pretty forgiving sentence I think and there's a lot of different words that could go here. So let's see what actually comes up with.

Obviously I gave it a lot of agency in terms of the words I want there. If I wanted to, I could look up synonyms of precision or what you know the Rolex website mentions or the Audemars Piguet website mentions but in this case I think it's good enough just for Claude to come up with something. It's usually pretty good. So I'll see you once this feature is done.

Okay, so just got done and something interesting I noticed is it's actually making a mobile friendly version as well without me even asking it to. However, I'm just going to focus on the web version for now. So this is interesting but I'm going to ask it Could you open up the web version of or the desktop version of the website using Chrome DevTools so I can view it. Okay, so here we go.

We have the web page here. Can view it. Um You can see it is correctly rotating through all of you know the words it came up with. Let me actually see what it said.

It said precision, excellence, mastery, elegance, and distinction is how we are defining our brand. Now this is great. It's cool to have this little animation but you know the rest of the website seems sort of bland. You know there's this is something that's cool but it doesn't really pop out at you.

It doesn't make you remember the website. So what's something we could do to take this a step farther? Well I thought about that and I decided that it would be an animation. And again I've been hinting at this for a while so we're finally going to get to this part of the video where we're going to be generating visuals with now banana.

So, these will be completely custom images built specifically for the website. And so, what we're going to do with this is create some hero images, some product mock-ups, make sure it has our full brand context. And then from that we're going to create some video assets with cling 3.0 via Higgsfield. And this will basically mean we're taking these images, which will be a before and an after image, and we're going to generate the video in between.

And so, think of a watch completely exploded top to bottom and the same image of the watch, but you know, completely intact. And creating the image that will actually show the exploded view happening in real time all using AI. And we're going to do it with Higgsfield. Now, you come into here to open up Higgsfield AI.

Higgsfield is a paid service. You can do this via just the now banana and cling 3.0 API. It still will cost you money. I find it way easier to just do it through the actual Higgsfield studio.

It's just a lot more user-friendly. And so, that's what I'm going to be showing in this tutorial today. So, for actually creating these images, I'm going to have Claude actually make me the prompt to do it. And so, I will paste a screenshot of our website in here and then I will ask Claude to, "Hi, could you please create me two different prompts I'm going to plug into an AI image generator.

And I want the first prompt to be a watch fully intact that follows sort of our brand guidelines and exactly what you see on this website. However, I don't want it to be on anyone's wrist. I just want it to be sort of a a cinematic shot of a watch. And then the second one I want is an exploded view of that watch that's completely expanded.

The purpose of this is that I actually want these images to go in and create a before and after shot and create an AI video of the watch actually creating exploded view and put that as an animation on my website. Could you please give me prompts to do this that completely follow my brand guidelines. So, that is what So, that is what I'm going to be asking Claude to create for me. And let's see the responses and see what produces in Higgsfield when we actually put those prompts in there.

Now, one thing I actually forgot is that these images do need to completely match the background of our website. And since I plan on playing this image right here, I'm actually going to take a screenshot of this and ask Claude what the exact color code is for that so that the AI image generator can generate the correct image and it won't stand out and you don't it blends completely in with the background everything behind it. So, I'm just going to ask very quickly, "What is the color code to the background the lighter sort of gray black background?" All right, perfect.

We got the color code here and I'm going to plug this into Claude and tell it um "This needs to be the background color for both images. Please include this in the prompts." So, now that's generating that, we're going to go into Higgsfield and you can see there's a couple of options here. I like to create at least three images at a time. This way you just get a variety to choose from after it generates.

Now, quality I would say I want let's say medium quality. And then in terms of resolution, this actually doesn't matter as much as quality in my opinion. And so, let's see what this generates when I plug these prompts in. So, if I go over here and try and generate this first image, let's see what generates.

I'm going to paste this in here, click generate, and I'll come back to you when that's done. Now, while that's going, you might be thinking, "How do I actually implement and add these animations?" Well, you could prompt Claude to do it, but when I tried doing that, it actually took a couple of goes for it to get completely correct. So, I actually made two separate Claude skills specifically for this that you can get at the same GitHub link that's under here under web animations skill. And once again, if you could star this repo if you found it helpful or found this video helpful at all, that would be great.

And all you have to do is once again, like we have with everything else, copy this URL up here, go back into antigravity, open a brand new Claude code instance, and tell it to "Please install these Claude web animation skills and so that I'm able to use these on the website." And boom, that will start getting working for you. I'm going to switch this to bypass permissions so it doesn't ask me for anything. And then we'll see if Higgsfield finished. And it did.

So, here are the three images. Obviously, it says Patek Philippe on it. Not sure that's exactly what I wanted. This is a bit better.

I have no idea what that means. And then this one is interesting. And so, this one seems the only one that's correct because aren't these watches like These are wrong cuz like if you look at a watch, it would like this is sideways. So, let's say this is the one I want.

What I'm going to do is I'm going to download that and I'm going to drag it into here. And then I'm going to do the second prompt for the exploded view. Now, the reason we do that first image and drag it in there is so that it has an exact reference of what that image is. And so, I'm going to say, "Perfect.

I just pasted the original image that's unexploded. And so, use this as reference for the exploded view." Once again, it will generate three of those and we can we can pick the best one to actually generate the video from. Now, if we come back over to Claude and see it's still creating these uh skills for us to use. And so, I'll wait on this.

Okay, so it just generated the exploded views. They all look pretty much the same. It's pretty hard to tell like what the video would actually look like when looking at these. Um I'm just going to pick the simplest one.

I feel like this one looks the simplest. Like this one has a bunch of different screws. This one has a bunch of different I think that has more pieces. Um so, I'm going to choose this one as the one we're going to choose for the actual video.

And now we need a prompt for the actual video when we generate it with Claude. And the reason I chose the simpler one there is just because I think the AI will have an easier time making a video that makes sense. Like it won't have to get all the nuts and bolts in the exact right places if there's less of them. And so, now going in here, I'm going to just give it the context of both of these images because I can.

I'm going to say, "Perfect. These came out great. Now I need a prompt for an AI video generation that actually takes the original view and creates the exploded view in the video. And so, please create that prompt for me." And while that's going, you can see I'm sort of multitasking here.

We can see it's still installing the skills. So, good thing that that is going actually said um it has put them in files already. And now that we have our video prompt, just going to wait for this to finish generating. I'm going to copy it and put it over here.

And now we can create a video. Now, you can see some of the previous ones I'm pretty sure I created before. And so, this was sort of an exploded watch view. Ignore the sound on it.

It makes sort of weird sounds. Um That one was pretty good. I liked how it was vertical. And then this one was actual watch case and that was just a rotation.

So, I'll show you how to do that after. But first, let's create this image. Feel like it should have Okay, using cling 3.0, we see um it gives us the start frame and end frame and that's important because we need the start and end frame to be very specific. Now, in 4K, I'm think we're fine just in 1080p.

Every time I've done it, I haven't needed 4K. You can see both of these. This one was 720p, but this was 1080p. That came out perfectly fine.

So, let's generate this and see how it goes. So, it just got done generating the video. Let's check it out. See it fully expanding there.

Looks pretty good. It is a bit choppy. I'm not sure if that's just my computer. Okay, that was just my computer playing it the first time.

So, perfect. Now we have this entire video that we want to turn into a scroll animation. This basically means as you scroll down the page, the video plays frame by frame. And as I scroll, they see the watch explode.

So, what we want to do is we want to download this video. I'm I'm to go in here. I'm going to find this video in its folder. I'm going to copy the path to it.

So, if I go here and I copy this and I close out of this. I go back to um Claude code. You can see we installed these skills. Now, I'm going to paste uh this video in here.

And I'm basically going to uh copy this, paste in here or um copy the path and paste it in here. So, I can tell "I want you to do the scroll reveal video um skill using this video. I want you to put it just below the hero header um on our website and I want you to ensure is as smooth and high quality as possible. Make sure to use a two-pass screenshot loop to make this happen." And so, perfect.

That will get um to going on actually creating this animation inside of our website. And again, the skill does um most of the heavy lifting here as well as the actual AI image generation. Now, you could go through this a couple different times. You could try different angles.

Generally, I have found this method of just creating a good start and ending image um using an AI prompt like here um to be really effective. Now, I will actually include uh both of these prompts that I use inside of Claude um inside of or all three prompts. Uh sorry. I will include all of these inside of this web design toolkit.

Don't worry. I'm just throwing at the bottom so I don't forget. But, I will actually format that so that when you actually um go and check out that doc, instead of having to um screenshot whatever prompts I put or put in your own prompt, um you actually have reference prompts that uh you could use. Now, the next thing I want to do is I want to actually change um the background image of our website because this guy with the hand um is actually a pretty good picture.

But, I think it'd be cool if we had some sort of animation behind like this that always played and was always looping. It's coming to Claude and ask it to create me the prompt. "I want you to create me a prompt for um an actual watch box with a bunch of similar watches to the one um you already generated. However, I want them to vary in some sort of way and um have it be like, you know, three very important-looking watches in this watch box. Uh I also want you to come up with a video prompt after that where it will be sort of a cinematic uh rotational view of the watch box and I want some dramatic effects like um you know, dramatic lighting and fog uh around both the original image and included in the video." So, you can see there I'm creating uh a new prompt to actually throw into Higgsfield.

Um I'm a big fan of using AI to help with prompting, especially um image generation uh for two reasons. One, image generation costs money. So, you want to make sure you actually get it really in-depth and right the first time. And the second reason, bouncing off of that, is that uh AI is typically way better at being able to sort of describe these sort of scenes.

So, like I would never know how to describe like a polished rose gold case, like ivory cream dial, etc. Um and as well as like the angle to put it at. But, uh AI, thankfully, is very good at that. So, um let me do this.

And we will generate generate those three images. We'll see how those come out and hopefully we can uh then create a actual video from that. Now, one thing I do want to mention because it's an issue I run into a lot. If you don't close your extra Chromium browser, which is basically the browser Chrome DevTools um opens, after, you know, Claude code's done doing all of its thing then um when you go to prompt it again, uh it will actually error out and um you will get this error that it's sort of already running.

And so, always make sure to close that because my AI always trying to like install a new It's trying to install um Playwright, and which is a different sort of browser automation thing um that AI is use. However, uh I just gave uh the slash by the way command after I closed it that I can use the Chrome DevTools. So, just want to mention that. Now, coming back to Higgsfield, see we're getting these cool boxes.

Now, I could have prompted out it saying Patek Philippe. Um I really don't care because this is just a demo. Obviously, if you're creating your own brand, you want to include your brand's name uh actually on there. And I would also recommend um I should have done this, but I would include your design.md file uh inside of here, too, so that uh the AI knows like the exact vibe you're going for.

Okay, so it just generated all three images here. Um I've just have a feeling this first one is going to come out a bit better. I like how the watch is looking there. I like the angle a bit more zoomed out than this one.

Obviously, all three look pretty similar, but I'd say um just in this case, I like that one a bit more. And so, oop. We can see uh is opening the the Chrome browser. So, got close that.

Um that's Claude code hard at work. And let's generate this claim video. So, um I'm going to come in here and say this is the Whoops. Guess I got to get rid of these images first.

Um and say this is sort of the start frame. Uh and then I'm going to come in here and get the video prompt. Boom. I'm going to come and delete that and paste that.

That image is all in there and let's get to generating and let's see how this does. So, while that video is generating, we can see that um the AI actually went through and created this uh hero section. The skill correctly passed um both screenshot tests. And so, let's see if it actually did that um correctly.

So, let's open this in Chromium. So, you can see obviously the hero section's the same. Um we have this uh little scrolling thing. But, if you come down here, you can see we have this explode view of the watch.

As I continue scrolling, it explodes. Now, that's pretty cool. Um I wanted to do a watch company because it's something that looks cool exploded. You can do this with with most products.

The exploded view, I think, is the one that like fits scrolling a lot. Which is why I wanted to do it. Um I've seen people who do like the zoom in, zoom out thing. Um and that Landing Love landing page that we went through earlier that had a bunch of motion graphics will probably have a lot of inspiration for this as well.

So, now that we have um This is really fun to do. Sorry. Now that we have that set up and the actual scrolling animation, what I want to do next is make the hero um a bit better. And so, here's the video that Higgsfield created for us.

Um I'm going to mute it. So, here's the video Higgsfield just created for us. Now, that works. Um it's not as great as something like this because this one just boomerangs better cuz there's less movement.

Um but, let's see how this comes out. So, the skill we will use for this one is the hero loop background. And so, if I um come over here, I uh find this in the folder and I'm able to copy the path. And then um I can paste this uh into Antigravity.

I can tell them "You did a great job uh with that previous one. Now, I want to do the um the hero image loop skill uh for this video. So, make sure to make this the background image um instead of the existing hero image of the guy with uh the suit on and the watch. And also, make sure over all text that is overlaying this video is still completely legible."