Getting Started — VibeCode

Step 1: Pick Your Tool

Your first decision is where you'll vibe code. Here are the easiest starting points:

Easiest: Browser-Based

Tools like Bolt.new, Lovable, or v0.dev let you type a prompt in your browser and get a running app instantly. No setup, no installs. Perfect for your first time.

Most Powerful: IDE-Based

Cursor or Windsurf give you a full coding environment with AI built in. More control, more capabilities, slight learning curve.

For Terminal Lovers: CLI

Claude Code runs in your terminal. It reads your project files, makes edits, and runs commands. Great if you're comfortable with the command line.

Step 2: Write Your First Prompt

Don't overthink it. Describe what you want like you'd tell a coworker. Here's a great first prompt:

Your Prompt Build me a personal portfolio website with: - A hero section with my name and a short bio - A projects section showing 3 cards - A contact form at the bottom - Dark theme with purple accent colors - Responsive for mobile

That's it. The AI will generate HTML, CSS, and JavaScript. You'll see a working website.

Step 3: Iterate

This is where vibe coding shines. Your first result won't be perfect — that's fine. You iterate:

"Make the hero section taller and center the text"
"Change the purple to a blue-green gradient"
"Add a smooth scroll animation when clicking nav links"
"The contact form submit button isn't working — fix it"

Each prompt refines the project. You're directing, not writing code.

Step 4: Understand the Loop

Vibe coding follows a simple loop:

Describe → Review → Refine → Repeat
You describe what you want. The AI generates code. You look at the result. You describe what to change. The AI updates the code. Repeat until it's right.

Step 5: Know When to Start Fresh

Sometimes a conversation goes off the rails — the AI starts breaking things it already fixed, or the code gets tangled. That's normal. Tips:

If you've gone 10+ back-and-forths without progress, start a new conversation
Copy your best working code before starting over
In the new conversation, paste the working code and explain what you want to change
Smaller, focused conversations tend to work better than marathon sessions

Common First Projects

These are great projects for your first time vibe coding:

Portfolio Website

A personal website with your info, projects, and contact details. Simple HTML/CSS, instant results.

Beginner

Todo App

The classic first project. Add, complete, and delete tasks. Teaches you about state and interactions.

Beginner

Chrome Extension

A simple browser extension — like a tab counter or page highlighter. Surprisingly easy to vibe code.

Intermediate

Dashboard

A data dashboard with charts and stats. Great for learning how AI handles data visualization.