AI Vibe Coding
for Complete Beginners

Welcome to Vibe Coding

What it means to build with AI, why this moment is different from everything before it, and the mental model you need before you write your first prompt.

In early 2025, Andrej Karpathy, one of the founding members of OpenAI and former head of AI at Tesla, posted a tweet that circulated through every corner of the tech world. He called it "vibe coding": the practice of building software by describing what you want in plain language, letting AI generate the code, and iterating from there, without ever needing to deeply understand what was written.

The reaction was split. Experienced engineers scoffed. Entrepreneurs and founders lost their minds with excitement. And non-technical people everywhere suddenly realized: this changes everything for me.

This course is for those people. The ones who've had ideas for years but believed the barrier to building was too high. That barrier has dropped dramatically. And vibe coding is how you cross it.

What Vibe Coding Actually Is

Vibe coding is not a specific tool. It's not a language. It's a workflow: a way of building software that puts human intent at the center and delegates the technical execution to AI.

The loop looks like this:

Why This Moment Is Different

Every few years someone claims that coding is about to become obsolete. For decades, they've been wrong. Low-code tools, drag-and-drop builders, WordPress: they all helped, but they had ceilings. You could go so far, and then you needed real code.

What changed with large language models, the technology behind tools like Claude, GPT-4, and Gemini, is that the ceiling got extraordinarily high. These models don't just help with simple templates. They can reason, architect systems, debug their own output, adapt to your feedback, and generate complex, real software from natural language instructions.

The gap between "idea" and "working product" has never been smaller. And for non-technical builders, that is a genuinely historic shift.

For the first time in history, the bottleneck to building software is not technical skill. It's the quality of your thinking and your ability to communicate it.

The Mental Model: You Are the Director

Here is the most important framing you'll get in this entire course, so read it carefully.

When a film gets made, the director doesn't operate the camera, wire the lights, compose the music, or act in the scenes. They don't need to know how to do any of those things technically. What they do is hold the vision, communicate it clearly to people who execute it, and give feedback that guides the work toward that vision.

That is your role in vibe coding. You are the director. The AI is your crew.

This has one very important implication: you don't need to understand every line of code the AI writes, any more than a director needs to understand the f-stop on a camera lens. You need to be able to evaluate the output (does this do what I wanted?) and communicate corrections effectively.

What You Will and Won't Learn Here

This course will teach you: how to use AI tools to build real products, how to write prompts that produce good results, how to debug by communicating (not by reading code), how to make things look professional, and how to deploy a working app to the internet.

This course will not teach you: traditional programming, computer science theory, syntax of any programming language, or how the underlying AI models work. Those things are valuable, but they're not the bottleneck right now. Execution is the bottleneck. That's what we're focused on.

Your Toolkit

There are a growing number of AI coding tools. They serve different audiences and have different strengths. Here are the ones we'll use in this course, and why:

For the first two modules, we'll use Bolt.new exclusively. It's the least friction between you and a working result. Once you've felt the loop, we'll bring in Cursor for real project work.

Your First Prompt, Right Now

Before we go any further, do this. Open bolt.new in a new tab. In the prompt bar, type the following, or something like it:

Create a simple personal homepage. Include my name 
at the top (use "Your Name" as a placeholder), 
a one-paragraph bio section, and a list of 3 
interests. Use a clean, minimal design with 
a white background and dark text.

Hit enter. Watch what happens. Don't try to change anything yet: just observe. Notice the speed. Notice that what appeared is real HTML, a real webpage. Notice that you didn't write a single line of code.

That's the feeling. Hold onto it. The rest of this course is about developing the skill to get that feeling reliably, on demand, for increasingly complex things.

Learning to Talk to AI

Prompt engineering sounds technical. It isn't. It's the art of communicating your intent clearly enough that the AI can execute it. This module is the difference between vibe coders who ship and those who get stuck.

Here's the uncomfortable truth about AI tools: most people get mediocre results not because the AI is bad, but because their prompts are vague. The AI can only build what you describe. If your description is fuzzy, the output is fuzzy. If your description is precise, the output is precise.

This module is about developing precision. Not technical precision: communicative precision. The ability to describe what you want so clearly that ambiguity disappears.

Why Prompts Fail

Let's look at the same request expressed two different ways:

Make me a todo app

Build a minimal todo app with the following features:

- Add tasks by typing in an input field and pressing Enter
- Each task shows a checkbox to mark it complete
- Completed tasks should appear with a strikethrough 
  and slightly faded
- A small "×" button on each task to delete it
- Show a count of remaining tasks at the bottom
- No backend needed — just local state

Design: white background, clean sans-serif font, 
subtle drop shadow on the task list. 
Feels like a native macOS app.

Both prompts ask for "a todo app." But the second one will produce something you can actually use, while the first will produce something generic that requires five rounds of corrections to get right. The time you "save" by writing a short prompt you spend on back-and-forth refinement.

The Four Layers of a Good Prompt

Every strong prompt has at least some coverage of these four areas:

1. Function — What does it do?

