用 Claude Code 從零建立最小可行 Harness，打造 Web To-Do List 應用程式 (2)

準備工作

請先確認你已經完成第一版的 5 個步驟，並且專案資料夾結構正常、 `npm run harness-verify` 可以通過。

步驟 1：升級 CLAUDE.md 成為更完整的憲法

這個步驟在做什麼？把原本的 CLAUDE.md 擴充，加入更多進階規則，讓 Harness 更嚴謹、更適合長期開發。

對 Harness 達成的效果：建立更強的行為約束與最佳實踐，讓 Claude 的輸出品質大幅提升。

直接複製以下 Prompt 貼給 Claude：

你現在是我的 Harness Engineering 專家。我們已經有第一版的 CLAUDE.md，現在要升級成 Production-Ready 版本。

請更新根目錄的 CLAUDE.md，新增或強化以下章節（全部用繁體中文撰寫，保持極度明確、嚴格）：

– 新增 **Architecture Principles**（架構原則，例如 Atomic Design、Feature-Sliced Design）
– 新增 **Error Handling & Logging Strategy**
– 強化 **Testing Strategy**（加入 component test、integration test、snapshot test）
– 新增 **Code Review Guidelines**（AI 自我 review checklist）
– 新增 **Security & Performance Best Practices**
– 新增 **Documentation Requirements**（每次改動都要更新哪些文件）
– 更新 **Feedback Loop Protocol**，加入「如果連續失敗 3 次，必須詳細分析根因並提出改善建議」

請輸出完整更新後的 CLAUDE.md 內容。

步驟 2：強化測試系統（加入更完整的測試）

這個步驟在做什麼？擴充測試覆蓋率，加入 component testing 和 integration testing。

對 Harness 達成的效果：讓 Claude 修改功能時更有信心，降低 regression（回歸錯誤）發生機率。

直接複製以下 Prompt 貼給 Claude：

			
根據新的 CLAUDE.md，請為目前的 To-Do List 專案強化測試系統：
1. 使用 @testing-library/react 與 vitest 加入以下測試：
   - Component tests（TodoItem、TodoList、AddTodoForm）
   - Integration tests（完整 CRUD 流程）
   - 至少 3 個 snapshot tests
2. 更新 package.json 中的 harness-verify，加入 coverage 檢查（覆蓋率至少 80%）
3. 更新 docs/quality-gates.md 記錄新的測試標準
請一次產生所有新增/修改的測試檔案，並更新相關設定。

		

步驟 3：建立自動修復與自我 Review 機制

這個步驟在做什麼？讓 Claude 在 harness-verify 失敗時，能夠更智能地自動分析與修復。

對 Harness 達成的效果：大幅減少人類介入次數，讓 AI 擁有真正的「自我修正」能力。

直接複製以下 Prompt 貼給 Claude：

			
請實作進階 Feedback Loop：
1. 在 scripts/ 資料夾建立 auto-fix.sh 或新增 npm script "harness-fix"
2. 更新 CLAUDE.md 的 Feedback Loop Protocol，定義：
   - 失敗時的 root cause analysis 流程
   - 自動修復優先順序
   - 自我 code review checklist（必須在每次修改後執行）
請產生相關檔案與更新內容。

		

步驟 4：新增進階功能並強制遵守新 Harness

這個步驟在做什麼？用新建立的強大 Harness，安全地新增幾個實用功能，測試 Harness 是否真的有效。

對 Harness 達成的效果：驗證升級後的 Harness 在實際開發中的穩定性。

直接複製以下 Prompt 貼給 Claude：

			
現在使用我們升級後的 Harness，依序完成以下任務：
先更新 docs/execution-plan.md，記錄即將新增的功能
新增「深色模式切換」功能（使用 next-themes）
新增「本地資料匯出 / 匯入 JSON」功能
新增 PWA 支援（讓 App 可以安裝到桌面）
每次功能完成後都要執行 npm run harness-verify，並進行自我 review
請嚴格遵守新的 CLAUDE.md，一步一步執行並詳細報告每個階段結果。

		

步驟 5：建立 Observability（可觀測性）機制

這個步驟在做什麼？記錄 Claude 的開發行為、token 使用、常見錯誤等，方便長期優化 Harness。

對 Harness 達成的效果：讓你能看見 AI 的「思考過程」與弱點，持續迭代 Harness 本身。

直接複製以下 Prompt 貼給 Claude：

			
請在專案中建立 observability 機制：
1. 在 docs/ 建立 agent-logs/ 資料夾
2. 建立 docs/agent-logs/README.md，記錄每次重大修改的 AI 決策、問題與解決方式
3. 更新 CLAUDE.md，要求每次完成任務後必須在 agent-logs 中新增一筆記錄
請產生相關檔案與規則。

		