Have you heard about vibe coding? It’s a way to create an app without writing any code, just by chatting with an AI. If you haven’t tried it yet, we’re going to change that today. I can get you started in 15 minutes, and if you want to build a real, useful web app, you can get that deployed in a few hours.
Vibe coding is a dream come true for product managers: all the skills we’ve built up working with engineers and designers are exactly what you need to work with an AI teammate.
Whenever I try to learn something new, I find the hardest bit is the very very beginning of getting started. So, I’m recording step-by-step everything I’m doing to build a new vibe-coded ukulele practice app.
I think it’s worth it to try vibe coding today even if you don’t have an app idea, so I start by asking ChatGPT to help me come up with an idea. If you’re stuck, think about your hobbies, anything you’re recording in a notes app, etc.
The only step I didn’t show is signing up for Replit: go to replit.com, click sign up, I used my gmail account.
Don’t want to watch the video?
I don’t blame you, I prefer reading too, so here are the key points.
ChatGPT for Ideas
Hey I want to vibe code an app to help me, a total beginner, play the ukulele, can you help me brainstorm some ideas?
It gave me 6 ideas, and one of them was close enough to something I thought would be helpful - an app to help me practice switching between chords faster.
Not shown in the video was that ChatGPT offered to make the app for me, I said yes, it scrolled an inscrutable amount of code on the screen and the resulting app didn’t work, at least because it couldn’t get microphone access. I’d meant to be using Replit anyway so I decided to shift gears.
Product Thinking - What to keep and what to unlearn
As a product minded person, hold onto your core skills of picking a valuable problem and strategizing an impactful solution.
Is there a real problem this app is going to solve?
How do you solve it today?
What would it take for this solution to be 10x better?
What tricky details does the app need to get right?
But, the cool thing about vibe coding is that trying out an idea is 100x cheaper than iterating with human engineers and designers.
Early in my career, I internalized that my key role as a PM was to make the most of valuable engineering time. I needed to get ahead of user needs, problems, and decisions so the engineers wouldn’t waste any time building the wrong thing. One of the worst things a PM could do was change their mind after the code was written.
AI assisted coding flips this around. You can ask the AI to build something with almost no thought, and then when you don’t like the result, ask for a change, and then another change. This approach lets you try and react and can help surface those tricky details that need to be right a lot faster.
The two-pass approach to vibe coding
What I’ve found is really helpful for getting the most out of vibe coding is to plan for a two-pass approach.
The first version of the app is just a scratch pad, a prototype that I intend to throw away. It’s going to be messy and that’s fine—the goal is to surface the big design questions and learn what you want the final product to look like. PS. That’s a real human-typed em-dash, I won’t let the AI have it.
So for the first pass, just don’t stress anything too hard. And take notes on what’s working or not working, since we’ll use that for our final pass.
Replit
Here’s what I typed in the Replit home page
It came up with a UI preview and a plan that I ignored and just clicked “Approve Plan & Start”
It worked for 6 minutes, during which I gave a little tour of the Replit UI.
The main thing to know is that in addition to the preview tab & agent tab, you can also see all the files it’s created and directly view or edit them.
Also a warning - AI agents (and all chatbots) are a bit like 5 year olds - they can just talk and talk and not know when they’re making stuff up. So don’t get caught up trying to teach it not to lie to you or to push it beyond its capabilities. Here’s an example of when that goes wrong. A big part of why I want you vibe coding a side project today is so that you start to get a real feel for what these platforms can and can’t do.
Filing bug reports
So, in 6 minutes replit had a version of the app I could play with, and I immediately found problems. In fact with vibe coding, I find that the most useful skills are testing/QA skills - learning how to find and report bugs.
If you’ve gotten good at filing bug reports at work, with detailed repro steps and descriptions of what you expected vs. what happened, you’re in good shape to ask your AI agent to fix things.
The C major and F major chord illustrations don't look right. For example, C major is 3rd fret on A string, but the 4th fret is filled in, as well as 1st on G, C, and E. Can you please double check the fingers & frets for the chords and make sure the illustration matches
This worked to fix the inaccuracies, but the design was still terrible (fixed in day 2, coming soon!)
Just 1 minute for the bug fix!
Adding listening
The first version didn’t actually listen to me playing the ukulele to let me know if I was playing the right chord or not.
Is it currently listening to see if I played the right chord?
It wasn’t and it asked if I wanted it added. “Yes please” I responded.
How long do you think it took to add listening and chord detection? To me this feels pretty complex. I’d expect an eng to tell me at least a day.
Replit? 2 minutes. And it worked!
What I found especially delightful was the way it talked to me about what it was doing as it worked:
I'll add chord detection capabilities to the app using the Web Audio API. This will allow the app to listen to your ukulele and provide real-time feedback on whether you're playing the correct chords.
Now let me create a component for chord detection feedback and integrate it into the practice session:
Now I'll integrate the chord detection into the main practice page:
…
This helps me build a little intuition of how it works and what’s involved in the change.
Checkpoint / Rollback
Replit automatically creates checkpoints. If I try something out and it doesn’t work, I can rollback to this checkpoint and undo.
Some Reflection
Vibe coding is really fun, almost addictive.
There’s a whole lot of PM skills I use when vibe coding:
Thinking about goals and the problems I want to solve
Setting design goals and constraints
Reviewing the product for bugs & design issues
Writing clear bug reports
Using my own knowledge of what’s possible
And there’s a lot that’s different
The cost to build new features and fix bugs is totally different than my previous expectations. I can’t assume what will be hard or easy, so I shouldn’t cut scope before I’ve tried.
It’s almost free to try different ideas, change my mind and iterate.
The apps can come up with good design ideas
I’ve really enjoyed day 1. The writeup for Day 2 is coming soon!