如何把大型請求拆成明確步驟

您請 Claude："加入語系清單、搜尋功能、依國家篩選，並更新版面"。代理修改了好幾個檔案，回報已完成；乍看之下，頁面也沒問題。但輸入搜尋字詞後，該有的項目卻消失了。您清空欄位，項目還是沒有回來。

是哪裡壞了？搜尋、篩選器，還是清單本身？所有功能一次加上去，您還沒看過任何一部分單獨運作。您請代理修正搜尋，收到新修改後又重新檢查整個頁面。工作持續進行，對結果卻越來越沒把握。

想避免同時追查好幾處變更，不妨把請求分成幾個小而可驗證的步驟。先顯示清單並核對項目，再加入搜尋，確認它能在這份清單上正常運作，接著才做篩選器。版面更新則留到另一個步驟。錯誤還是可能發生，但您會先有一個經過驗證的基準狀態，也清楚知道最近改了哪些地方。接下來看看怎麼挑出這些步驟，再交代給代理。

左側整理了同一輪完成的修改。右側看到的是一個整體症狀，還看不出確切原因。若逐項驗證，就更容易把錯誤出現的時間對上最近一次修改。

選定下一個成果

工作拆解就是把任務分成幾個部分。和代理合作時，最好讓每個部分的成果都能獨立驗證。例如，先顯示清單，再加入搜尋，最後新增篩選器。

如果清單已經能正常運作，就不用重做。從下一個尚未完成的行為開始。如果不確定清單是否正常，先打開頁面看看。起點取決於專案目前的狀態，不是看計畫寫得多漂亮。

"先寫 HTML，再寫 JavaScript"也是一種切分方式，但不一定有助於驗證成果。要讓搜尋運作，可能得同時在 HTML 加入輸入欄位，並在 JavaScript 加上事件處理器。即使會改到兩個檔案，這仍是一個明確的步驟。

依功能拆分請求

這份教學用的語系資料表有四筆資料。下方列出語系代碼、語言和國家，之後會用這些資料來驗證。

接著，為每個步驟列出預期成果和驗證方式：

箭頭代表驗證通過後才進入下一步。搜尋和篩選器可以交換順序，但兩者都需要清單。完整的版面更新留到另一個步驟，等主要功能都正常後，會更容易評估成果。

說清楚步驟的界線

假設清單已經完成。請 Claude 加入搜尋，並明確指出哪些內容要保留。這個例子中，頁面資料和行為寫在 app.js，標記則在 index.html。請在自己的專案中換成實際路徑。

請讀取 @index.html 和 @app.js。
四筆語系資料的清單已經可以正常運作。
請新增搜尋欄位，可依語系代碼或語言名稱搜尋。

請保留原有資料、欄位和版面。
可以新增搜尋所需的元素。
暫時不要製作國家篩選器。

驗證方式：搜尋 German 和 de-DE 都能找到 de-DE；
搜尋 zzz 不會找到資料；清空搜尋欄會顯示全部四筆。

請先說明您打算修改哪些內容，暫時不要修改檔案。

先讀讀代理的回覆。如果它提到新增資料、切換主題或加入篩選器，請在執行前重新確認範圍。若回覆符合請求，再交代它完成這一步。用文字說明能引導工作方向，但最後仍要檢查成果是否遵守界線。

額外的修改並不一定都是多餘的。搜尋需要輸入欄位；全面改色則是另一項要求。不妨問問自己：不做這項修改，選定的成果還能完成嗎？

不確定從哪裡開始時

接手別人的專案時，第一步可能是先讀程式碼。如果還不知道資料從哪裡來、哪個檔案負責顯示清單，就先別要求加入搜尋。

找出頁面從哪裡取得資料，以及在哪裡顯示清單。
如果兩三個關鍵檔案就足夠，請先讀這些檔案。
列出找到的路徑，並建議第一個小步驟。
如果資訊不足，請說明還需要讀取哪些內容。
暫時不要修改檔案。

這一步的成果是找出相關檔案，並說明各自的用途。請對照提到的程式碼片段檢查回答。"兩三個"只是起步時的參考，不代表不能讀取必要的程式碼。

進入下一步前先驗證

代理說"搜尋完成"，還不代表您知道它驗證了什麼。請打開頁面，實際測試請求中的情境：有符合項目、沒有符合項目，以及清空欄位。同時確認原有資料和欄位都保留下來。

如果清空欄位後只看到三列，先繼續處理搜尋。告訴代理您做了什麼、預期和實際結果："我清空欄位，原本預期看到四筆資料，現在只看到三筆。"此時加入篩選器，只會讓原因更難追查。

有時候還得把步驟縮小。例如，若資料完全沒有顯示，先恢復清單並驗證它。至於排序的新點子，可以另外記下來，免得忘了，也避免它擴大目前的修改範圍。

左側分支會回到搜尋，直到搜尋行為符合請求。驗證成功後則走右側分支。加入篩選器後，也要確認它本身和搜尋能一起正常運作，因為新步驟可能影響原本已正常運作的功能。

與 Claude Code 合作

每次修改前，先說清楚三件事：這一步要完成什麼、哪些內容要保留，以及如何驗證成果。提供代理需要的檔案，確認下一個步驟，再請它執行。驗證通過後，就繼續下一步；若有問題，先釐清目前的修改。

一個步驟可能需要好幾則訊息。更重要的是，您隨時都能說清楚："現在加入搜尋。清單已經驗證過。篩選器先等等。"