Build a Professional Solar Business Website with AI ☀️

Websites in about 15 minutes.

And I wanted to step you through the process, particularly because they've got these really nice scrolling animations in the background.

So I first built this solar website, which I'm going to step you through, and then I also built this flooring website.

so I'm going to show you how just how easy it is.

You know, previously this probably would have taken, a few weeks and cost 5 to 10k.

because I've done websites and bought websites in the past, but now you can do this for about $10 and do it in about 30 minutes.

And it's much simpler than everyone's making out.

Great, so let's jump in.

And as I said Evalon makes this much more complicated than it should be.

Right.

There's four main steps.

so firstly we're going to write a few bullets into Claude code about the website that we're trying to build.

Then we use this really awesome skill from Leon Xinc which is basically just a load of really effective design principles for best practice website design and it produces just kind of straight out of the bat websites like this.

I basically one shot at this to do a really kind of high class gardener website and you'll see it's pretty strong so we're going to do those and at the same time to take it up a level we're going to use this tool called Foul AI and specifically a video model within it called Cling to create some really cool animations on the site as well.

and then finally we're going to generate some images for the site using nanobanana and all three of those things together will create a really awesome website.

So the first thing you're going to want to do is come to the link that I'll also have below to this skill on GitHub and we can just copy the link here and then we want to go into our Claude code terminal or in this case whatever IDE you're using which is basically a development environment.

I'm using Anti Gravity and we're going to start a new Claude chat, that one.

and all you're going to do is you're going to open up Claude.

And you're going to go install the taste skill and help me, and help me create a website for a large residential solar business.

That's going to come through now.

I was just using my voice tool there, Whisper Flow.

So that's come through Now I'm going to click go on that and we will see that I'll just run it through.

I'm turning auto mode on so it just accepts all the autos but just go through the installation process yourself and whilst that's loading that will start wearing away.

I'm going to take us over to our Cling video model.

So what you want going to want to do is go to File AI you'll log in and then there'll be a search term up here.

Cool.

We'll go to the home and you basically want to search for the Cling video.

V3 and there's a kind of a standard you want to Go to cling video v3 standard text video model.

So we're going to come over there and, and we are going to ask it to create an animation for us.

now the reason we use standard is basically uses less credits.

So to do this usually it's about a dollar per video to generate.

So it's not super expensive and it does really add to the video the website quality.

So what I'm going to do is delete all of this that's there and I'm going to use my whisper Flow tool and say generate me a high quality 3D render style video panning through a house scene which is going to be used for a residential solar business.

I want to demonstrate the process of the solar panels going onto the roof.

Make the background white and make the asset really high quality.

It's going to be used on a website's front page or landing page so it needs to look excellent.

Perfect.

So I'm going to just start the prompt now.

So generate me a high quality exploding view diagram of a home to showcase the installation of solar and battery assets on the outside include no text.

It should be on a white background.

It should also expand and explode in all directions vertically and horizontally.

And none of this should go outside the bounds of the video.

for context it's going to be used on the front page of a website for a residential solar and battery installer.

So it needs to be really high quality.

That's just wearing away and it's about to post in.

Great.

Now let's click run.

So it's usually pretty quick actually but you can see look it's going to cost about 70 cents.

I'd actually sometimes run a couple of these because we'll see how the output turns out.

Whilst we're waiting I'm just going to go back to our last chat.

You can see that's already wearing away which is awesome.

So we can come back to.

Video.

So let's take a look.

Now you can see there's kind of this expanding view which I think is pretty neat.

I kind of think the batteries inside is probably slightly odd.

so maybe let's just re prompt.

Please ensure that the batteries and the solar assets are all on the outside of the house.

So we'll just rerun that.

But again it's not the worst start in the world.

I'm pretty happy with that.

Let's see how our website's getting along.

You can see it's still planning the site structure which is great.

And just whilst you'll have some options here.

Right.

you don't need to generate audio that's actually not, valuable.

But, set the duration for about five seconds.

So as you can see now I'm playing around with the animation a bit.

You'd obviously need a lot of solar but I actually quite like this one.

I'm going to click Download.

And then going to rename it to make sure that it's really easy to reference Claude.

So I'll call it something like Solar Design Animation.

Cool.

Done.

so then I'm going to come back to our Claude window.

We can see that we've got the taste skill ready and it's actually already built a first version of the website.

So this looks pretty good and again this is kind of, we've just let it go and do its own thing.

What I've done previously is actually if I've already got a website that I'm looking at, I can actually put the URL in with the chat and it would mirror the copy a bit more to your current existing website.

But straight out the bat.

This is nice.

it's quite pithy.

