1. Courses
  2. AI Engineering
  3. Vibe Coding: Build Apps with AI
  4. Stop 4

40 minBeginner

Reading and fixing what the AI wrote

The AI builds a screen in two minutes, and it works when you click through it. Then a real shop owner uses it, and the total is one cent short, or an order arrives twice. This lesson teaches you to read code well enough to find where things go wrong, to debug with the AI in a calm routine, and to use Git so that no mistake is ever permanent.

By the end you can

  • Read an AI-written file without being a programmer: names first, then follow one value from the screen to the database
  • Spot the six mistakes AI tools make most often in small apps like Ravi's reorder app
  • Run a debugging routine: reproduce, read the error, ask for the cause before the fix, one fix at a time
  • Ask follow-up questions that make the AI show its work
  • Undo safely with git status, git diff, git restore, git revert and a branch for experiments

The everyday picture

Think of a new assistant in a small shop who is very fast and very eager. You ask them to restock the shelves, and in ten minutes every shelf is full. It looks great. Then you look closer. The rice is on the right shelf, but the price labels are from last month. The oil went on the shelf you asked for, and they also moved the tea "to make room", without telling you.

You would not fire this assistant. You would check their work the way an experienced shopkeeper does: look at the labels first, follow one product from the box to the till, and ask "what else did you move?". You would also keep a photo of how the shelves looked this morning, so you can put things back. In this lesson the assistant is the AI, the photo is Git, and the checking is a habit you can learn without being a programmer.

Reading code without being a programmer

You do not need to understand every line to check AI-written code. You need to find the right lines and ask good questions about them. Four moves get you most of the way.

1. Find the file the AI says it changed. AI coding tools end most answers with a list of files they created or edited. Do not trust that list on its own. In Building in small steps you made a after every step, so git status shows you every file that changed since then, including the ones the AI forgot to mention.

2. Read the names first. Code is full of names that a person chose. A called orderTotalCents promises to return the order total in cents. A called cutoffHour holds the hour after which orders go on a later delivery. Skim the file for names, ignore the punctuation, and ask: does each name do what it says? A function named sendOrder that also changes prices is a warning sign.

3. Follow one value from the screen to where it is saved. Pick a number you can see, such as the total on Ravi's Confirm screen. Find where the screen gets it, then which function computed it, then which function sends it to the server, then which column stores it. At each step, ask the AI "show me the line that passes the total on". If the number shown and the number saved come from two different calculations, you have found a place where bugs hide.

4. Ask the AI to explain, in plain words, and to point. AI tools are good at explaining code. Ask for a file "line by line, for someone who does not code". Then ask the question that matters most: "where is this rule from SPEC.md enforced?" In A spec the AI can follow you wrote rules such as R3, "sent at or after 4:00 pm shop time: delivered the day after". If the AI cannot point to a line that checks the clock, the rule is probably missing, however confident the summary sounds.

Markdown
Explain src/lib/orderTotal.js line by line, in plain words, for someone who
does not write code. Then answer:
1. Which SPEC.md rules does this file enforce? Quote the rule and give the line number.
2. Where does the total go after this function returns it? Name the file and function.
Do not change any code.

This is the beginner version of a skill developers use every day. If you later want the full toolkit (searching a whole repository, finding who changed a line and why), see Reading code like a detective.

Confirm screen shows $68.60 (rounds) prices x quantities orderTotalCents() floor(6859.999...) 6859 cents sendOrder() POST /api/orders total_cents order table total_cents = 6859 Invoice: $68.59 same value?
Follow one value. The Confirm screen and the saved order compute the total in two different ways. The screen rounds to the nearest cent; the function rounds down. Following the total down the chain shows exactly where the cent disappears.

Quick check

The AI says "Done! Orders after the 4 pm cut-off now go on the later delivery." What is the quickest good way to check that claim?

Loading the rest of the lesson…