Applied AI School
v0 · 規劃中
Anthropic

第一個 session 在做什麼

從 prompt 到 commit 的完整 trace,看 plan / tool call / file edit 各階段。

TL;DR

  • 一個 session 的生命週期:理解 → plan → tool calls → file edits → commit
  • 你會看到 Claude 自己決定讀哪些檔、用哪些 tool——不用你手動指
  • 你的工作不是「給很多細節」,是「給對的目標」+ 在 plan 階段攔下偏差

場景:修一個 styling bug

你在 React side project 上發現一個 bug:登入後的 dashboard,左側 sidebar 在手機寬度(< 640px)下沒收起來,蓋住主要內容。

你只記得 sidebar 大概長在 components/ 某處,CSS 用 Tailwind。

打開 Claude Code,輸入:

在手機寬度 sidebar 沒收起來會蓋到主要內容,幫我修

按 enter。然後呢?

階段 1:理解 + 探索

第一個 turn,Claude 不會直接動手。它會先

  • Glob components/**/*.tsx 找出所有 component
  • 看到 components/Sidebar.tsxcomponents/Layout.tsxRead 這兩個
  • 順手 Readtailwind.config.ts 確認 breakpoint 設定

你會在 UI 看到一連串 tool call 卡片接連跑:GlobReadReadRead

這時 Claude 還沒寫任何字回你。它在蓋自己的 mental model

階段 2:Plan(如果開了 plan mode)

如果這個任務看起來會動多檔,Claude 會提一個 plan:

  1. Sidebar.tsxhidden md:block class,預設手機隱藏
  2. 加一個漢堡按鈕在 Layout.tsx 的 header
  3. useState 控制 sidebar 開關
  4. 加 overlay 點到外面會關起來

你看完發現第 4 點過頭了——你只想要會收起來,不要 overlay。這時按 Ctrl+G 開到編輯器,把第 4 點刪掉,submit 改過的 plan。

如果沒開 plan mode,Claude 會直接動手——適合很明確的小修。Plan mode 的細節在 Plan mode:先看再動 講。

階段 3:Tool calls(動手)

Plan 通過,Claude 開始改:

  • Edit components/Sidebar.tsx — 加 hidden md:block class
  • Edit components/Layout.tsx — 加 hamburger button + useState
  • Bash: pnpm typecheck — 自己決定要驗

自己決定要跑 typecheck——你沒叫它跑。這就是 agent 跟補完的差別。

如果 typecheck 過了,繼續。如果沒過,它會看 error 自己修。

階段 4:你驗收

Claude 回你:

改好了。Sidebar 在 md 以下會隱藏,加了漢堡按鈕,typecheck 過。要我 commit 嗎?

你開瀏覽器試一下,OK,回它「commit」。

階段 5:Commit

  • Bash: git status
  • Bash: git diff
  • Bash: git add components/Sidebar.tsx components/Layout.tsx
  • Bash: git commit -m "fix: collapse sidebar on mobile breakpoint"

它先看 status / diff,再決定 commit message——不是亂寫一句話。

你做了什麼

整個 session 你打了:

  1. 一句話描述問題
  2. 改一下 plan
  3. 「commit」

剩下的 grep、read、edit、typecheck、git——全是 Claude 自己組合出來的。

重點不是 prompt 寫得多細

很多人從 chat 過來會習慣寫一長串 prompt:「請你先找到 sidebar,然後檢查它的 breakpoint,然後……」

不用。你的工作是:

階段你該做的
起手給對的目標(症狀 + 期望結果,不需要怎麼做)
Plan攔下偏差(過度設計、看錯地方)
改完驗收(自己跑一下)
Commitbatch 控管(要不要分多個 commit)

寫太細反而會把 Claude 推離它自己會找到的好答案。

接下來

Section 1 介紹完心智模型——下一篇開始 Section 2「動手做」,從安裝跟三層 settings 講起。