Accelerate Discovery with Vibe Coded Prototypes | Alexander Sprogis | ProductTank Cologne

Okay, cool. Nice to see so many faces here in this room. I'm really excited that you all joined me today. I'm also very happy to be here, so thanks again for the invitation and for organizing the event. Today's session will be all about Vibe Coding. And first of all, I would like to ask if any one of you knows the original definition of Vibe Coding, which was brought up, I think, last year or the year before. No one? Okay, we'll talk about that in a second. All right, yeah, like I was already introduced, my name is Alex. I'm co-founder of Visual Makers. We are an AI implementation and consulting firm based in Cologne. We're 15 people and our mission is to democratize tech because we believe that technology can truly make an impact when it's accessible and therefore we train. people on on the tools to build um automations to build prototypes to build applications themselves to make their daily lives easier and we do that with our enabling formats like the keynotes like today or like workshops trainings but we also do develop ai assistants ai agents to to automate business processes as well as custom software um okay so again back to to the vibe coding topic so um the the definition or the the term vibe coding was introduced by andre kapathi the co-founder of openai who called it the new way of of coding because llms got so good in what they do meaning everyone can build their own applications uh today with with the help of ai and vibe coding is especially especially good for prototyping The original definition was when you do vibe coding, you don't even think about the code that is written behind. So you just, yeah, and you also do not spend very much time on your prompts. You just vibe with the AI to see where it brings you and see what's coming out of the prompts and what the AI is doing. So... And that's also, I think, why I know lots of developers who hate the VIBE coders because, in their opinion, they don't really develop software. You can obviously develop software with VIBE coding, but from their perspective, they're full of bugs, they're full of security vulnerabilities. And there are ways to fix that. We will discover some of them today. But first of all, I think it's good to know that VibeCoding is the perfect method for prototyping in any way. And we will dive deep into this topic. So with VibeCoding, there came a lot of tools to the market which allow you to build software applications. One of them, and from my perspective at the moment the best, um tool on the market is lovable has any one of you used lovable before okay quite a few that's cool and it's basically um a prompt to code tool so you basically have this chat window here where you can put in a prompt like develop a dashboard or a marketplace whatever or feature xyz and then the lovable agent will code the the component or the application and then you can yeah spin it up with your ideas and develop it further and to make it fully functional. So that's pretty cool. And maybe a little bit of explanation why I think it's better than other tools at the market right now, especially for beginners in this whole topic, is because of the usability. It's super straightforward. You can't do much wrong with Lovable and it has a very powerful coding agent. which can think, which can plan out your app or your features, which does web search if there are any uncertainties. It can also fetch documentation from other integrations that you might want to add. your prototype or to your application it can inspect your your browser logs or back-end logs and network activity in case of debugging if something went wrong during the during the development process or if you're figuring out some bugs or so and it also has the best design capabilities from from my point of view And it brings some great integrations. It integrates Superbase, which is a backend as a service. I will go deeper into that later on, as well as GitHub. That's basically a cloud storage for your code. And it also does security checks, which is also very nice. If you're not a very experienced developer and you want to develop a full-fledged web application with Lovable, then it will automatically bring up security issues. to make you aware of them. And it also comes with inbuilt analytics so you can track what and where users are using your app, how many users are using your app. That's pretty nice too. Okay, yeah, I would say let's dive into Lovable. I'll just show you a bit around. And I think I have it here. Oh no, that's the wrong one. Yeah, I think it looks basically like in the screenshot, right? You can just start. um prompting and uh just to start the development process uh what i can also recommend is to use the the voice to text uh feature here because with yeah just chatting with with lovable you can give a little a lot more context than um if you would write your prompt so um that's definitely a recommendation and um what it looks like is uh like like this let me just so this is basically Not the stuff that I wanted to show you, hold on, just a minute. Let me just revert. Damn, that's a pity. Well, what I wanted to say is that's basically a project management tool which I brought up with one prompt. The prompt is a little bit more detailed than you might expect and I come to that a little bit later on. But with one single prompt I was able to develop a full functional web application which is basically a task board and I can create to do is I can move them around to change the status. I can add some more. And I can search through tasks here. So if I search for design, there's obviously one task. I can filter by priority. And that has been done all with one single prompt. So I made some customizations here to bring up our logo and to bring up our company font. And I wanted to do that in the live demo. So I tried to revert to an earlier point here, but I'm not sure why. It has the new version here. Okay, here we go. Here we go. So and How you use lovable obviously is through the the chat window on the bottom left There you can put in your your requirements and the lovable agent will go ahead and and develop the stuff you want to To change so in this case if I would for example would like to Have our company logo here in this navigation bar. I simply upload our logo and you can do that on the plus button on the left bottom here and then simply go to attached upload an image and then say please update the logo in the navbar that's very important to this attached logo let's see And while Lovable is running, I can explain a little bit more about the user interface. So, like I mentioned, Lovable is currently thinking what it is going to do. And you can also show the whole process. And obviously, as this is a very small change, I think there's not much to see. So it is updating some code files in the background right now. and you can also already see that the logo has changed at the top so it's very easy to just yeah update the interface what i can also do is our main brand color is let's see that's the hex code for our orange brand color please update all buttons so let's see um yeah to give it to give the application a little bit of more more of our our branding of our company branding uh let's see what it does so while it is running um you have some some more features here in this in this chat bar you have an edit mode which we will try out once the agent has done its changes um where you can simply click certain elements on on the screen and then make Changes to this certain element and that's that's preventing the agent from making changes to stuff that you don't want to make changes to because that happens as well Especially with bad prompting So now you can see the button color has changed and the agent made the changes and So let's see. Yeah, we can try out the edit mode for example. So if I click that I'm able to select everything from from the application and make directly changes to it. I can do that via prompting. I can also do this with some options here. So I can edit the content. I can also play with the positioning or with the styling of the text at this point. So it's also a little bit of no code builder, no code editor, where I can make changes to the web application elements anytime. um what else do we have here we have a chat only mode which is very nice if you want to plan out a new feature without lovable doing any changes at this point of time so let's say i would like to integrate a sign up process so users can register to my application and then i can ask level how would you do that what what files would you change or how would you set that up and then yeah level goes ahead and and tells you what it will do and then you can simply say yes okay I'm fine with that and then it goes ahead and develops this feature and that's also very nice if you have a a very big app at that point of time with lots of features and you want to add one more feature then you can simply make sure that Lovable doesn't plan to update any existing features so that's also very nice yeah to use that to use the chat mode at this point so um yeah that's that's basically how you develop apps in or prototypes in lovable you can you can publish the apps right from from lovable and hosted host them in lovable you can also export the whole code and host it yourself that's also no problem uh yeah that's that's basically it you i think you have a mobile view over here um to see how it looks on on other display sizes which is also pretty neat also lovable almost always makes everything mobile responsive so it's optimized from the start and yeah another nice thing or what works nice is lovable can work with with images so if you have a figma design file for example you can simply yeah share the the the screens or the screenshots um with with lovable and it will then yeah build build the screens one-to-one into into lovable and also um another nice approach which robert just told me is he likes to like scribble wireframes on a piece of paper and then takes a photo of it puts it into a vibe coding tool and then also this is a great approach to to get a starting point um for your own prototype All right, I think that's good enough for a first deep dive into Lovable. There's one problem with this project management app that I just showed you, which is that the data is not being stored anywhere. So it just lives in my browser. So once I refresh the page, all my tasks are gone. So now I need to think about a solution. Where do I store my data? And to give you an idea of the architecture of a Lovable app, Lovable itself will just build the front end. So just the user interface where you can use the app, but it does not store any data or business logic. Therefore you would need to add a backend and you can basically connect any backend you'd like. One I can recommend is Superbase. If you start from scratch, for example, Superbase is a backend as a service. which has a great free version, which is also open source. You can also host it by yourself to own the whole data and the processes and so on. And it brings certain features with it. It has a database. It also covers authentication. So if you want to add like signup and registration, that's also no problem. And by the way, Lovable has a very great, neat connection to Superbase. So you can basically uh control super base out of lovable so um that means once you once you connect lovable with with super base and you saw that integration down here so there you can simply connect a super base project then you can simply write in here at the bottom i don't know Please please create the database structure for my task management board and super base and level will go ahead use the the integration for super base and we'll create the whole database and all the connections that are needed in order to store your tasks in a real database so that's also pretty pretty great and it's one of the One of the few applications that has this integration uh what else the super base cover um super base has also edge functions which is nice for business logic and for connecting other applications or yeah integrations i'm not sure if you would like to like use a the open ai api for example or you would like to integrate payments with stripe that's also possible it also brings a file storage with it it has a real-time feature use so you can basically build multiplayer apps with with lovable which is insane It also covers vector databases and so on. I don't want to go into too deep into that, but it covers everything you need to build a fully functional web application. And yeah, that's basically it for the architecture. So Lovable alone is, like I mentioned, cool for prototypes or interfaces to play a little bit around. But once you want to store data, you would definitely need to connect a backend like Superbase or anything else. Okay, let's go into the topic of prompting. Prompting is a big topic with vibe coding or AI coding in general. And I would like to show you an example of a bad example of prompting. In this case, this would be you would start in Lovable with the prompt, build an online shop. So that can mean everything or nothing, to be honest. So yeah, I think it's very obvious that the prompt doesn't have much detail in it. So it's too vague. um so that means the ai will not implement um or the the result will not come close to what you would expect uh lovable to implement it's not a structured approach and um if you if you go ahead and if you have a baseline of an app and you develop it further um this kind of prompting could also break things that are already existing so um prompting is a big big topic um and you want to build a good foundation uh when you want to do it seriously um what's what's a good way of prompting so um a good way of prompting would be to start with uh with the um with the very small baseline so and then work iteratively um throughout um the the process that means you want to be very specific in your prompts um you want to you want the ai to just develop one feature at a time which is also very very uh what i would recommend um You can also provide technical guidelines if necessary if you want to build an API. I also mentioned that Lovable can look up documentation by itself, but you can also provide it by yourself if you would like to. It's always good to provide sufficient context. So if you plan out a feature, maybe also describe why you would like to implement that feature. What's the goal of this to give Lovable a little bit of context. one thing that i would definitely would like you to do is build your prompts together with api with with ai because ai knows best um what what it needs to in order to to build good quality so um that's why i used it too and you saw that with my uh with my prompt here in the beginning with my starting prompt which was pretty detailed and the way i did it was like this i just worked with chat gpt and this was my my initial prompt that i that i put in here and i just asked gpt to to build um to optimize this prompt for uh for lovable and it did that so um from my small prompt, which I put in here, it really built out a detailed structure with describing the core features. It also built some kind of a data model here for my tasks. It took care about the UI UX, how it should look like, what are best practices, quality of life. It also thought of filters and search bar about data storage in my local storage in my browser. And it also uh had this section out of scope here so it definitely it also said there is no no authentication at the moment and as well as testable acceptance criterias which is which is pretty good and with this prompt with this kind of prompt you can expect very good results from from the lovable agent this is another um a good approach i think it's it's basically the same as i showed you uh it's just another case um for an online shop where we also cover certain angles of this feature to give the best of context. If you want to take VIVE coding seriously and would like to build full functioning and secure apps, there is a way, there's a pro tip. And the pro tip is to use instruction files to structure your whole VIVE coding process. And what are instruction files and why would you do that? instruction files help you to streamline your development process. So I think you could imagine that if a new software project starts at your company, your development team wouldn't start directly in their IDE to jump right in a code file and start writing code. There is a huge planning phase before that which is happening. So and that's basically the same for Vibe coding. It's very good to invest some time in the planning phase to prevent confusions, misunderstandings and errors. Yeah, this will basically help you to provide guidelines for the lovable agents so it can build decent quality and it will definitely save you some time in the development process and also lots of lots of headaches. So in our approach, We work with five types of instruction files. The first one is the product requirements documents, which covers a detailed product description, personas and user stories. Then the SRS, the software requirements specification, which covers the technical documentation, the tech stack. and use cases and then we have the database schema if you work with a back end like like super base same goes for api design so if you want to connect other systems it makes also sense to to use this type of file and then one of the most important ones is the roadmap file which is basically the implementation approach for the lovable agent there you have the prioritization of of tasks and then there you can move with the ai step by step And you can also add external documentation if appropriate at this point. And how this looks is, or how you would start to build these files would be to gather all information you have for the application or the prototype you plan out to build. That can be meeting transcripts, which is basically, I think, a very, also something that is not well known or... underestimated i think to record your meetings if your colleagues agree of course but this will give lots lots of context for the ai to develop a good quality so gather all the information meeting transcripts documentation whatever you have and let the ai build a fully fledged product description out of that and to build those to build those instruction files, we have some prompts prepared, which we will share with you after the keynote or after today. So for every document we have prepared a prompt to build out those instruction files. And you can simply copy this into ChatGPT, add your product description and the AI then will build and structure the document that will later help Lovable to use a structured approach to develop an app. And how this looks in real life then is this for example. So this is basically an app which I was currently building. And I added my instruction files to the code base. I did that with GitHub. because you cannot simply upload files into Lovable directly. Lovable doesn't support that. So first of all, you would need to connect it to GitHub and then you can upload your code files or your instruction files into GitHub and then it will be automatically synced with your Lovable project. That's unfortunately the way to go at the moment, but it just takes a few minutes to set up. So that's no problem. And how a PRD document, so the project, um requirements document looks like is something like this so you have um all the the basic information then you have a project product summary and then um yeah like i mentioned it's it's about personas it's about the the user stories um which which are all laid out by the ai and what's what's most important at the end is is the roadmap file um so there you can just yeah then work together with the ai to build out your your complete app and um what you would expect then or how you would work with with lovable then is uh you would simply tell lovable please review all the instruction files i just gave you and then lovable will review that and will know the exact roadmap and then your next message will simply be okay now let's start with point one from our roadmap and then lovable will plan out the whole feature as it is written in in the roadmap and in a perfect world it would be just okay and now let's start with uh the next feature on the roadmap feature two feature three feature four uh and that's uh that's how we uh develop um at visual makers uh in in lovable to have a very structured approach and it's yeah it reduces a lot of work in the actual development process as well as um errors in in your app because it can happen that you end up in an error loop and the AI is not able to resolve your problem and in the end you would might you might need to go back to an earlier version which is also pretty good you have this revert history here where you can simply revert to earlier versions from from your app so yeah like I mentioned we will provide all the prompts at the end of the keynote Yeah, that's the stuff that I showed you. So what are other use cases you can build with Lovable? With Lovable, of course, you can also connect other tools, like for example, NNN. Does anyone of you know NNN? Nice, cool. So NNN is basically a workflow automation tool. Pretty cool startup, which is based in Berlin. And so in NNN, you can basically connect all your favorite business apps together they're integrating i don't know like 2000 2000 business apps and those little notes you see there are basically endpoints or api endpoints from from the apps and you can then match or yeah connect them together to to automate stuff to copy and paste data automatically to reduce repetitive work and they also have a very nice AI agent feature which we used for the following example. We for example built our own internal knowledge agent which is basically it works like chat GPT but for visual makers so every new employee can go ahead and ask this AI assistant for example what's the vision of visual makers. And then Lovable will connect to a NNN workflow, which lives in the back end. And this NNNN workflow will then process the question, look up our database, will find the right answer and will then push it back to Lovable. And Lovable obviously displays it here. So that's also a very, very cool demo of what you can do. um with uh with lovable and other tools like for example nnn and how it looks in nnn is like like this this might look a little bit overwhelming if you don't if you're not used to the tool but um what's happening here is basically two things we for this ai knowledge agent we have basically two two processes we need this one to to upload our our own documents to make it available for the agent could be a simple google doc of our mission or our target group or whatever existing case studies etc and this will be uploaded into a database and the the part that's relevant for lovable is this one here that's the actual ai assistant um when i send a question from from lovable then this webhook at the beginning will get triggered and then it will receive the question that i just sent in lovable and then it will pass it to the ai agent which is built out here and this agent is basically has it has a brain which is the the large language model you can choose from openai mistral uh meta etc it's basically everything that's available on the market then it has a memory which is in this case a database and it also has our database where all our company information is is saved or stored um so it can actively choose okay is this question something i need to look up in in the database if yes then it goes ahead looks up the information and then at the end it sends back to to lovable So that's also a very cool use case. Yeah, that's basically how it looks at the end. The architecture, it's basically the same as for Superbase, which I showed you a couple of minutes ago. Yeah, just with N8N. What else can you do? You can also simply build landing pages like this one here. This is also built with Lovable. And Lovable can also build cool animations. like those sliding animations or some like fading in stuff or some some hover animations and i know that um yeah many landing pages you will see from from lovable almost look the same or it goes every everything goes in a different in the same direction um but i think this example shows that that Lovable can also be a very very good designer. Of course the prompting needs to be good and very specific and I think you would also need to work with images or maybe figma layouts or something to achieve a result like this but it's definitely possible. What else can you do? You can also develop 3D games like this one here where you can move around this little character. It's pretty insane. Obviously, I don't know what's the goal of this game, but it looks nice. It looks very nice. It's completely built with Lovable. Okay, yeah, with wipe coding, there are a few pitfalls that you can avoid. Maybe you saw this guy from Axe who was posting, I think, at the beginning of the year. He built a full... functional sas with with cursor which is another vibe coding tool maybe a little bit more for experts but um yeah he was a little bit of bragging he just he didn't write any code by himself the ai was doing everything and two days later he posted guys i'm under attack so uh yeah some some users had a deeper look into his application and uh yeah saw that that he accidentally exposed some of his API keys and the source code, which you shouldn't do. Yeah, and yeah, after that, I think he stopped sharing what he was actually doing. So yeah, there are some best practices you might want to consider when building production apps with Lovable or with other Vibe coding tools, which is for example, never store your api keys in the actual source code rather use environment variables instead set up row level security if you use super base so it's clearly ruled out who can see what and can access which information only allow access from trusted domains and and so on and so forth i think these are a few best practices you can do when when doing that coding in the best case you can review the code uh i think um that's that's um that would be really good but um yeah obviously not not everyone can do that in terms of data privacy um there's also something that i should mention most providers will use your data for for training purposes in lovable all business plan users um are are safe or are safe here so um if you're running on the free plan, your prompts are being used for training data. So please be careful what you put inside your prompts, obviously. So yeah, that's basically we're at the end. Just a little advertisement for our own. So if you're just starting out with AI or struggling, don't know where to start. um we're happy to help with a one day ai strategy workshop where we uh yeah look at your processes together and work out some some prototypes in real time and give you a step-by-step plan on how you can continue your ai journey and um yeah if you want to get the prompts and the slides just scan the qr code fill out a very short form and then we will send you The materials afterwards and then I'm happy to answer questions

AI-powered prototyping is changing how product teams run discovery—and fast. In this live demo and talk at ProductTank Cologne, Alexander Sprogis explores the rise of vibe coding tools like Lovable, the fastest-growing software company to date, and shows how these tools can rapidly accelerate your product discovery process.

Learn how to build high-fidelity prototypes in minutes, test user reactions earlier, and de-risk your roadmap with fewer resources. Alexander shares real use cases, discusses the limitations of current tools, and gives practical advice for integrating vibe coding into your product workflow.

About the Speaker:
Alexander Sprogis is a product technologist and speaker who has been at the forefront of testing and exploring the potential of AI-enhanced prototyping tools. His work focuses on helping teams validate ideas quickly and improve discovery outcomes using the latest developments in generative coding.

→ See upcoming ProductTank Cologne events here: https://www.meetup.com/producttank-cologne/