Transcription
If you're using Vzero or Lovable to prototype and it's working, keep using it. But if you've ever spent 45 minutes going back and forth with AI to help fix something, watching it break something else, fix that and then the first thing breaks again. You're hitting the wall.
Today, I'm going to show you when it's time to stop prototyping in a sandbox. A sandbox is lovable, the zero, base 44, all of those prototyping tools that sit on top of the actual code. and to start prototyping directly in your codebase.
So what is actually happening when lovable keeps breaking? These tools make decisions for you. And that's the magic. You describe what you want and AI figures out how to build it. But when it guesses wrong, you're stuck because you don't know what it decided or why it broke and you can't fix what you don't understand.
But these guardrails are put in place so everyone who wants to prototype can. These are beautiful tools. And the even bigger problem for product teams is that you build a prototype in v 0ero. It looks great. You show it to the stakeholders. Everybody's excited. Then you hand it to your dev team and they say, "Cool, but we can't use any of this code. It doesn't match our codebase, our design system, or our architecture." So then they rebuild your v0ero lovable prototype from scratch. you just added an extra cycle to your dev process instead of removing one.
So this shift that happens that I just described when you realize v 0ero lovable are sandboxes they're not able to do what you need them to do it's because you're building in isolation but what if you could prototype directly in the codebase same conversation with AI same build this for me chat experience that you're used to but now it's being built on top of the foundation that your team has already created enter claude code and no you don't need to learn code the terminal is just a chat window without all the fancy UI so how To get started, first you want to download a terminal.
A lot of people use cursor. I started off with cursor when I made this transition, but cursor is great if you know code or if you're using the cursor AI experience. I want to use cloud code. So I don't need everything else that comes with cursor. All I want is just a really simple interface that I can chat with. Let me share my screen and show you what I use. So this is a terminal called Ghostly. I will share the link to download in the description. Essentially, it's just basic. You're just writing code here, chatting with Claude.
A big learning curve for me were things like, I don't even know what this means, right? So, what I do is I actually take this, I say, what does this mean in the terminal to Chad GBT? And it helps me understand a few things that look a little fancy that at first I was like, what am I supposed to do? Um, such as the X. What does this X even mean? It basically now I know it means that you haven't committed code, which is good to know. Um, so let's get into cloud because this is going to feel way more familiar. I'm just going to say Claude. There we go. Now we're working with Encloud code, which means you don't really have to use coding language. You don't have to know coding language. You just have to chat. and it's very clean.
So the feature we're going to be working on is I am in cal.com and I want to not just schedule a new event. I wanted to schedule a oneoff meeting. So this is a pretty big feature. Um I want to see how claude code in plan mode helps me understand how I can architect this out. The other thing I want to share is I no longer type everything out. I now dictate. I have a dictation tool called Whisperflow. And basically I can hit the Fn button and I can dictate here and I can say what I want and it's going to appear here. So I am going to dictate exactly what I want.
The other important thing that I suggest everyone do especially in plan mode is before you say what you want you should use the prompt I am a worldrenowned startup CTO. That puts Claude code in the perspective of coming up with ideas and brainstorming and being that plan mode person. And just by saying that first, I'm getting really quality answers and questions from God. So here's my prompt. You are a worldrenowned expert startup CTO. I need to add a new feature, an option to schedule a one-time meeting. I want it to appear as a button in between search and new on the top. It should be secondary and it should open a popup where I can choose specific times for a meeting. Can you help me understand how to create this one-time meeting using patterns already established in cal.com to make the user experience seamless?
And while this is running, if you are trying to figure out with your team how to actually get into the codebase, how how to actually build on top of the codebase, you are not technical, reach out to me. I would love to have a conversation about how my team could help be more involved in getting this design development workflows in place. So you see here it's running three explore agents. So at the same time it's looking through the top nav the modal dialogue patterns and it's going to be in a second looking through the meeting creation patterns. Okay. So it has a clear did you hear that? Doo. So, that's also something really great about Ghostly is, of course, this is happening in the background. It took four or five minutes. Um, and I usually put it off to the side so that I can do something else while it's doing its thing and then it notifies me when it's done. So, then I can come back to it. Um, so that's really cool terminal feature.
Okay, so it says, "I have a really clear picture of the navigation structure and I have a few important questions to clarify before finalizing. This is what I love. Where exactly should the button appear? The global navigation doesn't currently have a new button. The only one appears on the events page. Should the one-time meeting button be added to the global top? No, it should be added to the event. So then I'm scrolling down to two. Enter. What should happen when a user creates a one-time meeting? Generates a sharable link. Direct booking form. Create hidden event type. Create sharable link. I think that's what makes the most sense. Time selection. How should users select meeting times in the popup? Oh, this is I'm actually thinking between one and two. Choose from your availability. I like this. And this is not something I would have thought of. I want to say two. Where exactly should the button appear? The global navigation. Okay, we already answered this one. Um, submit answers. Done. Now I have a complete picture. Let me write the implementation plan. So, this usually takes a while, too. It's going to write exactly what it thinks it should do. Okay. So, add a one time meeting button user requirements implementation approach. Create a hidden event type with date overrides rather than completely new booking system. Okay, this sounds like it makes sense to me. Files to modify event type page new dialogue component. Yes. Then it's giving the modal uses form fields. Okay. So it's changing where it's going to be redirected and creating a hidden event detailed component structure. These I love visually telling me exactly like this goes to text field one time and then you can open it up. There's also the create button and you open the dialogue. Okay. User clicks on the onetime meeting button. Dialogue opens with the date picture showing users availability. Copy. Key patterns to follow. Great. I definitely want it to feel like it's a cohesive experience. So then it's implementation order. These are the ways it's going to actually do it. And then it's going to test it. So this is awesome. Um, it's actually going to go into the actual code that's created onto the page and make sure that these actions are happening. Yes, I'm going to say yes. Auto acceptance. Now, it's going to go build.
So this whole plan, this back and forth with Claude code, these were all decisions that were being being made for you and Vzero and Lepable and Base 44. But now you get to make them together with Claude Code. It's like having that CTO that stops by and say, "Hey, before we code, here are some ideas and some problems I have and some questions. Does this make sense to you? Let's align on them before moving forward." And this just makes the whole experience that much better. So now it's not just building something like remember it was going to ask me where I put that dialogue box. Um now I got to tell it exactly where to put it. So questions like that I get to answer before it starts to build it which NBZ doesn't do those things. Perfect. So it looks like it finished testing. Okay. So let's see. I'm sure things are not perfect um and it broke and we're going to have to go back and forth but we'll have way more understanding. So there is a button here. Perfect. We click this. Okay. Okay, so this is a modal. It says to select a date. So let's say for tomorrow something went wrong. Okay. Um I assumed something like this would happen. I think there's going to because this is such a complex feature, we're going to have to go in and better understand what's working and what's not working. So then when I click on select a date, it breaks. Can you look into why it's not working? So it says it's fixed the issue. They were in a wrapper. So, let's refresh. There we go. Okay, perfect. And I can select the tit 30 minutes. So, I'm going to have to go back and forth because, see, I can select these days, but then I can't select different ones. So, there's a lot more back and forth I need to do with Cloud Code. But, you can see the structure and the planning and why I would take it away from using tools like V 0ero and being able to get my hands dirty on the actual code so it can build directly off of the codebase.
So, when should you move from Vzero Lovable into Cloud Code? Switch when you're looping on the same bug and it's not fixing it. Your prototypes don't match your design system. your dev team rebuilds everything anyway. You want to prototype in your actual codebase, not in a sandbox. Stay in v 0ero and lovable if you're validating an idea very fast. It's a throwaway prototype. You don't have access to the codebase yet.
And if you want to try this, it really is simple. Go download a terminal. I suggest Ghostly. Go make sure it's connected to Cloud Code. Make sure you're connected to your company repo. I explained how to set this all up in a previous video. I'll link to it in the description. And then go ahead and play around with plan mode and see what happens. And last but not least, if you get stuck and confused, ask AI. It'll help you understand what's not working and why.
If you liked this video, please like and subscribe below. I am putting out more content weekly on how product teams can ship faster with AI, so follow along. Thank you.