バウンディングボックス
概要
バウンディングボックスはリバースエンジニアリングの中核的なインタラクションモデルです。画像をアップロードした後、個々のUI要素の周りに長方形のボックスを描画して分離します。各バウンディングボックスは選択可能な領域となり、動作の割り当て、コードへの変換、またはワイヤーフレームコンポーネントとしてのエクスポートが可能です。
スクリーンフロー＆グループ
スクリーンフローキャンバスでは、リバースエンジニアリング作業をグループに整理できます。各グループには複数のスクリーン画像を含めることができ、スクリーン（メインページ、セクション、またはビュー）またはモーダル（オーバーレイ、ダイアログ、ポップアップ、ドロワー）として分類できます。グループをダブルクリックして開き、画像を操作します。
手動ボックス化
ボックスツールを選択
画像キャンバスの上のツールバーからバウンディングボックス描画ツールを選択します。
ボックスを描画
画像上でクリック＆ドラッグしてUI要素（ボタン、カード、ナビゲーションバー、ヒーローセクション、その他のコンポーネント）の周りに長方形のボックスを描画します。
サイズ変更＆調整
任意のボックスの端または角をドラッグして位置とサイズを微調整します。ターゲット要素をぴったりと囲むようにしてください。
動作を割り当て
ボックスを選択し、要素が何をすべきかを定義します — 例えば、「モーダルを開く」「/aboutに移動」「ドロップダウンメニューを切り替え」など。
AI自動ボックス化
すべてのボックスを手動で描画する代わりに、AI自動ボックス化を使用してKaiju Hub AIに画像内のUI要素を自動的に検出・アウトラインさせます。AIがビジュアルレイアウトを分析し、ヘッダー、ボタン、カード、入力フィールド、画像、ナビゲーションアイテムなどの検出されたコンポーネントの周りにバウンディングボックスを作成します。
ワンクリック検出
自動ボックスボタンをクリックすると、AIが画像全体をスキャンし、検出されたすべてのUI要素の周りにバウンディングボックスを作成します。
検出後の編集
自動検出されたボックスは完全に編集可能です。結果を調整するためにボックスの移動、サイズ変更、削除、新規追加ができます。
選択的再検出
レイアウトの一部にのみボックスが必要な場合、画像の特定の領域で自動検出を実行します。
動作の指定
バウンディングボックスの力は、各要素が何をするかを指示することにあります。要素をボックス化した後、生成されるコードまたはワイヤーフレームに反映されるインタラクティブな動作を割り当てることができます：
モーダルを開く
要素をクリックするとモーダル/ダイアログが開きます。モーダルに表示するコンテンツを指定します。
セクションに移動
要素はリンクまたはボタンとして機能し、アプリの別のページまたはセクションに移動します。
コンテンツの切り替え
要素が関連コンテンツの表示/非表示を切り替えます — ドロップダウン、アコーディオン、展開パネル。
フォーム送信
要素がフォーム検証と送信ロジックをトリガーします。
カスタムアクション
カスタムの動作説明を定義すると、AIが適切なイベントハンドラーとロジックを生成します。