エージェントにUI変更のたびにスクショで自己チェックさせる（デザイン→実装→スクショ→レビュー→修正のループ）

どんな問題を解決するか / いつ使うか

Claude Code / Codex でフロントエンドを作るとき、「できました」と言われて開くと崩れている、ということを減らしたいとき。

やり方

ループ：デザイン → 実装 → スクショ → レビュー → 修正（@0xrux）。ブラウザ操作には Playwright（CLI/MCP）や、Codexのcomputer useなどを使う。

CLAUDE.md / AGENTS.md に書くルールの例（@Voxyz_ai の投稿を要約・再構成）：

見た目に関わるコードを変えたら、「完了」と言う前にブラウザで確認すること。確認はサブエージェントに任せる。
1. 本番URLがあれば本番→ローカルの順に開く。まだ公開前ならローカルだけ。
2. ページの中身が切り替わってからスクショを撮る。長いページはスクロールしながら撮る。
3. 本番との差分、または「ずれ・重なり・空白・エラー」を列挙し、今回の変更が原因のものに印をつける。
4. 今回の変更が原因の問題だけ直し、再確認する（最大2回まで）。残った問題は一覧で報告する。
5. 既存のタブには触らない。パスワード入力・送信・支払いボタンは押さない。承認ダイアログが出たら止まって報告する。
プロジェクトごとに本番URLとローカルURLを最初に聞き、CLAUDE.mdに保存する。

• デスクトップ幅とスマホ幅（375px）の両方で撮らせる。
• 修正前後のスクショを残させると、人間のレビューも速くなる。

注意点・対応状況

• ログインが必要な画面を自分のブラウザで見せる場合、安全上の制限（入力・送信の禁止など）を必ずルールに書く。
• 自動の修正ループは回数に上限をつける（無限に直し続けるのを防ぐ）。
• Codexのcomputer useをClaude Codeから呼ぶ構成は投稿者の環境の話。使えるツールに合わせて Playwright などに置き換える。

出典

• 投稿者: @Voxyz_ai (Vox) ／ @0xrux (RUX)
• 投稿: @Voxyz_ai · 2026-10-07 / @0xrux · 2026-10-06
• 収集日: 2026-10-09（JST）