The Landing Page Workflow I Use for Client MVPs

Hey, I hope you're doing well. So, a lot of you guys have been asking me for my updated landing page workflow that I have been using lately for building client projects. And honestly, it hasn't

client projects. And honestly, it hasn't changed at all since the past year. I

mean, there are a few tweaks, but nothing major. It's just that models

nothing major. It's just that models have become a lot smarter. These have

become a lot better. And that is why my landing page quality has also become a lot better. So, this is the landing page

lot better. So, this is the landing page that I shared and a lot of you guys were asking me that how I built it.

Literally, I mean, I built this inside Liverable completely and took me like 10 to 15 minutes maximum. Let it load and as you can see, pretty decent landing page. Nothing fancy, but more than

page. Nothing fancy, but more than enough for your MVP. So, let me take you through it. This has this cool looking

through it. This has this cool looking uh you know feature section. Then we

have this your financial command center with this AI generated dashboard for now and so on. Another one is this one with this AI avatar. So, if I go down, you'll be able to see this bento grid of the

features animations here. this cool

looking grid of different athletes that we have and so on. So before we dive into the workflow, I first want to talk to you guys about something really important and today we even have this

presentation ready. So let's talk about

presentation ready. So let's talk about build your MVP landing page without Figma. A practical guide to shipping

Figma. A practical guide to shipping fast and validating. So I have seen a lot of beginners make this mistake and that is why I wanted to cover this first before we dive into the workflow. Okay.

So why our MVP landing page doesn't need Figma? People overdesign before

Figma? People overdesign before validating them. So okay, hear me out.

validating them. So okay, hear me out.

If you are building an idea that only you care about right now, I still are hearing designers you know who uses Figma who are perfecting each and every inch of a landing page. You don't need that right now. The only one who care

about idea all you need to do is follow this workflow I'm going to show you and get your landing page in the next 1 hour max. It is more than enough for you to

max. It is more than enough for you to validate your idea. Figma plus designers make sense only after traction. For your

first 10 to 100 users, speed is over perfection any single day. Over

complicated workflows slow you down.

This is the truth. I mean you will you must have seen all of these fancy workflows. Even I have been showing a

workflows. Even I have been showing a workflow where I build these cool looking animated uh landing pages. Let

me show you that on my Twitter. One

second. Honestly, this all did not take me much time. That was like 15 to 20 minutes max to max. Where is it? Where

is it? This went viral lately. Is there?

Okay. So this one you will be able to see that this is a pretty cool looking hero section that I built inside Kzer in like 10 to 15 minutes only. As you can see, you know, whenever I scroll down, this entire keyboard disassembles itself

and you will be able to see this beautiful looking animation. And I have also shared it workflow. So, feel free to check it out. But yes, in the beginning, if you're building an MVP, don't spend this amount of time uh you

know on a landing page. You don't even need to over complicate it this much.

Okay? Just stick to the workflow that I'm showing you today. And once you start getting user, then you can switch to that. One second. Uh okay, so the

to that. One second. Uh okay, so the goal the Okay, so the goal is to ship and test not impress designers. Okay.

your users don't care that much about a landing page and what I showed you before that is more than enough. Okay,

so now let's start with the workflow.

You have to start with visual inspiration and not prompts. This is

very very important. Go to dribble and find a landing page that you like. Match

the vibe, color palette and layout structure. Screenshot the design instead

structure. Screenshot the design instead of describing it. Visual references beat long text prompts. This removes

guesswork for the AI. Providing AI with screenshot is the best way for you to let it know that what exactly you are looking for. So let me show you how you

looking for. So let me show you how you can do that. You can just go to dribble and here you can look for let's say you know SAS landing page and then you can just scroll through all of the designs and like and you know just screenshot

the one that you like. You will be able to see that there here we have so many beautiful looking designs and these are designed by uh you know great great designers. So you don't have to reinvent

designers. So you don't have to reinvent the wheel at all. Just go to any landing page that you like screenshot it and then take that inside correctum GPT snap prompt. I'll show you that in a while.

prompt. I'll show you that in a while.

