キャプチャツール

AIに正確なビジュアルコンテキストを提供します。スクリーンショット、要素の選択、画像など。

AIに提供するビジュアルコンテキストが正確であるほど、編集の精度が上がります。Proyectaにはいくつかのキャプチャツールが搭載されています。

要素を選択する（Visual Editor）

Visual Editor モードでは、プレビュー内のすべての要素がクリック可能になります。ホバーするとハイライト表示され、クリックすると選択できます。選択された要素はオーバーレイでハイライトされ、編集可能なプロパティ（テキスト、カラー、スペーシング、フォント、ボーダー、エフェクト）がサイドバーパネルに表示されます。

要素を選択したら、次のいずれかの操作が可能です。

• 直接編集する — プロンプトを入力せずにプロパティをインラインで変更する
• AIに質問する — 選択内容がコンテキストとして渡されるため、"このボタンを大きくして" や "このセクションをヒーローの上に移動して" と伝えるだけで、AIが対象を正確に把握できる

動的な要素（計算されたclassName、条件付きレンダリング、式）は、構造化されたプロンプトとともに自動的にAIチャットにフォールバックします。

編集可能なプロパティの全一覧は Visual Edit をご覧ください。

スクリーンショットをチャットにペーストまたはドラッグする

チャット入力欄は画像を直接受け付けます。

1. ペースト — OSのショートカット（Macでは Cmd+Shift+4、Windowsでは Win+Shift+S）でスクリーンショットをコピーし、チャットにペーストする
2. ドラッグ — 任意の画像ファイルをチャット入力欄にドロップする

対応フォーマット：PNG、JPEG、WebP、GIF、AVIF。最大サイズ：1画像あたり10 MB。

プレビュースクリーンショット

AIは、組み込みの preview_screenshot ツールを使って、必要なときにいつでも自分でプレビューのスクリーンショットを撮影できます。スクリーンショットの結果はチャット内にインラインで表示されます。AIは変更内容を確認したり、アプリの現在の状態を把握したりする必要があるときに、このツールを自動的に呼び出します。

スクリーンショットツールは特定のルート（例：/dashboard、/settings）を対象にでき、寸法も取得するため、AIがレイアウトやスペーシングを推論するのに役立ちます。

よくある質問

特定のボタンやテキストをAIに指示するにはどうすればいいですか？

Visual Editorモードを使って要素をクリックしてください。そうすることで、正確で構造化された参照情報がAIに渡されます。言葉で要素を説明するよりもはるかに効果的です。

近日公開予定

以下のキャプチャツールは内部的には実装済みですが、まだUIには公開されていません。

• Annotate — 現在のプレビューをキャプチャし、AIに送信する前に矢印、四角形、円、フリーハンドの線、テキストラベルを描き込むことができます。
• Screen Record — 複数ステップのインタラクション（クリック、ナビゲーション、アニメーション）を録画し、取得したフレームをチャットメッセージに添付できます。1枚のスクリーンショットでは捉えられないタイミングに依存したバグの再現に最適です。