Sketch :
描けば、エージェントはあなたの言いたいことを見て理解する
Sketchは、AIエージェントのコンポーザーに直接組み込まれた描画キャンバスです。空白のキャンバスを開いてモックアップや図をスケッチしたり、スクリーンショットを開いて注釈を付けたり。バグを丸で囲み、矢印を引き、領域をハイライトし、メモを添える。描いた絵はメッセージに添付され、AIコーディングエージェントに送られます。
一枚の絵は千の言葉に値する。AIエージェント相手ならその効果は倍増します。「モーダルの右上のボタンが端に近すぎる」と書く代わりに、それを丸で囲むだけ。スケッチはプロンプトの隣に届き、エージェントは視覚的フィードバックを一発で受け取り、あなたはターミナルから一歩も離れていません。
Sketchの実演 : コンポーザーからキャンバスを開き、スクリーンショット上の視覚的なバグを丸で囲み、絵を添付してエージェントに送る。
Sketchが解決する問題はこうです。AIエージェントとバイブコーディングをしていて、画面に何かおかしいところがある。カードがはみ出している、ボタンが数ピクセルずれている、ある行の余白が崩れている。エージェントに直してもらうには、その視覚的な問題を言葉で説明しなければなりません。「真ん中の列の2番目のカード、アバターが付いているやつ、その右側のパディングが詰まりすぎている」。3つの文を書いても、エージェントは推測し、別の要素を直してしまい、あなたはまた3つの文を書く。
Sketchは推測をなくします。スクリーンショットを撮ってSketchキャンバスで開き、崩れたカードを赤い丸で囲み、矢印と「ここが詰まりすぎ」という言葉を添えて、メッセージに添付する。エージェントはもう段落を解釈しません。絵を見るのです。視覚的フィードバックは曖昧さがありません。なぜなら視覚的だからです。
Sketchは逆方向にも使えます。空白のキャンバスから始めて、エージェントが作る前に欲しいものをスケッチする : 画面のラフなモックアップ、レイアウトのワイヤーフレーム、フローのざっくりした図。手描きのスケッチは、文章の壁よりもエージェントをうまく方向づけます。あなたはプロトタイプを描き、エージェントがコードにします。
コンポーザーから開いたSketchキャンバス : スクリーンショットに注釈を付け、図形や矢印を描き、その絵をエージェントに送るメッセージに添付する。
Sketchがエージェントのワークフローに不可欠な理由
精度。スクリーンショット上の丸は、ただ一つの正確な要素を指します。文章は推測を指します。問題を描けば、エージェントは隣のものではなく、あなたが本当に意図したものを直します。「違う、もう一つのボタン、その下のやつ」はもう不要です。
速さ。領域を四角で囲むのは3秒で済みます。同じ領域を言葉で説明すると3つの文がかかり、しかもその文はまだ曖昧です。Sketchは、視覚的なバグへの注釈を、面倒な作業から反射的な動作に変えます。
表現。アイデアの中には、文章ではなく形であるものがあります。レイアウト、フロー、画面。Sketchなら、モックアップや図を直接、フリーハンドで、あるいは図形や矢印で描いて、その絵を仕様としてエージェントに渡せます。
流れ。Sketchはコンポーザーの中にあります。別の描画アプリを開くことも、ファイルを書き出すことも、何かをドラッグして回すこともありません。絵と書いたプロンプトは同じメッセージで一緒に届くので、エージェントは全体の文脈を一度に受け取ります。
Sketchの仕組み、最初から最後まで
コンポーザーのSketchボタンから、エージェントへのメッセージに添付された絵まで。
コンポーザーからSketchを開く
どのエージェントのコンポーザーにもSketchボタンがあります。クリックすると全画面の描画キャンバスが開き、すぐに使える状態になっています。長方形ツールがすでに有効なので、その場で対象を囲めます。
空白のキャンバスに描く、または画像に注釈する
空白のキャンバスから始めて、モックアップ、ワイヤーフレーム、図をスケッチする。あるいは既存の画像を開く : スクリーンショットをコンポーザーにドロップし、サムネイル上の鉛筆アイコン(またはファイルプレビューの「注釈」)をクリックして、その上に描く。
スケッチ、丸、矢印、ハイライト、テキスト入力
キャンバスではフリーハンド描画、長方形、楕円、矢印、線、テキストが使えます。崩れた要素を丸で囲み、そこに矢印を向け、領域をハイライトし、隣に短いメモを書く。視覚的フィードバックを一目でわかるようにするものなら何でも。
絵をメッセージに添付する
「メッセージに添付」をクリックします。キャンバスはPNGとして書き出され、ドロップしたファイルと全く同じようにサムネイルとしてコンポーザーに追加されます。既存の画像に注釈を付けた場合、注釈版が元のサムネイルを置き換えるので、エージェントが両方を受け取ることはありません。
エージェントに送る
いつも通りプロンプトを入力して送信します。PNGは、ほかのファイルと同じパイプラインを通してメッセージに添付されます。絵とテキストは一つのターンで一緒にエージェントに届きます。
エージェントが絵を読む
AIコーディングエージェントは、画像添付としてスケッチを受け取ります。そのモデルが画像入力に対応している限り、あなたが丸で囲み、矢印を向け、ハイライトしたものをそのまま見て、説明を解析する代わりに視覚的フィードバックに基づいて動きます。
Sketchの2つの使い方
ゼロから始めるか、すでにあるものの上に描くか。
空白のキャンバス : モックアップをスケッチする
空のキャンバスを開いて、エージェントに作ってほしいものを描きます。画面のラフなモックアップ、レイアウトのワイヤーフレーム、コンポーネントのプロトタイプ、データフローの図。フリーハンドの線、ボックス、矢印、テキストラベル。手描きのスケッチは、UIの説明を一段落も書かずにエージェントが従える仕様になります。
注釈 : スクリーンショットの上に描く
スクリーンショットや任意の画像をキャンバスに読み込んで、マークアップします。ずれた要素を丸で囲み、はみ出しに矢印を引き、間違った色をハイライトし、バグの隣に「ここを直して」と書く。Sketchキャンバスはあなたの画像を背景レイヤーとして開き、その上に描いた注釈付きスクリーンショットが、視覚的フィードバックとしてそのままエージェントに届きます。
Sketchの正体
Sketchは、AgentsRoomデスクトップアプリに組み込まれた本格的な描画キャンバスで、どのAIエージェントのコンポーザーからも開けます。マーカーを上に乗せただけのスクリーンショットビューアーではありません。本物の描画ツールが使えます : フリーハンドのペン、長方形、楕円、矢印、線、テキスト。きちんとしたスケッチ面に期待するのと同じ道具一式です。
キャンバスは2つのモードで動きます。空白モードは、モックアップ、ワイヤーフレーム、図のための空の面を提供します。注釈モードは既存の画像を背景として読み込み、その上に描けるようにします。注釈モードには、すでにコンポーザーに添付された画像のサムネイルから、またはファイルプレビューの「注釈」ボタンから入ります。
絵を添付すると、Sketchはすべての線が読みやすく保たれるよう白い背景でキャンバスをPNGに書き出し、そのファイルをコンポーザーの添付トレイにドロップします。そこから先、絵は通常の経路をたどります : プロンプトと一緒に進み、画像としてエージェントに送られます。Sketchは新しい送信の仕組みを追加しません。すでにあるものに差し込むだけです。
すべてはあなたのマシンに留まります。スケッチはローカルのディスクに保存され、リポジトリにコミットされることも、サードパーティのサービスにプッシュされることもありません。設計上、一時的なものです : 絵は1つのメッセージのための文脈であって、管理しなければならないファイルではありません。Sketchはローカルで、プライベートで、プロバイダーに依存しません : モデルが画像を受け付けるエージェントなら何とでも動くので、Claude CodeでもCodexでも、同じ絵からエージェントへの流れが得られます。
人々がSketchで描くもの
絵をエージェントと話す最速の手段に変える、3つのパターン。
視覚的なバグを報告する
崩れたUIをスクリーンショットに撮り、要素を丸で囲み、はみ出しに矢印を引き、間違った余白をハイライトする。エージェントは、あなたの説明を解読する代わりに、視覚的なバグを見ます。UIのリグレッションをAIエージェントに報告する、ただ一つの最速の方法です。
モックアップやワイヤーフレームをスケッチする
エージェントが作る前に画面を描きます。ラフなワイヤーフレーム、レイアウトのスケッチ、コンポーネントの低忠実度のモックアップ。その絵をブリーフとしてエージェントに渡し、あなたのスケッチをコードに変えてもらいます。
図やフローを描く
説明の中には図であるものがあります。データフロー、ステートマシン、ページの構造、2つのコンポーネントがどう通信するか。ボックスと矢印でスケッチして、その図を文脈としてエージェントに送ります。
言葉で説明する vs 描く
同じ視覚的フィードバック、同じエージェント。一方の道は遅くて曖昧、もう一方はスケッチです。
Sketchなし
- : 視覚的な問題を言葉で説明し、エージェントが同じものを思い浮かべることを願う。
- : 一つの要素を指すのに3つの文を書いても、まだ曖昧。
- : モックアップを描くには、別のアプリを開き、ファイルを書き出し、コンポーザーにドラッグする。
- : コンテキストの切り替えが、あなたの流れとエージェントとの会話を断ち切る。
- : エージェントが別の要素を直し、あなたは説明し直し、ループが続く。
Sketchあり
- : スクリーンショット上で要素を丸で囲めば、フィードバックは曖昧でなくなる。
- : 一枚の絵が、3つの説明の文を3秒で置き換える。
- : キャンバスはコンポーザーの中にある : 別アプリも、書き出しも、ドラッグ&ドロップもない。
- : ターミナルから一度も離れず、エージェントとのスレッドを一度も断たない。
- : エージェントはあなたの意図をそのまま見て、一発目で直す。
Sketchは、視覚的な問題と、それを理解するAIエージェントとの間の最短経路です。
FAQ
AgentsRoomのSketchとは何ですか ?
Sketchは、AIエージェントのコンポーザーに組み込まれた描画キャンバスです。コンポーザーから開き、空白のキャンバスにスケッチを描くか既存のスクリーンショットに注釈を付けると、その絵がPNGとして書き出され、AIコーディングエージェントに送るメッセージに添付されます。視覚的フィードバックを、説明するものから描くものへと変えます。
AIエージェントに絵を送るにはどうすればいいですか ?
エージェントのコンポーザーでSketchボタンをクリックし、キャンバスに描いて、「メッセージに添付」をクリックします。絵はコンポーザー内のPNGサムネイルになります。プロンプトを書いて送信すれば、スケッチはメッセージに添付され、テキストと一緒にエージェントに届きます。
スクリーンショットに注釈を付けられますか ?
はい。スクリーンショットをコンポーザーにドロップし、そのサムネイルの鉛筆アイコンをクリックするか、ファイルプレビューを開いて「注釈」をクリックします。Sketchキャンバスがスクリーンショットを背景レイヤーとして開くので、その上に描けます : バグを丸で囲み、矢印を加え、領域をハイライトし、メモを書く。注釈付きスクリーンショットは、添付すると元のものを置き換えます。
Sketchでは何を描けますか ?
キャンバスではフリーハンド描画、長方形、楕円、矢印、線、テキストが使えます。モックアップをスケッチしたり、ワイヤーフレームを描いたり、図をレイアウトしたり、スクリーンショットを丸や矢印やハイライトでマークアップしたりできます。長方形ツールがデフォルトで有効なので、キャンバスを開いた瞬間に要素を囲めます。
AIエージェントは本当に私のスケッチを見ているのですか ?
絵はPNG画像としてメッセージに添付されます。エージェントのモデルが画像入力に対応している限り、スケッチを見てそれに基づいて動きます。Claude Codeを動かすClaudeや、Codexを動かすGPT-4クラスのモデルは画像を読むので、エージェントはあなたの視覚的フィードバックを直接受け取ります。
どのエージェントとプロバイダーがSketchで動きますか ?
Sketchは標準的なPNG画像を添付するので、プロバイダーに依存しません。モデルが画像入力を受け付けるエージェントなら何でも動きます : Claude Code、Codex、そしてAgentsRoomが対応するほかのCLI。プロバイダー固有のセットアップはありません。
別の描画アプリやホワイトボードは必要ですか ?
いいえ。それこそがSketchの狙いです。描画キャンバスはコンポーザーの中にあります。別ウィンドウでExcalidraw、Figma、スクリーンショット注釈ツールを開くことも、ファイルを書き出すことも、それをドラッグして戻すこともありません。Sketchは、描いて送るループ全体をターミナルの中に収めます。
私のスケッチはどこに保存されますか ? プライベートですか ?
スケッチは自分のマシンにローカルで保存されます。gitリポジトリにコミットされることも、サードパーティのサービスにアップロードされることもありません。一時的なものです : スケッチは1つのメッセージのための文脈であり、古いスケッチは自動的に整理されます。
スケッチを再編集したり再注釈したりできますか ?
はい。コンポーザー内のどの画像も、すでに注釈を付けたスクリーンショットを含めて、Sketchキャンバスで開き直してもう一度描けます。新しいバージョンを添付すると、それが以前のサムネイルを置き換えるので、エージェントが同じ画像を二度受け取ることはありません。
バグを説明する代わりに描くのはなぜですか ?
なぜなら、説明は推測であり、絵はそうではないからです。「右上のボタンがずれている」と書くと、エージェントは頭の中で画面を再構築しなければなりません。スクリーンショット上でボタンを丸で囲めば、再構築するものは何もありません。一枚の絵は千の言葉に値する。そしてAIエージェントへの視覚的フィードバックでは、無駄になる何ターン分にも値します。
相性の良い機能
ブラウザ自動化
あなたのQAエージェントが本物のブラウザを操作し、スクリーンショットを撮ります。Sketchは、そのスクリーンショットの一枚に注釈を付け、マークアップしたフィードバックを送り返す方法です。
Scratchpad
AgentsRoom内のプロンプトとメモのためのメモ帳。Scratchpadが言葉を、Sketchが絵を扱う : どちらも同じエージェントのコンポーザーに供給します。
バイブコーディングレビュー
エージェントが変更するすべてのファイルをリアルタイムで見られます。変更が画面上でおかしく見えたとき、Sketchはそれを指し示す最速の方法です。
FigmaからAIエージェントへ
Figmaのデザインをエージェントのワークフローに取り込みます。Sketchはそのよりラフで速い従兄弟 : 完全なデザインファイルが要らないとき、コンポーザーの中で直接手描きのモックアップを描けます。
バグを説明するのはやめましょう。描いてください。
AgentsRoomをダウンロードしてSketchを使いましょう : エージェントのコンポーザー内にある描画キャンバスで、モックアップをスケッチしたりスクリーンショットに注釈を付けたりして、ターミナルから一度も離れずにその絵をAIコーディングエージェントに送れます。
コンパニオンアプリ：外出先でもエージェントを確認
Claude、Codex、Antigravity CLI、またはその他の AI プロバイダーを使用します。
バグや要望を公開バックログに直接送信できます。
実際の AgentsRoom の様子。