Claude Code Builds $10,000 Website in 20 Minutes (Free Skill)

Just a few years ago a website like this would have cost anywhere between 5,000, 10,000, even 15,000 and a team of developers, designers, and photographers. Today, I built this in just 15 to 20 minutes and only $6 in API credits. And I'm going to show you exactly how to do the same by the end of watching this video. We're going to do a complete deep dive into the 2026 stack for building premium animated websites, no fluff, the 10 Claude Code skills

Most people don't want you to know, and we're even going to have SEO tricks that get you cited in Google AI overviews. And to do this, of course, we're going to be using Claude Code, Gemini 3 Pro Image, Nano Banana 2 Pro, Kling AI, as well as some additional tools that I'm going to go through within this video and I've broken this whole entire process down into a 26 detailed step-by-step document with all the copy and paste prompts, places you can

Go for inspiration for your website. We did diagram breakdowns of each and every step and how it's working under the hood. And it's really just five main steps leveraging some very, very powerful tools that I'm going to go over with you in today's video. And stick with me because by the end of this video, you will have the most complete guide for building AI websites on the internet. And not only that, but I packaged every single step we're going to go

Through into an in-depth production-ready skill called the Stride Website Pipeline Builder that you're going to get access to along with this 26-page doc. All you have to do is join the free Stride AI School Academy down below and you can get your hands on both of these free resources. So, without ado, let me show you what the actual winning stack looks like starting with the first five steps that every serious creator for websites needs to follow. And by the way, this

Really changes everything, especially if you're an agency owner or really any builder selling websites to businesses, you can start doing this and really just have your cost be anywhere from two to $10 just with the AI generations of these images and videos. And you can have a website that for thousands. And once again, you're going to walk away with these five steps that you can use right now, the 10 Claude Code skills, the full SEO playbook, the chain skill that we

Created custom for this whole process so you can literally just build this website within a few prompts, and this entire resource document. And a project that would have cost a 10K and a team a year ago is something that today one person, one command can do within 30 minutes for under $10. So, the five-step workflow. Now, every premium in 2026 follows the same five steps with minor variations. And I call this a universal workflow because it is consistent across every high-quality

Build that I have studied. So, this is what it looks like on a high level. So, step one, we have brand extraction. Now, you can do this manually, you can just gather data, you know, your brand assets, your logo, etc., your colors, your schema, the fonts you want to use, whatever the case is, or you can automate this with a tool like firecrawl.dev. And this is built into the custom skill that will be providing to you. You can do either way

For this and we're going to dive into each one of these skills a little bit more in depth in just a second. Step two is image generation. So, this is with Nano Banana 2, Gemini 3 Pro Image, really any image generation model, and we're going to give you the exact prompt so you can actually go do this and build high-quality images. And then step three is we're going to take those images and use a video animation model such as Kling 3.0.

And then step four, we're going to build with Claude Code plus the skills that we're going to download as well as the custom skill that I'm going to give you for free. And then step five is we're going to deploy to Vercel, Netlify, Cloudflare, really anywhere at that point. So, step one for brand extraction. Now, you need a brand before you touch any AI tool. So, you need to have some sort of colors, fonts in mind, your logo, your personality. Now,

Of course, if you don't have these things, you can get AI to do this for you. But if not, you can use firecrawl.dev. Now, if you're not familiar with firecrawl.dev, you can see over here they do have a free plan which I am currently on. And they have many different tools such as searching the web, scraping a web page, interacting with a web page, crawling an entire website. So, let's say I wanted to scrape executivestride.com, I could go over here, type

In the website, and then I could go over here, click on branding, and this is going to start scraping and extract the branding. So, you'll see like the primary colors, the secondary colors, accent, background, typography, etc. And you can just simply copy this and paste it over into Claude Code. We also do have this directly integrated into the Stride Website Builder skill. Now, one thing I will note is I have seen sometimes it doesn't always get it right. Like, for example,

This isn't our actual primary color. So, this is one thing to note. Now, when would you actually use the firecrawl tool and that firecrawl feature is if you have, say, either a current existing site or a competitor site that you want to mimic some of their branding, then you can simply just use this tool and it will allow you to easily scrape those assets, those colors, the branding schema, and you can just simply import that over. Now, if you don't have

