I was talking to a junior dev the other week. I kept asking them to remove this duplicate status in one part of the app, and the dev kept sending the app back to me with the same duplicate in place – frustrating! We talked about it, and the dev explained their plan to fix the issue, once and for all.
I asked: “why wrap this div in a conditional render, instead of getting rid of it? To clarify, there is a second div, with class flex items-center space-x-2, that also displays the status, that works just fine and I’d like to keep.”
The dev explained “The reason for conditionally rendering the div with the class inline-flex items-center px-2 py-1 rounded-full text-xs font-medium (which I’ll refer to as the “status badge”) instead of removing it entirely is to maintain its utility when a task is completed.”
I said “Let’s just get rid of the ‘status’ idea” and finally, the problem was solved!
At around the same time, I was working with a junior designer. When I suggested we try a change in design – from boring blue-on-white to green-on-black – there were a LOT of accessibility problems at first! And too many of the calls-to-action were primary. But after some additional feedback, they got their act together, and it’s looking pretty good now.
Of course, I’m talking about working with AI tools like v0.dev, lovable.dev, and bolt.new (the above convos were with Bolt).
If you’re a product manager, and you’ve worked with engineers or designers, you’ll probably be pretty good at working with these tools: it’s communication similar to what you’ve known.
After creating several projects, I’ve gathered some insights to share.
With v0, I created a custom PDF resume builder, building an app that brought to life my own ideas about PM resume best practices.
With Bolt, I’m currently working on a Keystroke Level Modeling app called TaskTimer, inspired by CogTool. You can model how long it would take an expert to perform a task on a given set of screenshots, allowing comparisons of two designs to determine which is more efficient for expert users. This is particularly valuable for software used by operations teams, medical professionals, or any other professionals who rely on everyday-use applications.
If you’re looking to dive into app development but feel unsure where to begin, I’ve consolidated some of my key learnings, practical tips, and useful resources in this post to help you get started.
If You Don’t Know Where to Start, Begin with an LLM or Start with Someone Else’s Idea
LLMs (i.e. Gemini, ChatGPT, etc) can be good partners for brainstorming and planning. I’ve brainstormed ideas, starting prompts, etc.
Keep in mind it’s not a replacement for customer research, but it can be a good brainstorming partner. It can also give you some really terrible ideas, but it can still be a good starting place.
Or, if you really don’t know where to begin, v0 lets you start with an app built by someone in the community:
Read Through Some of the Help Articles & Watch a Few Videos
It’s worth spending a few minutes getting familiar with the tools you’re about to use. Bolt has an excellent “Best Practices” section of their help center that’s worth checking out.
As well as some helpful videos:
Start with a Prompt
For example, start with your landing page that just has text on it, or start with one piece of your app, such as a form.
What I’ve found is it doesn’t matter too much where you start; you’ll keep iterating from there. Just pick somewhere, and you’ll keep going from there.
Try not to be too broad, i.e. “build me a resume tool”, or else you might start way off track and have to waste a lot of credits bringing the tool back in line with your vision.
If you’re choosing a form, provide what you need to get from the form. Include your target audience. Be clear and specific, as you would be with a teammate.
Just like with a designer, you could provide the look you want (“clean, simple, white background, mostly black and white with gray accents”) or you could provide your brand color palette.
You don’t need ALL of the details, like whether the button is on the left or the right, or whether something is a button or a link. If you’re giving verbal commands (rather than feeding in a design), treat the tool like a designer who you can give feedback to later; provide the necessary context, but not unnecessary constraints, and see what it will come up with. Sometimes the AI will surprise you in a good way!
Use the Discuss Feature
For Bolt, use the discuss feature when you have questions. It uses fewer “tokens” than a regular prompt, and you can have a back-and-forth discussion on a plan with the AI before it goes and implements something in code, much as you would with a dev (see: my anecdote at the beginning of the post).
It’s much “cheaper” to decide on a plan first.
Example Challenge: Deploying
There have definitely been some challenges along the way. My biggest challenge with both v0 and Bolt has been with deploying.
With v0, I had to copy/paste the log errors into the chat, and then v0 told me how to go fix them in which files, rather than fixing the problem itself. Weird, but ok.
For Bolt, sometimes when I deploy, the changes just don’t appear at the URL. Through discussions with Bolt, I’ve found I often need to manually run a command in the terminal (specifically, npm run dev) to get it to actually fully rebuild with the new files included; deploying after that has worked.
Be prepared to run into some challenges that you’ll need to work through, but the AI itself can help you figure out next steps, even if it needs more assistance from you than you expected.
Resources For More
- Posthog: An Engineer’s Guide to Vibe Design: An excellent end-to-end walkthrough of the process, with a focus on design
- Build Your First App: A great article from Bolt that’s worth checking out, walking you through the lifecycle of an app as well as discussing how to work with Bolt
- Become a v0 expert: Somewhat similar to the above, but for v0, and with fewer generalities
- Stitch with Google: I haven’t tried this yet, but it looks very interesting; an AI tool to help you bring your UI ideas to life (before you bring them into one of the builder tools)
- Figma to v0 video: If you’re a Figma user, this is a great video on how you can go from Figma to a full app using v0
Most of All – Enjoy & Explore!
I hope this helps you get started on your building journey. I’d love to hear about what you build!