Claude Codeユーザー必携の2つのツール — AgentationとReadout

Claude Codeでフロントエンド作業をするたびに、2つのことがずっと引っかかっていました。エージェントに「どこを直すか」を正確に伝えること。そしてセッション終了後にエージェントが何をしたのかを把握すること。

この2つの問題を解決するツールを、同じ一人の人物が作りました。

Agentation：UI要素を言葉で説明する時代は終わった

AIエージェントに「あの青いボタンを直して」と伝える時代は終わりました。

Agentationは、画面上で修正したい要素をクリックするだけでCSSセレクタと位置情報を自動で抽出する視覚フィードバックツールです。「サイドバーの青いボタン」と説明する代わりに、.sidebar > button.primaryをそのままエージェントに渡せます。

効果はすぐに表れます。3〜4回のやり取りが必要だった修正が、ほとんど一発で決まるようになります。

主な特徴

• インストールは1行。 npm i agentationでReact 18+プロジェクトにコンポーネントを1つ追加するだけ。
• 4段階の出力モード。 Compact（セレクタ＋メモ）からForensic（計算済みスタイル全量）まで、必要な詳細度を選択可能。
• MCP連携のAgent Sync。 MCPサーバーを接続すると、エージェントが視覚フィードバックをリアルタイムで読み取ります。
• アニメーションデバッグ。 CSSアニメーションを途中フレームで一時停止し、中間状態へのフィードバックが可能。タイミングカーブやキーフレーム位置まで指定できます。
• テキスト・エリア選択。 テキスト選択やエリアドラッグで、余白やレイアウトに関するフィードバックも提供可能。

npmダウンロード数は17万を突破。1つのツイートで67万ビューを記録。これほどの数字は、実際の課題を解決しているツールの証拠です。

Readout：Claude Codeセッションを動画のように巻き戻す

Readoutは、Claude Codeの開発環境と設定状態を一画面で表示するmacOSネイティブアプリです。

最も印象的な機能はセッションリプレイです。過去のセッションを選んでタイムラインをスクラブできます。プロンプト、ツール呼び出し、ファイル変更が時系列で表示され、編集されたファイルがリアルタイムで点滅して示されます。

エージェントシステムを設計する立場でも、長時間の自律実行後に何が起きたかを監査する立場でも、セッションログ分析は避けて通れません。ここまで直感的に見せてくれるツールは他にありません。

詳細

• 無料ダウンロード。 readout.orgからすぐにダウンロード可能。アカウント不要、完全ローカル動作。
• 再生速度調整。 速度変更やイベント単位の手動ステップ移動に対応。
• Codex対応。 Claude CodeとCodexの両方のセッションに対応済み。

フロントエンドのボトルネックはモデル性能ではなく、フィードバック精度

直感に反する話です。AIコーディングツールの性能を責める前に、自分が提供しているフィードバックの品質を見直すべきです。

Storybookでコンポーネントを分離し、Agentationで視覚フィードバックをキャプチャし、Claude Codeに渡す。このループがあれば、ほとんどのUI修正をエージェントが単独で処理できます。

Agentationのドキュメントサイト自体がこのワークフローで構築されています。アニメーションのタイミング調整からカーソル動作の改善まで、すべてが視覚フィードバックループの繰り返しで生まれた成果物です。

同じ作り手、同じ原点

2つのツールはどちらも、Coinbase Baseのデザインヘッドを務めるBenji Taylorが開発しました。本職が開発者ではない人が、AIでコーディングしながら感じた不便さを自らツールにしたのです。

「なぜこれを言葉で説明しなきゃいけないんだ？」がAgentationになり、「セッション記録を一目で見られないのか？」がReadoutになりました。ユーザー視点から生まれたツールが、かえって現場の開発者ワークフローにフィットするケースが増えています。

BenjiはFamilyウォレットを創業後、Aaveによる買収を経て、現在Coinbase Baseでデザインを統括しています。

まとめ

AIコーディングツールを使いこなすだけでは足りません。ツールが足りなければ自分で作る人が、結局先を行くのです。