Building in Phases

Lesson 20

The most reliable way to avoid getting stuck in vibe coding is to build in four explicit phases. Each phase has one job. Mixing phases in a single prompt is the single most common cause of messy, hard-to-fix AI output.

The four phases

Phase 1 — Structure: Write only HTML. No CSS, no JS. The goal is correct semantic content: headings in the right order, lists vs. grids, which elements are interactive. Browser-default styles are fine at this stage — they tell you if the structure makes sense.

Phase 2 — Styling: Apply design tokens. Add layout, spacing, color, and typography. Zero JavaScript at this stage. The prompt: “디자인 토큰 파일 기준으로 스타일 추가해줘. JS는 아직 필요 없어.”

Phase 3 — Interactions: Add only the JavaScript needed for the page to work. Click handlers, state, toggles. The prompt: “이 페이지에 인터랙션을 추가해줘. 클릭하면 카드가 펼쳐지고, 필터로 카테고리를 선택할 수 있어야 해.”

Phase 4 — Polish: Animations, transitions, hover states, edge cases. This is the last thing you add, not the first. The prompt: “이제 애니메이션을 추가해줘. 카드 진입, 필터 전환, hover 효과.”

The prompt sequence

Each phase gets its own prompt. Do not combine them:

[Phase 1] HTML 구조만 먼저 만들어줘.
[Phase 2] 스타일 추가해줘. 디자인 토큰 기준.
[Phase 3] JS 인터랙션 추가해줘.
[Phase 4] 애니메이션과 polish 추가해줘.

Between each prompt, review what was generated before moving on. If the structure is wrong in Phase 1, the other phases will inherit those mistakes.

The common mistake

Trying to do all four phases in one prompt produces code that technically works but is hard to maintain. The AI packs styling, logic, and animations into the same blocks. When something breaks, it’s harder to identify which layer caused it.

One prompt per phase keeps each concern separate. It also makes it easy to roll back — if Phase 3 goes wrong, you still have a working Phase 2 baseline.

Why this works

Each phase gives Claude Code a narrow, well-defined problem. A prompt that says “make a portfolio page with animations, filtering, and responsive layout” has too many variables. A prompt that says “HTML 구조만 만들어줘” has exactly one success condition: does the HTML make sense?

Narrow prompts produce precise output. That’s the core principle behind phased building.

The demo shows a portfolio “Work” page rendered in all four phases, selectable via tabs. You can see exactly what each phase adds — and understand what the AI was focused on at each step.