How I Built a High-Converting Homepage in Under 20 Minutes with AI |

I just created one of the best-converting homepages I've ever seen in under 20 minutes, and here's the crazy part: I didn't write a single word of text, design a single graphic, or touch one line of code. I let AI do it all for me. Because what used to take me weeks as a professional web designer now takes well under an hour.

So in this article, I'm giving you my exact process that lets you skip the $5,000 web designer and the months of back-and-forth revisions. You'll see which AI tools I use to make it happen, and I'll even give you my foolproof prompt that I use to get AI to write me an insanely effective homepage in just one click.

Now, this article isn't about just one magic tool where you tell it a couple of lines about your business and bam, you've got this amazingly high-converting website. There are tools that'll make you an AI website from a single prompt, but this is what you're going to get from that. It's technically a website, sure, but not a good one. So, rather than spending 30 seconds to get a website that won't actually do anything for your business, let's be smarter here and spend about 20 minutes using AI every step of the way to help get you the kind of site that's actually going to make you money. Sound good?

The AI-Powered Workflow

For this process, we're going to use several key AI tools that work together to create that complete, professional homepage quickly.

ChatGPT for Copywriting: First, we're going to use the latest version of ChatGPT to do something really powerful. It's actually going to research the best homepage conversion practices for your specific industry, identify your ideal client's biggest problems and dream outcomes, and it's going to take all that and write your entire homepage using one single prompt that I've developed that works flawlessly every time.
AI for Visuals: Second, we're going to tackle the visuals. If you don't already have a logo, ChatGPT can actually create a clean, professional one for you. And for those eye-catching website images that just make your website look premium, we're going to use my favorite image generation tool to create really custom visuals that perfectly match your brand.
AI Website Builder: Finally, it will bring it all together using what I consider to be the single best AI website builder on the market right now. This tool is going to give you a pretty amazing starting point that you can then customize with zero coding knowledge to bring all your content to life.

The best part is all of these tools are really accessible and affordable, even if you're just starting out.

Step 1: Generating High-Converting Copy with ChatGPT

Let's get started right here on ChatGPT. I'm just going to go ahead and paste in this whole prompt. It's a really long one.

Then, you're just going to take everything that's in these brackets and replace it with your own business information. For this example, let's say we're making this for a dog walking business. I'm just going to put in the name of the business here, 'The Goodest Boy Dog Walking,' offering 'dog walking services.'

I'm just going to make sure we have everything accounted for here. Then, we need to put in some information about your client. Whatever you know about your client already. In this case, it might be something like: '30-something single professionals who own a dog but might work crazy hours and live in the city of Chicago.' You just put in whatever you know about them to begin with.

Then, this is the important part: you're going to want to click on 'deep research.' With the free plan, you do get a certain number of these deep researches, and then you get more with the paid plans. I'm just going to go ahead and click on the 'get started' button.

What it always does is it's going to come back and ask you a series of questions just so that it gets everything exactly right. I'll just go ahead and quickly answer these. You don't have to put too much into it; you don't have to overthink how you're answering them. Just put the answers in, and you're good to go. Then, I'm going to click on the arrow.

Okay, so now it's going to do its thing, and it can take anywhere from 15 to 20 minutes to do all that research. Rather than waiting, let's get started with our next step.

Step 2: Setting Up the AI Website Builder

That next step is actually to get set up with our AI web builder. The one I happen to love is called Hostinger; it's my favorite web hosting platform of any kind. Even if you're not going to do it with AI, I still recommend going with Hostinger.

Then we have to pick the plan. You are going to need the 'Business' plan to do the AI part, and I recommend going that route anyway, simply because of the speed. It gives you the free CDN, which really makes it a lot faster. When we're talking about a difference of less than a dollar a month, I think the business plan is the way to go. But it's up to you. I'm just going to click on 'Choose Plan'.

