Pre-Vibe Coding

Everything you need to know before your first line of AI-generated code.

A guide for non-technical people who want to build real things with AI tools — and use AI agents to get more done in work and life.

This is not a coding course. You won't learn to write code here. Instead, you'll learn the things you need to know before you start telling AI to write code for you.

Think of it like learning to read a map before using GPS.

What you'll be able to do after reading this

• Understand what happens when software runs (at a real level, not a hand-wavy one)
• Describe what you want to build in a way that AI can actually act on
• Know what frontend, backend, server, database, domain, and port mean — for real
• Set up your computer to start vibe coding
• Communicate with AI tools effectively
• Go from "it works on my computer" to "it's live on the internet"
• Use AI agents for non-coding tasks too

Chapter 1: What Vibe Coding Actually Is

In early 2025, Andrej Karpathy (one of the founders of OpenAI) posted this:

"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

It went viral. The idea: you describe what you want in plain English, and AI writes the code. You don't read the code. You don't debug the code. You just... vibe.

That's the myth. Here's the reality.

Vibe coding is real, and it's powerful. But "you don't need to know anything" is wrong. It's like saying "you don't need to know anything about food to run a restaurant." Technically the chef does the cooking. But if you can't describe the menu, understand your ingredients, or tell when something tastes off — your restaurant will fail.

A better way to think about it

You are a director. The AI is your film crew. They can build sets, write scripts, shoot footage, and edit — all at superhuman speed. But they need clear direction. If you say "make it good," you'll get something random. If you say "a 30-second scene in a cozy coffee shop, warm lighting, two friends laughing over lattes, shot from a low angle" — you'll get something close to what you imagined.

It's bigger than coding

Vibe coding is just one use case. The real shift: AI agents can now do things for you. Not just answer questions — actually take actions. Write files, run programs, search the web, analyze data, create reports.

Whether you want to build an app, automate parts of your job, analyze data, write documents faster, or research topics in depth — you need the same foundation. That's what this guide gives you.

Chapter 2: How AI Agents Work (The 2-Minute Version)

You don't need to understand how a car engine works to drive. But you do need to know: cars need fuel, the steering wheel turns, and the brake stops you.

Same idea here. You need to know just enough about how AI coding tools work to use them well.

The Loop

Every AI coding tool — Claude Code, Cursor, GitHub Copilot, Codex — works the same way:

You say something
     ↓
AI thinks about it
     ↓
AI takes an action (writes a file, runs a command, reads something)
     ↓
AI looks at the result
     ↓
AI decides: am I done? or do I need to do more?
     ↓
If not done → go back to step 2
If done → report back to you

That's it. Everything else is details.

Why this matters to you: When the AI seems "stuck" or keeps going in circles, it's stuck in this loop. Understanding the loop helps you unstick it. (Usually by giving clearer instructions or starting a fresh conversation.)

What the AI can see