Any of this or you don't want to use firecrawl, don't worry, you don't have to do that. You can simply just get a logo, get some branding, colors that you want, as well as fonts, and simply just tell Claude Code that and the skill will take care of the rest. All right, step two. So, this is where the magic starts and this is for the hero images and just really any imagery on the site. So, we generate anywhere between like two

To three, you know, you could generate more, but anywhere from two to three typically images and they will become those scroll animations or your hero section animation. Now, typically we either are going to be using like videos and just using a video on the website or we're going to have the scroll animation effect, which to show you an example, this right here is the video from Kling. And over here, you see how it's scrolling and it's adding solar panels to this

House. This is a video, but it's broken down into every single frame as an image. And as you're scrolling, you can see it's adding the panels on. You may have seen this on websites like Apple with their iPhones, different high-quality brands use this effect. Now, before AI, this would be extremely hard to do, but now with these tools, you can really do this in a matter of seconds. So, let's say for example, you have a start frame that's like a blender

That's assembled and then an end frame that's blender that's exploded into pieces and that's what would happen as you're scrolling. Now, there's a few places where you could actually go and generate these images. Now, you could use Higgsfield, you could use key.ai, or you could use wavespeed.ai. Now, for this specific workflow process, we're going to be using key.ai as well as wavespeed.ai. I have Higgsfield in there as well just cuz I know some people it's it's a popular company. A lot

A lot of people bought their specific promos. So, if you already have their promos, you could just go ahead and use that. But if you want to save money and have access to a bunch of different models, I would recommend either wavespeed or key.ai. Right now, for this example, we're going to use key.ai for Nano Banana 2 and Nano Banana 2 Pro. And currently right now, they don't have Gemini 3 Pro. So, for that, Gemini 3 Pro Image as well as

Gemini 3 Pro Image Edit, we're going to use Wavespeed AI and that's the new Gemini model, if you don't know, it's really, really good. And this allows us to have 4K native output, you know, instead of 2K, we can upscale. It's very, very cheap and some of these providers I'm showing you right here are a little bit less known, but I'm telling you if you do want to have high-quality images and do high-quality AI creative work, these are some really good

Options and providers. And like I mentioned, this skill right here is built to support all these providers I'm showing you. Now, in the document here, we talk about different, you know, things you can do for the generation with the parameters such as start frame, end frame, aspect ratio, resolution, iterations, background, prompting tips. We get some example prompts here, as well as, you know, different frameworks to get the cinematic effect. And I literally broke it down into a six-layer system, which is

Anchor, world, luminance, air, optics, exclusions. And you can see this formula in action as a template right here and then an actual assembled prompt right here as an example. Now, this is in the doc if you do want to use this for, you know, manual work with images or just other processes, but for the actual website, you don't have to worry about any of this because the skill that I'm providing you, the Stride Website Builder, handles all of this under the

Hood. It's prepackaged and preprogrammed to do this type of prompting, advanced prompting for you out of the box. Now, step three is Kling 3.0. So, this is where you can take either your start frame and end frame or just your actual first image and you can feed it into Kling via key.ai or Wavespeed and basically give it a detailed motion prompt. Not say something basic like give me a cool transition, but the lid lifts 15°, then the components detach in a

Starburst pattern, each layer drifts 20% further from the center, different things like that. You know, fixed camera, no cuts, no zoom, very, very detailed, 5 seconds, enhance off. And like I said, you don't have to worry about this because the skill handles all this for you, but I am showing you right now what's going on under the hood just so you have some sort of idea when you're using this skill how it's actually working. And the cost here is very, very

Cheap for, you know, really all these image generations as well as video generations. Per website, it's going to cost anywhere from like a few dollars to maybe like $5 max depending on how much you're really doing. It really depends, of course, on a few different things, but just to give you some context, it's you're paying pennies on the dollar for high-quality animations right now. And the Google Doc here goes more in depth with the different parameters and settings that you can

Tweak and configure to get everything right. So, if you want more details with that, you can check it out, but you could really just talk to the Claude Code skill as well and just really tweak it to your liking. So, step four is really where everything starts to come together and this is the Claude Code build with the skills that I'm going to be showing you. So, you create a folder, you drop in your branding elements, whether it's a brand.json file

Or your logo, you have your colors ready, you know, you basically either already have your images and MP4 or you're going to use the skill that I provide to you to generate these, which I typically recommend. That's how I do it cuz this is a whole streamlined process from A to Z. And then we're going to install the different skills that I'm going to show you. There's a few different skills that I'm getting it into in just a second to show

