# Claude Codeに同じコーヒー店のLPを作らせた実験の素材

記事: 「Claude Codeに同じコーヒー店のLPを36本作らせた。「画面を見て直せ」で42戦42勝、確認を禁止すると最下位。Sonnetは頼まないと一度も画面を見なかった」

実験日: 2026-10-17。Claude Code 2.1.301、モデルは `claude-opus-5-5` と `claude-sonnet-5-5`。判定役は Claude（`claude-opus-5-5`）と Codex CLI 0.162.1。

## 中身

| パス | 内容 |
|---|---|
| `prompts/A.txt` 〜 `G.txt` | 条件ごとの依頼文全文。A 素の依頼／N 確認禁止／P 道具だけ置く／B 詳細要件／C 公式スキル／D 色・書体指定／E 撮って見て直す／F 全部のせ／G 一文だけ足す |
| `code/gen.py` | `claude -p` でLPを生成する。使い方 `python3 gen.py MODEL COND1,COND2 TRIALS [CONCURRENCY]` |
| `code/shoot.js` | PlaywrightでHTMLを撮影し、axe-coreと各種指標を `metrics.json` に出す |
| `code/tile.py` | 縦長のフルページ画像を列に切って横に並べる（判定役へ渡す用。Pillowが必要） |
| `code/judge.py` | 名前を隠した対比較。XとYの順序を入れ替えて2回ずつ判定する。`claude` と `codex` の2系統 |
| `code/orphans.js` | 見出しの最後の行が2文字以下の「孤立行」を数える |
| `code/analyze.py` | 生成ログと判定結果を集計して `trials.json` を作る |
| `results/trials.json` | 39本の試行ごとの指標（時間、API換算額、画像を読んだ回数、axe違反数など） |
| `results/judgments.json` | 判定役の全判定（432件）。勝者と理由つき |
| `html/opus/`・`html/sonnet/` | 生成した39枚の `index.html`（Google Fontsを読み込むのでオンラインで開く） |

## 注意

- **条件Cと条件Fの依頼文は、スキル本文を伏せています。** `{FRONTEND_DESIGN_SKILL_MD}` の位置に、`anthropics/skills` の `frontend-design/SKILL.md` の本文（英語、frontmatterを除く）を貼ると、実験時の依頼文になります。実験時の版: https://github.com/anthropics/skills/blob/41bbe19d1a1a7eaab5e7bb9050a417e5c6cffc8f/skills/frontend-design/SKILL.md
- 生成は `--tools Bash,Read,Write,Edit` に絞り、`--setting-sources project --strict-mcp-config` で、個人設定とMCPを外しています。そのため、条件Cは「スキル本文をプロンプトに貼った」状態です。スキルの自動発火は測っていません。
- `gen.py` は、条件G（追加実験）の生成時に、依頼文を引数ではなくstdinで渡す形に変えています。A〜Fの36本は、依頼文を引数で渡す版で作りました。他の部分は同じです。
- 条件Gは、最初に3本を同時に動かして、2本が `/tmp` の同じ名前の画像に撮影して混ざった疑いが出たので、1本ずつ順番に作り直した結果を使っています。最初の3本でも、判定の勝ち負けは同じでした。
- 撮影・判定のスクリプトには、作業場所の絶対パス（`/tmp/aiwd/p9`、`/tmp/nico_p9`）が書かれています。自分の環境のパスに直してください。
- 判定役はAIだけです。人間のデザイナーによる評価は、していません。
- API換算額は `total_cost_usd` の値です。ローカルのログインで実行したため、実際の請求額ではありません。
- お題は日本語のコーヒー店LP1つ、各条件3本です。