Transcription
So today I want to take you through my prompt framework for building apps with AI tools to help you get 10 times better output and code and stop getting stuck in those AI bug doom loops. This is because the quality of the prompts that you put into the AI tool actually matters massively to the quality of output that you get. And if you're just there prompting add, login, and sign up to your app and hoping for the best, then this is the video for you. And by the end of the video, you're going to have the exact framework for creating incredible prompts to build your app with AI.
Now, if you don't know me, my name is Chris and for the last 15 years, I've been designing apps and advising startups on product and design. And with that said, let's get straight into the framework so that you can start building better apps.
[Music]
So, this is my prompt framework for building apps with AI tools. And the reason that the prompts matter so much when you're building apps with AI is because the more specific you are and the more information you give the AI coding tool, the better code it's going to write and also the more related it's going to be to your project that you're building. And I'm going to go through why this works in each of these kind of four components here for your prompt to use in your AI tool. And it looks like a lot. It looks really complicated, but it's actually super super simple when I break it down. And this is really because AI coding tools can't read our minds. And ultimately AI coding tools like lovable and cursor and bolt and replet are just that. They're still coding tools. So even though we're asking them to build apps for us, they're still just writing code behind the scenes. So we need to give instructions to them as if we're kind of giving an instruction to a developer to go and build this for us because ultimately they are behaving as if they're our developer on this project, this app that you're building.
And so how do we do that best? Well, my framework for writing prompts for AI tools is basically to follow these four parts. And this will probably be a relatively straightforward and short video because I don't want to go into like too much crazy detail or just overwhelmed with information because this is really really simple actually. And I'm going to show you my framework here. And then I'm actually going to go into my app canvas which can help you build your AI app better. And all of the prompts generated in App Canvas follow this same framework. So instead of just writing this out yourself, you can actually just start using AppCanvas or sign up for the weight list over at appcanvas.io and use a tool that will just generate these prompts for you. based on the features that you're building.
So this is your prompt on the right. The first part of the prompt that I like to put in is context. So we want to give context to the coding tool, the tool that we're using, so lovable or bolt. We want to give context as to what this feature that we want to add to our app will be. So that would be something like and I'm going to write out a prompt here to the left as we do this. So context would be basically like why are you building this? So I might be building like a progress tracking feature. For example, say it's a dog training app and I want people to track their progress with training their dog. So, we basically would say give the context of I want to build a progress tracking feature to help people training their dog to track how well they are doing and be incentivized to continue training. So, this is the context that I want to give and I'm giving this because this gives AI like the reason why. This helps understand like why am I building this feature? It's not just giving it a very functional instruction like add in progress tracking for these exact steps. It's saying like here's why we're building it. And so the AI will be able to interpret that and also build it in a way because context is really important. You could do progress tracking in a lot of different ways. The AI will then build it based on like okay we understand this goal of like we want to incentivize the user to keep training. So it might add in like a certain way of doing the progress training around that. We also want to help them track how well they're doing. So, the way that it measures progress might be based on how many things that the dog has learned or how many points they've earned or a rating or something like that. So, it's going to use that context to inform how it kind of builds that feature.
The next part of the prompt here is to outline the user journey. And this is really really useful for the AI coding tool because outlining the user journey basically tells the AI how we want someone using this app to go through the steps of actually doing it. So for my progress training example here, I would say like every time a user completes a training task, show a congrats screen and message. Then take them to their progress page and show the completed task and give them actionable next tasks to complete from this page. Users can also go into their account to see their progress at any time. So that's like an idea of the user journey that I want the user to go on when they're using this feature. And this helps the AI understand like what pages does it need to build, what interactions does it need to build, what actions does it need to build. And that gives it a really good idea of like how you actually want this feature to be built.
The next part of the prompt here is to outline any technology that you want to use. So for example here is like I want to use 11 Labs to convert the text to voice. So this is basically like if we want to use any specific API or technology or service, this is where we would basically do that. So in this example for progress tracking, I might want to say here I want progress to be stored against a users's account in superbase. And that's probably all the instruction that we need to give here. But what this is doing is this is telling the AI like what's the kind of technology that we want to use behind this what's the kind of technology implications or considerations that the AI might want to take into account when it's building this feature. Now it probably would already figure this out if you just gave it a generic prompt. But this is going to tell it explicitly what to build and this will help you reduce errors or issues that come up with things in your backend like databases and authentication. And if you build a feature, the AI might not always get it right that it needs to like attach that to a user in Superbase or create the right tables to store that information that's related to a user in the database. And so just prompting it that way can just give it really clear and explicit instructions as to exactly what you want to use. And if you don't say a specific service, we just said I want to convert the text to voice, then the AI might just decide on a different API for us. And so if we know the service or the technology that we want to use, we can then specify that here. And I'm going to do another video on how to write a good specification for the MVP of your app because that is also critical here and you can use AI to like flesh out that specification and identify what these technologies are if you don't already know them.
And then the last part of the prompt is just to give any specific design direction. I would say like use the same color as the buttons for the progress bar and use X font in this weight for the headings, etc. I'll like animate the progress bar as it goes up. And so we can add in like a little bit of design and interaction direction as we're building our features here as well because those things are really going to improve the overall quality, professionalism and design and experience of our app.
And so that is an example of a prompt. And so what we've done here is we've basically gone from this like I want to add progress tracking to my app. We've gone from that prompt to this which is much much better for the AI tool to interpret exactly what we want. And if you don't know exactly what you want and how to write this prompt, what the user journey would be, you can also ask AI to kind of like help you write that stuff as well. But if you're building your app, you already have a basic app foundation down or you've got like you've started building it already, you should have a rough idea of how you want things to work. And so this framework can just improve the quality of the code that your AI coding tool is using. And it's going to reduce the amount of bugs and errors that you're getting as well. And that is overall going to make your workflow much much faster and much much easier. And I would say one other thing to bear in mind here is just focus on one task or feature at a time. Don't try and combine multiple because we want to give the AI a really clear and specific set of instructions to follow for one specific thing. And then another tip here would just be to like clear your chat history or start a new chat for each feature.
Now once you've put in this one prompt, you're probably going to then do some iteration on this feature. So say like I build this progress tracking feature here with with this prompt. So, I want to make some small changes to that after it's built it. I might want to change some colors. I might want to update some of the interactions or then have like a little prompt framework here for small changes. It's not really a framework. I think for small changes, just be really specific and do one thing at a time and add context for the coding tool. So, you can do this in a lot of tools where you basically will like select the file in the codebase where the thing you're changing is and then give clear specific instructions. So that would be like if I tagged the progress bar and I gave it the instructions of saying like when it animates I want to add easing to the animation so that it feels smooth and is more engaging for the user. So we might then like tag the file where we might go like at progress bar dot whatever that file is called tsx whatever it is app progress bar we're going to tag that file where it is and then we say when it animates I want to add easing to the animation so that it feels smooth and is more engaging for the user just really simple clear explicit changes and then if you really need to you can also say here like do not change the functionality and that will just make it really really super clear for the AI tool exactly what change you want to make.
And then once you're done with that feature and debugging, you basically have like two paths here.
Quick break in the episode to talk about my community for people who are building apps with AI and want to actually launch their app and get real customers. It's called the AI app builders academy. So if you're building an AI app with Bolt or Lovable or Cursor or any of these AI tools and you actually want to make a profit and launch your app, then this is the community for you. Inside, you'll get access to a community of other builders as well as my 30-day app course helping you go from idea to app to a profitable launch in just 30 days. You'll also get access to weekly calls with live workshops and training, as well as all of my startup frameworks and resources and 24/7 support from the community to help you answer any questions or problems you're having with building and launching your AI app. So, if you're building an app with AI and you actually want to make a profit and launch your app, then head over to school.com/aiapps to find out more. I'll see you there.
Like, if it works, start a new chat on a new feature. If it doesn't work, discard the change or roll back and start again. Don't be afraid if your prompt doesn't work to start off with to just discard all of the prompts you've done. Maybe if you've get like two or three or four prompts in and it's still like going around in circles a little bit, just start back over, discard the change, and then start back over again.
And that is my framework for creating prompts for AI app building tools. And I'm now going to show you how to do that in App Canvas, which is launching soon. So this is App Canvas, and I'm going to show you how to generate these kind of prompts from this prompt framework using App Canvas to help you build your app better. So let me just sign into my account here. And when you first get into App Canvas, what you're going to want to do is create your app idea. So, we're just going to do here a todo list app for dogs. Create the app that will generate the name using AI. So, we've got paw planner here. This is our idea basically. So, we're going to want to do a bunch of things to this. And the reason why I'm showing you app canvas in relation to the prompt framework is because when we get to this MVP step here, when we generate the MVP kind of plan for our app to actually build it, it's going to then let us generate prompts for each step of building our MVP using this same framework that I've gone through.
So if I click improve here, this is basically going to improve my idea because we don't always start off with the best idea. It might just be a very generic idea that lots of other people have done. And so I've also built into this basically my kind of sixstep framework for improving your app ideas. So we're going to focus on dog owners with busy schedules. That's targeting a more specific customer. And we're going to also integrate training milestone tracking. So deliver a more specific outcome. And there's other ones in here as well that you can add to this too. So let's add that to our idea. So that's going to improve our idea card on the canvas here. So that's added an extra description to that idea. It's updated the description for that idea. And now we've got these improvements that we've added to this here. We're also going to validate our idea. So validating your idea is about proving that it will work in the market and that there is actually a market for this and that you could genuinely get customers for this app. This will basically check a bunch of different things like is your core problem good enough? Do you meet the ideal founder profile? So give you some places to research basically community research to find out if this is a problem that people are facing. Identify some other competitors. So we've got poor track an app focused on pet care that includes reminders but does not integrate task management. So it will give you ways of differentiating as well and also assessing the risk for this app idea like could someone else actually copy it? Could someone do it better than me? That sort of thing. After that we can generate our persona. So your customer persona is basically who you're going to be targeting for this app. So this is giving us a bunch of information about the sort of customer that we would want for our app. After that, we're going to go to our text stack. So based on all of this information that we've created here, this is going to give us an idea of what is the best tech stack to actually build this app. It's recommended at the best for full stack web apps stack, which is using leap and encore. It gives you a bunch of ideas of services that you can plug into this as well. So, Twilio for SMS reminders and notifications. Some of this might be a little bit advanced and I do need to tweak the recommendations that are given here because I don't think for most apps, I don't think you need a ton of these services. I'm actually going to go best for simple web apps here and not take the recommendation. So, let's add our text stack to the canvas. So, that is added our text stack here. So, we've got our text stack outlined and now we're going to generate our MVP. So, this MVP is basically going to take into account all of this information that we've generated so far, and it's going to give us a step-by-step plan based on our text stack of how to build this and allow us to generate prompts that we can then take to those tools to actually build our app. And the prompts will be generated in the framework that I've just outlined before.
So, this is our MVP plan here. So, it's going to deliver a to-do list app tailored for busy dog owners. The MVP will include core functionalities such as task management, reminders for walks and appointments, advanced features like social sharing and extensive analytics will not be included in this initial version. So it's really keeping the scope narrow for our minimum viable product here. So the first one is going to be set up your app, initialize the project and establish the basic app structure including front end and backend configurations. And this is in lovable and bolt for front end and superbase for the back end. So let's generate a prompt to set this up. And this would basically be our first prompt for our app. So this has given us a prompt here and we can copy this to our clipboard and then paste this. We would basically go into lovable or bolt and then we would paste this prompt into those tools and then start to build our app. So this has said create a new project for a to-do list app tailored for busy dog owners using lovable and bolt for the front end and superbase for the back end. So that's given us a bit of context there. It's going to go through these tasks set up the front end with lovable and bolt. Configure Superbase for the back end, including database tables. Ensure that the front end is connected to the back end and allow users to create, read, and update and delete tasks. This will lay the foundation for a user-friendly experience that helps dog owners manage their responsibilities efficiently. Now, I am continuing to work to improve the prompts that are generated here. So, these are just going to get better and better as I build out more functionality and improve the functionality in App Canvas. But from a for a starting point, this is going to give you the foundations. And you might think, well, this isn't actually building a lot of stuff. This isn't building like a dashboard. It isn't building any of your features. And that's because I think the best way to start off with these tools a lot of the time is to just go step by step through creating your foundation before you actually start building your big features on top of that. So, this is really just like setting up a project with Superbase and a basic kind of app idea. We're then going to we can do adding and testing database, add authentication, add and test payments. You don't have to do all of these steps and you can tick them off as you go. I'm actually just going to do generate a prompt for the authentication. So this is going to use superbase for authentication because that's in the text stack. And this has generated us another prompt that we can put back into our tool into lovable. So implement user authentication for the to-do list app using superbase. Start by setting up a superbase project and configuring the authentication settings. So we've already done that in the previous step. So that's where I need to improve the quality of these prompts that are generated. And finally, test the authentication flow to ensure users can successfully register, login, and access their personalized dashboard for managing tasks and tracking dog training milestones. So, this is an example where like this is just speeds up your workflow because you're not having to write out this long prompt yourself or say this long prompt yourself. You're just getting App Canvas to generate the prompts for you to start building your app. And you can do that for every single step in your app MVP. And then you can add new features if you want to add new features here as well. And app canvas will recommend you new features to add to your app. And then you can generate the prompts to build those features as well. So this is going to come back with some feature ideas. So let's see. We've got integration with pet service providers could be interesting. Activity logging and reports recurring task automation. So that would be like feeding or grooming. So let's do that. I'm going to add that feature in. That adds the feature to our board. at the moment is adding it all the way over here. Again, another bug for me to fix. We'll get that sorted. This is your feature that you've added. So, implement the ability to set up recurring tasks, etc. there. And then you can click generate prompt to generate a prompt to build this in your AI tool. So, that has generated a prompt there that I can copy to my clipboard to build this feature in my app. And that should have the context of all of my technology and my app MVP and all of this information here as well. So you don't have to like put in all of your app information into an AI tool to then generate the prompt for you. It's just generating it all based off of all of the rest of the app information here for you. So you can copy and paste the prompt, put it into lovable, and then start building that feature following the exact framework that I went through before. I'm going to be launching App Canvas soon. So if you do want to sign up for the wait list for this to actually start building your app better, you can sign up for the wait list over at appcanvas.io.
And that is everything you need to know about my prompt framework for building AI apps. So that was my prompt framework for building apps with AI tools. And you can see how I've implemented that into app canvas as well. Hopefully that helps you and will help you kind of build better apps using AI tools like Lovable and Bolt and actually avoid getting stuck in all of those AI kind of errors and bugs that happen a lot of the times when you give vague or like really simple prompts. And I found that doing it this way in combination with kind of starting a new chat for every single feature, working on one thing at a time and then not being afraid to like discard any changes you made and kind of start building the feature again from scratch is a really really good way of building your apps really efficiently, getting your AI tool to write better code for you and actually ending up with a better app overall that you can build quicker and with more confidence.
As usual, if you enjoyed this video, don't forget to click like and subscribe to the channel down below. And if you are building an app with AI or you've got an app idea and you want to start building it, then you can head over to my community over at school.comapps to learn more and actually start building your app the right way today. Thank you for watching and I'll see you next time.
[Music] product. Product.