The Complete Lovable Playbook: $0-$2M

i have spent over a thousand hours building software i run the number one lovable agency in the world so in this video i'm gonna walk you through the new and improved playbook for building apps with ai particularly using lovable from how to scope your app to the ui and best design practices to backend and database structure to testing your app and finally launching it and And if you stay till the end of this video, I'm going to share the resource I use in this video to show you how to build your lovable app as well using the exact same prompts as me. So let's get into it. Okay, so here we have the Vibe Coding Playbook 2.0. Again, this is the 2026 updated version because we posted some other ones before. So let's go through each phase and I'm gonna walk you through step-by-step, prompt-by-prompt exactly what to do. So the first step of any app is obviously building up the spec and the architecture for what you're about to build so this is where 90 of vibe coders fail they open lovable or any ai tool and they just start prompting randomly hoping for the best this is where the most debatably important step comes in because you need to make sure you define what you're actually building so there's a couple things that we need to actually define first is the data model right we want to explain in plain english you know something like users have many projects projects have many tasks tasks belong to one user and one project so essentially this is the orchestration for how your app should work how should things interact and live within each other the next is user roles right pretty simply put where are the user types that are going to be using this app and what do what settings and permissions do they need to have and then we need to outline our core flows usually this is between three to five kind of core user journeys a user flow is essentially the sequence of events or sequence of steps that a particular user will take in order to accomplish a task the next are the tech decisions so things like integrations how you do uh you know sign up and log in maybe some database security things anything that is basically a little bit more up in the air how you go about doing it we need to basically outline how that's going to get done so this is an example of what a spec template should look like you have the app name the one line description for who it's for and then you outline the user roles the core data model the key pages and screens and the core user flows now the good thing with loveable is you actually don't need to worry about doing this yourself so if you go into plan mode before building your app in lovable it will essentially do this for you so what you need to do is basically go into lovable and start typing out and explaining your app but what you want to make sure you do is instead of going into build mode you click plan mode and it will go and ask you all the necessary questions you need to start building out this spec template but at the end you want to look something like this and so if it doesn't look like this you may want to tweak it a little bit in order to do so um so pretty simply put we want to write a one-line app description we want clear user roles for each we want to have the kind of data flow and relationships mapped out we want to outline three to four key flows or features we want to decide on the auth method and integrations and we want to have the save the spec saved now you can also do this in chat gpt or cloud you can basically just get it to give it give it a description of the app and then say hey this is what i'm trying to go for as my spec template ask me the needed questions in order to get this so um yeah that is basically speccing and what you need to do in order to successfully start your app let's move now into the ui shell and navigation basically for the most part this is about building out the front end of your app making sure everything is rooted to the right place you know you have the right data displaying navigation all that fun stuff so what you want to do is you want to build all screens as stack layouts before adding any logic or data i know this is counterintuitive but ui first is how you avoid the most common lovable failures which is that components look fine and then break when they're all connected and also you just want to make sure that the design is all polished before you even need to worry about the logic and functionality okay moving on to the design so once we have our spec doc all basically built out we want to continue from that point so there's four ingredients to great a great ui prompt right there's the spec which is basically everything that we've already done the last step which is basically obviously just understanding the high level of the app and what it does then there's the stack so naming the libraries that you actually want to use this is an important part if you actually want the design to follow a certain design style that may not be obvious to lovable referencing libraries is the best way to do that aesthetic so obviously anything like typography color spacing etc and then motion so any how you want it to interact if you want animations transitions etc so the first thing you want to do is you want to give lovable your stack so different stack options you know react tailwind frame or motion these are basically kind of the default i would say stack that we use so react is mainly for kind of the front end tailwind is a styling and then frame or motion is for um basically the actual animations of everything and especially frame of motion will really give it that polished feel to it so an example prompt would look something like this you want to use react tailwind css frame or motion for all animations and then you can kind of outline specific other libraries that you want for your components and all that stuff so that's kind of an important step and a little like trick that people don't really know about especially when it comes to animations having frame of motion is a really important step so generally when it comes to explaining design you want to basically use a specific language as you can possible so here are kind of a few kind of examples of what's right and what's wrong but the more important step is your overall visual reference in order to do this i recommend either having figma designs if you have them but if you don't just having design references of designs that you like that are similar whether this is from dribble or some other product that you may have or like and you obviously want to say hey i've attached this screenshot reference for this screen and reference the screen that you're you're trying to replicate and then say hey match this as closely as possible but using our technical stack and you basically want to get to as as closely as possible match that design reference assuming that that is what you're trying to go for um same kind of thing if you want to use you know screenshots you admire from sites um basically just screenshot that sometimes it even knows like like apps like linear.app is a very popular tool sometimes if you just reference that it actually knows the design style and so it's able to pull from that yeah so things like you know apple products stripe linear bursell etc so the full initial build prompt should look something like this i'm not going to read through it because it's decently long but you're able to copy this if you want and you can kind of make sure that it matches this as closely as possible this is obviously just an example but you should end up something like this one really strong example if you want to put this to the test is my my co-founder built a really beautiful landing page that's super interactive this is the exact prompt he used so if you want to give it a try you can copy this prompt and see just how powerful lovable's updated design is it's actually quite impressive what you can do now with just one prompt and then when it comes to kind of refining you want to go page by page if there's sections that aren't right you want to outline you know this top section should have this the smell section should have this the right sidebar should have this you want to make sure that you keep the same scale the colors everything the same across each page and obviously one thing that people tend to forget a lot is the mobile experience luckily this is super easy all you need to do is just say hey i want to make sure this is mobile responsive can you make sure that every single page is you know works well and is responsive on mobile for the most part that should do the job i would obviously recommend testing this to make sure everything is good but for the most part you should be good so to recap you want to have the initial spec doc that we created in step one we then want to name all the tech stacks that are available you know you could probably look up all the different tech stacks if you're trying to get an idea of look and feel or even ask lovable or quad or tragedy for the best recommended ones you want to write a clear stack brief so this is the mood you know type the colors ideally attach some kind of screenshot or figma you want to make sure that all the pages are created with the proper routing in place you want to make sure that public plus authentic kind of nav is working everywhere so make sure that certain nav bars are working when certain users are logged in if that's how it should be make sure that every screen is mobile responsive if that's needed you want to make sure that mock data is populating all the views at this point so you have something to actually look at and then a stable version pinned in lovable okay moving on to the back end and database setup so the easiest way to use lovable and the database is using lovable cloud lovable cloud is basically lovable's built-in database power bar super base but it makes things a lot easier you don't really need to define your schema as this mainly will be done for you but if you do want to be super specific this is how you can do it um basically you're outlining the different tables you need and then what's inside and the basically the rows inside each you want to make sure that our role level security also known as rls is always enabled and so this is an important tip because role of security is essentially the thing that stops people from being able to access your database which you obviously do not want when it comes to setting up authentication you basically want to use cloud off for email and password email and password login and sign up after sign up create a profile row and assign default role to member in user roles and then basically you're redirecting them to a dashboard or landing page wherever you want to um and then basically also one thing important is you want to make sure you protect all the routes that are not available to people that are not logged in essentially make it make prompt level to make sure that people that don't have accounts can't access the actually logged in pages so this is already included in the prompt here but obviously you may want to change these to the actual pages add a logout in the sidebar or navbar and show the user's name from their profile and navigation to make sure you can see when they're logged in now we want to start replacing the mock data so you want to go to each page one by one and you want to say on this page replace mock data with real queries and basically you want to start outlining the data that should be filled in for each section so stat cards should should pull in from this table data should pull in from data table should pull in from this table where user id equals this now most of the time if you just say hey i want to connect my database to this kind of data it will handle most of it but if you do want to be super on the safe side you can be a little more specific here you want to pin this as a checkpoint in case anything breaks in the future so you can come back to it so let's recap we want to make sure that we enable lovable cloud we want to make sure that all the tables are connected and working in relation to each other you want to make sure that role of security is enabled on every table we have the off pages working and the routing protection created we have the mock data that's been replaced with the real data and we've pinned the next version just in case anything breaks now let's move into feature build out now obviously at this point we have majority of the app and the infrastructure built but you know in the case you want to continue to build new features or things aren't working properly this is how you want to go about it so the feature prompt template is basically add feature name you want to describe what it does so if it does you know three different things you outline that you want to explain where this lives you want to explain the data that it pulls from you want to outline who can actually use this feature and then if there's any edge cases you may want to outline those again if there's any doubt here using plan mode will be able to ask you further questions so that you can figure out some of the edge cases as well but this is essentially what the template and prompt should look like here's what here's what the workflow should look like so you want to write the prompt using the template above you always want to use plan mode first for these kind of features that way especially bigger ones that way you can review it and lovable will give you its best practices once you do that you want to start building it and then once it's being built you want to test this immediately so rather than testing everything at the end i recommend testing feature by feature you want to pin this if it's stable so again if you reach a stable point pin this version so that you can always go back to it and you want to update the knowledge file um which is basically a knowledge file is living and lovable it basically gives context on what the app does and so you want to continuously be monitoring that to see and keep up to date to make sure that it has context on the app and the features that you're building so here's a prompt for updating the knowledge base for each individual feature i'm not going to go over each of these one by one but basically these are common feature prompts so we have search and filtering file uploading notifications payments etc so all these will be accessible in the link down below so feel free to use them so basically to recap we want to use the feature template for every single prompt we want to go feature by feature we want to make sure we use plan mode before actually building anything we want to test each feature immediately once it's done we want to pin any version once it's stable and we want to continuously monitor and update the knowledge file to make sure that it's up to date on our project we move on to our last step here which is hardening and shipping the product we want to do is we want to make sure we run a security audit now lovable actually has this built in um you can click the security audit tab and uh it will do this for you but if you want to do this manually here's the prompt you want to use essentially this is going to review the role of security the database the api keys all that fun stuff to make sure that nothing is being exposed you also want to make sure that your error handling is being set up right so what error handling is is essentially let's say a user inputs the wrong um you know password something doesn't meet the criteria that's when you want to to use error handling and basically it's just important because you obviously want to make sure the user knows that they're doing something wrong so run this prompt it will basically go in and and make sure that error handling is set for anywhere that it needs to be again mobile responsiveness so make sure that the nav bar collapses the data tables are scrollable the forums are full width on mobile all the things that you need basically to have it mobile responsive as well as tablet as far as performance this is a great performance prompt that will make sure that your app is acting as fast and as you know proper as possible so this this is unnecessary re-rendering it's query selecting only needed columns image optimization duplicating code i'm sorry making sure that code is not duplicated so these are basically your you want to always be going back and consolidating and making sure that things are optimized because especially with ai it can obviously go and build things and maybe not the most you know efficient way and so you want to make sure that you're kind of doing this at different points in the app building process and then finally you obviously want to deploy this so basically this is really easy all you do is click publish on lovable you can connect your own domain as well to make this really easy so let's let's kind of go through again the the steps here so role level security you want to make sure it's verified on every table you want to make sure there's no exposed api keys or credentials you to make sure that your error handling is being set on all different ui and logic that's needed you want to make sure you have loading and empty states on all pages you want to make sure that your mobile responsiveness is working that your 404 pages are working your performance has been reviewed and optimized that you've tested the end-to-end user journey that you've have you set up your custom domain if you need it and you've pinned your production version in case you need to go back to it these are just some kind of prompt principles that you can live by as general kind of best practices so the first thing is you want to focus one thing per prompt right ai is run by tokens and tokens are essentially how much data you're passing through and you want to make sure that tokens are as small as condensed as possible because it will just be a lot more effective so again try to stick and make your prompts as small and efficient as possible you want to specify what not to touch right so a lot of times you can go and change something but lovable or another tool will go and change something else that may be connected so you want to make it very clear hey do not modify the settings page when we make this change that may potentially correlate with it make sure you define your edge cases right so plan mode is a great way to do this but if if you want to do it yourself you can do that too edge cases are things where you know it may not be obvious how functionality should work but you want to make sure those are always defined as clearly as possible you want to use plan mode for anything that is complex so anything that requires more than one or two pages or even potentially some some new schema plan mode is the best way to go about building before actually building because again it thinks through everything that you may miss um you want to make sure you pin every version before you move on that way in case anything gets messed up you can always go and revert back you want to keep the knowledge base file as current as possible so again this is the context for the entire app this lives within the project settings page and you want to be explicit about data right so you want to make sure that you have a good understanding of how your data and relationships to each table works that way it's being built in the most optimized way possible you're not having duplicate tables or having data that's being shown in two different tables because that's obviously not very efficient and last thing when it comes to design and visuals screenshots tend to beat words ai has gone very good at being able to analyze images and visuals and so i would always push for using visual references as much as possible when it comes to designing now let's move on to some common mistakes first thing is people trying to prompt the whole app at once right a lot of people are are interested by this like one prompt build challenge or whatever realistically if you're actually trying to build a production ready app this is not the way to go about it um skipping role level security i think this is pretty um straightforward but this is a super potentially underlooked thing that people need to make sure they always have in place um storing roles on the profile table so roles go in a separate user roles table with security definer basically what this means is that superbase has its own built-in user profile section and so you don't want to have a separate database for that you want to use the default off setup that's already built into lovable you don't really need to worry about this this should basically be done for you if you're using movable cloud again making sure that you're updating the knowledge file make sure that you're pinning the versions fixing bugs by adding more features so when you do run into a bug a lot of people can kind of run down a rabbit hole of trying to build on more features or prompting it to try to fix it the best bet is to always revert back to a working product and retry the prompt again to see if you can get to work rather than trying to re reverse engineer how it works or how it's supposed to work and the last two are kind of already been stated but ignoring the mobile and no error handling i hope this was beneficial and if you do want more health support when it comes to building your own app we do have my very own product studio named creme digital we're the number number one lovable agency we've built over 250 products just in the last couple years and so if you are looking to build a product that is super production ready and ready to scale and you want a team of expert designers and developers to do it for you we are your team for that we're we're super quick we're super we're super um cost effective so um if you do interested feel free to click the link here and uh we can set up a call but if you are not that i hope you did get some value out of today's video i really wanted to take the time to break it down step by step so if you enjoyed this video i would appreciate if you hit the like and the subscribe button i will be posting videos like this every single week and if you want to access the playbook i use in this video click the first link in the description it's free all you need to do is click the link So without further ado, I'll see you next time.