Some of the copy on the site, It's already pulled in some nice custom visuals and it's really focused on the end customer experience.

So like six weeks from first scan to solar pithy, really outcome focused.

I think it's neat.

And this, this is particularly awesome, right?

Like it's built in a kind of ROI calculator for the, for the homeowner without any prompting.

So really cool but we can definitely make it better.

So what we're going to do now is we're going to insert that animation we just made.

So we're going to come back to a Claude chat.

So we're going to say hey, thanks for producing the website.

I've now got a solar animation within my downloads.

Can you please insert that into the HERO of the site?

I want to make, use it as a scrolling animation and as I scroll I want to show three key value buckets that a purchaser on the site of Solar would, would be really interested in and value.

Please also make sure that there's a overlay in the background so I can read all of the text and please try and make it a seamless transition with the rest of the website as possible.

So that's popped in there.

Checking our downloads folder as you can see.

And there you go, it's opened up the new site and our animation is in the background.

So what we're going to do now is let's test it out.

So I'm scrolling here.

As you can see it's kind of filtering through some of the key value buckets whilst the animation's going really neat, and also it's kept everything that we previously showed below, which is great.

So I guess one thing that is slightly could be optimized here is I'm actually having to scroll quite a lot to go through these animations.

So I'd like it ideally to be very.

Probably take only two or three scrolls to get through.

So yeah, I'm gonna try and make it a bit more seamless.

So I'm gonna go back to our chat window then I'm gonna say hey Claude, Hey Claude, please can you speed up this animation?

It's taking a bit too long to scroll through at the moment.

So we'll let that wear away and it's very quickly going to come back with a new version.

So it just goes to show just how customizable this is.

and you know, even if you don't have loads of trading and website design, you can really get a feel for this.

This will give you best practice and then will allow you just to focus on kind of specific content or copy, which I believe is a lot more powerful than old model of going back and forth with an agency and getting to a product that you're kind of 50 or 60% happy with.

A lot of that's kind of baked into this skill and kind of case in point with that is we didn't really give it that overlay in the top animation.

it's kind of done that automatically look as we scroll through now I think we're in a really good place.

One thing I do want to do though is and make sure that it's kind of now optimized for speed.

It looks great but we want to make sure that we're hitting landing, we're hitting high efficiency and load speed because that affects SEO and GEO and things like that.

So I'm going to go to Claude and go, hey Claude, can you make sure that my website is also optimized for speed whilst maintaining the visuals?

I'm particularly interested in the video.

it looks like it may be quite large so can we compress it without reducing quality?

And again this would have been like another meeting or another person spending two or three days before and charging you for it.

now it's.

Paul can also go and do this in the background.

Whilst we're waiting, I'm going to show you another site that I've kind of mocked up as a, an experiment for a flooring, like a fake flooring business.

So again similar kind of animations with different types of flaws.

I really like this one.

It's kind of, I particularly like the kind of light aesthetic so really strong.

The claw's now come back and it said that it's optimized everything.

it's identified that the video is the biggest one.

So it's just looking at how it can compress that and reduce the size of it.

There we go.

It's come back and it's made compressions of some of our media which is awesome.

The one part we haven't spoken about as well is the images on the site.

So nanobanana is Google's image plugin.

And as you go through this process Claude will automatically ask you to kind of, if you, if you flag to will automatically ask for your details to set up nanobanana but again it's free at a certain limit and it's a couple of dollars overall for kind of 10 images.

So it can produce the taste skill.

Will also make sure it produces images that are high quality and don't look super A.I.

okay, so I'm now going to think I'm happy with the site we're going to deploy.

So I'm going to say this looks great and I need to deploy using netlify.

Please can you help?

And basically what netlify is is a hosting server and it will allow us to push, push websites online for free.

but there'll be like a netlify plugin.

And you know for me it's just great because if you're, if you're sending it to a colleague or you know, you're going backwards and forward to the friend, you can just send them a link rather than sharing like clunky Google Doc docs with passwords and things like that.

You can also from here in netlify update with your own URL.

And if you haven't set up netlify before it will, it will take you through the steps.

Right.

And one little hint I like to do is you know when it's telling me all these steps I often go to Claude, you know, can you just do the majority of this for me and most of the time it will do like 90% of it.

Maybe you'll have to set up an account but a lot of the time it will send you, it will open the webpage for you, it will help you with all the steps.

Great.

So as you can see we've now got a live website which is awesome.

So as we close, I think it's been about 20 minutes.

We built a really high performing website.

You could go backwards and forwards with this for hours.

But I think this is already a really great example.

So people are making this out to be harder than it needs to be.

Hope you enjoyed it.

Ping me with any questions and, yeah, look forward to the next one.