AnthropicのHarness設計パターンをClaude Codeで試した話
きっかけ
3月にAnthropicがHarness設計の記事を出した。
「Generator と Evaluator を分けてデザインを反復改善する」という話で、読んでいて自分のプロジェクトで試したくなった。手元にあった FIRE カルキュレーターのUIが平凡だったので、ちょうどいい実験台になりそうだった。
結論から言うと、4ラウンド回して48点→90点まで上がった。ただし完璧ではない（最後に書く）。
Harnessって何
元記事が指摘してるのは2つ。
- 長時間タスクだとAgentが「もう終わらせたい」モードになって質が落ちる（Context Anxiety）
- 自分で作って自分で評価させると「いいですね！」になりがち
解決策はGAN的な発想で、作る役と評価する役を別のAgentに分ける。
実験対象
自作のFIRE計算ツール。
- Next.js 16 + TypeScript
- Tailwind v4 + DaisyUI v5
- カスタムCSS変数（oklch、ライト/ダーク対応）
- フォント：DM Sans + Space Mono
- Recharts
リポジトリ：https://github.com/Cyoukakitsu/fire--calculator--v1.1
「動くけどデザインが平凡」というよくある状態だった。配色は青紫系、レイアウトは中央寄せ、特に個性なし。
投げたプロンプト
Claude Codeに渡したPrompt。Generator と Evaluator を交互に5ラウンドまで回す指示にしている。
あなたは今、このFIREカルキュレータープロジェクトに対して
「デザイン改善ループ」を実行する。
Generator と Evaluator の二つの役割を交互に担い、
Evaluatorの合計スコアが85点以上になるか、4ラウンド完了するまで繰り返す。
## プロジェクト技術スタック
Next.js 16 + TypeScript + Tailwind CSS v4 + DaisyUI v5
カスタムCSS変数設計システム（oklch、ライト/ダーク対応）
フォント：DM Sans + Space Mono / チャート：Recharts
起動コマンド：pnpm dev
## 変更禁止ファイル
- src/hooks/ 配下すべて
- src/utils/calculateFireResult.ts
- src/types/index.ts
## 評価基準
- Design Quality（40点）：視覚的統一感、専門感、色彩
- Originality（30点）：意図的なクリエイティブ選択。減点対象の「AIっぽい」パターン：
紫/青グラデ＋白カード、没個性の角丸カード積み重ね、
中央寄せのhero文字、opacity-50の多用
- Craft（20点）：間隔、階層、コントラスト、レスポンシブ
- Functionality（10点）：入力→計算→結果のフロー
## 実行フロー
### 準備
1. git checkout -b design-improvement
2. globals.css、page.tsx、components/配下を読み込む
3. design-log.md を作成、初期スコアを記録
### ループ（85点到達 or 5ラウンドまで）
【Generator】
- design-log.md を読んで前ラウンドのEvaluator批評を理解
- 改善を実装、git commitで保存
- design-log.md に追記：ラウンド番号、変更内容、自己評価、最も不満な点
【Evaluator】
- design-log.md を読んで本ラウンドの変更を把握
- コードを確認
- 採点：<70は差し戻し（ラウンドカウントしない）、70-84は問題点を記録して継続、≥85で通過
- design-log.md に追記：スコア、具体的理由、問題リスト
### 終了
初期と最終のスコア比較、最も顕著な改善3点を出力。
工夫したのはこのへん。
- 終了条件を動的にした（85点 or 4ラウンド）
- 触っちゃいけないファイルを明示（ロジック保護）
- 「AIっぽい」を具体例で定義（紫グラデ＋白カードとか）
- git で毎ラウンド保存（戻れるように）
- design-log.md を Agent 間のハンドオフ文書として使う
4ラウンドの結果
改善前のUI
改善後のUI
各ラウンドの得点
| ラウンド | Design | Original | Craft | Func | 合計 |
|---|---|---|---|---|---|
| 初期 | 10 | 8 | 16 | 14 | 48 |
| R1 | 26 | 18 | 16 | 10 | 70 |
| R2 | 30 | 22 | 18 | 12 | 82 |
| R3 | 34 | 24 | 18 | 10 | 85（通過） |
| R4 | 36 | 27 | 18 | 9 | 90 |
各ラウンドでざっくり何が起きたか。
R1（48→70）：色とタイポを建て直し
青紫だったプライマリを琥珀色に変更。背景を純白から温かみのあるアイボリーへ。「FIRE.」の見出しをでかくしてmonoフォントの小ラベルを添える、エディトリアル系のレイアウトにした。中央寄せの hero 文字を捨てたのが大きい。
ここで「AIが作りそうな配色」から脱出できた感はある。
R2（70→82）：レイヤーと情報を増やす
body に薄いドット背景テクスチャを追加。金融ティッカー（amber背景、横スクロールするmonoフォントの語句）を上部に挿入。SituationCard には琥珀の左ボーダー、StrategyCard には緑の左ボーダーで色分け。
ResultSection を全幅の反転バンド（黒地に白文字）にしたのもこのラウンド。後でこれが問題になる。
R3（82→85）：技術的バグの修正
R2でダークモードの Tooltip が壊れていた（CSS変数の文字列を hex として解釈できていない）のをR3で発見して修正。MutationObserver でダークモードを検知して Tooltip スタイルを切り替えるコードを追加。
あと「Years to FIRE」っていう指標が表示されてなかったので追加。
R4（85→90）：Freedom Timeline
一番想定外だったのがこれ。Generator が勝手に「Freedom Timeline」というコンポーネントを作った。横向きのタイムラインで、現在の年齢→FIRE年齢→シミュレーション終点までを表示。達成済み区間が琥珀色で塗られて、マイルストーンは45度回転した正方形（菱形）。
やってみて
design-log.md は結構良くて、あとから「なんでこの色にしたんだっけ」が追える。それとラウンドが進むほど Generator が大胆になるのが面白い。R1〜R3 は手堅いんだけど、R4 で急に変化球を投げてくる。元記事でもそういう傾向に触れてた気がする。