小編精選 - 技術文章翻譯 · 04月28日

長文：Claude Code 實戰 Harness 工程，開發效率翻幾倍

長文：Claude Code 實踐 Harness 工程，開發效率翻幾倍

大家好，我是雙越。[wangEditor](https://link.juejin.cn?target=https%3A%2F%2Fwww.wangeditor.com%2F) 作者，前百度、滴滴資深前端工程師，慕課網金牌講師，PMP，[前端面試派](https://link.juejin.cn?target=https%3A%2F%2Fwww.mianshipai.com%2F) 作者。

我正致力於兩個專案的開發和升級，有興趣的可以私訊我，加入專案小組。

【划水AI】 Node 全端 AIGC 知識庫，包括 AI 寫作、多人協同編輯。複雜業務，真實上線。
【智語】 AI Agent 智慧體專案。一個智慧面試官，可以優化履歷、模擬面試、解答題目等。

開始

最近看社群都在討論 Harness 工程，但我感覺絕大部分文章寫得都很抽象，看著每個字都認識，看完了卻不知道在講什麼。我之前也一直受困於此，得不到突破。

直到我有一次和一位同學聊天，他分享自己使用 harness 工程和 vibe coding 的差別：

當 AI 出錯時，不是去糾正它，而是改進自己的提示、規則和約束。這是 harness engineering 的核心思想。

再後來我看到知乎的一篇文章，直接了當地寫出了 Harness 在 Claude Code 中的幾個體現：

MCP 和 tool，提供能力
Hook，提供約束
Skill，提供引導和流程
Subagent，提供獨立的執行環境

我才對 harness 工程在 AI 程式設計領域的應用有了具體的認識，後來我就嘗試在 Claude Code 裡試用，發現效率真的可以提升幾倍。

本文是我整理的詳細實踐過程，供同學參考。專案原始碼連結 github.com/wangfupeng1…

建立一個專案

從 0 開始，初始化一個 Next.js 新專案。其他技術棧或框架也都沒問題，對 AI 來說都一樣。

<div><div><div></div><span>lua</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx <span>create</span>-<span>next</span>-app@latest</span>


用 Claude Code 打開專案，或用 VS Code 打開並使用 CC 外掛。沒安裝 CC 的可以參考我之前的文章。

初始化單元測試環境，安裝 npm 外掛，配置檔案，命令。我交給 CC 操作，它選擇了 Jest。

<div><div><div></div><span></span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>根據目前專案，初始化一個單元測試環境。</span>
<span>測試程式碼放在同目錄下，以 xxx.test.ts 格式命名</span>
<span>並為首頁 page.tsx 寫一個單元測試，執行看是否報錯</span>

生成 CLAUDE.md

在 CC 執行 /init 命令先初始化一個 claude.md

再參考 andrej-karpathy-skills 的四原則，這是最近非常火紅的 AI 編程提示詞，把它補充進來。

現在 claude.md 已經超過 100 行了，再有內容就需要擴充到其他檔案中，如 rules/xxx

Skill

安裝基礎必備 skill

我先安裝了一些基礎的 skill，可以直接使用，後續再邊開發邊補充。

react best practice vercel 官方出品

<div><div><div></div><span>bash</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx skills add vercel-labs/agent-skills <span>## 選擇 react-best-practices </span></span>


[frontend-design](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fanthropics%2Fskills%2Ftree%2Fmain%2Fskills%2Ffrontend-design) Anthropics 官方出品

<div><div><div></div><span>ruby</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx skills add <span>https:</span>/<span>/github.com/anthropics</span><span>/skills/tree</span><span>/main/skills</span><span>/frontend-design </span></span>
<span></span>

skill-creator Anthropics 官方出品

<div><div><div></div><span>ruby</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx skills add <span>https:</span>/<span>/github.com/anthropics</span><span>/skills/tree</span><span>/main/skills</span><span>/skill-creator </span></span>
<span></span>


UI 元件庫 shadcn skill [ui.shadcn.com/docs/skills](https://link.juejin.cn?target=https%3A%2F%2Fui.shadcn.com%2Fdocs%2Fskills)

<div><div><div></div><span>bash</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx skills add shadcn/ui</span>

PS. 之後還會安裝 test review 相關的 skill，下文會有介紹，你在這裡一起安裝也沒問題。

skill 盡量精簡

我的觀點：skill 如果沒有具體、直接的用途，就不要安裝。盡量精簡。

例如 docx、pdf、ppt 等 skill，寫程式用不到，先不安裝
關於架構、邏輯、memory 相關的 skill，過於高階抽象，看不到直接用途，先不安裝
LLM 和 agent 都在持續發展中，現在常用的 skill 已經被整合到 LLM 和 agent 中

MCP 伺服器

安裝基礎必備 MCP 伺服器

先安裝一些基礎的，後續邊開發邊補充。GitHub、Supabase、Figma 等。

Context7 用於更新文件版本的，是社群推薦安裝的，但我整個試用過程中還沒發現明顯用途。你也可以先不安裝，之後再安裝也行。

另外，它官網的安裝命令，我一直卡在登入驗證上，用舊版本的安裝命令可以成功

<div><div><div></div><span>sql</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>claude mcp <span>add</span> <span>-</span>s project context7 npx <span>@upstash</span><span>/</span>context7<span>-</span>mcp</span>


[Playwright](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fmicrosoft%2Fplaywright) MCP 伺服器後面要用，必須安裝。

<div><div><div></div><span>sql</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>claude mcp <span>add</span> <span>-</span>s project playwright npx span>@playwright</span span>/</span>mcp<span>@latest</span</span>

和 Skill 一樣，MCP 伺服器也是先安裝一些基礎必備的，其他不確定的就先不安裝。

例如 figma、github、supabase 我現在還用不到，就先不裝，未來用到了再說。

關於 tool search

如果 MCP 伺服器安裝過多，會增加大量的 tool，每次 AI 請求都會攜帶，將極大消耗 token，所以 Claude Code 現在預設自帶 tool search 機制，會動態搜尋相關的 tool，而不是全部攜帶。

但是，目前文件中，tool search 的使用也有限制，和我最相關的是 model，文件中只有 Sonnet 4 及之後的模型才能支援。

我根本沒有用 Claude 模型，我用的是國內的 MiniMax，所以大概它不會支援。

所以更應該謹慎使用 MCP 伺服器，不直接使用的不要隨意安裝。

Hook

基礎必備 Hook

我在這個開源專案中 github.com/karanb192/c…

找到了幾個常用的 hook：

阻止危險命令 block-dangerous-commands
保護隱私資料 protect-secrets

直接把它的原始碼複製下來，並配置自己的 .claude/settings.json 即可

建立自訂 Hook

我還想建立一個 Hook 來顯示和警告 Context 使用情況，避免 Context window 太大而導致 LLM 出現幻覺。

要怎麼建立一個 hook 呢？第一步可以先搜尋一下有沒有相關的 skill，在 CC 中輸入

<div><div><div></div><span>css</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>/find-skills create <span>a</span> claude-<span>code</span> custome hook</span>


它找到了一個相關的 skill 而且還是 Anthropics 官方的，應該值得信賴，安裝它

![image.png](https://i.imgur.com/YOBL0tX.jpeg)

然後呼叫這個 skill 幫我建立 hook，或者你直接輸入 prompt，它會自己呼叫這個 skill

<div><div><div></div><span>bash</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>/hook-development 幫我建立一個 claude-code hook，叫做 context-warning，使用 PostToolUse 這個 hook</span>
<span>用於顯示和警告目前 AI 請求的 context 使用和剩餘百分比，並在超過 80% 時給出明顯警告</span>
<span>以便我知道何時適合壓縮 context</span>

現在已經有了基礎的環境和工具，接下來該考慮流程了。

定義 dev-workflow

我是在 claude.ai 聊天，和它描述我的需求：

我想定義一個工作流，根據需求拆解任務、編碼、CR 和測試
這幾個任務分別用不同的 subagent 實作
這些步驟可以自動執行，除非核心步驟需要人工介入

它幫我設計了一個 skill ，標註了詳細的流程圖，下面也描述了每個步驟的規則。

其實這也不是它一開始就直接給我的答案，我和它討論了很久、修改好幾次才出來的。

這個設計中單元測試很重要，只有把測試從頭到尾做好，才能驗證閉環

plan 時，就要輸出驗收標準、測試範圍
code 時，同時要寫單元測試程式碼
test 只管測試，不改程式碼內容。測試不通過交給 coder agent 去修改程式碼。

Subagent

有了上述的 skill 流程，我就讓 claude.ai 繼續幫我生成了 4 個 subagent 的提示詞，下文有。

新建 subagent

執行 /agents 可查看目前 sub agent，也可以建立新的 sub agent

建立時需要寫入提示詞（agent 功能介紹），還需要選擇 tools：all 或 read-only 等，剩下的 CC 會自動幫你生成。

建立完成後，你就可以在 .claude/agents 目錄下看到建立的所有 subagent

planner

<div><div><div></div><span>sql</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>A development planning specialist. <span>When</span> given a feature request <span>or</span> bug </span>
<span>fix, produces a structured plan including: Task Summary, <span>Scope</span> </span>
<span>(<span>in</span><span>/</span><span>out</span><span>/</span>assumptions), Implementation Tasks checklist <span>with</span> affected files, </span>
<span>Unit Test Requirements <span>per</span> core <span>module</span>, Acceptance Criteria <span>in</span> </span>
<span>Given<span>/</span><span>When</span><span>/</span><span>Then</span> format, <span>and</span> Risks <span>&</span> Notes. Does <span>not</span> write <span>any</span> code.</span>


注意：planner 中要包含：驗收標準，和測試範圍，以指導後續寫單元測試和 E2E 測試。

tool 選擇 read-only tools，只讀模式，只做規劃，不編輯任何內容。

![image.png](https://i.imgur.com/43igKUm.jpeg)

### coder

<div><div><div></div><span>vbnet</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>A software implementation specialist. <span>Implements</span> features <span>or</span> fixes based </span>
<span><span>on</span> a provided plan. Writes unit tests <span>for</span> every <span>module</span> <span>or</span> <span>function</span> </span>
<span>specified <span>in</span> the plan's Unit Test Requirements. When given a reviewer or </span>
<span>tester failure report, fixes only the reported Critical Issues without </span>
<span>touching unaffected code. Produces an Implementation Summary listing </span>
<span>files created, files modified, unit tests written, <span>and</span> any deviations </span>
<span><span>from</span> the plan.</span>

注意：寫程式時一起寫出單元測試，這樣測試寫得更精準、更詳細。

tools 選擇 all tools，編碼階段，給予最高編輯和執行權限。

忘了一些規則，繼續告訴 CC 讓它來修改：

<div><div><div></div><span>bash</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>@.claude/agents/coder.md  對於 coder agent 我想補充幾個 git 相關的規則：</span>
<span>1. 不要在 main/master 分支開發，要在獨立分支開發（以 feat/fix/test/refactor/chore/docs 開頭的分支名稱）且開發之前要保證 git status 乾淨無更改； </span>
<span>2. 每次階段性的改動都要及時 git commit 不要混在一起提交程式碼；</span>


### reviewer

<div><div><div></div><span>css</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>A</span> <span>code</span> review specialist. Reviews <span>code</span> changes for correctness against <span>a</span> </span>
<span>provided plan, <span>code</span> quality, security, and error handling. Checks whether </span>
<span>unit tests adequately cover the specified Unit Test Requirements — missing </span>
<span>tests are treated as Critical Issues. Produces <span>a</span> structured report with </span>
<span>result (PASS or FAIL), Critical Issues, Warnings, Suggestions, and <span>a</span> Unit </span>
<span>Test Assessment. Does not modify any <span>code</span>.</span>

tools: read-only ，只讀，程式碼走查

安裝一個 review 相關的 skill github.com/obra/superp…

<div><div><div></div><span>sql</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx skills <span>add</span> obra<span>/</span>superpowers<span>@requesting</span><span>-</span>code<span>-</span>review</span>


### tester

<div><div><div></div><span>sql</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>A software testing specialist. Validates implementations <span>in</span> three layers: </span>
<span><span>first</span> runs <span>all</span> existing unit tests, <span>then</span> verifies <span>each</span> Acceptance </span>
<span>Criterion <span>from</span> the plan, <span>then</span> identifies <span>and</span> executes additional edge <span>case</span> </span>
<span><span>and</span> error handling tests <span>not</span> already covered. Produces a structured report </span>
<span><span>with</span> <span>result</span> (PASS <span>or</span> FAIL), unit test results, <span>per</span><span>-</span>criterion AC </span>
<span>validation, additional edge cases found, <span>and</span> an Overall Assessment. Does </span>
<span><span>not</span> modify <span>any</span> code.</span>

tools: all tools 因為它需要執行測試命令，還可能會呼叫 Playwright MCP 伺服器 tools

安裝了一個 test 相關的 skill github.com/obra/superp…

<div><div><div></div><span>ruby</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>npx skills add <span>https:</span>/<span>/github.com/obra</span><span>/superpowers/tree</span><span>/main/skills</span><span>/test-driven-development </span></span>
<span></span>


任務 1
----

呼叫 dev-workflow skill，開發一個新功能。這也是我第一次試用這個工作流，看效果如何。

<div><div><div></div><span>bash</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>/dev-workflow 在首頁開發一個 todo-list 功能</span>

plan

Claude Code 根據 dev-workflow skill 流程，自動呼叫 planner agent 開始工作。

輸出了計畫（包括驗收標準和測試需求），你可以確認，也可以繼續補充修改。

我在這裡加了修改意見，讓它繼續改一下。

它修改之後，我覺得沒問題，手動回覆 confirmed 確認，執行下一步。

coding

它開始呼叫 coder agent 進行編碼

寫程式，建置，確保能成功建置。
寫單元測試，執行單元測試，確保沒問題。

review

它自動呼叫 reviewer agent 進行程式碼走查，最後結果沒問題。

test

上一步通過之後，它自動呼叫 tester 執行單元測試。

單元測試通過，又要呼叫 Playwright 執行 E2E 測試，之前配置了 MCP 伺服器

它自動啟動服務，自動測試網頁功能

completion

測試通過，它自動總結任務。一共 10 多分鐘，全程自動化執行，除了我確認 task plan。

任務 1 發現的問題

未執行 git 規則

即便我在 coder agent 文件中要求了，但是

coder 依然在 main 分支寫程式
coder 沒有及時提交 commit

在此又得拿出這句話：

當 AI 出錯時，不是去糾正它，而是改進自己的提示、規則和約束。這是 harness engineering 的核心思想。

對此我做了兩個修改

第一，修改 dev-workflow skill，PHASE2 增加引導

第二，自訂一個 Hook 來約束它，如果目前是 main 或 master 分支，就報錯

無法及時看到開發效果

現在是 coder agent 寫完程式碼和單元測試，直接就交給 reviewer agent 去程式碼走查了。

應該在這裡停一下，讓使用者看看開發出來的效果和功能，手動確認，再繼續執行。

修改 dev-workflow skill

<div><div><div></div><span>perl</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>@dev-workflow/SKILL.md 修改這個 skill，在 PHASE <span>2</span> 的最後，增加一個 CHECKPOINT，讓使用者去執行專案來確認 UI 效果和功能。確認無誤以後再繼續，如有問題還要重新改動。參考目前 CHECKPOINT <span>#1 的位置和格式即可。</span></span>


![image.png](https://i.imgur.com/KmCybfc.jpeg)

### 沒有更新 README.md

每一個任務結束，都要及時更新 readme.md 以及其他相關文件。

修改 dev-workflow skill 增加這方面的描述。必要的時候（文件較多時）這裡可以再擴充一個 subagent

任務 2
----

任務 1 中遇到的問題，已經被改過來了，但效果如何呢？還需要再來一個任務進行驗證。

使用 dev-workflow skill 開發一個新功能，重新走一遍流程試試。

<div><div><div></div><span>diff</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>/dev-workflow 開發一個新需求：</span>
<span>新增 todo 的時候，可以設定完成時間，用於判斷該 todo 是否過期。</span>
<span>todo-list 下面增加幾個篩選標籤</span>
<span><span>- 全部：全部 todo</span></span>
<span><span>- 今天：完成時間是今天的 todo</span></span>
<span><span>- 過期：完成時間早於今天的 todo </span></span>
<span>每個標籤都計算 todo 數量（計算時只考慮未完成的數量，已完成的不計數了）</span>

plan

啟動 planner agent 製作 task plan

checkpoint1 停下，讓使用者確認 task plan

code

先新建 git 分支了 —— 之前的改動有效果了。

然後 coder agent 開始工作

寫程式，寫測試，自行驗證......

Checkpoint2 停下了，提示使用者執行 npm run dev 去驗證效果 —— 之前的改動有效果了

我執行 npm run dev 來看效果

我發現了一個問題，告訴 CC 來修改

<div><div><div></div><span>makefile</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>change: 一個 todo 我設定了「完成」，它就再也看不到了，這會讓使用者很困惑。在所有 filter 列表中，已完成的 todo 也要顯示出來，不要隱藏。</span></span>


它重新啟動 coder agent 開始修改

![image.png](https://i.imgur.com/izD9wOp.jpeg)

修改完成之後，Checkpoint2 再停止，使用者檢查，這次沒問題了。我手動回覆 confirmed

而且，我發現它每次修改也都會自己提交 git commit，而且目前 git status 是乾淨的。
說明之前對 skill 的修改有效果了。

![image.png](https://i.imgur.com/KUGgYiZ.jpeg)

### review

人工確認之後，它繼續到 reviewer agent

![image.png](https://i.imgur.com/X0MCt6v.jpeg)

review 結束，通過。

![image.png](https://i.imgur.com/yA0iTt2.jpeg)

但這裡的 checkpoint 3 不應該停止，應該自動通過的，除非遇到問題。這裡需要改進，問題不大。

手動確認一下，繼續。

### test

繼續執行 tester agent

![image.png](https://i.imgur.com/wjBVYK4.jpeg)

測試通過，但這次好像沒有觸發 Playwright —— 又一個新問題，晚點再去查。

![image.png](https://i.imgur.com/rf6Cpsg.jpeg)

### completion

任務總結。

![image.png](https://i.imgur.com/3SOykVu.jpeg)

發現它自動更新了 README 文件——之前的改動也有效果。

![image.png](https://i.imgur.com/TcMVBwR.jpeg)

任務 2 發現的問題
---------

### checkpoint 3 不應該停止

checkpoint 3 不應該停止，除非遇到問題。修改 dev-workflow skill

<div><div><div></div><span>perl</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>@dev-workflow/SKILL.md 修改這個 skill，</span>
<span>對於 CHECKPOINT <span>#3 如果 review 審核通過了，可以直接跳到下一步不用人工審核。</span></span>

其實就是改了一句話，也不知道管不管用，好在問題不大。

tester 沒有呼叫 Playwright

我檢查了 tester agent 的提示詞，確實沒有明確說明 Playwright 的應用場景。

於是我讓 CC 為 tester agent 增加 Playwright 的描述

<div><div><div></div><span>markdown</span></div><div><div> <span>體驗AI程式碼助手</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span>@tester.md 修改這個 subagent 提示詞：單元測試成功以後，嘗試執行 Playwright 自動化測試。要求：</span>
<span><span>1.</span> 判斷使用者是否安裝 Playwright CLI 或 MCP server，如果沒安裝，提示使用者，然後繼續走流程。</span>
<span><span>2.</span> 根據工作流中 planner agent 給出的測試範圍和指引，來執行 Playwright。如果找不到 planner agent 給出的測試範圍和指引，提示使用者，然後繼續走流程。</span>
<span><span>3.</span> 如果使用者安裝了 Playwright CLI 或 MCP server，並且你得到了工作流中 planner agent 給出的測試範圍和指引，則使用 Playwright 執行自動化網頁測試。</span>



現在 tester 有了明確的 Playwright 應用場景和步驟，下一次就可以呼叫並執行。

![image.png](https://i.imgur.com/qsDZPCV.jpeg)

關於 Plan mode
------------

Claude Code 自帶的 Plan mode（其他 AI IDE 也有）和上文的 planner agent 是有功能重疊的。

Plan mode 有強制的只讀權限，而 planner 也設定了 read-only tools，功能是相同的。

如果用 Plan mode，需要手動在 CC 切換模式，而用 planner agent 更方便在 skill 中定義流程。

所以我這裡用的是 planner agent。

未來擴充
----

這只是最基礎的開發模式，做的也是簡單的功能，但已經徹底打破了傳統開發模式了。

基於這種方式，我覺得很容易擴充到更規範、更複雜的研發流程中來。

例如，定義更長的流程，從 GitHub issue（或 Jira、Figma）開始，直接到 GitHub PR

再例如，一個人並行開發多個任務（搭配 git worktree），一天可以完成一週的工作量

我會繼續探索更多可能性，持續分享關於 AI、智慧體、全端開發等話題，歡迎按讚追蹤～

---

原文出處：https://juejin.cn/post/7632616802066530355