Then you choose the period, anywhere from 1 month to 48 months. I'm just going to do 48 months because that gives the best deal. For example, it might be only $172 for four years of hosting. You also get a free domain when you do this, so that's your address if you don't already have one. Normally you have to pay for that, but in this case, it's free. I'm going to click on 'Continue'.

Then you just register with your email address and make up a password. You'll fill in all your billing address and payment information. I've chosen the option for the 'AI Website Builder,' not WordPress.

Then we get to the screen where you're actually just going to put in the name of your business and a brief description. You've got 700 characters here; I recommend just maxing it out because the more you put in here, the better starting point you're going to get from your AI website. But this is good enough for now. I'm just going to click on 'Create a website,' and it's just going to take a couple of minutes to get all the pieces together.

Okay, so here is our starting point. This isn't done by any means, but it's a great place to start. We've got this nice hero section with a headline and a cool video background, and then we've got all these sections underneath it. It's really easy to add new sections and delete any that you don't need.

The first thing I'm going to do is choose a color palette. This is a really clever way to keep your colors in check so that you're never going too far out of bounds. If you're not a designer, it's very easy to get caught up in what colors work well together and adding too many colors, which can become kind of a circus. The color schemes they've got here are great. Maybe I like this one the most; it's kind of got a nice red in there.

Once we've chosen that, if we scroll down, we'll see this color scheme in action. You've got the red down here, and it just keeps track of all the colors so we can use them wherever we need to. Once you've picked out your color scheme, just click on 'Continue'.

Step 3: Designing Visuals with AI

Okay, so now we're inside of the website editor. The first thing we want to do while we're still waiting for all of our website copy is to probably change our logo. You could just go ahead and keep a simple text-based logo if you want; there's nothing wrong with that. If you did want to do that, you would just click on 'Text' and then you can change the font. You have all these Google fonts at your disposal, so you could just choose something that looks good.