• Your project files (the code, the folders, the structure)
• Your conversation history (everything you've said so far)
• Results from actions it has taken (like running a command)

What the AI cannot see

• Your screen (it doesn't know what your app looks like unless you tell it)
• Your intentions (it can only work with what you've actually written)
• Context you haven't shared ("oh, I also need it to work on mobile" — if you didn't say it, it doesn't know)

The context window — the desk analogy

Imagine the AI has a desk. Every message you send, every file it reads, every action it takes — all of it goes onto the desk. The desk has limited space. When it fills up, older things fall off the edge.

This is the context window. It's why very long conversations sometimes go sideways — the AI literally can't "see" what you discussed 50 messages ago.

The contractor analogy

Think of the AI as a brilliant contractor who just arrived at your job site. They've never seen your project before. Every time you start a new conversation, they walk in fresh — no memory of yesterday.

Your job is to orient them quickly: "Here's the project. Here's what's already built. Here's what I need you to do next."

Chapter 3: Thinking in Systems (The Key Skill)

This is the most important chapter in this guide. If you learn one thing, learn this.

Everything is a system.

A restaurant is a system. Inputs: hungry customers, raw ingredients. Processes: take orders, cook food, serve. Outputs: fed customers, revenue.

Your morning routine is a system. Inputs: alarm clock, coffee beans. Processes: wake up, brew coffee, shower. Outputs: you, ready for the day.

An online store is a system. Inputs: products, visitors. Processes: browse, add to cart, checkout, pay. Outputs: orders shipped, money collected.

Why this matters for vibe coding: When you can describe your idea as a system, you can describe it to an AI. When you can't, you get vague results.

The Four Things Every Software System Has

1. Data — What information does it store? (tasks, users, bookings, products)
2. Interface — How do people use it? (buttons, forms, pages, screens)
3. Logic — What are the rules? (if password wrong, show error; if seats full, block booking)
4. Connections — What outside services does it talk to? (payments, email, login)

The Napkin Sketch

Before you open any AI tool, grab a piece of paper and sketch:

• Boxes for each page or screen
• Arrows showing how users move between them
• Notes about what data lives where

This 5-minute exercise saves hours of back-and-forth with the AI.

If you hand this to an AI, it will build something much closer to what you want than if you just said "build me a yoga booking app."

This Skill Works for Everything

Systems thinking isn't just for building apps. It works for writing a report (inputs → process → output), planning an event, automating email, or any task you give an AI agent.

Chapter 4: Frontend, Backend, and the Internet in Between

Every time you visit a website, a little drama plays out:

1. You type a web address into your browser
2. Your browser sends a message over the internet: "Hey, give me that page"
3. A computer somewhere receives the message and prepares the page
4. That computer sends the page back to your browser
5. Your browser displays it

That's it. Every website works this way. Gmail, Amazon, TikTok — all the same basic pattern.

Frontend: The Dining Room

The frontend is everything that happens in your browser. It's what you see and touch.

• The buttons you click
• The colors and fonts
• The layout of the page
• The forms you fill out

Analogy: The dining room of a restaurant — the menu, the tables, the lighting. It's the customer's experience.

The main languages of the frontend: HTML (structure), CSS (style), JavaScript (behavior). You don't need to write these. But when the AI creates files ending in .html, .css, or .js — that's the frontend.

Backend: The Kitchen

The backend is everything that happens on the server. Users never see it.

• Checking if your password is correct
• Looking up your order history
• Processing a payment
• Sending you a confirmation email

Analogy: The kitchen. Customers don't go there, but it's where all the real work happens.

Database: The Filing Cabinet

The database is where your app stores information permanently. When you sign up, your email goes into a database. When you close the browser and come back tomorrow, everything is still there — because it's in the database.

Analogy: The filing cabinet in the back office. Customer records, order history, receipts.

API: The Waiter

The API is how the frontend talks to the backend. Your browser can't directly reach into the database. Instead, the frontend sends a request through the API: "Get me this user's profile." The API carries the answer back.

Analogy: The waiter. You tell the waiter what you want. The waiter goes to the kitchen and brings back food. You never go to the kitchen yourself.

How It All Connects

Let's trace what happens when you click "Sign Up" on a website:

That's the whole picture. Frontend, backend, API, database — working together.

Chapter 5: What Is a Server? Domains? Ports?

These three concepts come up constantly. Let's make sure you really understand them.

Servers: Just Computers That Are Always On

A server is a computer. That's it. Nothing magical. It's a computer that stays on 24/7, is connected to the internet, and runs your app so others can access it.

Here's the thing: your laptop is a server right now — when you run your app on it. The difference is that only you can see it. When your app runs on your laptop, it's available at a special address: localhost. That literally means "this computer."

When you deploy, you copy your app from your laptop to a server that anyone can reach. That's the only difference between "running locally" and "live on the internet."

Ports: Apartment Numbers

Your computer can run many apps at the same time. How does it keep them separate?

Ports. Think of your computer as an apartment building.

• The building has one address (your computer)
• Each apartment has a different number (the port)
• Each app lives in a different apartment

So when you see localhost:3000, that means:

• localhost = this computer (the building)
• :3000 = apartment number 3000

And localhost:8000 is a different apartment in the same building.

Practical example: The AI says "Server running on port 8000." That means: open your browser and type localhost:8000. You'll see your app.

Domains: Human-Friendly Addresses

Every computer on the internet has a number called an IP address. It looks like: 142.250.80.46. That's actually Google.

Nobody wants to type numbers. So we invented domain names — human-friendly labels that point to those numbers.

• google.com → points to 142.250.80.46
• your-cool-app.com → could point to your server

Analogy: "The White House" is easier to remember than "1600 Pennsylvania Avenue NW, Washington, DC 20500." Same place, friendlier name.

DNS: The Internet's Phone Book

When you type google.com:

1. Your browser asks DNS: "What's the number for google.com?"
2. DNS looks it up: "That's 142.250.80.46"
3. Your browser connects to that number
4. Google sends you the page

How to get a domain

1. Go to a registrar (Namecheap, Cloudflare, Google Domains)
2. Search for a name you want
3. Buy it (~$10-15/year)
4. Point it to your server's IP address
5. Done — people type your domain and see your app

Subdomains: blog.my-yoga-studio.com and api.my-yoga-studio.com are subdomains. Think of them as departments within one company.

HTTPS: The Lock Icon

The lock icon in your browser means HTTPS is active. Data traveling between your browser and the server is encrypted. Like sending a letter in a sealed envelope instead of a postcard.

Good news: most deployment platforms set this up automatically.

Cloud Providers: Renting a Server

You don't need to buy a physical computer. You can rent one.

The Mental Model

Chapter 6: Data — How Apps Remember Things

When you close Instagram and reopen it, your posts are still there. When you log into Netflix on a new device, your watchlist is waiting. That's because the data doesn't live in the app — it lives in a database on a server.

Understanding data is one of the most valuable things you can learn for vibe coding. When you describe your data clearly, the AI builds the right thing from the start.

The Spreadsheet Analogy

If you've ever used Excel or Google Sheets, you already understand databases.

A database is a collection of well-organized spreadsheets.

A Real Example: Yoga Studio Booking App

Table: Students

Table: Classes

Table: Bookings

See how Bookings connects students to classes? That connection is called a relationship.

What Is a Data Model?

A data model is a plan for how your information is organized. It's what you design before the database gets created — like sketching a floor plan before building a house.

JSON: How Apps Pass Data Around

You'll see this format everywhere:

{
  "name": "Sarah Chen",
  "email": "sarah@email.com",
  "membership": "monthly",
  "is_active": true
}

This is JSON. It's just a way to format information so computers can read it. Think of it as a standardized form. You don't need to write it, but you'll see it in the AI's output.

Why This Matters for Vibe Coding

The clear prompt gives the AI a data model. It builds the right thing on the first try.

Chapter 7: Files, Folders, and How Code Is Organized

Here's something that surprises many people: your entire app is just a bunch of files in a folder. That's it. No magic.

File Types You'll See

The Terminal: Texting Your Computer

The terminal is a text-based way to interact with your computer. Instead of double-clicking a folder, you type cd my-project. Instead of clicking "run," you type python app.py.

It's the same computer, same files — just a different interface. Like texting instead of talking face-to-face.

The three commands you'll use most:

cd folder-name     ← go into a folder
ls                 ← list what's here
python app.py      ← run your app (or: npm start)

That's 90% of what you need.

File Paths: Addresses for Files

A file path is like a street address for a file:

/Users/you/projects/my-app/index.html

Reading left to right: your home folder → projects → my-app → the file.

Dependencies: Code You Borrow

Dependencies (or packages) are code other people wrote that your project uses. Need payments? There's a package. Need email? There's a package.

Analogy: Buying bread from a bakery instead of growing wheat yourself.

When you see npm install or pip install, the AI is downloading pre-made ingredients.

Git: A Time Machine for Your Project

Git lets you save snapshots of your project. If something breaks, go back to any previous snapshot.

The one move you need:

git add .
git commit -m "working version before adding payment feature"

And if something breaks:

git checkout .

Two commands. They'll save you from a lot of pain.

Environment Variables: Secret Sticky Notes

An environment variable stores secret info (API keys, passwords) on your computer — NOT in your code. If you put secrets in your code and share it, everyone can see them.

You'll see a file called .env:

API_KEY=sk-abc123xyz456
DATABASE_URL=postgresql://localhost:5432/mydb

The dot at the beginning means it's hidden. Never share it. Never upload it.

Chapter 8: Reading Error Messages

This is the skill that separates frustrated vibe coders from effective ones.

When something goes wrong, the computer shows an error message. Most people see red text and panic. But error messages are not angry — they're trying to help.

Reframe it: An error message is GPS saying "recalculating." Not a teacher saying "wrong."

The Anatomy of an Error Message

1. The Type — What kind of problem?
   ModuleNotFoundError, SyntaxError, 404 Not Found
2. The Location — Where?
   File "app.py", line 42
3. The Description — What specifically?
   No module named 'flask'

The Top 5 Errors You'll See

The Copy-Paste Strategy

Here's the best part: you don't need to understand the error. Just:

1. Copy the entire error message
2. Paste it to the AI
3. Say: "I got this error. What went wrong and how do I fix it?"

The AI explains it and fixes it. This is your superpower as a vibe coder.

Chapter 9: Setting Up Your Computer

You need four things. That's it.

1. A Terminal (Already On Your Computer)

Mac: Press Cmd + Space, type "Terminal", press Enter. Done.

Windows: Search "Windows Terminal" in the Start menu. Done.

2. A Code Editor (To View Files)

Download VS Code (Visual Studio Code). It's free. Go to code.visualstudio.com, download, install.

Tip: Install the "Material Icon Theme" extension — it makes the file tree much easier to read.

3. A Runtime (The Engine That Runs Code)

Node.js (for JavaScript):

• Go to nodejs.org, download LTS version, install
• Verify: node --version

Python:

• Mac: Usually pre-installed. Check: python3 --version
• Windows: python.org, download, install (check "Add Python to PATH")

Install both. They're small and free.

4. An AI Coding Tool

Zero-setup (browser-based) — start here

Local tools (more powerful) — graduate to these

Recommendation: Start browser-based (Bolt or Replit). See results instantly. When ready, move to Cursor or Claude Code.

Checklist: Is Everything Working?

node --version        ← should show v18+ or v20+
python3 --version     ← should show Python 3.10+
git --version         ← should show git 2.x

If something shows "command not found": it's not installed, or restart your terminal after installing.

Chapter 10: The Art of the First Prompt

The quality of what the AI builds is directly tied to the quality of your instructions.

The Golden Rule

Be specific about WHAT you want. Don't worry about HOW to build it. That's the AI's job.

Bad → Good → Great

Great: "Make a to-do list web app with a text input at the top and a list below. Users type a task and press Enter to add it. Each task has a checkbox and a delete button. Tasks saved in the browser. Clean minimal design, white background, soft shadows. No backend needed."

The Brief Template

Before typing anything into an AI tool, answer five questions:

1. What does it do? (one sentence)
2. Who uses it? (your audience)
3. What are the main pages or screens?
4. What actions can users take?
5. What data does it need to store?

Combine your answers into your prompt. That's it.

This Works for Non-Coding Tasks Too

Data analysis: "I have a sales spreadsheet for 2025. Calculate revenue by quarter, find top 10 products, identify months with 20%+ drops, create a PDF report with charts."

Research: "Research the top 5 online yoga booking platforms. Compare pricing, features, and user complaints. Present as a comparison table plus a one-page summary."

In every case: the more specific you are, the better the result.

The Reference Technique

Reference something that already exists:

"Build a landing page like Stripe's homepage — clean, lots of whitespace, hero section with headline and CTA button, gradient background, three feature cards below."

The AI knows what Stripe looks like. Way more effective than describing every detail.

Chapter 11: The Feedback Loop

Vibe coding is not one-shot. It's a conversation. The AI builds something. You look at it. You say what to change. Repeat.

How to See What the AI Built

• python app.py — runs a Python app
• npm start or npm run dev — runs a JavaScript app
• Open the .html file directly in your browser

The AI will tell you which command to use.

How to Give Good Feedback

Tips:

• Describe what you see vs. what you expected
• Fix one thing at a time
• Take a screenshot if the issue is visual

When to Start Fresh

• 30+ messages in the conversation
• The AI starts forgetting or contradicting itself
• You're switching to a completely new feature

Pro tip: Start a new conversation with: "I have a project at [folder]. It's a [description]. So far it has [what's built]. I need to add [new feature]."

The Git Safety Net

Before big changes:

git add .
git commit -m "everything works, about to add payment feature"

If things break:

git checkout .

Restores to your last snapshot. Peace of mind.

Chapter 12: Common Failure Modes

Every vibe coder hits the same walls. Here they are, and how to avoid them.

1. The Vague Prompt

What happens: You say "build me an app" and the AI builds something random.

Fix: Use the brief template from Chapter 10.

2. The Scope Creep Spiral

What happens: "Also add this... and this... and this..." until nothing works.

Fix: Build in layers. Simplest version first. Add one feature at a time.

3. The Context Overload

What happens: After 80 messages, the AI forgets earlier instructions.

Fix: Start fresh conversations for new features.

4. The Hallucination Trap

What happens: The AI recommends a library that doesn't exist.

Fix: Quick web search to verify before committing.

5. The "No Going Back" Problem

What happens: You had something working. Now it's broken and you can't get back.

Fix: Use Git. Save snapshots when things work.

6. Fighting the AI

What happens: You've rephrased the same instruction 5+ times.

Fix: Try the AI's approach — sometimes it's better. Or be extremely explicit about what you DON'T want.

7. Skipping the AI's Words

What happens: The AI warns about something. You skip it. It bites you later.

Fix: Read what the AI writes, not just whether the code runs.

Pre-Flight Checklist

• Clear description of what I want
• Git snapshot saved
• Starting with the simplest version
• Know how to run the project
• Conversation is still fresh

Chapter 13: What "Deployed" Means

Your app works on your laptop. But only you can see it. Deployment means moving it to a server so anyone can reach it.

The Elevator Analogy

• Ground floor = your laptop (localhost). Private.
• Top floor = the internet (your-app.com). Public.
• The elevator = the deployment tool.

Three Types of Projects

Quick test: Does your app save data or run server logic? No → static site. Yes → full-stack.

Chapter 14: Deployment Recipes

Recipe 1: Static Site → Netlify (5 minutes)

1. Go to netlify.com, create a free account
2. Click "Add new site" → "Deploy manually"
3. Drag your project folder into the browser
4. Done. You get a URL like your-project-abc123.netlify.app

Recipe 2: Full-Stack App → Railway (10 minutes)

1. Push code to GitHub (ask the AI to help)
2. Go to railway.app, create account
3. "New Project" → "Deploy from GitHub repo"
4. Set your environment variables in Railway's dashboard
5. Your app is live

Recipe 3: React/Next.js → Vercel (10 minutes)

1. Push code to GitHub
2. Go to vercel.com, create account
3. "Import" → select your repo → "Deploy"
4. Done. URL: your-project.vercel.app

The "Ask the AI" Shortcut

Your best move: "I want to deploy this project so anyone can access it. What's the easiest way?"

The AI will figure out your project type and give you a step-by-step plan.

Environment Variables in Production

Your .env secrets can't go with your code to the server. Every deployment platform has a "Environment Variables" section where you paste your API keys. The AI will remind you.

When Deployment Fails

1. Copy the error from the deployment platform
2. Paste it to the AI
3. "I tried to deploy to [platform] and got this error. What's wrong?"
4. Fix and retry

Chapter 15: Using AI Agents for Non-Coding Tasks

Everything you've learned — systems thinking, clear communication, iterative feedback — applies way beyond building apps.

Research and Analysis

"Read this 40-page report and give me a one-page summary, the three most important data points, and questions I should ask the author."

Writing and Editing

"Fix grammar, make the tone more conversational, cut from 1500 to 1000 words, add a stronger opening hook, suggest three headline options."

Data Work

"Clean up this CSV: remove duplicates, fix inconsistent formatting, calculate average order value per customer, find customers inactive for 6+ months."

Automation

"Every Monday, pull last week's sales, calculate week-over-week change, draft a summary email, highlight products that dropped more than 10%."

Learning

"Explain SEO like I'm 12. Give me the 5 most important concepts. Create a 2-week study plan (30 min/day). Quiz me on what I've learned."

The Universal Pattern

Every example uses the same skills:

1. Describe the system — what goes in, what comes out
2. Be specific — more detail = better results
3. Iterate — review, give feedback, refine
4. Think in structures — data, interface, logic, connections

These skills are permanent. The tools will change. The ability to think clearly and communicate precisely will always be valuable.

Chapter 16: What to Learn Next

Path 1: Stay Non-Technical, Get More Effective

• Prompting — keep a file of prompts that worked well
• Git — learn a few more commands for confidence
• One deployment platform — pick one, deploy 5 projects, get fast
• Surface-level code reading — is this frontend or backend? Where's the data?

Path 2: Become Tech-Adjacent

• Basic SQL — "SELECT name FROM students WHERE membership = 'monthly'"
• How APIs work — test them with tools like Postman
• Basic HTML/CSS — tweak what the AI creates

Path 3: Learn to Code

• Python — reads like English, most beginner-friendly
• freeCodeCamp.org — free, self-paced
• The Odin Project — free, web development focus
• CS50 by Harvard — free on YouTube

When to Bring In a Real Developer

• Security-critical apps (payments, health data)
• Apps with many users (scaling from 10 to 10,000)
• Complex integrations or compliance requirements
• When the AI keeps breaking things and debugging takes longer than building

Best approach: use vibe coding for a working prototype, then bring in a developer to review and scale it.

The future is bright. AI coding tools are getting better rapidly. The skills in this guide — systems thinking, precise communication, iterative development — will only become more valuable.

You're not just learning to use a tool. You're learning to think in a way that makes you effective with ANY tool, today and tomorrow.

Now go build something.

Appendix A: Quick Reference Card

Key Concepts

The Brief Template

1. What does it do?
2. Who uses it?
3. What pages/screens?
4. What actions can users take?
5. What data does it store?

Pre-Flight Checklist

• Clear description of what I want
• Git snapshot saved
• Starting with simplest version
• Know how to run the project
• Conversation is still fresh

Appendix B: Tool Comparison

Never done this before? Start with Bolt or Lovable.
Comfortable with a code editor? Try Cursor.
Comfortable with the terminal? Try Claude Code.

Appendix C: Prompts That Work

For Building Apps

1. Landing Page

"Create a landing page for [product]. Hero section with headline, subtitle,
and CTA button. Three feature cards with icons. Testimonials section.
Footer with links. [Color] color scheme, modern clean design."

2. To-Do App

"Create a to-do app: add tasks with title and due date, mark complete,
delete, filter by all/active/completed. Save in browser localStorage.
Clean minimal design."

3. Dashboard

"Create a dashboard: 4 stat cards (users, revenue, orders, conversion),
line chart of revenue over 12 months, recent orders table, sidebar nav.
Use mock data."

4. Form + Database

"Contact form: name, email, message. Save to SQLite on submit.
Admin page (password-protected) shows all submissions in a table.
Python + Flask backend."

5. Booking System

"Booking system: students (name, email, phone, membership), classes
(name, instructor, day, time, max spots), bookings (student + class +
date + status). Prevent overbooking. Python + FastAPI + SQLite."

For Non-Coding Tasks

6. Data Analysis

"Attached CSV of [data]. Clean inconsistencies, calculate [metrics],
find top/bottom performers, create summary with key insights,
suggest 3 actions based on the data."

7. Writing

"Write a [type] about [topic]. Audience: [who]. Tone: [how].
Length: [how long]. Include: [requirements]. Avoid: [things to skip]."

8. Research

"Research [topic]. Overview of current state, top [N] options,
pros/cons of each, recommendation for [my situation].
Present as comparison table + one-page summary."

9. Automation

"I do [task] every [frequency]. Steps: [list steps].
Create a script that automates this. Handle errors by [approach]."

10. Learning Plan

"I want to learn [topic] in [timeframe]. Current level: [level].
Available time: [X hours/day]. Create study plan with weekly goals,
free resources, practice exercises, and checkpoints."