Beginner’s Guide to Vibe Coding 🚀

I want to vibe code an app using a tool like Lovable, Bolt, or Replit. Before I start building, I need a complete project brief so the AI doesn't break the app trying to do too much at once.

Ask me these questions one at a time. Wait for my answer to each before asking the next:

1. What does your app do in one sentence?
2. Who are the users? (Be specific — "small business owners who track inventory" not "everyone")
3. What's the single most important thing a user needs to be able to do?
4. What are the screens or pages your app needs? (Examples: Login, Dashboard, Settings, etc. List them all.)
5. What data does the app need to remember? (Examples: User accounts, posts, products, transactions, messages — and the key fields for each)
6. Does the app need user accounts and login?
7. What's the visual style? (Examples: Clean and minimal like Notion, bold and colorful like Duolingo, dark and modern like Linear, warm and friendly like Airbnb)
8. Any hard requirements? (Mobile-friendly? Dark mode? Specific colors? A logo to upload?)
9. What's the ONE feature you'll launch with? (Most apps fail because they try to launch with 10. Pick the one thing your app does that no other app does as well.)

After I answer all the questions, write me a complete project brief in this exact format:===========================================PROJECT BRIEF: [APP NAME]===========================================1. WHAT THIS APP DOES[One paragraph in plain English. No buzzwords. A 12-year-old should understand it.]2. WHO IT'S FOR[Specific user description. What's their job, their problem, why they need this.]3. CORE USER FLOWStep-by-step walkthrough of what a user does from the second they open the app to the moment they get value:
1. User opens the app and sees [X]
2. User clicks [Y]
3. User does [Z]
[Continue for the entire flow]4. SCREENS / PAGESList every screen with a one-sentence description of what it shows and what the user does on it:
- [Screen 1]: [Purpose and key elements]
- [Screen 2]: [Purpose and key elements]
[Continue for all screens]5. DATABASE TABLESList every piece of data the app needs to store, organized as tables. For each table, list the fields:

Table: [Name]
Fields:
- [Field 1] (type: text / number / date / boolean / image / etc.)
- [Field 2] (type)
[Continue for all tables]6. AUTHENTICATION[Yes/no on user accounts. If yes, what login method: email/password, Google sign-in, magic link, etc.]7. DESIGN DIRECTION- Style: [Reference 1-2 apps with a similar feel]
- Color palette: [Primary, accent, background — with hex codes if I provided them]
- Typography: [Modern sans-serif / serif / display font / etc.]
- Layout: [Spacious / dense / card-based / list-based]
- Mobile-first or desktop-first?8. HARD REQUIREMENTS[Anything that's non-negotiable: mobile-responsive, dark mode toggle, accessibility, specific integrations, etc.]9. WHAT TO BUILD FIRST[The single most important screen to build before anything else. This is what I'll prompt Lovable/Bolt/Replit to build first.]10. INSTRUCTIONS FOR THE BUILDERA short note I can paste at the top of my first prompt to the vibe coding tool, telling it:
- The overall vision
- The tech stack to use (e.g., "Use React with Tailwind CSS and Supabase for the database")
- To build only the first screen, not the entire app
- To stop and ask before making major changes===========================================After you write the brief, give me my FIRST PROMPT to paste into the vibe coding tool. It should:
- Reference the project brief
- Tell the tool to build ONLY the first screen
- Include any visual style direction
- Tell it not to build other screens until I approve this one

Make the brief specific enough that the AI can build exactly what I want, but short enough that I can actually use it. No corporate filler.