Uh but yeah I uh actually I just realized that I was recording the video and I had already you know started showing you how I was building the landing page but that part did not get recorded but basically I took the

screenshot of this particular website.

So this is an recruitment and hiring platform website UI wave design and then I took that into snap prompt. So if you don't know what snaprompt is this is a custom GPT that I launched last year. So

basically you take any design you put that into it and then you prompt it that what exactly you are trying to build. So

as you may be able to see I just put that screenshot. I said I am building

that screenshot. I said I am building Ignite Labs a company for recruiting AI for developers for firms and that is it.

It went ahead and it gave me the entire project summary and the prompt that you will be using in the next step inside never. So as you can see we have the

never. So as you can see we have the design system typography spacing and layout border and radius. We have the page structure the navbar hero section recruiter match preview etc the component specs. What you have to do is

component specs. What you have to do is you can just go through it and if you don't like anything you can update it.

But usually I have seen this first prompt is more than enough for you to get started. Now once this is done,

get started. Now once this is done, let's move to the next step. Okay. Okay.

Okay. Okay. So the next step like I said is turn the screenshot into a proper build prompt. Upload the screenshot to

build prompt. Upload the screenshot to snap prompt my custom GPT. The link of which you will find below in the description. Briefly explain a product

description. Briefly explain a product and brand. We already did that. Let the

and brand. We already did that. Let the

GPT generate a detailed prompt. This

awards generic AI looking layouts. And

then just paste the prompt plus screenshot into lovable. So now let me show you how exactly I did that. You'll

be able to see that the first uh uh with the with just a single prompt we were able to generate this looking landing page. Pretty cool. And let me show you.

page. Pretty cool. And let me show you.

I just took that exact prompt from snap prompt. You will be able to see we are

prompt. You will be able to see we are building the nightlabs market marketing landing page. And where is it? And I

landing page. And where is it? And I

just pasted it and along with that I pasted the screenshot. Make sure in the beginning you have the chat mode on. If

you don't know what I mean by that, let me open livable ones and let me show you. Okay. So make sure that this button

you. Okay. So make sure that this button is turned blue and then you have to paste the prompt here along with the screenshot that you took and that is it.

Click on enter. Once you do that will start going through your prompt and then it will start asking you some questions.

So let me show you the ask questions that it asked me. So it asked should this be a single page landing page anchor scroll navigation or do you need separate pages? I wanted a single page.

separate pages? I wanted a single page.

So I did that. I told it that I need only the UI not a back end. And this is the question that Noval asked me. I did

not you know prompt it differently for the dashboard mockup and pro previews shown in the reference. Should the these be static visual cards or animated? I

just said kept keep it minimal because else it does that you know overly done scroll animations which don't look good at all and that is why I just stuck to the minimal thing and that is it. I just

asked it to then you know it then went ahead and created the plan. So as you can see here's my proposed plan. If you

want you can review it. And then once more I just asked it to make sure. I

just attached a screenshot again and said yes the plan sounds good. Just make

sure you refer to the attached image too along with the plan. And that is it.

With just a single prompt it was able to generate this landing page for me. So

let me open it in a full screen. Let's

give it a minute. Okay. So as you can see this is the landing page. We don't

have any scroll animations right now because I asked it to keep it simple. So

this is the hero section. Request

introduction. Request introduction. Uh

looks pretty good how it works. Booker

demo as you will be able to see it did a pretty good job on the first prompt itself right this part see it copied this part from here you will be able to see that we have this right so it was able to even replicate that with just a single prompt one second okay so let's

scroll down okay so we have trusted partner cloudly apply camera startup etc nights for better hires pretty cool looking section this entire page is also good looking okay now we even have

something in the dark theme didn't we have that inside the main page okay as you will be able to see supercharge recruiting career and this was also in this dark theme. So, it replicated that and we now have this in the dark theme.

Recruit review match higher simple.

These are the steps and this is the footer. As you will, as you'll be able

footer. As you will, as you'll be able to see, lovable did such an amazing job at the first try only. And honestly,

this is fine. If you're building an MVP, you can just proceed and then just use this exact landing page. But still, I want to show you how you can refine it to look even better. So, let's get to the next step. Okay. So, the next step

