The AI coding workflow: spec, plan, build, review

Type "make me a coffee shop website" into an AI chat and you will get code within a minute. It may even run. Then you ask for one change, the AI rewrites half the file, something else breaks, and an hour later you are lost in code you did not write and cannot read.

This is the most common way beginners fail with AI. The AI is not the problem. The missing process is. This lesson gives you a simple one.

A language model writes the most likely code for your request. If the request is vague, it fills the gaps with guesses: which framework, which folders, what the data looks like, what happens on errors. You find out about those guesses only after they are baked into 400 lines.

Three things go wrong again and again:

Professional developers who use AI well follow the same four steps they would follow with a human teammate. The AI does the typing. You stay the engineer.

Steps 3 and 4 repeat for every task. Think of it as a loop: build a small piece, review it, save it, move to the next.

A spec is a written answer to "what exactly should this do?" It is the single biggest improvement you can make to AI output, because it replaces the AI's guesses with your decisions. You will write a full one in *Write a project spec an AI can build from*.

For now, notice the difference. Here is a vague request and the same request with a mini spec.

Make a website for my coffee shop.

What to expect: The AI must guess everything: the stack, the pages, the design, whether there is a backend, whether orders exist.

I run Brew & Bean, a small coffee shop in Indiranagar, Bengaluru. Build the home page of its website.

Stack: React with Vite, plain JavaScript (JSX), plain CSS. No other libraries.

The page must have: a header with the shop name, a short intro, opening hours (8 am to 10 pm daily) and a footer with the address.

Out of scope for now: menu, cart, login, backend.

Before writing code, list the files you will create and wait for my approval.

What to expect: A good answer lists a few files (for example src/App.jsx, src/App.css) and waits. It does not invent a menu or a cart.

A plan splits the spec into tasks small enough that you can check each one in a few minutes. A good task changes one or two files and has a visible result: "the header shows the shop name", not "build the frontend".

You can ask the AI to draft the plan, then edit it yourself. The plan is where you catch wrong guesses cheaply, before any code exists.

Here is my project spec:

[paste your spec]

Do not write any code yet. Break this into a numbered plan of 5 to 10 small tasks. For each task give: the goal in one sentence, the files it touches, and how I can check that it works (what I should see in the browser or terminal). Order the tasks so the app runs after every task.

What to expect: Check that every task has a visible way to verify it, that the order makes sense, and that nothing from the out-of-scope list sneaked in.

Give the AI one task at a time. Paste the task, plus the current code if the AI cannot see your files. After each answer:

1. Run it. See it work (or fail) yourself. 2. If it fails, give the exact error message back. Do not describe it from memory. 3. Only when it works, move on.

Review means reading what the AI wrote and testing it before you keep it. AI code can look confident and still be wrong: it may call a function that does not exist, trust data it should check, or skip error handling. You will practise this in *Reading and reviewing AI-written code*.

A light review after every task takes two minutes:

The last point matters. A git commit is your undo button. If the next AI change wrecks the project, you can go back to the last good state. You will set up Git in *Set up your machine*.

Say you want a "Today's special" banner on the Brew & Bean home page.

Spec line: "A banner under the header shows the text 'Today's special: Cold Brew, ₹220'. The text comes from a variable at the top of App.jsx so I can change it easily."

Plan: (1) add a special variable and a Banner component; (2) style the banner; (3) hide the banner when special is empty.

Build: ask for task 1 only. Run the page. You see the text. Commit: "Add Banner component".

Review: you notice the AI also added a library for icons. You did not ask for it, so you ask it to remove it. Commit again.

Each loop took a few minutes, and at every point the project worked.

Interviewers increasingly ask how you use AI tools. A weak answer is "I paste the whole task and copy the result". A strong answer describes the loop: "I write down the requirements first, ask for a plan, build one piece at a time, run and read everything before I commit, and I write tests for anything important." Interviewers want to see that you can judge code, not only generate it. Expect questions like "Tell me about a bug the AI introduced and how you caught it."