But I think we can do a little bit better and actually use ChatGPT's new image generation capabilities to make a really cool logo in just a few seconds. Let's go ahead in ChatGPT, making sure that we have ChatGPT 4.0 selected (that's the good image generation model). I'm just going to type in this general prompt:

Make a logo for my dog walking business called The Goodest Boy. Make it a transparent PNG file. Make it horizontal for website use.

This will ensure that there's no background color, so you can just lay it on top of any color and you're good to go. We want it to be longer than it is tall so that it looks good in the header space.

Okay, so it took 13 seconds, and this is what we've got. I think it looks pretty good. But if for whatever reason you didn't like it, all you have to do is tell it what you want it to change and just go back and forth with it until you get it. I would just click on the download button to download it.

Going back to our page, I'm just going to click on the logo, then click on 'Image' because we want to upload an image. I'll click on 'Replace,' then 'Upload files,' choose that here, and then 'Select.' It looks pretty good. You can change the size of it too, just with this little slider. It's really nice. What we don't want is something that takes up too much space on top, so we want it to be more in this range here. All right, looking good. I think we can move on.

Step 4: Assembling the Homepage

So let's check on our website copy now. Okay, so here's what we've got. It's got all this research first. It's leading with just telling us what it found in terms of what's going to work best for your industry on your homepage. It tells us all the sites that it analyzed. Then we've got all these 'voice of customer' phrases—real things that real people have said that you can use on your website to make it more powerful. That's great. Then we're just going to keep going down until we get to the actual website copy.

We have two headline options, which is what we asked it for. So here, everything under here is our actual copy. When I say 'copy,' that just means the text of your website; not everybody knows that term. This is meant to be our headline for our website. I'm just going to copy that, highlight the placeholder text, click 'Edit Text,' and then paste it in.

But what if you don't really like the fonts here? What if you want to try something different? All we need to do is go over to the side panel to where it says 'Website Styles.' If we go over to 'Fonts,' we can see all of these combinations. What we're looking at is a headline and then what the paragraph text looks like. All you have to do is find a style that you like. I think I like this 'DM Serif Display'; I think that looks pretty good. I'm just going to click on 'Reset.' Cool. And if you scroll down, you can see it made that change all the way across the board. All the fonts are different. I think this looks nice.

Okay, so we've replaced the headline. Now we need to replace the sub-headline. We'll go back to our document. This is our sub-headline right here. We'll just click on the text, 'Edit Text,' and then we're just going to paste it in. If it goes in as black, then all you need to do is just change the color here to white so it looks right. Sometimes when you copy and paste stuff over from ChatGPT that'll happen, but it's easy to change the color back.

Now, underneath that, we have two buttons. I don't recommend having two buttons here if you want a really highly converting homepage; I think having one is best. So I'm going to right-click on 'Learn' and click on 'Delete' just to get rid of it. I also don't like the text here of just 'Book'; that's really vague. What we've got here is something better. It says, 'Book Your Free Trial Walk'—much more descriptive. We're just going to click on the button, 'Edit Button,' and we're going to paste in our new text.

Then you can see there are some issues happening here; it's not big enough. All we have to do is just kind of drag it to where it looks good. Then, see how it's not centered? Really easy, we just drag it until we get that little line in the middle. Now it is centered. Everything is super customizable here.

But what if we don't want that button to look quite so transparent? What if we want it to be a little more colorful, which I highly recommend for your call-to-action button? I'm going to click 'Edit' again, and then we're going to go to 'Style.' For 'Fill Color,' I'm going to choose our red. Remember what I said about how choosing that color scheme keeps everything nice and consistent for you? This is what I'm talking about. It keeps all your colors here so you don't have to think too hard about choosing something new. I'm going to choose our red, and I think this is shaping up pretty well.

So now we have to talk about the background. This is a video, and I think it's a nice-looking video. My only concern is it doesn't really feel like a professional dog walker, and I don't know that it really goes along with this headline very well: 'Come home to a calm, happy dog every workday.' It's not necessarily about the dog walk; it's about that feeling of coming home and now you get to enjoy your dog who's not stressed out and all that kind of stuff. So I think we can do better than this. I will click on 'Edit Section.' You could choose an image if you want, but I'm going to stick with 'Video' and I'm just going to click on 'Replace Video.' Then you're just going to type in what you're looking for. I would type in something like 'happy dog and person.' We've got all these videos to choose from, so then it's just a matter of choosing which one you like the most. This one seems kind of fun. I like that one, so I'll click on 'Select.' Yeah, I think that works really nice.

Building Out the Content Sections

The first thing we need to do is check our copywriting document and make sure that what we have here is going to serve that content. If it doesn't, we have to come up with a new section block. We have here what looks like a 'problem' section: 'When you're at the office, worry still tags along.' It's basically painting the picture of the problem that your clients are going through. I feel like this could work. It could be the headline, then the paragraph, and it could be an image over here of maybe a sad dog or something waiting for its owner at home. So yeah, let's go ahead and get this going. I'm just going to copy our text and then paste it in here, and I'll do the same for the paragraph underneath it. I don't think these other elements really fit here, so I'm just going to right-click and delete them. As you can see, all this is very customizable; anything that you don't need, you can delete.

Now we have the space for this image. Where do you go to get really great images for your website? You've got a few options. You could click on 'Generate Image.' This is using AI. For example, a prompt could be: 'A dog sits by the front door waiting for his owner to come back home, nice modern apartment setting.' You do get a certain number of credits to create these images. Let's just see what it comes back with and see if it's usable. Yeah, so these dogs are outside, so I don't think it quite understood. Anyway, you can keep going and see if you want to do that, or you can click on 'Edit Image,' then 'Replace,' and upload your own. But if you don't have any, I'm going to show you my favorite tool for getting really amazing AI images.

Here we are on Midjourney. It's not completely free, but it's pretty cheap. You can always just pay for one month (I think it's around $20), get all your images for your website, and then cancel if you don't need it again. I'm just going to type in that same prompt, and a little trick here: I'm going to add --r 4. The r means 'repeat,' so it's going to create a bunch of them all at once. It's just a nice little time-saver. Go and create, and let's see what we get.

Alright, look at all these choices. Look at all these sad dogs; it's worse than an ASPCA commercial. I think almost any of these could work. I'm going to go ahead and choose this one. I like this one. Just click on the little download button. Now we're going to go back here and just click on 'Replace Image,' then 'Upload files,' and I'll click that one right here and then click on 'Select.' Look how nice that looks. It's such a nice, crisp image.

Now let's move on to the next section. This is like 'Dog Walking Services.' Let's see what we have in our document. 'We keep your dog moving and your mind at peace.' This is kind of that 'solution' section. The last one was painting the problem; this one is saying, 'Don't worry, we're here, we got you.' What I like to have here is a nice image of you or your team so people can really see that there are real people behind the business. This is really more about showing different services, which isn't really the section we have here. So what we might need to do is add a new section. It's super easy to do. Just click on 'Add Section.' You've got all these sections here in different categories. I think 'About' is probably going to be what we need the most. Just look at all these different layouts. I'm going to choose this one just because it feels a little different from the others. It breaks the content up so it's not all just an image on the right side. This is a little different; I like it.

You know what to do from here. We're just going to go to our document, copy what we've got, and paste it over in here. And then once again with the body copy. Cool. And maybe you have some statistics right here that you want to use. So I would say something like '150 happy clients'—maybe that's 'over 400 happy clients.' It's easy to change it just like any other text. And '15 years experience'—great. This could be anything, like 'awards won.' You can change whatever it says.

The only thing I would say is this color does not go with our color scheme. So I'm going to click it and go back to 'Edit Text.' And right here, remember it keeps track of all of our colors. Unfortunately, now it's added this blue one to the mix, so we just have to keep track of that and know that it's not part of our original color scheme unless you like it and it works. I'm just going to click on the red and will do the same for this one right here.

And for this image, remember how I said this is the section where you probably want to introduce yourself and your team? So let's get a really good image here of the dog walking team. I'm going to click on 'Edit Image,' 'Replace,' 'Upload.' Now, this is an instance where you probably would not want to AI-generate that image; it should be a real one of you and/or your team. I've got a good one here. Click on 'Upload' and then 'Select.' Okay, so you can see it's a weird dimension, though; it's kind of cutting people off. But it's really easy to fix. You just grab this little white handle here and just kind of slide it until it doesn't cut people's heads off anymore. Maybe slide a little on the bottom and just keep going until it looks good. Then you can just drag the whole thing down to where it looks good to you. Just make sure you're not getting too close to other elements.

Okay, so what comes next? After this, we have what looks like our benefits for working with us. We've got three different benefits, each with a title and a description. I feel like this section kind of works for that. I know it says 'Services,' but if we just change this to say, you know, 'Benefits' or 'Why Trust Us,' and then we probably don't need this little text block underneath it, so I'm going to right-click and delete. Then we would just go one by one and add our benefits in here. I'm just going to copy our first one and paste it right in here, and then our description. And then I'll just take care of the other two as well.

And then we've got this image here. If we don't really like that one—I don't feel like it fits the style, it's black and white—I'm just going to go back to Midjourney and type in something here like: 'Closeup of a happy dog on a leash on a Chicago neighborhood sidewalk.' And I'm going to do the --r 3 again. That'll make over 10+ of them for us because it does four by default. The more you ask for, the more you get. These are all pretty amazing. You know, this one's got three leashes; you will find some problems sometimes with the AI-generated images. I think this guy looks pretty happy. I'm going to click on him and then just download. We'll click on the image, 'Edit Image,' 'Replace Image,' and then 'Upload files.' And there it is. Click on 'Upload' and then 'Select.' Looking pretty good.

So we haven't really talked much about backgrounds yet, though. What if we wanted to switch it up? Because right now, it's kind of a lot of white background images. What if we wanted to make this a little more colorful and a little more impactful? Well, just choose the whole section, 'Edit Section,' 'Background.' We'll stick with 'Color,' and let's see what our red looks like. I think that works pretty well, and then it gives a little bit more visual impact for a really important section like this, too. And if you ever want to move things around, like if I feel like this might be a little too far away from that text, we can kind of move this here. We can find this little handle here that says 'Section Height,' and we can just move this around as well. So there are a lot of things you can do here.

Let's check out what our next section is supposed to be. It's a testimonial section. Let's see what we can find here. We have a testimonial here. I think we can do better, since if we have multiple, especially. Let's go ahead and swap this out with a different one. So I'm going to click on 'Add Section,' and we'll go down and find 'Testimonials.' I think this one's pretty cool; it's got four right there. So let's say you've got, you know, four great testimonials. I'm not going to change these; we already know how to do it. We click on 'Edit,' just change the actual text and the person's name, and then we would just choose the images by clicking on them, 'Edit Image,' 'Replace,' 'Upload.' I'll choose that one and then 'Select.' All right, and I'm just going to quickly do that for the rest of these.

All right, and next up, we have this kind of call-to-action section. A simple one that just says, 'Ready for worry-free walks to fit your schedule?' Then we have a button. So let's see what we can find here. I'm just going to click on 'Add Section.' They call this 'Main'; I'm not sure what 'Main' really means, but this is kind of that type of section. So I'm just going to do one without an image. I think just something right here is nice. And then we're just going to pop in the text that we have. We don't really need this other text, so I'm going to right-click and delete. Let's move this up a bit. And what if we actually want this text to be on two lines instead of three? What I'm going to do is just kind of drag this out a bit, and then I'm just going to re-center it. The one thing I'm worried about now is just this whole section is very tall, and I don't think it needs to be. So I'm just going to line this up about here on top, and I'm going to move this closer. And then I'm going to go right here where it says 'Section Height,' and I'm just going to kind of eyeball it right about there and maybe just kind of re-center stuff. Looking good.

But let's go ahead and make this background section dark. So let's click on 'Edit Section,' 'Background Color.' Let's choose one of these dark colors that it came with. I think this one looks pretty good. Now, obviously, we've lost our text pretty much, so we have to click on that, 'Edit Text,' and then we'll make this white. And then we want this button to be the exact same as the one at the top. So I'm just going to right-click and 'Copy' the top button, and I'm going to go all the way down here and then right-click and 'Paste.' So we've got that. I'm just going to delete this other one, and then I'm going to move this right about here and make sure it's centered. And I think that's great.

Now, I think the only section we have left is an FAQ section. So we're going to go back here and click on 'Add a Section,' and then we're going to find 'FAQ' right here. It's a pretty simple section, so I think a nice two-column layout might be the best. I'm going to choose this one. I'm not going to bore you by changing all this; we already know how to do it. Just click on 'Edit Text,' and you're just going to pop in your FAQs and your answers along with it. I'm just going to do that really quick on my own. You get the idea.

So now the only thing left to do is we have all these other sections underneath that we don't need anymore. So I'm just going to click on this section and then go over to the trash can to delete it, and one more time. Then just go ahead and put in your business name here. You can put in your phone number. I don't recommend putting in your email address; it's much better for people just to fill out a form to email you than to publish it. You're going to get a lot of spam that way. And just click on each one of your social icons, and then you just put in your own links. And you know, if you don't have TikTok for instance for your business, you just click on the gear and delete it.

And then the only thing left to do is to preview it just to make sure it looks good. This is what we've got. I think it looks pretty nice, and it definitely has all the right information to convert customers all on its own. So one last step is just to click on 'Go Live' to make it actually live so people can see it.