is upgrade the page using real components. The first level output is

components. The first level output is correct but generic. Not really generic honestly. I mean I thought that it would

honestly. I mean I thought that it would be generic but it did a pretty good job.

Now you want now what you have to do is you have to go to 21st.dev for modern UI components. Start with the hero section

components. Start with the hero section first. Copy the component prompt and

first. Copy the component prompt and replace these sections. Repeat for

features, pricing and testimonials and as many sections as you want. And

honestly guys I mean these people the 21st dev guys have done a pretty good job in creating these components for your landing page. people behind 21st dev are designers and developers and

it's their job to keep keep track of all of the latest design trends and stuff.

So you don't have to reinvent the wheel and that is why just go to 21st dev.

There are other alternatives as well like asinity UI. I think both of them work together now or something. We also

have magic UI. There are lot of component libraries but this is something that I always use. Just go

ahead and click on hero components. Let

me search hero components. One minute

and let's see what results it's g.

Okay. Okay, so as you can see, we have a lot of hero sections that we can use in our landing page. Oh, this one looks good. But yeah, obviously I won't use

good. But yeah, obviously I won't use it. But but yeah, pretty good looking.

it. But but yeah, pretty good looking.

Okay, so always keep it simple. So this

is something that a lot of people who build SAS use as you will able to see right uh if I click on it, you will be able to see that we have this uh dashboard on the bottom, some text at

the top and so on. Looks pretty good.

Let me choose one for us. Okay, so I think that I like this one. So once you have finalized the hero section or any other section that you are building just click on copy prompt and that should be enough. Go inside lovable click on

enough. Go inside lovable click on visual layers select the section that you want to replace. So right now I want to you know replace this particular section and then just prompt it like this. I want to replace the currently

this. I want to replace the currently selected section with the below but make sure that the vibe and theme of this new updated section matches the vibe and theme of rest of the landing page. And

that is it. I just copy pasted the prompt that we took and let's click on enter. Other thing that I think that we

enter. Other thing that I think that we could make better is this section. I can

ask it to give this a horizontal infinite scroll. So basically you would

infinite scroll. So basically you would have seen in landing pages right that how these logos are always scrolling towards the left in an infinite scroll.

So we can add that as well. That is

going to be my next prompt. And I mean that is pretty much it. I mean if you don't like this section just go into 21st dev look a section that would make sense for you to replace here. So let me

just search for features. And here it will show you all of the components that it has for future sections. So as you can see these look pretty cool, right?

So just copy the prompt go inside that particular section and paste this prompt and prompt lovable ones that make sure that the w and theme is the same as the rest of the landing page and that should be more than enough. Okay, so as you can

see it did a pretty good job of replacing our previous hero section with the newer hero section later on.

Obviously this does not make much sense in this case because this is more for a SAS dashboard for a SAS platform but looks pretty cool right and you just have to do this for each and every section. Go on and keep on replacing it.

section. Go on and keep on replacing it.

Let me also show you how I would have converted this into an infinite scroll.

Could you please turn the currently selected element into an infinite horizontal scroll so that all of the logos inside it move in an infinite horizontal. Just said anything that came

horizontal. Just said anything that came to my mind. Don't have to over complicate it. And let's click on enter.

complicate it. And let's click on enter.

Let's see how it works. Okay, still it is working. Let's move to the next

is working. Let's move to the next steps. I also have one or two steps I

steps. I also have one or two steps I think that would really help you in taking your landing page to the next level. Okay, so this is done. Next is

level. Okay, so this is done. Next is

add final polish and set design direction. Generate visual using uh

direction. Generate visual using uh generate visuals using idograph or nanobana pro. Remove backgrounds and

nanobana pro. Remove backgrounds and clean up the hero section. Spend 15 to 20 minutes total, not more. Lovable

learns your design by from this page.

Future screens and dashboard comes out better. Okay, so this does not make much

better. Okay, so this does not make much sense, but let me explain what I exactly want to say. So I showed you that hero avatar right where I had that AI generated image. So let me show you that

