画面のラフを Claude Code に Excalidraw で描かせ、その絵を次の AI への入力にする
Claude Code に agent-browser でブラウザを操作させ、ホワイトボードアプリの Excalidraw（excalidraw.com）にプロダクト画面のスケッチを描かせる。できた絵を画像として別の AI（実装担当やデザイン相談）に渡すと、文章だけで画面を説明するより意図が伝わりやすい、という実践報告。
どんな時に使う？
- 新しい画面の構成を、コードを書く前に絵で決めたい
- 「ヘッダーの下に検索、その下にカード3列」のような説明が文章だと伝わりにくい
手順
- agent-browser を使える状態にする（Claude Code からブラウザを操作できる CLI）
- 「excalidraw.com を開いて、○○画面のワイヤーフレームを描いて。ヘッダー・検索欄・一覧・詳細ボタンを配置して」と頼む
- 描けたらスクリーンショットを撮らせるか、Excalidraw から PNG／
.excalidrawで書き出す - その画像を実装を頼むエージェント（または別のモデル）に渡し、「この配置で実装して」「この画面の問題点を指摘して」と使う
注意点
- 描かれたものはラフ。細かい寸法や色の指定はできないので、配置と情報の優先順位を決める用途に絞る
- ブラウザ操作は時間がかかり、画面の解釈を誤ることもある。描き終わったら必ず画像を目で確かめる
- 業務の画面構成を外部の Web アプリに描かせてよいかは社内ルールを確認する（Excalidraw はセルフホストもできる）