How To Build A $10,000 Website With AI in 44 Minutes (Lovable ChatGPT)

Is it possible to design and build a $10,000 website using just AI tools? Well, today I'm going to try and do exactly that. I'm going to start my stopwatch.

I'm going to record the entire process from start to finish using Lovable 2. 0. And let's see if we can design and build a $10,000 website using just AI.

If you don't know me, my name is Chris and for the last 15 years, I've been designing websites and apps for startups and advising startups on product and design. And so with that said, let's jump straight into [Music] Lovable. So here we are in Lovable 2.

0. We're going to try and create a $10,000 website using just Lovable and ChatgBT image. Um I'm going to start off by putting the prompt in here and then I will start the timer.

I'm going to spend a bit of time just going through the prompt a little bit because it took some time to write that prompt and I really do think you have to spend a bit of time writing a really really detailed first prompt. Lovable can be a bit um finicky to use going back and forth between the chat and sometimes it does stuff that you don't expect or it will revert things that you didn't ask it to revert if you're not clear enough about what you want. So, I think really spending the time and getting that first prompt really, really detailed, really clear about what you want and describing everything in detail can be really, really helpful to getting the best output here.

It's especially useful if you know design terminology and you know a bit about the code terminology as well and exactly kind of what fonts and styles and things that you want to use and to be explicit with those. Um, one other thing that's really important is to use a really really good reference image. So, I'm going to um a reference example.

So, if you go on something like curated. design or godly. website or superhero.

io, there's really really good examples out there of amazingly designed websites and and landing pages that you can attach here as your example and kind of use that as your base style guide for it to follow. So, I've pasted in the prompt here. Um, I'm going to start the timer now.

Let's start the timer and let's go through this and see how quickly we can get this website designed and whether it's going to be worth $10,000. Um, so I put in the prompt, but first I want to go through just what I'm defining as a $10,000 website. So I would say $10,000 website from a strategy point of view, it follows best practice for conversion.

It's optimized for business objectives like downloading an app or signing up for a weight list or buying a product for example. So there's best practice all around that in terms of like how do you structure a page? What terminology do you use in the copy?

Um a lot of that stuff might be provided by a client. So you might get like a briefing document or you can ask like in a project for them to provide some of the copy or you might have existing copy that's on their website already that you want to use. Um, obviously we can still improve that.

And for this project that we're doing as the example here, we don't have that copy document. So, we're just going to let Lovable write it and see what it comes up with. Um, and it should also align with brand identity and strategy.

Um, and that one again will be like there'll be assets provided by a client. So, you'll get a logo, you'll get the colors, you'll get the typography, you'll get their mission statement, all of that kind of brand strategy stuff and tone of voice as well um to feed into this. And we're going to do a bit here whilst lovable is loading after I've put the prompt in and submitted it to create a logo with chatgbt image and then to create some other icons for some of the sections that I've asked it to create from a design point of view as well.

It needs to be professional polished look and feel. It should be responsive across all break points. Have custom images and visuals.

Maybe some 3D thrown in there. So we're going to do some 3D here as well using spline. uh some page animations, element interactions, subtle details like glass effects, blurred backgrounds, that sort of stuff.

It should be ready to deploy um as well in this instance, I think, ready to actually put on a live um a live website. Now, you can get like $10,000 website projects and even more where it's just the design side. But I think more and more nowadays, people want it to be actually built, even if that's in like a web flow or framer or in if you're doing it in lovable be ready to deploy onto an actual live domain.

Should be performant as well. So, it should it should meet um performance criteria. So, fast page loading time.

You can do Google page speed uh insights. It's a bit of an old school thing. I'm sure there's other ways of doing it now.

And it also probably has multiple pages. So, it probably has an about page, contact page, blog page with blog articles, that sort of thing for $10,000. Again, some tips quickly for Lovable before we get into the prompt.

Be as detailed in your as possible in your first prompt. Use great references. Tell Lovable what not to do as well because otherwise it will go off and do like other things that you don't want it to.

Talk in the language of code. So, Tailwind, CSS, React. it tends to default to tailwind unless you tell it to use something like shad cen as your design library and also group amends together.