generated image. So let me show you that once again. Let me go to lovable in the

once again. Let me go to lovable in the meantime you can see that how it was able to build that infinite horizontal scroll for us using the logo. So pretty.

Okay. So let me show you what exactly I'm talking about. Okay. So this is the avatar that I'm talking about. So let's

say you want to now take your landing page to the next level. Start adding AI generated images. The image models have

generated images. The image models have become a lot better as compared to before. And this is like last year

before. And this is like last year January and still there. And even then it did a pretty good job in creating this hero image for me. What I did is I just went to you know dribbon and uh I

just looked for some avatars that would look good on my page. So let's say I want this image right. I will just screenshot it. I'll go to charg. You can

screenshot it. I'll go to charg. You can

open up a new chart but I'm not doing that right now. And you can then just ask it to generate a similar looking image or you can take this image inside charg ask it to give you a detailed prompt and then take that prompt inside

idoggram as all of the AI image models are doing pretty good job nowadays. So

you can just charge GPT and keep it simple as well as cheap. And once you have the uh image generated, just go inside lovable. You would know this.

inside lovable. You would know this.

Click on visual edits, select the section that you want to replace and then just attach the image. So for

example, let me change the image here.

So yesterday I was working on this uh S landing page. So I'll just use that for

landing page. So I'll just use that for now. Okay. So I just uploaded the image

now. Okay. So I just uploaded the image that I wanted to use. Now could you please replace the selected image with the image that I have attached? And that

is it. Pretty simple, right? Click on

enter and it will go ahead and replace this image with the image that you uploaded. this particular website. What

uploaded. this particular website. What

I did was I just added uh you know the athlete and then I removed the background from it inside Canva and then I just asked Lovable to add this image on the hero section and that is it.

Nothing complicated. Let me go to the Lable website and I just editing it. So

let me show you what it will do. Okay.

And the thing that I said here is Lovable loans your design vibe from this page. What I meant to say was focus on a

page. What I meant to say was focus on a landing page. Make sure that you like

landing page. Make sure that you like the white and theme and once you are happy with your landing page only then proceed with the rest of the uh UIUX of your entire platform because now it will have something to refer to. It will know

exactly the w and theme that you want to use and this new feature you know the design feature from lovable we have themes so it creates themes for you on the basis of the landing page that you have. So for example right now it has

have. So for example right now it has created this current theme for me. I can

even change it for future. So like the default one the glacio one harvest etc. So this makes sure that your entire UIUX is consistent with the landing page. So

that is why spend amount of time not good amount of time max an hour on polishing a landing page and once you are happy with it then proceed with building the entire UIUX. Now if you

don't know how to build the rest of UIUX I am currently you know recording a free course on how you can go from a from planning inside chart GPT to actually shipping the product. So that is coming

up really really soon. But uh yeah for now just go ahead and you know prompt people to create a dashboard using the same theme like the landing page and that should be more than enough and yeah

as you can see it was able to update the image on the hero section looks pretty cool. This image was also generated

cool. This image was also generated inside idoggram or charg but yeah so let me show you the landing page one final time. So this is the hero section looks

time. So this is the hero section looks pretty cool. This is also a section. And

pretty cool. This is also a section. And

this is the infinite scroll that we added and so on. Right? Looks pretty

pretty cool. And like I said, keep that in mind. You don't have to over

in mind. You don't have to over complicate this phase. If you are the only person who cares about your idea right now, just follow this workflow.

Don't over complicated. Okay. So the

summary is don't overdesign before validation. Start with visuals not prom.

validation. Start with visuals not prom.

So like I said go with dribble and get a screen of the website that you like and that and put that inside lovable. Let

handle layout. You guide the taste. That

is true. Use real components to avoid AI look. By components I mean components

look. By components I mean components that we found for inside 21st.dev ship fast and refine later. So yes guys I mean pretty much it there's nothing to cover and this is the exact workflow that I have been using for portal

projects as well as for client MVPs that build. So if you have any questions feel

build. So if you have any questions feel free to ask them below in the comment section and I'll see you next time.

Thank you so much for watching.