if you clicked on this you might be wondering what is the best way to build your app idea using an AI coding tool like Replet Lovable Bolt or Vzero it can be really tough because the output that you get depends massively on the quality of that first prompt that you put in and so today I want to take you through my framework step by step for building that first prompt so that you can get as close to your MVP as possible in just one prompt my name is Chris and for the last 15 years I've
been designing apps and advising startups on product and design and I believe the next wave of incredible products and incredible businesses are going to be built by people using these AI coding tools and what I want to do at the end of this video is put my prompt into Replet so that you can see what it creates see how close it gets to an MVP and so let's get into the framework and go through it step by step build great so this is my notion template that has my framework for creating the first prompt that
you put into an AI coding tool like a lovable or a replet um to get as close to your MVP as possible and the reason that you want to do a really really good first prompt is that you get diminishing returns with a lot of AI tools because it has the context of your previous conversations so often the best output that you're going to get is off the back of that first prompt so you want to make sure that that first prompt that you're putting in is really really really good one thing that I'm going
to do at the end of this video just to so that you stick around um is to put the example prompt that I've got here into Replet so that we can see what it builds off the back of that and hopefully get something that's really close to an MVP of an app that could actually be launched and the example app idea that I'm going to be creating is a web app that lets you create ad variants when you upload an ad creative and that would be for a fixed price or a subscription basically so if
I'm creating an ad that I want to put on Facebook or Instagram I do the design of it and then I'm going to put the JPEG into this app and then it's going to get use it's going to send it off to chat GBT and then it's going to send me back like different variants of that ad with different creative bits and maybe I'll add in a prompt in there so that a user can type in oh I want to change just give me 10 different versions of the background or something so that's the app
that I want to I want to create so I'm going to go through this framework step by step and this is just what you would write out linearly in your prompt that you're putting in and the reason that I like using this framework is because it also gets you to think about um each of these steps as you go through so if you have an app idea and you haven't quite thought about some of the elements it kind of forces you to think about okay I need to think about this thing a little bit more
more deeply to actually be really explicit about what you want to create instead of just kind of leaving that up to the AI um so that will help you kind of like be more detailed and specific in that first prompt the first thing that we want to include here is the primary function for your app so this is like I want to create an app that lets people do X using Y so this is what you want to let people be able to do what you want the app to be able to do and how
you want people to be able to do it so using the example of this ad variant app that I want to create um the example that I've put here is I want to create a web app that lets people create multiple ad variants from one ad creative using AI so that's the first thing the most important thing is like what is this one thing that your app is doing and it's really important that for the first version of an app that you're creating you really want to focus on that one primary feature we're not trying
to create a massive application here that has tons and tons of different features we're just trying to basically create something really simple so that we can give it to people and test if this is something that's actually going to work or not and the key here is just being able to test this and validate the idea really really quickly so we want to get to as good of that first version that first feature as quickly as possible to test if it's something that people actually want so if they don't want it we can just get
rid of it and try a different idea instead the second part of the prompt here that I want to add in is how does this primary feature function so this would be like this should work by allowing the user to do X going through Y steps to get Z output so so this one is really thinking about what is the what is the user journey i'll put that in here so this is what is that user journey of that first feature and if you don't know what a user journey is a user journey is basically
the individual steps that someone using an app or using a piece of software would go through to get to something um so it's that journey of using something so I click this button I upload this thing I wait for this to happen I go to this page those sorts of things so the example that I've got here for this ad variant app that I'm creating is this should work by letting the user upload one ad image file then sending the image to chat GPT and using the prompt generate 10 variants of this image to generate
10 more images the user would then be asked to pay a one-off fee or subscribe and then be able to download the images so that's our primary feature that we're creating quick break in the episode to talk about my design agency Telescope telescope is a tailormade design service for ambitious and early stage startups we've helped clients go on to raise millions win startup awards and unlock new product growth opportunities and new business opportunities for their startup you can check out the link in the description or go to telescope.design to find out more back to the
episode i then like to add in what the name of the app is as well just because it's to be honest like sometimes you can leave this up to the AI and it can come up with like quite a good name that's maybe better than one that you could have created so if you can't think of anything just like leave it up to the AI to figure it out so just like leave this section out um but I usually like to tell it like I want I want it to be called this and then it
will put that as like the logo in the corner and like add that into the text and stuff where they need to where it needs to be added in so the example here is like I want this app to be called more variance i'm just calling it more variance i think it's a cool name um the next part of the prompt is who your ideal customer is what is the problem you're solving and why and so I've bundled this all together because this is all about the person that you're designing the app for and what
they want to get out of it why are they using it so it you would say like the type of customer who would benefit from this app is the demographic and then the psychographic information who struggle with this problem and we're solving it and it because and we're of and we're solving it because of why this reason so my example here is the type of customer I'm targeting is market i want to target marketing managers who struggle to create lots of different ad variants um so that they can get those ad variants much quicker if
you don't know about like marketing teams and creating ads for like Facebook and stuff a lot of the times people on marketing will send like design briefs off to a designer to get them to do lots of different ad creatives but I think we can do that with AI like way quicker so we want to help marketing managers people working in marketing to upload to create lots of different ads so that they can get them much quicker and they don't have to wait for a designer and and the company also doesn't have to pay for
a designer then as well no sorry designers I am a designer so I'm putting myself out of a job here next I want to tell the AI tool what I want my app to look and feel like and you can also use references for this as well so if you if you have like a screenshot or if you go on Google images one really good place to get inspiration from this is a website called Mobin which has tons and tons of screens of like tons and tons of different apps you can basically take an image
from Mobin of like an app that you like and then put it into these AI coding tools and it will kind of match that style it doesn't often do it perfectly so you might need to tweak it and it's kind of like okay some of them are better than others like V 0 is much better at design than Replet is for example but you kind of learn that as you use the tools and what you can do here as well is tell it what you want it to look or feel like so give some examples
of brands or um styles that you like um so my example here is I want my app to look and feel fun and playful like the notes app or a sketch pad or a whiteboard with sticky notes on or maybe like Fig Jam or Miro which are to two tools I'm kind of referencing here after I've told it that I want to then include what is on the website or landing page so a landing page would often be like the website that you go to to sign up for an app and to be clear about
like this whole app thing I'm talking primarily about apps that work in your browser so an app that you would access through Chrome or Arc or any other browser so what do we want that signup page that land that kind of marketing landing page to look like and I would say I want to create a landing page that includes X Y and Zed and so the example I've got here is I want to create a landing page with a hero section a how it works section testimonials pricing and frequently asked questions those things are pretty
typical for like a landing like like a landing page like a marketing website for an app so you can kind of follow the same template here if you want to uh and you would usually sign up from like a couple of different points on that page and that goes into the next part here which is how does a user sign up and use your app so we want to say the user should be able to start using the app by doing X so the example that I've got here is the user should be able to
start using the app by uploading their first ad image in the hero section and clicking a button underneath named create ad variants so in this example I want it to be really really simple you land on the website you see the top of the page you drag and drop your image file in and then you just click a button that says create ad variants the next part here which is really important is what steps does the user go through after signing up so what happens after they sign up that that kind of leads them into
that primary feature that we described earlier in detail so when the user signs up they should go through the follow these following steps so the example I've got here and this is the longest part of the prompt I think because this is this this part and kind of describing how that primary feature works are the two longest bits because you're describing like multiple steps for someone to go through and maybe multiple pages as well so the example says when the user clicks create ad variants they should then be taken to a page which asks them
to sign up the example here is when the user clicks create ad variants they should then be taken to a page which asks them to sign up using Google or using an email and password so that's another tip here as well is to be clear about what technology if you want to use any technology in this as well so I want to I want to use Google signin for this so I'm going to say that here once they sign up they should then be taken to a pricing screen to choose their plan so what I
want to do is I want to get the user to take the action of like getting of of choosing to get the ad variance um when they've put their image in and they click the button I then want to say like you have to pay to get your ad variant sent to you so they then get a pricing screen to choose their plan after choosing the plan uh they should pay via Stripe so again I've said the technology there that I want to use for payments which is Stripe so most of these AI coding tools
will then once they've got this prompt they're then going to ask you for different credentials for the technologies that you want to use as well so if you're using Stripe it's going to ask you to go into Stripe and grab a couple of a couple of keys just to put into put into the AI tool so that it can connect the two things together and then be taken to a page which shows a loading state whilst the image file the user uploaded is sent to chat GBT so I then want the image to go to
chat GBT to get the ad variants after that the ad variants that have been created are going to be sent back and then they'll be shown on the page which will be in the users's account so that's how I want it to function again I think this is really good to kind of get you thinking about what are those steps going to be that a user is going to get the thing or like do that thing after they sign up like as you kind of think about you might have an app idea but you might
not know exactly how you want it to work so this will kind of get you thinking about like step by step like what am I doing what does the user do what do they click where do they go how does it work and if you don't know you can kind of leave some of these bits blank or you can you can actually ask these AI tools a lot of the time you can say "Oh what would be the best way of doing this?" And then it will kind of give you some suggestions after we've added
into the prompt the steps that the user is going to go through after they sign up and start using the app we then want to kind of flesh out everything around that kind of primary feature and that sign up journey and what that means is to kind of add in a lot of the secondary and functional um features so things things like account management so we want to say like the example here is the user should also be able to save the ad variants to their account so I want them to be able to save
them to their account once they've generated them they should be able to edit their account details and also be able to manage their subscription which would link to Stripe from their account page so we're just adding in like all of the little function functional bits and these are things that are really really easy to forget as well but really really important to how your app works just to allow users to like be able to manage their payment plan and all of that sort of stuff and then the last thing that I want to include here
which is really really important is what pricing plans are available and how does the user pay and what are the limitations of those plans so what you want to think about here is what type of payment does a user make for using your app usually it's either a one-off payment or a subscription but there are other ways that you can do it as well so for my example here I've said there should be two payment options a one-off payment of $19 that lets users get ad variants once and a subscription option of $9 a month
that lets users get unlimited ad variants and save ad variants to their account so I've told it what the pricing plan allows the user to do and also what features are accessible by what plan so the saving ad variants to your account is the is the feature that's only available to people who subscribe and there's a lot of psychology like around pricing and pricing plans and stuff and if you're unsure you can always go on to like an app which is kind of similar to the one that you're creating and see what pricing are they
using and kind of just copy their pricing model a little bit the one thing the one recommendation that I would say here is that you want to try and keep it as simple as possible to start off with so even sometimes just one payment option just one subscription option or one oneoff payment is like the best place to start because if you remember the whole point of like creating this MVP is not to launch a perfect app it's to really create your first version so that you can test it and so you want it to
be as simple as possible not super complicated because what you're going to do when you launch the app is you're going to get a sense from people of like is this something that people actually want to use and so we want to minimize the amount of time that we're spending building this up front to try and get that feedback as quickly as possible and then once we know that this is something that people actually want to pay for and use we can then start to build in those extra pricing plans those extra features improving the
experience all of that other stuff which goes into making something that's really really good finally here we have this version this full prompt which I've created which is all of the sections of this it looks really really long but it's really really detailed and it's very very tangible and it includes all of the context that we need and all of the extra all of the steps that a user is going to be taking through this app i would be really really keen if you have a format for prompts that you use or if you think
any information is missing here i would love it if you said in the comments like any extra bits that you find useful any stuff that you like to put in these prompts because I've probably missed some stuff here i'm not like I'm not like the guru on this stuff this is just kind of what I do that I thought would be helpful to go through so any extra information is great so let's take this prompt pop it into replet see what it builds and whether it's going to get close to the MVP version of this
app all right we're in Replet and I'm going to paste in my prompt that we put together through that framework for this app idea called more variants to create ad variants for marketing people um so yeah let's paste it in so I've pasted in the text that I want to use as a prompt it's just come in here as like pasted text attachment so hopefully that will work i've also copied and pasted in a a reference image that I want to use for the UI so hopefully it will follow that for the UI as well
because I've referenced that in the prompt that I've created so let's click start building and then I'll come back once it's built something and see what we've got now I've put this prompt into replet it's looked at the prompt and it's going to it's going to ask me how do I want to build this and what do I want to include replet also suggests like adding in additional features as well which is quite nice because sometimes you forget things in the prompt and you do want to add it in so ability to create brand kits
with preset styles and templates is quite nice but I think that's quite quite a complex idea that would need some more definition if I wanted to put it in so I would try I would generally like recommend here it's quite tempting to add in like these additional features that it does suggest but some if they are things that are too complicated they can sometimes like take away from that one kind of key feature that we're trying to build and remember like we're just building one kind of key feature a very simple app to to test
and so we don't always need like it's very easy to get drawn into these features but you don't have to select them i would probably recommend against it advanced image customization options before generation i think that would be quite good i'm going to add that one in because I do think that what this is missing is like some control over the variance that I want to create and so I'm going to add that in there it's telling me here as well it's going to take like 2 minutes to get a preview together and then the
first app is going to take 10 minutes so what I'm going to do is we're going to approve this plan in Replet and then we're going to come back once this has built something so this is the output that Replet has created off the back of my first prompt i have another I have another question that I had asked it here cuz it was giving me an error from something when I was testing it before as well um so what I would suggest is that well you can see that it's pretty close to what I
asked it for it's a bit maybe like too playful for what I wanted to go go for but you can see that it's got like you've got your landing page here with create 10 times more ad variants in seconds you upload your ad image here and click create add ad variants and then that will create them for you it's got this like weird overlaid postit so like something of like the the layout and stuff isn't 100% like great but it does have a lot of the content on the sections here that I wanted to add
so like how it works upload your ad ai magic download and use great what our users say so we've got like space for testimonials here obviously this doesn't have any testimonials yet so I might just remove this section before actually launching anything frequently asked questions and then a call to action at the bottom which is great and you've got like there are like these other pages here i'm going to wait until agent finishes so that I can have a look at this updated version you can see with what this has created here that that most
of this stuff is working just off the back of this first prompt and a few fixes back and forth with the agent i can add my image here and then click create ad variants that will ask me to login or register so I can register there with my email address or click Google to sign up i've also got a pricing page which has the pricing options for the one-time purchase or monthly subscription and some common questions there off the back of that what I'd need to do now is to just go through and use all
of the features of this product of this app just to make sure that everything works and then just keep prompting back and forth with Replet just to fix anything that comes up any errors that happen just to make sure that everything works here so that was my full framework for putting together your first prompt to put into AI coding tools like Replet Lovable or Bolt to get the best version of that MVP of your app obviously you have to follow up and you have to go through and fix any errors but what you do have
is the foundations of an app there and everything kind of scaffolded out that's ready for you to start kind of iterating on top of rather than kind of building these chunks in steps it makes it a lot easier to start with something really really solid as the foundation for your app and then just to fix any issues on the top of that so hopefully you found that framework helpful if you have any improvements to this or you have anything else that you add to your prompts in AI tools then just let me know in the
comments below i'd love to know otherwise if you liked this then subscribe to the channel or go over to buildgreateproducts.com to sign up for my newsletter for a new product tearown every single week thank you and see you next time build great product build great product