You which ones you can use and how to use them. But if we take a look at the document, what this is basically going to do is it's going to one generate those images if you don't have them. It's going to then use Kling to generate the videos like I showed you. And then for the scroll animations, just so you know how this is working, we have the MP4 file. Then we're using FFmpeg to extract the frames. So this is a

Package. It's really, really good to do certain cuts, video editing, etc. And then we're going to have those images and then JavaScript maps frames to scroll percentage and user scrolls and we get that animation play. And if you have any issues with the scroll, like say if it's lagging or if there's any issues, you can simply just talk to Claude Code and tweak it. And this is a ever-improving skill. It's self-evolving, right? So if you run into any edge cases or

Issues as you're doing your build, you can simply just tell Claude Code, "Hey, this is the issue I had. This is how we resolved it. Please update the skill to reflect these learnings for future projects." So you can really customize this for your specific use cases with your actual projects that you do in the real world. And then we have step five. So this is where you deploy the actual website. So all three of these options are free. We have GitHub

Plus Vercel, which is the most popular option, which I'm going to be using here today. You get auto deploys on every single push. Netlify is free forever with a global CDN or Cloudflare pages if you already have that ecosystem and you just want to stay there. Just simply tell Claude Code, "Connect me to GitHub and push this to Vercel." And it handles it through CLI off, repo creation, and deploy. No matter what tool you use here, they're all directly integrated into

This skill. So that's really the five steps. It's brand, image, video, build, and then deploy. And every successful build will follow these five skills. Now you could go ahead and do this manually. Even if you did this manually, this would be an extremely valuable process for you. But quite honestly, if that was just it, it would still be quite inefficient in my opinion. That's why we created this skill. And I'm super excited to show you guys how this works real time

Because I spent the last few days tweaking this skill and iterating it on live builds just so I could get it dialed in for when I show you guys right now. Now the skills that I'm going to be showing you in this video, there's really like around 10 or so for the website building ecosystem right now and you don't need to install all 10. You really want to install anywhere between one to three. All right, so we have the Taste skill

Right here, which has 7,200 GitHub stars right now. So I use this in most projects. You can also see the Anthropic official front-end design skill. We see the UI UX Pro Max skill. We have different uh skills right here. So this is the Manager front-end design skill. We also have the Owl Listener design skills. We also have typeui.sh, which has over 48 design skills. Then we have Nano Banana skill right here. So honestly, don't really have to worry too much about

This because the skill that I'm providing you, it's going to see what skills you already have and it's going to ask you if you want to uh install uh three different skills and you can just toggle which ones you want to install. So it's going to go through this whole process for you. Now I mentioned in the branding section that you can find inspiration from other competitors or different websites. Now you may be wondering, "Where do I actually go to do

That?" Well, here's a few different options. You can check out Pinterest. You can go to Dribbble for different landing pages. There's also godly.website right here. So this is the eternal scroll of different premium designs. You can check Midjourney for different art styles for reference images. You can also go to 21st.dev for different components, shadcn.slash.ui, shadcn studio, SaaS Indie, a bunch of different places right here. And we also have a 21st.dev integration via MCP already pre-packaged within the skill. We have an

Integration with Firecrawl, 21st.dev, paper.design, Google Stitch MCP, and you can even add Figma as well. And this comes all pre-packaged within the skill that I'm giving you here today. All right, so not only does this skill do all of this under the hood to get you those premium designs for your websites, it also comes pre-packaged with all the most up-to-date 2026 SEO information for building premium SEO websites. So I'm not going to go through all of this, but you can see

Here if you want to read some of this in the doc if you're a SEO guy. See, it does all the robots.txt, the sitemap, the llm.txt, humans.txt, image SEO, local SEO, AI search optimization, all these different things. And it's going to do all of this under the hood. It's simply just one toggle that you can either toggle yes or no to in the actual skill to SEO optimize the website. And one of the most annoying parts with actually building websites with

Claude or any sort of AI is you tell Claude to go do something, it builds it, and then it asks you, "Hey, can you check if this looks right?" every single time. So there's still that feedback loop. So Vercel shipped agent-dash-browser. If you're not familiar with that, it is a Rust CLI that essentially gives Claude Code screenshots plus accessibility tree plus interaction capabilities. It's a one-line command, no API required. So now when Claude builds your site for you, and keep in

