Learn how to build a Landing Page with AI - Lovable & Cursor

When you build a landing page with AI, there are 3 things to keep in mind:

• It always takes longer than expected
• AI loves to make mistakes - but it got much better with reducing them by itself
• Don't forget to be specific

I will shed light on all these parts later on, but lets get started.

Find a base design that excites you

Head over to Framer Templates or any kind of Website Templates site or just a normal website that you like (i.e. Webflow, Wix, Wordpress themes, normal pages you like on the www) and pick a design that excites you.

Take these things into account when picking one:

• You can basically change anything rather easily from the start, so focus mainly on the structure and design, the fonts and the way it is designing the core elements
• Look for templates that already include at least part of your industry or branch, that may help you later to have the key elements included
• The more complicated what you want to build the more it may take time, all doable, but keep it in mind
• Don't overthink, you can change all of it later anyways, it is mainly a starting point for you and the AI to help it build correct from the start so that you do not have to make too many changes later

Screenshot your Base design

Once you found your base design. Make screenshots of it. If you have code for it, even better, then copy-paste the code, but for most of you, I presume you only have the screenshots, and that is totally ok.

Pick your Base Coding AI

Once you have your design you can pick from a variety of Base Coding AI - I will share though one version with you today here that will be focused on Lovable and Cursor.

• Benefit: You have a working site fast
• Issues: For some projects, Lovable has a specific style and it takes some time to change it, so Cursor may be the better choice if you want something very fancy or very different

Build your Base with Lovable

Go to Lovable.dev (Free for 5 messages a day, so you can build for a week and get rather far, or $20month for starters, good to get started and you should be done with a base website by then - on the other hand think how complex and time consuming it is if you ask someone to do it - costs way more)

Once in Lovable - describe what you want to build and add up to 10 screenshots to the description.

Here is an example:

What you need to take into account when writing your prompt:

• Objective: What is the purpose of your website. The more specific the better the AI can adapt the content of your page
• Structure: What pages you want to have, start with the base. You can always add more.
• Colors: Do you have specific colors in mind? Or want to change based on the screenshots, write it down.
• Anything else you want to do. But also don't overcomplicate the AI, you can change that later.

Improving your Base

Once you are done with your base design, you should see the first version of your website. Done 😄

You will see an already rather advanced and yet at parts very basic website. Some of you think Lovable is a magic wand and will be disappointed, others will be positively surprised, depends on your expectations.

Whatever it is, there is some way to go from where it is now to where you want to have it. And obviously, the more complex, the more time-consuming it will be.

Now it's time to improve your Base Website.

Here are some tips on how to do that:

1. Pick a Problem: "I see that the color in that text is wrong"
2. Describe the vision: "I want to have that color to be more green, the hex color #... or it should be blue"
3. Repeat

That's it. That is what you do over and over again until you are done.

Here is an example:

And again, there are various methods to make the most out of this process:

• You can ask for several things at once, but try to keep smaller changes together and not ask for 100 different complex changes. Make the AI aware of the different tasks like by saying 1, 2, 3, or do use // or – between the different topics. Somehow separate them
• Be as precise as possible. The more precise youa re the better answers you get
• If you work on something a bit complex, make sure to add a sentence a la "all else equal" at the end, telling the AI that it should really only focus on that task - as it sometimes changes more than one thing at the same time and that is tedious then and quite frustrating
• AI may suggest more complex systems, APIs (connects to other systems) and Supabase (a database, free for the first 2 projects, costs $25 base and $10 per additional database after that), which can be very powerful, but also a bit confusing at the start. If the AI suggest you to work with them, make sure to ask it for help - "Can you guide me step-by-step through the process please" and if you dont get the answer, ask again "can you make it more specific for me, never worked with Supabase". Over time you learn how it works, and you can connect the database. For basic landing pages that is not really necessary. Only for i.e. an email program or contact form, but then you can also do that via i.e. an email sending program, i.e. Resend or else.
• If AI makes a mistake and there is a sign - fix it, use the time and fix it - especially with complex websites you are otherwise running into problems later and that would be highly annoying - i.e. a white screen, often easy to solve, but sometimes very sticky

Improving your Base - Advanced

If you feel more advanced, there is one other thing you can do to make your website more special and specific, to add more interactions and have more flexibility in how to build it.

This mostly is relevant when you want to build more complex websites, but can also be helpful for simpler ones when you want some special functions that Lovable does not seem to be able to handle so well and you asked it to improve that specific function 10 times and still nothing happens.

How it works:

In Lovable, you can connect your data with Github, which is a place, where you can host and save all your code-bases, and what Lovable is building is essentially the code of your website displaced in this nice visual preview on the website so that you never see the code, even though it is there.

Once you have your code in Github, you can download it and use it in other programs, make changes to it, adapt it, as to your liking.

That is great, as it allows you to make more changes, give it to developers for more complex changes or just to have another space where you have it saved.

1. Connect your Lovable to Github, You need an account for that. It is free.
2. Once the code is there, download it into a Coding Environment - I use Cursor here for you (Free to $20.month)
3. Github explains how you get the code in there and how to download Cursor is what you find on the website there
4. Once done, and you have your code in Cursor you do the same as in Lovable - you talk to your AI Coding Assistant in Cursor. And say - Here is what I see, that is not correct, here is what I want to see/experience/have, please change that. Same rules apply.
5. Once you made changes, you can "commit" them back to Github - Ask Cursor how to do that and then you have the code back in Github and can then view the updates in Lovable visually.

Publishing your Page

Once you made all the changes necessary for your page, you are done and can publish your page. For that you have two options:

Lovable

Simply press the Publish button. And the website is live. You can add another domain and done. Very practical, very fast.

Cursor

If you prefer to publish it individually, you should have a bit more knowledge of programming - but could do that via i.e. Vercel (only frontend) or Railway (both frontend, backend, databases) or various other platforms. Keep in mind that this is more complex and you should ask AI to guide you through the steps to get yor product live soon. If you haven't done that before and never tried Lovable before, I would highly recommend you do that first.

And voila, you are done! Love to see your websites live and in action!