What are tips when using AI code generators like Replit or Lovable to create a prototype of an app?
In short:
Start by creating the Sign-in and Sign-up flows with user storage.
Ask the AI to create one feature at a time
Watch a movie while the AI works for you
When debugging doesn't work rebuild the feature from scratch
Google "React Components" to give the AI a base for specific features
What are these AI coding tools like Replit and Lovable?
Replit and Lovable are AI tool that code for you the app idea that you have. Basically, you're writing in a chat what you want, and then the AI builds it for you.
At least, that's the plan for it. Obviously, it's a bit less magical than that and there is a lot of back and forth in testing what the AI built and asking it to correct the things it messed up or didn't think about.
Tip 1: Start by creating the Sign-in and Sign-up flows with user storage
If you create an app that has authentications, users, and registration, I believe it's easier to start with that from the get-go. Why? because then you'll have the logic that whatever you then create as a feature, the data is linked with the user that used that feature.
Where when you create first the whole app, and then add the user authentication, you might have to fix many parts of the features. The features might work but not link the data to the user. Then you have to fix every feature so that this linking happens.
Tip 2: Ask the AI to create one feature at a time
Don't give too much information, because the tool can't create five features at the same time. It's basically a tool that does one feature, then you check if it works, and then you move to the next feature.
If you're doing small cosmetic changes then you can ask the AI to do a few in the same request.
Tip 3: Watch a movie while the AI works for you
Even if the AI is fast, it still takes it time to generate the code for you. So there is some real time invested in waiting.
So while the AI is doing the work for you, maybe watch a movie, or do your emails, or have a task that you can do in parallel, so that it is a little bit less boring.
Because you'll have to checkin a lot of times to see if everything is working well and then tell the AI what to do next. But in between those moments there is a lot of waiting.
Tip 4: When debugging doesn't work rebuild the feature from scratch
A lot of time is obviously spent debugging things in tools like Replit or Lovable, as when you code things by hand.
Sometimes it happens that one bug isn't able to be solved by the AI. For example you tell the AI that there is a bug, and then it tries to solve it. But it still doesn't work. Then you might reframe the way that you explain the bug to be sure that the AI has understood it. Still sometimes it then says, "Oh yes, I've understood it," and it tries to fix it again, but it doesn't work still.
If you run through that cycle for a few times, what I recommend is to then tell the AI to remove that feature and rebuild it from scratch.
This is something that I did a few times when I was blocked in the debugging evil loops and it solved the issue.
Tip 5: Google "React Components" to give the AI a base for specific features
I was trying to create a timer feature, the layout was very shitty at first. So I asked the AI to improve that layout and gave it tips, but it still wasn't very good.
So instead of having a fight with the AI I gave it a reference to use. To do that I searched in Google for "React components" of a good-looking timer.
Basically, many tools like Replit and Lovable uses the coding language React, and the component are like template made by a developer that you can re-use.
So after finding such components I can mention them to the AI and tell it that it should use this component or something similar. And it works very well!
This is just the start
That's it for now. I'm still very early in my journey of using AI coding tools like Replit and Lovable to prototype digital apps, so I'm sure more tips will come here in the future.
Written with AI help
This article is based on an Audio note that I transcribed automatically using Open AI Wishper and then reviewed by hand.