Mind this is all pre-packaged within the skill I'm giving you today, it basically screenshots the desktop and mobile at five scroll positions, extracts the accessibility tree to verify tap target sizes, semantic landmarks, clicks every CTA, fills out every form, runs Lighthouse, so fixes the top three issues, reruns the whole loop, and then hands you the finished site. So no more can you check this pings. Now this is optional. You could just check it yourself because at this point you are going

To have a pretty much fit polished product, but this is a awesome toggle that I found to be very useful as well. Okay guys, so I know I've been teasing this since the beginning of this video, but here it is. Here's the thing that I built for you. I spent the last few days building this and testing it and using it in actual production websites. And it's called the Stride Website Builder Pipeline. It's one skill, one command. Everything that I showed

You, including some additional things that I really just don't have the time to show you, is pre-packaged into this and works end-to-end under the hood. You simply just type, "Build me a landing page." or "I want to build a website for this or that." and it's going to go ahead and start the skill and go through this entire process, over 15 different steps and questions along the way to get your feedback and customizations. You can paste specific markups into it if

You want instead of describing them. And then it chains every single tool that we just talked about into one single workflow. So it's very in-depth. I'm not going to go through the whole entire skill right now, but phase one is pre-flight checks. So it's going to look at your project and it's going to see what environment variables you already have set up. So I mentioned that we're integrating with different things like paper.design or Google Stitch or Figma or key.ai or Wave

Speed or really any of these, Firecrawl. It's going to detect which environment variables you have set up and which ones you may need. And then it's going to say, "Hey, in order to use this, do you want to, you know, set these environment variables up or not? Do you want to use these MCP servers or not?" And then phase three is the survey. So it's going to ask you some different questions to get your uh customizations for the specific build. Phase

Three is the Firecrawl and brand extraction, right? So we talked about that. Phase four is the Nano Banana or Google Gemini 3 plus Kling via key.ai or Wave Speed. And then phase five is scaffolding your project folder. It's going to ask you what specific tech stack you want to use for your website, whether that's Next.js or whatever the case is. You're going to see in just a second when we do a demo here. And then phase six, Claude builds in plan

Mode. And then phase 6.5, agent browser verifies the build. Phase seven is a full SEO pass with 2026 JSON-LD schemas. And then phase 7.5, agent browser is going to re-verify. Phase eight is deploying to Vercel. So this whole skill can deploy for you or you could do the manual deployment if you want. And then phase nine is logs for what worked for self-improvement. What worked, what didn't work, and then it's a self-improving skill. That means anytime you run it, it logs

Automatically what did and did not work and updates its own prompt library based on that feedback. So it automatically does this, but you can also manually do this. So it's going to get better every single time you run it within that specific project. All right, so first things first, I'm over here in Cursor in the terminal of our project. Now this is going to be a personal site for me, Josh Pocock. And this may change over time uh in terms of

What I actually want for it, but all we're going to do is simply run NPX skills add and then right here is the GitHub link. And this command will be in the uh Google document as well. So you can simply just run this command, which is just right here at the top. So you copy this and run it in your terminal. So this is going to go ahead and install the skill. We're just going to install it on Claude Code for

This specific project and use a symlink right here. Proceed to install. Okay, now boom. You can see that we have our Claude skill. We currently just have one skill installed and this is just the Stride Website Builder Pipeline. Now if you open up the skill and you go to references here and you click on this environment variable template, you're actually going to want to make a copy of this and just paste it over here into the root of your project. So

This here is going to have the environment variables that you're going to want to add in order for this thing to work. So I'll tell you which ones to add. So key.ai, uh you're going to want to add this one and you're probably going to want to add Wave Speed too. Or you could add one or the other. Now if you want to use Gemini 3 Pro, currently you will have to add Wave Speed cuz Key doesn't have it. If you

Just want to use Nano Banana 2 uh and Kling 3.0, you can actually just add key.ai only. So I'm not going to show you how to grab every API key from each certain provider. It's pretty basic. You just go, create an account, sign up, go to your settings, grab that API key, and paste it in here. Now, you could also use Higgsfield, but we're not going to use that right now. Uh it is technically more expensive than these other plans unless

You got some certain promo and you already have credits stacked up. You could also use Google AI Studio, but we're not going to do that right now. Now, for brand extraction, you could put your Firecrawl API key here. This isn't required though. Um I did I've done a lot a few of these builds without the Firecrawl API key, but you can use this. And then for deployment, you could add your GitHub token if you want or your Vercel token or your

