Skip to main content
Building with AI (Vibe Coding)

⏱ About 15 min15 XP

Reading What the AI Gives Back

The AI responds. You paste the code, save the file, and open the browser. Does it work? Does it do exactly what you asked? Does it do something extra you did not ask for? Does it look right but behave wrong? Getting a response from an AI is not the end of a step — it is the middle of one. The step ends when you have read the response, understood what it does, and verified that it matches your spec. Skipping that check is where vibe coding breaks down.

What to Check in Every Response

When the AI gives you code or content, run through this four-part check before accepting it: 1. Did it do what I asked? Compare the output to your prompt. Does it address the requirement you stated? A response can be long and impressive while completely missing the point. 2. Did it do anything extra I did not ask for? AIs sometimes add features, files, or behavior that were not requested. Extra code is not free — it adds complexity you will have to understand, maintain, or remove later. Note what was added. 3. Does it work? Run it, click it, or test it. Reading code is not enough — run it. A function that looks correct can have a logic error that only shows up in use. 4. Do I understand it well enough to debug it? You do not need to understand every line. But you need to understand it well enough to find the right spot if something breaks later. If the code is a complete mystery, ask the AI to explain it before accepting it.

The Acceptance Check

An output is accepted only when it (1) does what the prompt asked, (2) does not introduce unwanted extras, (3) passes a basic functional test, and (4) you understand it well enough to maintain it. All four. Not three.

Here is a real scenario. You asked for a button that shows a hidden message when clicked. The AI gives you code. Before you accept it: Read the HTML: Is there a button? Is there a hidden element? Do the IDs or class names match between the HTML and the JavaScript? Read the JavaScript: Is there a click listener on the button? Does it target the right element? Does it change the display correctly? Run it: Click the button. Does the message appear? Click again — does it hide? Were there any errors in the browser console? Check for extras: Did the AI add a CSS animation you did not request? A close button you did not specify? If yes, decide whether to keep them or ask for a simpler version. This is not paranoia — it is professionalism. Developers who accept code without checking are the ones who ship bugs.

Reading Non-Code Responses

Not every AI response is code. When the AI gives you text — lesson content, marketing copy, quiz questions, a story — the reading checklist is different but equally important: Accuracy: Is the information correct? AI models can state false things confidently. If a factual claim matters, verify it from a reliable source. Completeness: Did it give you everything you asked for? If you requested ten quiz questions and got eight, that is a gap. Tone and format: Does the output match the style, voice, and structure you specified? If you asked for friendly and got formal, the response does not meet the spec. Length and scope: Is it proportional? Too much can be as wrong as too little — a three-paragraph answer to a one-sentence question wastes the reader's time.

AI Confidence Is Not Accuracy

AI models are fluent and confident even when wrong. A response written in perfect, authoritative prose can contain factual errors, logic bugs, or made-up details. Fluency does not equal correctness. Always check.

Flashcards — click each card to reveal the answer

Why is running the AI's code better than just reading it?

An AI adds an animated loading spinner to your page even though you only asked for a button. What should you do?

Response Review Drill

  1. Step 1: Imagine the AI just gave you this response to your prompt 'Add a button that hides the sidebar when clicked': it added a button, a CSS transition animation on the sidebar, a cookie that saves whether the sidebar is open, and a keyboard shortcut (press S) that also toggles the sidebar.
  2. Step 2: Apply the four-part acceptance check. Write one sentence for each of the four criteria.
  3. Step 3: Decide which extras to keep and which to remove. Write a follow-up prompt that removes the ones you do not want, keeping your language as a focused, single-change request.
  4. Step 4: Reflect: why do you think the AI added those extras? What in the original prompt might have implied them?