So you don't have to just do one amend at a time. It can be quite timeconuming going back and forth and also to help you from a work efficiency point of view. If you group your amends together, you can pop it into Lovable or whatever AI coding tool you're using, send it off, the AI will work through those amends, and you can go off and do something else as we're going to kind of do here whilst we're whilst we're building this website from the initial prompt.

So, and I'll post the prompt here as well um in the comments once I've posted this video. So, to go through it really really quickly and I'm just going to do it quickly so we can get into like actually seeing what it's going to build. I have done here create a luxury feeling high-end website as if you're a senior website designer.

So this can be quite good to give it like an idea of who would be making this to give it some context working with startups and it's going to be for an AI an AI crypto trading app called Lunexa which is just like a madeup name that chat GPT gave me. Um I want the website to feature the following pages. So it's going to have a homepage, about page, contact us, a blog page with four blog articles already populated.

For the homepage, I want it to have a hero section, title, copy, and get started button centered with a large image underneath showing the product UI using the attached image mockup. So, you can also put in other images that you want to use in here that you want to use in your website. And so, if you're creating those assets or you've got those assets already, you can pop them into your prompt and add them to that so that it's going to add that to the website when it creates it.

I want the homepage to then feature a featured in section showing logos of publications the app has been in testimonials which I've misspelled there. So that's wonderful. It will get that fine anyway.

Um with a scrolling carousel of testimonials. Each testimonial should have a result that the user got as well. Um and you can be explicit about the copy that you want here as well.

Even like attach a copy document that you want to or like a some like a copy dock that you want to um populate the page with. How it works section with three cards. So, connect your wallet, set up your AI system, automate your trading.

Each card's going to have an image, and we're going to create some icons using chat DBD image for that as well. It's going to have a features section with a grid of four features: mission statement, pricing section, FAQ, and a footer. The website should also have the website should also have a top navigation with only anchor links to all the sections on the homepage and not a link to any other page.

This is getting into that best practice thing. So, the reason that I want to do that is because I want people when they land on the landing page to only think about converting and clicking that get started button. If the other pages are going to be pages that people generally will come into, especially the blog posts, um they'll search for something, they'll click on a a blog post link, they'll come through to the website, and then they'll go onto the homepage or somewhere else to to get started.

So, you're kind of thinking of that funnel approach to the website of trying to get everyone into that get started kind of point. Style-wise, I want to use inter with a light font weight, tight letter spacing on the headings, any text should have low opacity that isn't headings, using phosphor icons. So, be really explicit about what you want to use, the fonts, the icon libraries, that sort of stuff.

That's going to really help here. When the page loads, the content should animate. You can be really clear about the animations you want as well.

So, it's going to go from zero to 100% opacity, animate up, also animate the sections and components with opacity and blur as the user scrolls down the page. So, this just helps to add that kind of luxury designed kind of feel. And from the tablet breakpoint down, the navigation menu should collapse to a burger menu with an animating full height tray style um menu coming in from the right and animating out when it's closed.

And that's my prompt. There's probably some more detail that you could add here, add in here, but let's just submit this and see what it comes back with. That's about 7 minutes that we spent just kind of going through what stuff is, and that's about how long it took me to write this prompt.

So, the last thing that I want to do here is I'm going to attach my um reference screenshot. This is uh reference. I'm going to attach my reference screenshot that I wanted to use as a reference.

You can see below here, I've tried to do like this kind of thing a couple of times before just to see like if this was going to work or not before doing the video. I'm also going to put here do the website design to match the attached image to match to match the style of the attached image reference. And then we're also going to put in the mockup that I created here.

So I created this mockup also in lovable before do before recording the video just by prompting it to make a dashboard app for the same uh company using the same reference image. So you can do that alongside um building the website even to get it to create mockups. So let's submit that and see what it comes back with.

Quick break in the episode to ask you a simple question. If you could double the revenue of your product or even just add 10% by watching a simple 30inute video, would you watch it? Well, that's exactly what I've done for other startups over at telescope.