Describe the actual behavior of the thing you're building. Not the goal, but the behavior. Not "I want a productivity app" but "I want a place to write daily notes, where each day has its own page and I can see a list of past days on the left side."

2. Appearance — What does it look like?

Color palette, font style, layout structure, density, light or dark. The AI has excellent taste when directed, but without direction it defaults to whatever it's seen most.

3. Feel — What's the experience?

This is the layer most people skip, and it's where the magic lives. Words like "snappy," "calming," "playful," "professional," "focused" change everything.

4. Constraints — What should it NOT do?

AI fills gaps with assumptions. Those assumptions are often wrong. Explicitly stating constraints eliminates bad assumptions.

Context Is a Superpower

One of the most underused tools in vibe coding is giving the AI context about you. AI models are not psychic: they don't know your use case, your users, your constraints, or your preferences unless you tell them.

I'm building a tool for freelance designers to track 
their project hours. My users are not technical — 
they use phones more than computers and hate 
complicated interfaces. This needs to feel dead 
simple, like something Apple would make.

Build a time tracker where they can:
- Create named projects
- Start/stop a timer for each project
- See a daily total per project
- Data saves automatically

Design: large tap targets, generous spacing, 
clean white with one accent color (try a warm coral). 
Font should feel friendly, not corporate.

Notice that this prompt includes the user ("freelance designers"), their behavior ("use phones more than computers"), their attitude ("hate complicated interfaces"), and even a reference point ("something Apple would make"). That context shapes every decision the AI makes.

Iterating Like a Pro

Even with a great prompt, your first result won't be perfect. That's fine. Iteration is the process. But the quality of your iteration prompts matters just as much as the original.

The pattern is simple: identify the specific problem, describe the specific fix. Vague feedback produces vague corrections. Specific feedback produces specific corrections.

When the AI Gets It Wrong

The AI will misunderstand you. Sometimes badly. Here's your toolkit for when that happens:

Rephrase, don't repeat. If a prompt didn't produce what you wanted, saying the same thing again won't help.

Shrink the scope. If you asked for something complex and it went sideways, break it into smaller pieces.

Start fresh strategically. Sometimes a session gets confused: you've asked for so many changes that the AI is working against its own previous decisions.

Prompt Templates That Work

Here are reusable prompt structures you can adapt to almost any project:

// Fill in the [brackets]

Build a [type of app] for [who uses it].

Core functionality:
- [Feature 1]
- [Feature 2]  
- [Feature 3]

Design direction: [describe look and feel]
Reference: [an app or site it should feel like]
Constraints: [what to NOT include]

// Use this when something isn't right

The [specific element] isn't working correctly.
What's happening: [describe the problem]
What I want instead: [describe the desired behavior]
Don't change anything else.

// Use this for visual changes

The overall structure is good. Now let's 
polish the design:

- [Specific visual change 1]
- [Specific visual change 2]
- [Specific visual change 3]

Keep the layout and functionality exactly as-is.
Only change the visual styling.

Building Your First Real App

A webpage is a document. An app has logic, memory, and behavior. This module is where vibe coding gets serious. You'll build something with real functionality and learn to debug using language, not code.

There's a meaningful difference between a webpage and an application. A webpage shows you content. An application responds to you: it changes based on what you do, it remembers things, it makes decisions.

In this module, you're going to build a Habit Tracker: a simple but fully functional app where you can define daily habits, check them off each day, and see your progress. It has state. It has logic. It has persistence.

Planning Before Prompting

The single biggest mistake people make when building apps with AI is starting to prompt before they've thought through what they're building.

Before touching Bolt.new or Cursor, answer these three questions on paper or in a notes app:

1. What does it do? List every feature. Be specific.

2. What does the user experience? Walk through the app as a user.

3. What can we cut? Pick the smallest version that's genuinely useful and build that.

The Habit Tracker — Feature Spec

Here's the spec we'll build to. Read it all before you prompt:

// What it does
Core features:
  - Add a new habit (name only, text input + button)
  - Show all habits in a list
  - Each habit has a checkbox for today
  - Checking off a habit marks it complete for today
  - Show a streak count next to each habit (days in a row)
  - Delete a habit with a confirmation
  - Data persists when you close and reopen the tab

// What it does NOT do (scope boundary)
Not included in v1:
  - No user accounts
  - No calendar view
  - No habit categories
  - No notifications
  - No analytics

// How it feels
Design:
  - Clean, calm, focused
  - Think Streaks app meets Apple Notes
  - Light mode, serif font for the title,
    sans-serif for everything else
  - Satisfying checkbox animation when completing

Translating a Spec into a Prompt

Build a habit tracking app. Here's exactly what it needs:

FUNCTIONALITY:
- Input field + "Add Habit" button to create new habits
- List of all habits, each showing:
  • Habit name
  • A checkbox to mark it done today
  • Current streak (number of consecutive days completed)
  • A delete button (with a simple confirm step)
- Checkboxes reset each day at midnight
- All data saves to localStorage so it persists 
  between sessions

DESIGN:
- Clean, calm, minimal
- White background, soft gray for completed items
- Serif font (like Playfair Display) for the app title
- Regular sans-serif for everything else
- Checkbox should have a satisfying check animation
- No sidebar, single column, centered content, 
  max-width 480px

