- Published on
Agent Teams 進階實戰：用 Evaluator Agent 持續優化前端設計
Anthropic 工程團隊在 Harness design for long-running application development 這篇文章中，展示了一套讓 AI 能長期自主開發應用程式的框架。核心發現是：單一 Agent 自己寫、自己驗的模式產出品質極差（自我評估幾乎總是過度正面），但當他們把 Generator (開發) 和 Evaluator (評鑑) 拆成兩個獨立 Agent，再透過多輪迭代互相制衡後，產出品質出現了顯著提升。官方實驗中，前端設計甚至跑了 5 到 15 輪迭代，每一輪 Evaluator 都會逼著 Generator 往更好的方向進化。
這個架構套到 Agent Teams 上，就是一個非常漂亮的實戰場景。
Generator ⇔ Evaluator 迴圈
流程很直覺：
- Frontend Agent (Generator)：根據需求生成 HTML/CSS/JS 前端頁面
- Evaluator Agent：裝備 Playwright MCP，像真實用戶一樣打開瀏覽器、截圖、點擊，然後依照評分標準給分並寫出具體的改善建議
- Frontend Agent 收到評鑑報告後，進行下一輪修改
- 重複這個迴圈，直到分數達標
重點是：Evaluator 不看 Code，只看最終渲染結果。這才是真正有意義的 QA。
評分標準才是靈魂
開箱即用的 Claude 當 QA 其實很糟——它看到明顯的 Bug 還會幫開發者找藉口放行。所以你必須在 Evaluator 的 Prompt 裡寫死一份嚴格的評分框架：
| 維度 | 權重 | 核心問題 |
|---|---|---|
| Design Quality | 30% | 有整體視覺身份嗎？色彩、字型、佈局是否融合成一致的風格？ |
| Originality | 30% | 有自定義設計決策嗎？還是一眼就能看出的 AI 預設模板？ |
| Craft | 20% | 字型層級、間距、WCAG 對比度等技術執行有沒有弄好？ |
| Functionality | 20% | 使用者能不能不靠猜測就完成核心任務？ |
任何一個維度低於門檻 => 整個 Sprint 直接 FAIL，強制重做。
用 Anti-pattern 清單抓出 AI 濫貨
光有維度還不夠，你還得給 Evaluator 一份具體的扣分清單：
白底 + 紫色漸變 hero section=> 最典型 AI 生成特徵，扣 2 分- 未修改的 shadcn/ui、MUI 預設外觀 => 扣 2 分
- 卡片裡無意義地再包一層卡片 (Cards nested in cards) => 扣 1 分
- 純黑
rgb(0,0,0)當文字顏色 => 扣 1 分
反之，自定義字型搭配、有意義的微動畫、設計過的空狀態 (Empty state) 都可以加分。
Evaluator 的品質上限 = 你的校正投入
最後一個殘酷事實：Evaluator 不是很好建立。你得自己看一輪 Evaluator 的評分結果，找出它跟你判斷不一致的地方，把那些分歧案例當作 few-shot example 加進 agent 設定檔 或是 skills 裡。反覆校正，直到吻合率 ≥ 80%。