Iteration & Refinement

Lesson 4

The first result from Claude Code is rarely the final result. That’s fine — the goal of the first prompt is to get something working to react to, not perfection.

The iteration mindset

Think of each prompt as a git commit. The first gives you a base. Each subsequent prompt refines one thing. After 4–5 rounds, you have something polished.

Round 1: Basic structure

nav 컴포넌트를 만들어줘. 왼쪽에 로고, 오른쪽에 링크 3개.

Round 2: Responsive

이걸 유지하면서 모바일(640px 이하)에서 햄버거 메뉴로 바뀌게 해줘.

Round 3: Scroll behavior

스크롤 시 nav 배경이 흰색으로 바뀌고 shadow가 생기게 해줘.
이미 있는 CSS 클래스는 건드리지 마.

Round 4: Accessibility

햄버거 버튼에 aria-expanded, aria-controls 추가하고
ESC로 메뉴 닫히게 해줘.

Round 5: Polish

nav 링크에 active 상태 스타일 추가해줘.
현재 페이지 링크는 font-weight 600, color #000.

What to look for in each review

After each round, check:

  1. Does it do what I asked?
  2. Did it break something from the previous round?
  3. What’s the next single thing to improve?

One change per round. If you ask for 5 things at once, the AI may get some wrong and it’s hard to debug.

Demo: 5 rounds side by side

The demo shows the nav at each of the 5 stages. The final version is production-ready — with a button you type nothing but prompts to reach.

Your task: start from the Round 1 result and prompt your way to Round 5 using only natural language in Claude Code.