看到這章節的你，我相信你已經把 Claude Code 安裝好了，因為接下來我們會需要來做一點點實作。
但今天的目標很小，試著用一個很小的練習跑完一次「叫它做事 → 看它做了什麼 → 決定要不要 → 反悔了拉回來」的循環。
你千萬別小看這個循環，因為後面進行記帳 App 開發時會一直圍繞著這個流程與觀念。
首先我們開始之前，先來稍微練習一下，請你打開終端機，並拖曳專案資料夾 claude-playground 進去，或是終端機直接輸入指令方式進入：
cd claude-playground
接著請你複製貼上以下指令，快速建立你的第一個 index.html 練習檔：
echo '<!DOCTYPE html><html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的練習頁（是 Ray 不是 Array）</title>
</head>
<body>
<h1>Hello，這是我的 Vibe Coding 練習頁</h1>
<p>目前這裡什麼都還沒有。</p>
<a href="https://israynotarray.com/" target="_blank">是 Ray 不是 Array</a>
</body></html>' > index.html
內容其實非常簡單，就只是一些很基本的標題、文字與連結而已，東西越簡單，你越能專心看 Claude Code 的行為本身，而不是被程式碼的複雜度干擾。
Note
如果建立過程非常不順利，你可以直接透過這個連結下載完整範例檔案：https://github.com/hsiangfeng/ithelp-2026-vibe-coding，只需要點一下 「Code → Download ZIP」就可以取得練習檔案了。
前面準備好後，接著請你在終端機輸入 claude 啟動 Claude Code，輸入 claude 之前請務必確認自己已經在 claude-playground 目錄下，否則你可能會出現一些奇怪的問題。
除此之外，我們的權限模式應該會是預設的「manual mode on」（也就是官方文件說的 default），每次要動你的檔案之前，它都會先停下來問你，細節我們 Day 5 再聊。
那這邊一開始我們並不會馬上叫 AI 改東西，而是會請它先確認一下「它目前能看到什麼、能理解什麼」，例如：
這個資料夾裡面有什麼？index.html 裡面有什麼東西？
許多人看到這邊就會感到好奇：「為什麼要這樣做？」
其實原因有兩個：
claude-playground 目錄，或是檔案沒有存好、存錯地方的情況。
基本上內容只要跟我上面類似或相同，其實就代表你跟我當前的操作是一致的，那你就可以繼續往下操作了。
Note
當然，就算你沒跟 AI 說「這個資料夾裡面有什麼？index.html 裡面有什麼東西？」，它也會自己去讀檔案，只是依照我個人習慣來講，我會先跟他確認一下它能看到什麼，這樣可以避免一些不必要的誤會。
一開始我們先不示範一次做到對的「正確答案」，我認為你應該先親身體會一次錯誤的做法，之後才會知道正確做法好在哪。
所以請你在 Claude Code 的輸入框裡複製貼上以下文字：
幫我把這個頁面做得更好看，你自己決定。
別怕！請你安心且大膽送出去這句話吧！這只是一個練習檔案而已，而且 Claude Code 每收到一句指令，都會自動存一個還原點（這個機制叫 checkpoint），等等玩壞了也救得回來。
Tip
這句話「幫我把這個頁面做得更好看，你自己決定。」其實我們會稱為是指令（下 Prompt），你送出的任何文字都可以稱為 Prompt，也就是你希望 Claude Code 做的事情，這件事情請務必記著。
這過程中，它可能會詢問你一些權限上的問題，視窗中間那塊紅紅綠綠的就是它打算做的修改（紅色是要刪的、綠色是要加的，等等後面會專門教你看），你可以現在先掃一眼有個印象，接著你會看到三個選項，分別是：
這邊請選擇 「Yes」，代表你同意它這一次的修改，接著它就會開始改檔案（請不要選「Yes, allow all edits during this session (shift+tab)」，因為這個選項會讓它之後的修改都自動放行，對新手來說非常不安全）。
接著 Claude Code 就會跟你說它改了什麼做了什麼：
那這時候該怎麼看結果呢？很簡單，你可以跟它說：
請幫我開啟 index.html，我想使用瀏覽器看看結果。
如果跳出以下權限也不用擔心，允許就對了：
這時候你應該可以看到以下這個畫面，而且每個人應該都不太一樣：
很有趣吧？同一句 Prompt 可能有各種不同的結果，這就是所謂的 AI 隨機性，就是這個隨機性讓你無法掌握它到底會改成什麼樣子，也就導致了「無法驗收」的問題。
說不定你會覺得現在設計的畫面還滿漂亮的，但你可能會想「這哪裡失敗了？」。
這邊只要請你試著回答三個問題：
是不是稍微有點難思考呢？一點也沒錯，這個就是第一個重點「無法掌握」，就如同前面一樣，同樣一句話「幫我把這個頁面做得更好看，你自己決定。」對不同的人、不同的模型、甚至同一個人丟兩次，都可能得到完全不同的結果。
因為你沒有定義驗收標準、跟它講清楚你想要什麼樣的風格，所以 AI 就只能自己去腦補所謂的 「好看」 這個定義的空白，而你也無法判斷它到底做對了還是做錯了，這也就導致了同樣一句話再丟一次，可能得到完全不同的結果。
因此，畫面漂不漂亮是其次，真正的問題是你失去了「驗收」的能力，你說不出這次的結果是對還是錯，只能說喜歡 or 不喜歡。
如果只是想做一個自己玩的玩具是無所謂，但如果你想做出一個真正能用的東西，「無法驗收」這件事情就變得很嚴重，因為你根本不知道現在離目標還有多遠，也不知道下一步該怎麼走。
/rewind 拉回來體驗了前面第一個任務之後，我們要來把剛剛的失敗拉回來，這邊就要用到我們前面提到的 checkpoint 機制。
請你在輸入框輸入 /rewind，或在輸入框是空的時候連按兩下 Esc，這也會叫出恢復選單，接著你應該會看到歷史對話，你只需要找到「幫我把這個頁面做得更好看，你自己決定。」這句話，並選擇他。
選單會先列出你這個對話中下過的指令，先選你要回到哪一句（這邊選「幫我把這個頁面做得更好看，你自己決定。」這句），接著視窗應該會出現以下選擇：
這邊請選擇「Restore code and conversation（恢復程式碼與對話）」，這樣程式碼跟對話就會一起回到你下那句模糊指令之前的狀態，而且剛剛的指令也會停在文字輸入框裡，讓你可以快速修改。
Note
注意一下/rewind只會恢復使用 Claude Code 的編輯工具做的變更，如果你在這個過程中有用Bash指令去刪除或搬移檔案，那就會無法恢復，所以正式專案通常是一定會搭配 Git（一個能幫你保存各種版本的工具，後面章節會正式介紹）會比較保險。
看到這邊你應該會發現「走歪了再拉回來」這件事情很重要，也同時是 Vibe Coding 的關鍵技巧之一，走歪本身不是問題，回不來才是。
接下來要來示範一個可以被驗收的小任務（真的很小），請你把原本在輸入框的「幫我把這個頁面做得更好看，你自己決定。」刪除並改成以下文字：
幫我在頁面加一個按鈕，按下去會隨機更換整個頁面的背景顏色
Note
小技巧，只要再輸入框按下 Ctrl + C 就可以快速清空整個輸入框，這樣就不用一個字一個字刪掉，但也要注意如果 AI 思考過程中，你按下這個快捷鍵就會中斷它的思考，所以要在它回覆完之後再按。
這邊你可能會充滿問號，這句話哪邊可以驗收？其實有：
這些對錯一翻兩瞪眼。
至於按鈕要長什麼樣子、放哪裡、用什麼顏色，我們讓 AI 自己決定就好，因為它們不是這次的驗收重點，重點是「有沒有按鈕、按下去會不會變色」，這就是可驗收的小任務。
送出後，不要急著看結果，先看它的回覆，通常它會先跟你說它做了什麼修改、用了什麼工具，然後再問你要不要開啟瀏覽器看結果。
Note
Read、Edit、Bash 這些是 Claude Code 的內建工具，也是新手最常看到的三個：讀檔、改檔、執行指令。
它會依任務自己決定用哪些工具，現在先認得這三個工具就夠了。
理論上你這時候應該會打開瀏覽器，如果瀏覽器沒打開的話，你可以跟 AI 說：
請幫我開啟 index.html，我想使用瀏覽器看看結果。
恭喜你，你已經做到描述一個「可以驗收」的最小任務了。
前面那些紅色、綠色是有一個專業名詞的，它就叫做 diff，它的意思是「差異」，也就是程式碼修改前後的差異。
這功能會是你追蹤 Claude Code 做了什麼的最重要依據，這也是你決定要不要收下修改的依據。
請記住以下：
- 開頭）+ 開頭）請養成習慣： 至少掃一眼它動了哪裡，跟你的預期有沒有對上，再按下 Yes。
然後底下基本上會有三個選項：
| 選項 | 意思 | 什麼時候用 |
|---|---|---|
| Yes | 只同意這一次 | 前期建議都用這個 |
| Yes, allow all edits during this session | 這個對話接下來的編輯都自動放行 | 你已經信任這次任務的方向時 |
| No, and tell Claude what to do differently | 拒絕，並告訴它怎麼改 | 方向不對、想換做法時 |
選項的文字依版本可能會略有不同，以你畫面上看到的為準。
第三個選項必須特別解釋一下，這個選項它不是單純的取消，你可以接著用一句話把它導回正軌，例如「按鈕的文字是『更改背景顏色』，而不是『按我』」
按鈕的文字是「更改背景顏色」，而不是「按我」
這樣它就會重新修改，然後再給你 diff 讓你確認。
Note
這邊我就不特別示範第三個選項了，你可以自行體驗看看。
最後總結一下今天的最小循環，這邊搭配一下圖你應該會更清楚整體流程：
/rewind（或是 Esc 按兩下），要注意它救不了 Bash 造成的變更。那麼這一篇就到這邊結束了，我們明天見。
iThome鐵人賽
看影片追技術