CONSTRAINTS:
- No backend, no authentication
- No external APIs
- Local storage only
- Mobile-friendly

Reading the Output

When Bolt.new generates your app, your job is to evaluate it systematically:

Does it function correctly? Try every feature.

Does it look like the spec? Compare the visual output to what you described.

Does it feel right? Pretend you're a new user.

Debugging Without Reading Code

Eventually something will break. Describe the bug in terms of behavior, not code.

The streak counter is broken

The streak counter has a bug. Here's what's happening:

1. I add a new habit called "Read"
2. I check it off today — the streak shows "1 day" ✓
3. I close the tab and reopen it the next day
4. The streak resets to 0 even though I completed 
   it yesterday

Expected behavior: the streak should increment to 2 
when I complete the habit on day 2.

The bug seems to be in how the streak is calculated 
when the app loads — it's not reading yesterday's 
completion correctly from localStorage.

When to Start Over vs. When to Iterate

If you've done more than 8–10 iterations and the core functionality still isn't right, you're probably in a hole. Starting fresh with a revised, cleaner prompt is often faster.

Making It Look Good

Functional and beautiful are not the same thing. A product that works but looks rough won't be used. This module is about developing design taste as a vibe coder, and the specific prompts that produce professional-looking results.

In vibe coding, design is a prompt.

The Visual Language of Good Design

Hierarchy. The eye should know what to look at first.

Whitespace. Empty space is breathing room.

Consistency. Every design decision should repeat.

Color restraint. Good products use fewer colors than you'd think.

Using References Effectively

// App feel references
"Design it with the calm, focused feel of the Bear 
writing app — lots of whitespace, serif font for 
content, minimal chrome."

"Make it feel like a Linear dashboard — dark, 
dense, professional. Tight spacing, monospace 
accents, everything purposeful."

"Apple Notes meets Notion. Clean, white, with 
generous padding. Friendly but not childish."

// Specific visual references
"The card design should feel like Stripe's 
pricing page — subtle shadow, clean border, 
perfectly proportioned."

"Typography like The New Yorker website — 
a strong serif display font, generous line-height, 
readable body text."

The Polish Pass

// Step 1: Typography
Review the typography. I want:
- One display font (serif, elegant) for the title only
- One clean sans-serif for all body content
- Clear size hierarchy: title huge, section headers 
  medium, body text comfortable
- Good line-height (around 1.6-1.7) on body text

// Step 2: Spacing
Now fix the spacing. Rules:
- Double the padding inside all cards and containers
- More gap between list items
- Header should have more vertical padding
- The page should never feel crowded

// Step 3: Color & Contrast
Simplify and refine the color:
- Background: warm off-white (#f7f5f0)
- Primary text: near-black (#1a1814) 
- Secondary text: muted gray (#7a7568)
- Accent: only used on interactive elements
- Remove any other colors

// Step 4: Interactions
Add subtle animations:
- Smooth 200ms transition on hover states
- Checkbox completion: satisfying scale + checkmark
- New items appear with a gentle fade-in
- Delete: item slides out before removing

Using v0 for UI Components

If you're building something that needs to look particularly polished, consider using v0.dev alongside Bolt.new or Cursor.

Developing Your Design Eye

Design taste is built by looking at a lot of design.

Resources worth bookmarking: Dribbble, Mobbin, Awwwards, and Refactoring UI.

Ship It

A product that lives only on your laptop isn't a product: it's a file. This module gets your work live on the internet with a real URL, and gives you the foundation to keep building from here.

Shipping is the most underrated skill in building.

Understanding What "Deploying" Means

Deploying means taking that code and putting it on a server somewhere on the internet so that anyone with the URL can access it.

Your Deployment Toolkit

Deploying from Bolt.new — Step by Step

Deploying from Cursor — The GitHub Workflow

// 1. Initialize git in your project folder
git init
git add .
git commit -m "initial commit"

// 2. Create a repo on github.com and push
git remote add origin https://github.com/YOU/PROJECT.git
git push -u origin main

// 3. On vercel.com — connect your GitHub repo
// Vercel detects your project type automatically
// Deploys in ~60 seconds. Done.

// 4. Every time you push new code to GitHub,
// Vercel automatically redeploys. Live in seconds.

What Comes Next

You've completed the course. But more importantly, you've established a workflow: a way of going from idea to deployed product that you can apply to anything.

If you want to build SaaS products: Learn about databases (Supabase is the best starting point) and authentication.

If you want to build and sell micro-products: Gumroad and Lemon Squeezy let you sell digital products.

If you want to go deeper technically: Start reading the code the AI generates.

If you want to keep building: Build something every week.

"The best vibe coders are not people who have the most technical knowledge. They are people who ship the most, because shipping teaches you more than reading ever will."

You're a Builder Now

The technology will keep getting better. The tools will get faster, smarter, and easier. The people who understand how to direct AI, who can communicate intent, evaluate output, and iterate toward quality, are going to be the builders of the next decade.

You are now one of them. Go build something.