Phase 3: Reading & Reviewing AI Code · 20 min · Any vibe coding tool with code view
Objective
Your mission
Open a project you've built with AI, identify common code patterns, and write plain-English descriptions of what each does. Output: code_reading_notes.md.
You need: Any AI-built project with a code view.
Time: 20 minutes.
Step 1: learn the 5 core patterns (5 min)
Recognize these and you can read 80% of AI-generated code:
Imports — bringing in tools:
import { useState } from 'react'
Plain English: "I'm bringing in React's useState function."
Functions — doing something:
function calculateTip(amount, percent) {
return amount * (percent / 100)
}
Plain English: "Give it an amount and percent, it returns the tip."
Conditionals — making decisions:
if (user.role === 'admin') {
showAdminPanel()
} else {
showUserPanel()
}
Plain English: "If admin, show admin panel. Otherwise, show user panel."
Loops — repeating:
habits.forEach(habit => {
renderHabitCard(habit)
})
Plain English: "For each habit, render a card."
Variables — storing things:
const apiKey = 'sk-1234567890'
Plain English: "Storing an API key for later." (RED FLAG — we'll cover this in Lesson 02)
The paragraph analogy
Read code like a paragraph. Don't try to understand every word. Ask: 'What is this section doing overall?' If you can answer that — 'this section loads habits from storage and displays them' — you understand enough to review it.
Step 2: open your project's code (2 min)
Open a project you've built with AI (from Phase 00 or 01). Find the code view — most tools have a "View Code" or "Code" tab.
Step 3: find and identify patterns (10 min)
Find these in the code:
- 2 imports — what tools are being brought in?
- 2 functions — what do they do?
- 1 conditional — what decision is being made?
- 1 loop — what's being repeated?
Write in your file:
## Imports Found
1. [code snippet] — [plain-English description]
2. [code snippet] — [plain-English description]
## Functions Found
1. [code snippet] — [plain-English description]
2. [code snippet] — [plain-English description]
## Conditional Found
[code snippet] — [plain-English description]
## Loop Found
[code snippet] — [plain-English description]
Step 4: flag anything suspicious (3 min)
While scanning, did anything look wrong? A password in the code? An error being ignored? A comment saying "TODO: fix this"? Flag it — we'll cover specific red flags in Lesson 02.
Write in your file:
## Suspicious Things
[Anything that looked wrong or unclear — or "nothing suspicious found"]
You see if (user.role === 'admin') { showAdminPanel() } else { showUserPanel() }. What is the useful plain-English reading?
It's a conditional. Reading code like a paragraph means naming what a section does overall, not parsing every symbol.