Skip to content

Quick Start Guide

Jump to bottom
Alp Yalay edited this page Aug 10, 2025 · 1 revision

Quick Start Guide

Complete Workflow in 60 Minutes

This guide walks through the entire vibe-coding workflow from app idea to working MVP.

Before You Start (5 minutes)

1. Choose Your AI Platform

Pick one for research and planning:

2. Choose Your Coding Tool

Pick one for building:

  • Beginner: Windsurf or Bolt.new
  • Intermediate: Cursor ($20/month)
  • Advanced: Claude Code (npm install -g @anthropic-ai/claude-code)
  • Free: Cline (VS Code extension) + Gemini CLI

3. Create Project Folder

mkdir my-app-project
cd my-app-project
mkdir docs

Part I: Deep Research (20 minutes)

Step 1: Copy the Research Template

  1. Get part1-deepresearch.md from the repo
  2. Copy the entire content
  3. Paste into your chosen AI platform (AI Studio recommended)

Step 2: Answer the Questions

The AI will ask you to identify as:

  • A) Vibe-coder - Limited coding experience
  • B) Developer - Programming experience
  • C) In-between - Some basics

Then answer 8 questions about your app idea.

Step 3: Generate Research

The AI will create a comprehensive research prompt. Copy and paste it into a new AI chat to generate your research findings.

Step 4: Save Research

Save the output as docs/research-[YourAppName].txt

✅ Part I Complete: You have validated market research

Part II: Product Requirements (15 minutes)

Step 1: Copy the PRD Template

  1. Get part2-prd-mvp.md from the repo
  2. Copy the entire content
  3. Start a new AI chat session

Step 2: Upload Research (Optional)

  • Attach your research file from Part I if you have it
  • Or indicate you don't have one

Step 3: Answer PRD Questions

  • Confirm your technical level (A/B/C)
  • Answer 10 questions about:
    • Product name and purpose
    • Target users
    • Core features (3-5 only!)
    • Success metrics
    • Design preferences

Step 4: Generate PRD

The AI creates a professional Product Requirements Document.

Step 5: Save PRD

Save as docs/PRD-[YourAppName]-MVP.md

✅ Part II Complete: You know exactly what to build

Part III: Technical Design (15 minutes)

Step 1: Copy the Tech Design Template

  1. Get part3-tech-design-mvp.md from the repo
  2. Copy the entire content
  3. Start a new AI chat session

Step 2: Upload Required Documents

  • Required: Your PRD from Part II
  • Optional: Research from Part I

Step 3: Answer Technical Questions

  • Confirm your technical level
  • Answer 7-8 questions about:
    • Platform preference (web/mobile/desktop)
    • Tech stack preferences
    • Budget constraints
    • Timeline
    • AI tool preferences

Step 4: Generate Technical Design

AI creates detailed implementation plan with:

  • Recommended tech stack
  • Architecture decisions
  • Cost analysis
  • Deployment strategy

Step 5: Save Technical Design

Save as docs/TechDesign-[YourAppName]-MVP.md

✅ Part III Complete: You know exactly how to build it

Part IV: AI Agent Instructions (5 minutes)

Step 1: Copy the Agent Instructions Template

  1. Get part4-notes-for-agent.md from the repo
  2. Copy the entire content
  3. Start a new AI chat session

Step 2: Upload All Documents

  • Required: PRD and Technical Design
  • Optional: Research findings

Step 3: Configure Your Setup

Specify:

  • Technical level (A/B/C)
  • Which AI coding tool you'll use (can select multiple)

Step 4: Generate All Configuration Files

The AI creates:

  • NOTES.md - Universal instructions
  • Tool-specific config files based on your selection

Step 5: Save All Files

Save all generated files to your project root:

my-app-project/
├── NOTES.md
├── [tool-specific config files]
└── docs/
    ├── research-[app].txt
    ├── PRD-[app]-MVP.md
    └── TechDesign-[app]-MVP.md

✅ Part IV Complete: AI agent instructions ready

Build Phase: AI Builds Your MVP (1-3 hours)

Step 1: Set Up Your Chosen Tool

If Using Cursor:

  1. Download and install Cursor
  2. Open your project folder in Cursor
  3. Ensure .cursorrules file is in the root
  4. Start with: "Read NOTES.md and begin implementing the MVP step by step"

If Using Claude Code:

cd my-app-project
claude init
claude "Read CLAUDE.md and NOTES.md, then start building the MVP"

If Using Windsurf:

  1. Download and install Windsurf
  2. Open project folder
  3. Ensure .windsurfrules file is present
  4. Start with: "Read NOTES.md and guide me through building this MVP"

If Using Bolt.new:

  1. Go to bolt.new
  2. Paste your PRD content
  3. Say: "Build this MVP following these specifications"

Step 2: First Development Session

Universal starting prompt:

"I have a complete project specification. Please read NOTES.md thoroughly, then begin implementing the MVP following the phased approach. Start with Phase 1: Foundation setup."

Step 3: Iterative Development

Follow this pattern:

  1. Implement one feature at a time
  2. Test after each feature
  3. Fix any issues before moving on
  4. Ask for explanations if you don't understand something

Helpful follow-up prompts:

  • "Show me the current progress compared to the requirements"
  • "Test the [feature name] functionality and fix any issues"
  • "Add proper error handling to [feature]"
  • "Make this work properly on mobile devices"
  • "Prepare this for deployment to [platform]"

Step 4: Testing and Deployment

Before deployment checklist:

  • All core features from PRD work
  • App works on mobile and desktop
  • Basic error handling is in place
  • No console errors in browser
  • Basic user journey works end-to-end

Deploy your MVP:

  • Follow deployment instructions from your Technical Design
  • Most tools can deploy to Vercel, Netlify, or similar platforms
  • Get your live URL to share with users

Success Metrics

Your MVP is successful when:

  • All must-have features from PRD are working
  • Users can complete the main user journey
  • App is deployed and accessible via URL
  • You can make basic changes and updates
  • First users are actually using it

Common Issues and Solutions

"AI doesn't understand my project"

Solution: Start with: "First, read all attached documents completely, then confirm you understand the project before proceeding."

"Code doesn't match my requirements"

Solution: "Please review the PRD again, specifically the [feature] requirements, and align the implementation accordingly."

"AI is making it too complicated"

Solution: Add to your prompt: "Keep this simple - we're building an MVP, not a perfect product. Choose the simplest solution that works."

"I don't understand what the AI built"

Solution: "Please explain how this code works, step by step, like I'm a beginner."

"Something is broken"

Solution: "I'm getting this error: [paste error]. Please explain what went wrong and how to fix it."

What's Next?

After your MVP is working:

  1. Share with 5-10 people for initial feedback
  2. Iterate based on user feedback
  3. Add features gradually - resist feature creep
  4. Monitor your success metrics from the PRD
  5. Scale when you have product-market fit

Time Summary

Phase Estimated Time Activity
Setup 5 minutes Choose tools, create folder
Part I 20 minutes Research and validation
Part II 15 minutes Product requirements
Part III 15 minutes Technical design
Part IV 5 minutes AI instructions
Planning Total 60 minutes Complete specifications
Building 1-3 hours AI builds your MVP
Grand Total 2-4 hours Working MVP

Traditional development time: 4-8 weeks Vibe-coding workflow time: 2-4 hours

That's the power of AI-assisted development in 2025! 🚀

Clone this wiki locally