design/unlock. You'll get an easy to follow actionable 30inute video of me using your product and identifying the biggest growth opportunities so that you can unlock real revenue, real customers, and real growth. And with that said, let's get back to the episode.

So whilst lovable is doing this, we're actually going to go over to chatgbt image and we're going to create a logo for Lunexa, which is the name of the app. So I'm going to use a reference image here, which is this kind of techie startup kind of style logo. And this is a really easy, you can do this really easily with chat GBT to kind of create images from a reference that look very, very similar.

It's really, really great working with references to kind of match a style. And I've put together a video on how to create kind of like a a V1 of your brand of your B on how to create like a V1 of your business or your startup logo if you're just getting started with chat GBT image using references. So you can go and watch that as well.

Um let's say a logo for a crypto startup called uh Lunexa with no logo mark. And let's see what it comes back with here. It should do.

Sometimes you might need to specify like that it should have a black background with white text or the other way around. The reason why, but I think it's going to do that anyway because of the reference here. The reason why I'm doing the black background with the white text on top is because I want to remove the background here.

It's going to be a dark mode kind of themed UI for the for the website. So, we're gonna we're gonna then take the asset that ChatGpt creates, put it into a background removing tool, and then use that PNG to replace the logo in the navigation once Lovable has pulled the design together. Here we go.

So, let's download this image and let's put it into the Adobe Express background removing tool. This logo isn't worldbreaking, but if you wanted to do something more, you could spend a bit more time doing this and prompting it with a better example or telling it a bit more explicitly what to do. So, that background removing tool didn't actually work in this instance because it's black.

So, we're going to open Photoshop and try and do it in there instead. Lovable is still working through building this. This is quite a big prompt, so it's going to take a little bit of time to actually put this together.

So, one thing that I'm going to do whilst this is whilst this is um loading is I'm just going to go over to Spline. So, if you don't know Spline, Spline is a webbased 3D design tool. There is a great community on Spline.

So, you can find other people's projects that they've built and remix them to your own account. And so, if I go into the community here, um you can search the community. You can see what's popular, what people are remixing.

So, I've just taken one of these to use as the as the background. We're going to use a 3D asset basically from here as a background to the page. So, I'm going to I chose to use this purple globe cuz it kind of matches the style of the website that we're designing.

And it will also work as like a background behind the UI mockup and the text at the top of the page, I think, especially with like a layered opacity on top of it. You can see I've duplicated this to my account here already and I have just turned the background um to 0% opacity so that when this is layered on the web page that's not going to affect the background that's sitting behind it. All we need to do here is click export and then grab the embed code and we'll and we'll put that into lovable and we'll tell it to put that in the background of the website and that should work.

What I'm going to do still whilst this is loading I'm going to go back over to chat GPT. I'm going to create a new chat and we're going to do some 3D icons for this web page. So, I've already specified the type of content that I want in the how it works section.

It's going to be connect your wallet and then an AI assistant and then a automate your trading card to tell you how it works. So, what I'm going to do here is going to go create image. I've already saved a mat cap, which is a material basically that you can use to um for for creating 3D assets.

We're not going to create a 3D asset in chat GBT, but what we are going to do is we're going to use this material image as a reference for creating an icon set that is bespoke to this company, Lunaxa. So, we're going to say create image um a an angled 3D icon for for a crypto wallet. So, that will be like the connect your wallet icon.

Um and let's say let's see what happens here. I should have put in white background here as well. So that this would have been best for the background remover tool, but we can just prompt it afterwards again just to say change the background to a white background.

So you can see chat GBT here has created that icon in the style of the material that we provided it here. I think this is going to work really really good for the website. It might not be 100% the exact style, but for the demonstration that we're doing here, I think this is going to be perfect.

Uh I'm going to download this. I'm going to put it in the background remover and then we're going to save that as an image that we can use on the website and we're going to put that into Lovable and tell it to update those icons. Lovable is still working.

So, Lovable is going to take some time and that's the majority of the time spent here building the website is actually waiting for that big prompt to be created. And what we're hoping for is that when we get into this website that it's going to create, it's going to be as close as possible to the final design and we can just basically go through, write a list of amends that we want to do, put that back into Lovable, and hopefully we're going to get like 70 or 80% there to like the $10,000 website just by doing these first two or three prompts. Okay, so we have the first version of the website here.

