Vibe Coding & AI Coding Tools

The four kinds of AI coding tool

The names change every few months; the four shapes have been stable. Work out which shape you need before you pick a product.

Most of these have a free tier and a paid one, and the details change constantly — check the product's own site rather than trusting any list, including this one.

How a vibe coding session actually goes

It is a loop, not a single request. People who get good results are not writing better first prompts — they are going round this loop faster and stopping earlier when it goes wrong.

1. 1

   Describe one thing

   Not the whole app. One feature, one page, one function. Small requests fail in ways you can actually see.

2. 2

   Run it before you read it

   Thirty seconds of running tells you more than five minutes of squinting. Try our code playground if you have nowhere else to put it.

3. 3

   Read it and ask about the parts you don't recognise

   "What does line 12 do?" is a free question, and the answer is the actual learning. Skipping this step is how you end up with an app you cannot change.

4. 4

   Describe the difference, not the fix

   "The total is wrong when the list is empty" beats "add an if statement". You describe the symptom; the tool is good at the cause.

5. 5

   Save the version that works

   Commit it, or at minimum copy it somewhere. The next prompt can undo something that was already right, and without a saved copy you cannot get it back.

6. 6

   Start fresh when it goes in circles

   Three failed attempts at the same bug means the conversation is now part of the problem. New chat, restate the goal, paste only the code that matters.

How to ask for what you want

A model cannot read your mind, and it will never say "that request was too vague" — it will just guess. Every detail you leave out is a decision you have handed over.

make me a website

Build a single HTML page that shows a to-do list.

- Add a task with a text input and an "Add" button
- Click a task to mark it done (strikethrough)
- An X button next to each task deletes it
- Save the list in localStorage so it survives a refresh
- Plain HTML, CSS and JavaScript in one file, no frameworks

Explain the localStorage part in comments — I am learning.

This function returns NaN when I pass it [2, 4, 6].

function average(numbers) {
  let total = 0;
  for (let i = 0; i <= numbers.length; i++) {
    total = total + numbers[i];
  }
  return total / numbers.length;
}

Do not rewrite it. Tell me which line is wrong and why,
so I understand the mistake.

Read this file and tell me:
1. Anything that will break if the input is empty or missing
2. Anything a beginner would find hard to change later
3. Anything unsafe to put on a public website

Do not change the code yet — just list what you find.

Confidently wrong: a worked example

Here is a real class of mistake these tools make. Nothing about it looks uncertain — no warning, no hedge, no "you may want to check this". It is simply wrong.

// Asked: "write a function that returns the average of a list of numbers"
function average(numbers) {
  let total = 0;
  for (let i = 0; i <= numbers.length; i++) {
    total = total + numbers[i];
  }
  return total / numbers.length;
}

console.log(average([2, 4, 6]));  // NaN — not 4

The loop runs one step too far. On the last pass, numbers[3] does not exist, so the total becomes NaN — "not a number" — and stays that way. One character causes it:

function average(numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {   // < not <=
    total = total + numbers[i];
  }
  return total / numbers.length;
}

console.log(average([2, 4, 6]));  // 4

What these tools are good and bad at

Four ways vibe coding bites people

None of these are reasons to avoid the tools. They are the things to check before anything you built this way meets a real user.

// 🚫 Never ship this: everything in front-end code is public
const apiKey = "sk-live-9f2a3b7c8d";
fetch("https://api.example.com/data?key=" + apiKey);

AI engineering vocabulary

The words that come up constantly once you start using these tools seriously. None of them are as complicated as they sound.

The basics you still need

Not all of programming — just enough to read what you are given and describe what is wrong with it. These six lessons carry most of that weight.

Quick Quiz