How to Vibe Code Your Own Product

I'm building [YOUR PRODUCT NAME] — [one sentence description].

Tech stack: Next.js 14 App Router, TypeScript, Tailwind CSS, Supabase for auth and database.

Create the project structure with:
- A homepage with a hero section, features section, and CTA
- An auth page (sign up / sign in)
- A dashboard page (protected route, visible only when logged in)
- Dark theme with [YOUR COLOR] accents

Start with the homepage.

Add [FEATURE NAME] to my existing app.

Current stack: [your stack here]

The feature should:
1. [What it does step 1]
2. [What it does step 2]
3. [What it does step 3]

Requirements:
- Use [existing component/pattern] for consistency
- Mobile responsive
- Handle loading and error states

Here's the current relevant code: [paste your code]

I have a bug in my app. Here are the details:

Error message: [paste the full error]

Steps to reproduce:
1. [Step 1]
2. [Step 2]

Expected behavior: [what should happen]
Actual behavior: [what actually happens]

Here's the code causing the issue:
[paste your code]

Please fix this and explain what caused it.

Redesign this component to look more polished and professional.

Current design issues: [describe what looks bad]

I want it to:
- Feel modern and clean
- Use my brand color [YOUR COLOR]
- Be fully mobile responsive
- Have smooth hover transitions

Here's the current component:
[paste your component code]