We've got an error. So that's fun. So, let's see what there is.

There's a link that's not defined. I think Lovable can fix that pretty quickly. There we go.

Look at that. That is a pretty good website, I would say. It's got all the stuff that we asked for.

There's lots of animate. There's nice animation, subtle animations here going on. You've got your space for your images here.

So, we're going to put in the images that we created and the icons that we created here. The style isn't exactly right how I wanted. is used this image as the mockup here, which is great.

So, what I want to do here is I'm going to go through these buttons are great. That's not hovering correctly. And that link isn't working correctly.

So, what I'm going to do here is I'm just going to go through now and make a list of all the amends that we want to do and um give that to lovable to kind of do in one go. So, let's write out a list here that Lovable can work through. So firstly want to replace the logo with the logo um image attached.

Then we want to change the background to a much darker color to a very dark gray. dark gray with purple glowing um with subtle purple glow. Um we're going to see.

So, it helps to be really specific here with lovable. So, I'm going to say very dark gray because I don't want it to be fully black, but I do want it to be um it might be good here if I actually use like a a hex code color reference instead. Um, let's go through and make these amends super quickly.

What I want to do here is I want to have a hover effect on these cards so that it zooms in slightly when you hover. So, what I like to do is I like to do all of these big changes grouped together and then after that we'll do all we'll go through and we'll do all of these little changes individually. We might not have time for that in this version, but um we'll try and maybe do some we're going to add the spline 3D background here after this as well.

Contact support. Those glowing buttons are super nice. I think that's it.

I think that is all of the amends that I want to make here. So, let's put that into Lovable and then see what it comes back with. So, we've attached the images here.

We've done the prompt. Let's send it off and see what Lovable comes back with. Okay, so Lovable has done most of these changes, not all of them.

I would go through and like tweak some of these. So, you've got like look, you've got the animation on these cards here, which is super nice. These animate as well.

Um, it's done the background um darker at the bottom. It's more like a gradient rather than the actual what I kind of wanted to create here. Um, so I'm going to try prompting it again to do a couple more of these changes a little bit better and then we're going to put the spline 3D asset in the background and then I think we've probably got what we want.

One thing I want to do first though is check the other pages that it created. So we've got an about page. So that's looking pretty good.

It's got meet our team, join our journey. There's some issues with the backgrounds here in these sections, but most of this is looking pretty good. I would do like there's a lot of little design tweaks here, I think, which are like around sizing, images, icons, background colors, the height of these cards, for example, should all be the same.

All of these little details is what really elevates that to that $10,000 website, and that's what's going to make the difference. So, if I go over to the blog, so we've got the blog created here with each of these blog articles. These actually look pretty good.

Like the formatting of the text here is pretty bad. Um, but the actual layout of this is pretty good. You've got your share icons.

So, Lovable can fill in a lot of the gaps that you're not saying even when you do a big prompt like this. So, I didn't actually specify like how what the content should look on a blog page or where it should link to or any of that stuff. We've also got a contact form here, which looks pretty nice.

Let's go back to the homepage and try and get this closer to what we want. So, what I've decided to do here is actually just to use a reference image to get the background looking how I want to and see how Lovable works with that. And what I'm going to do here is I'm going to tell Lovable to do it in the same style as the image, but don't use the image.

Because Lovable has a tendency to do things you don't ask it for, and it can misinterpret sometimes. So, it might actually just take that image and use that as the background image. But what I want it to do is to match that style, not use the image.

There we go. Look at that. That's so much better.

So, that's a good tip for Lovable if you're working with it to do this stuff is just to use reference images can actually really help make it work a little bit better. Um, this is now looking pretty nice. I would say that footer does not work with the background color.

Everything else is working super nice. I might like tweak that light. put this this purple color a little bit.

Let's do the finishing touches on this. Let's add in the spline background and then maybe we can do a couple of other tweaks just before we finish up here. We're at 35 minutes, so we're clocking pretty good for time.

