Vibe coding tips & tricks

Plan > Prototype > Production > Publish

Hey PH! 👋

After building numerous apps with AI over the past year, I wanted to share some helpful tips I've gathered along the way, to help you vibe code your next idea:

1️⃣ Follow the 4P Method: Plan > Prototype > Production > Publish. This is how I build my apps. This method helps me break down complexity and make faster progress. 

2️⃣ Plan before coding. Start with a solid foundation by using AI to create a PRD and map out your features, design, and data model. If possible, add references to existing applications (e.g. “like Airbnb”) and screenshots.  

3️⃣ Focus on creating a working prototype first. Save backend implementation and authentication for later to avoid unnecessary complexity early on. Once you're comfortable with the UX and design, then move forward with the backend.

4️⃣ Starting fresh > Iterate. If AI didn’t pick up on your prompt, sometimes it’s better to start fresh. For small changes, iteration makes sense. For larger issues, especially during the prototype phase, it's often more efficient to edit your initial prompt and start over.

5️⃣ Provide visual feedback. When iterating, share screenshots of your generated app with the AI. This significantly helps with resolving UI issues.

6️⃣ Name your components and versions. Thanks to @rajiv_ayyangar for this tip. Establish a shared vocabulary with the AI by asking it to enumerate, name, and describe different states of your app. This makes it easier to reference specific elements when requesting changes.

What other hacks are you using in your AI builds? Share them below! 👇