Netlify token or your Cloudflare token. I honestly I've just been skipping this, so we're going to skip this right now. Now, these are the optional component sources and I'm actually going to add these in for this video. So, this is the 21st.dev Magic MCP. If you're not familiar with 21st.dev, it's a really great website for different components um that you can just simply copy and paste. So, adding this MCP allows ClaudeCode able to go in there, grab different components, or make

Components, and pull them into our actual website. Same thing with Google Stitch. Google Stitch is a really cool design-to-code product from Google, and you're going to see it uh when we actually go ahead and run this, you're going to see how it uses Google Stitch, how it uses paper.design MCP. So, this is kind of a newer tool. Um it's pretty cool as well, and you can just go to paper.design if you want to try it out. And uh it's kind of

Similar in a way to Google Stitch. You can create like certain components in code and whatnot, and it can use that. It can also screenshot things. It has a few different tools. So, we're going to use all three of these in this example. Now, optional things too is you could hook up Google Analytics or Plausible if you want, maybe if you're doing more SEO type stuff. We're going to skip all that right now. Once you have your environment variables, you're just

Going to want to rename it to .env. So, I have all my environment variables now. I'm not going to reopen that cuz that was my API keys. But now, we're actually ready to go and use the skill. And so now, I'm going to run ClaudeCode with dangerously skip permissions on. I'm just going to simply say I want to build a website. Now, we can see that this skill has been loaded, so it's activating the skill here, starting website builder pipeline. Let

Me run a preflight check first, so it's basically checking the environment variables to see what API keys and what tools we actually want to use. It's checking what MCP servers we have activated. Okay, and boom, we can see our preflight check status right here. So, we have, you know, Node, Python, FFmpeg, the gh cli for GitHub, Vercel, uh and then we can see WaveSpeed API environment variables, key API environment variables, Firecrawl. You can see it detected we have the Stitch MCP

Connected as well as paper.design as well as 21st.dev. So, if you want to actually connect these MCPs, um it mentions how in the doc, but you can simply just go to Google Stitch, go to 21st.dev, search up their MCP, and simply just connect it to your ClaudeCode, and then it will show up here. Now, you can see it checked for the peer skills right here. So, Taste Skill not installed, front-end design not installed, uh Agent Browser is installed cuz we actually

Already installed it. It's going to ask us if we want to use the Stitch MCP. I'm going to say yes. Do we want to use Paper MCP? I'm going to say yes. And do we want to use 21st.dev MCP within this build? I'm going to say yes as well. And we're going to submit those answers. Now, what type of project are you building? You can do a landing page, multi-page site, portfolio, add to existing project, or you can type something specific.

I'm going to do a multi-page site. Next, it's going to ask us what tech stack we want to use. So, we could use Next.js, Astro, Nuxt. Uh we could let the AI decide. I'm going to go ahead and use Next.js. Next, it's going to say, "How do you want to define your brand identity? Existing URL, screenshots, manual, let AI decide?" Or you could type something. So, here I'm just saying uh executivestrive.com is my site. JoshPoulson.com is for my personal site we

Are making. I'm giving it the hex code for my primary colors, and then I'm the founder of this uh company. Here's my YouTube. And here's some of my recent YouTube transcripts to get an idea of who I am and what type of content I make. And then I'm linking it to this folder right here. Just has some transcripts. Also too, I have my logos up uploaded right here. I may change these logos in the future, but for now, it's just pretty

Basic. I have a white one and a black one depending on if it's on a white background or black background. I actually forgot to mention that, but it was able to find that in the project. You can see here it actually did use the Firecrawl tool right here to extract the brand, and it just put it into this file right here, brand-raw.json. I just said for some reason Firecrawl doesn't extract my right brand stuff for my website, so ignore that extraction.

It's asking, "Who is your target audience? AI entrepreneurs and devs, business owners using AI, both for a broader tech?" I'm just going to go ahead and say both. It's asking, "What vibe should JoshPoulson.com have? Dark premium tech, clean minimal, bold and energetic, or let the AI decide?" I'm going to go with dark premium tech, and we're going to submit those answers. All right, next it's asking, "How should hero images be handled?" So, you could use AI generated ones with Nano Banana