Um hopefully we can do this in maybe like 5 or 10 more minutes max. Um let's see how this goes. So I've added the spline background here.

It is looking nice, but it's causing some issues with readability on this text here. And the button is also kind of fading into the background a little bit. What I'm going to try and do here is I'm going to try and change basically I had to like position this slightly higher than it first added it and now it's gone way too far the other way basically.

So what I'm going to try and do here is I'm going to try and go into dev mode and actually change the code. And I think this is where like if you understand a bit about Tailwind or the code or whatever you're kind of using, it's easier to actually jump over to dev mode and make some of these changes manually rather than kind of prompting the chat and hoping that it gets it right with vague terms. You can like make a change in dev mode, quickly go back and forth to see how it's affecting it and get it exactly right.

And that really helps for these detail changes that you're making. So you can see as I'm making these changes, it's kind of hiding that a little bit more behind it, behind that mockup. That's kind of good.

I'm going to try and do it a little bit more. So if I go into dev mode, you can see here it's this top. It's told me what it is.

And you can ask the chat if you don't know exactly what it is. I'm going to do minus 5% here and change. Save the changes.

And then see what that looks like. That looks better. So now let's try and go in and make the margin at the bottom of this top section a little bit more.

just so that we can add some space between that 3D and the mockup image. So, one thing that you can do here that is quite useful if you're not um exactly sure of what you're looking for is you can open this in the preview mode and if you do inspect and then you highlight the element that you're looking to change. So, we want to change this section here uh the here.

Okay. So let's we've found what we want to amend. This orange bit on the bottom here is what we want to do.

If we go to computed, you can see the margin there. So that margin in Tailwind is going to be MB, which is MB12. So if looking for this hero, we're looking for the hero component in the code and we want to change that MB12 to something like MB24, MB40.

That's margin boss basically in Tailwind. So let's go back over to here. We're looking we're in the hero.

tsx component and we're going to go to this this div for these buttons. You can see MB12 is there. You can do Ctrl+ F and search if you want to.

Let's change that to MB MB32 and save those changes. Okay, we need to do a little bit more. I'm going to tweak it just to change like the top here to like minus 2%.

And then the MB on here to MB 40. Come on, we're nearly there. We're going to stop the timer after this.

There we go. We're there. Perfect.

We've created what is nearly a $10,000 website with multiple pages with a professional and polished looking design style after about five or six prompts here. Some of the stuff needs a little bit of tweaking. And that's where I think like this isn't 100% a $10,000 website, but what would take it to $10,000 is spending that extra one or two hours now just going through making those detailed changes, making sure that everything works.

Um, all of the links clicked to the right places, filling in the metadata, um, updating some of these things that aren't 100% correct, like this. You still have this little fade section here above this, which I would want to change, but to be honest, and it cuts off the spline here, which isn't great. Um, but to be honest, this is looking pretty damn good.

And you could feasibly do a $10,000 website in a day, maybe even half a day. and where that sort of project would take a creative agency or a freelancer literally like one or two months to do at the moment with previous tools. So this is a huge huge huge win for Lovable and what you can create here and I think website projects, app projects, development agencies, creative agencies, they're all going to change pretty soon.

So let's stop the clock there. We've got we're on 44 minutes. So, creating a $10,000 website in 44 minutes, minus a few little tweaks here and there, maybe a bit more than a few little tweaks, but we've got something pretty damn good here.

So, can you make a $10,000 website in under an hour? I'm not 100% sure you can. We got pretty close.

I think you can get 70 to 80% of the way there, but I think it's going to take a little bit longer than that to make a website that you could feasibly sell for $10,000 in half a day or a day. Yes, absolutely. But I think the devil is in the detail.

It's in those small little design tweaks. It's in those small little functionality tweaks, those small interactions and detailed animations, those small text formatting things on the pages, and making it absolutely spot-on because that's really what you're paying for in a $10,000 website. Let me know in the comments what you thought of this website and how you're using Lovable, what prompts you, and if you have any other tips and tricks for using Lovable.

If you liked this video, don't forget to subscribe. Otherwise, you can sign up to my newsletter over at buildgreateproducts. com.

Thank you for watching and see you next time.