The exact 6-phase playbook I use to ship production apps with Lovable. After 1,000+ hours building and 250+ apps shipped through my agency, this is the system that actually works. Spec, UI shell, design, backend, testing, launch.

Get the full playbook with every prompt: https://creme-digital.link/nlngvWO

Bonus links 
Work with my team: https://creme-digital.link/youtube
Get 20% Off Lovable: https://lovable.link/jacobklugyt
Join AI business community: https://dub.link/s5HtimN

My socials
Twitter: https://x.com/Jacobsklug
Instagram: https://www.instagram.com/jacobsklug/
TikTok: https://www.tiktok.com/@jacob.klug

0:00 - Why Most Lovable Apps Break
0:45 - Phase 1: Building the Spec in Plan Mode
2:30 - The 5-Part Spec Template
4:00 - Phase 2: UI Shell Before Logic
5:30 - Phase 3: The 4 Ingredients of a Great UI Prompt
7:15 - Stack, References, and Mobile Responsiveness
9:00 - Phase 4: Lovable Cloud Backend Setup
11:00 - Row Level Security + Auth Done Right
12:45 - Phase 5: Testing, Knowledge Files, Pinning Versions
14:45 - Phase 6: Pre-Launch Security Audit
16:30 - Error Handling, Performance, Custom Domain
18:15 - Final Recap + Get the Playbook