Or Gemini 3, which we're going to do, or you could upload your own if you do have your own images. You could also upload your base images and have AI enhance them first and then use them for videos, so you have two different options there. Or you could just let AI decide. So, we're going to use AI generates. And then, "What about video and animation?" So, this is where you can toggle on specific ones that you want. So, hero background video,

If you want a hero background video, um or a scroll-driven animation, or a section accent video, or static only. I'm just going to uh go ahead here and type all of the above, but you could toggle different ones on like this and select multiple ones too. Now, it's asking us, "Which sections should our website have?" So, we can multi-select here. So, we can say hero plus about me, YouTube content, so showcase the YouTube content, Executive Strive services, or Strat AI Academy

Plus CTA. Now, I may change this to be quite honest, but for now, I'm just going to select them all and then also just say and add a full in-depth blog. Then we're going to go ahead and click on next. Next, it's asking, "What video model should we use to generate these hero videos?" So, we can use Kling 3.0, we could use Seed Dance via WaveSpeed. We could use VO3, VO3.1, or the fast versions of either of those, or we could

Let AI decide or type something specific. And if you encounter any issues with any specific models, let's say that are out of these options, you can just go to Key, go to WaveSpeed, and and basically just give Claude the API information for that model, and just make sure that the skill has that in it. I'm just going to go with Key 3.0 for this example. Next, it's asking, "Where do we want to deploy?" I'm just going to go ahead and click

On manual for now. And then it's asking, "What do we want for the SEO tier?" So, do we want a full audit? Do we want basic stuff? Or do we want to skip it? I'm going to go ahead and click on full audit. This will make it take a bit longer though, of course. All right, so now it has the full build plan. So, we can see the project, the brand identity, the page sections, the assets, and the integrations, as well

As the SEO. And you could make changes, but I'm just going to go ahead and say, "Let's go and build this thing." Now, the cool thing is it's going to recommend us those skills that we talked about. So, uh two skills it's recommending are the Taste Skill right here for anti-slop rules and the front-end design skill. So, I'm just going to go ahead and install them both. You could choose to install one or the other. But we can see here now

We have the front-end design skill as well as the Taste Skill installed. Now, it's moving to phase 2.5, which are the Stitch layouts as well as the asset generation for phase four. So, the cool thing is with Google Stitch, and I'm not going to go through all the different features within Google Stitch, but you can see it's going to generate a brand uh schema right here. It's going to generate like the actual web website mockups for you, and then we can

Actually use these in our actual website. So, we'll see what it actually generates for our new website right now once it's done. All right, so we can see here it's sending a request to the 21st.dev Magic MCP, where it actually basically opened it in 21st.dev and created these different components for the footer, so different variants here. So, you could choose the specific variant and then open in MCP. All right, so now it did the first run-through. You can see that we

Have it I think it took about 40 minutes or so. Now, part of that, I'd say about 10 minutes 10 to 15 minutes of that. Um I didn't realize it was asking for some um approvals within the 21st.dev MCP, so you do have to like actually go over here and then click on it manually if you want to use this, and then send it back to the actual uh ClaudeCode right here. Now, it's basically telling us to take a look at

It. We can take a look at it manually, or can continue on with phase 6.5 for visual verification with Agent Browser, and then phase seven for full SEO pass and beyond. I'm just going to tell it to continue on for now, and we'll take a look at it when it's done. So, we can see here it launched two agents. It launched the visual verification agent with the Agent Browser from Vercel, and then it's also launched the full SEO pass on site.

So, it's going to go through, do all the different best practices for SEO in 2026. All right, so ClaudeCode has done its thing. It has pretty much gone through the whole entire SEO process, really everything we talked about, and I have done a few different iterations. Um I did some things which I'm going to tell you about right now. This is pretty much what it got out of box. The one thing is it did get this animation, this video in the

Background, and I basically told it to do it in a loop. So, I basically told ClaudeCode um to basically reverse it and just have it as an infinite loop of expanding and contracting like you see here. This will work for something like this where it's kind of just abstract shapes, but if it is something that's, you know, like uh in our other example at the start where it was like actual nature or like a, you know, a home with solar, uh

It may be a little bit difficult cuz it may just not look proper, but you can experiment with that. So, you can see this is the website we got, right? We have all the different elements. We have about Josh section right here. I gave it an image of myself. And if we scroll, this is where you can see this nice cool animation, the scrolling animation where it's like piece by piece built with AI. It shows a robot. Now, you can literally

Make this type of stuff anything, right? And I actually just did as of filming this, I updated the skill to actually ask you and suggest about four to five different options for Nano Banana images that you may want to generate based on your brand profile as well as recommending uh four to five different options. Uh you could give it your own options, of course, but four to five different options for once you pick that specific image, how you want to animate

It, right? So, if we scroll down here, we can see our latest content. So, this is our blog right here. This is additional thing I had to go back and forth with the claw to actually get. So, this wasn't a one-shot for this blog. I'll explain what I did in just a second. But, pretty much everything you see uh except the blog and a few additional things was one-shotted. Um and then you I just did some minor tweaks here and there.

This is It still needs a few different things. Like, I would have to get this form to actually function, which I will set up and uh probably set up some additional things, but we can see we have light mode, dark mode, right? So, all in all, pretty cool, pretty uh great. And now think about this, I have a personal website, which I'm actually going to use. And the cool thing is, if I go over here, we have our about section. So,

We can see here just a short, you know, about section right here. I don't know if this is 100% accurate. I may have to update this. And then if we go to our blog, we have literally all my YouTube videos. And currently right now I have another Claude code agent. So, basically what I did I was I scraped all my YouTube videos. Um we have the transcripts. So, majority of them will uh the old ones will just do transcripts most likely.

But, some of the newer ones um will actually and some of them already do have, like for example, this one, the Andre Karpathy one, as well as others, we have actual blog posts that are written here. And uh you can get written blog posts SEO-optimized. We're going to tweak some of the formatting here with some of the tables and stuff. We'll fix that. Pretty much now I have a system where every time I post a video, I can have it auto

Post to my blog. So, one, of course, yes, I'm posting content to YouTube, which will be indexed by the YouTube search engine, but it will also be indexed a a little bit better with Google because we have these actual blog posts, these content pillar assets where you can drive traffic to the the website, the channel, whatever the case is, right? So, hopefully you can see the real-world value here. And this is just one example, right? I showed you a couple examples

Before. I'm going to definitely be continuously using this website skill and updating it as well. And also too, guys, if you have any feedback that you would want to see in this Stride website production pipeline skill, let me know in the comments down below or in the school community. Now, all that's left to do is actually just to publish this website. So, like I mentioned before, you could have this automated, but I'm going to show you quickly the manual version just

In case you don't know how to actually get this published. So, I'm going to create a repo right here in GitHub. I already have the GitHub CLI set up, so I can literally just tell Claude code to push this to our GitHub repo right here. And now I'm in Vercel. I just created a new project and I can simply click on import for our GitHub project right here. All right, so now you can see our repo was pushed to GitHub. And

If we go over back to Vercel, we can see I created a new project. I can simply just import this repo here. Okay, and boom, now you can see we have our website deployed on a domain. I connected the domain to Vercel. And that's really it. Also too, guys, just as a side note, just so you can see uh it did use Google's Stitch right here. So, I called an MCP, did some mock-ups and designs here. As you can see, it

Somewhat looks like the design here except better. But, yeah, guys, that's pretty much it on how you can actually use Claude code with all these different tools such as Cling, Nano Banana, Gemini to actually build these beautiful-looking websites with the animations on scroll as well as the video animations. And this is all done within one sequence through the Stride website builder pipeline. Like I mentioned before, guys, this entire skill as well as this entire in-depth guide, which is 26 pages long

Going over everything that's working under the hood in depth, will be available 100% for free in our Stride AI Academy. So, make sure to join down below. Now, a lot of people would probably actually charge money for skills like this, but I really want to have the mindset of just giving as much value away for free to you guys and really not holding anything back. So, if you want to stay up-to-date with all the different videos I have planned for you

Guys where I'm going to be giving much more. I mean, trust me, this is really just the tip of the iceberg. Make sure to smash that like button, subscribe to stay up-to-date with the videos, and comment down below what your thoughts are genuinely about this video. Did you get some value here? Is there anything we're missing? What do you guys want to see in future? Let me know down below and make sure to join the Stride AI Academy so you can

Get these resources as well as connect with other AI entrepreneurs and business owners as well as myself. I'm looking forward to see you there. All right, so that's it for this video, guys. I will see you in the next one. Have a great week and keep hustling, keep grinding. And of course, guys, accelerate your stride. Take care.