コード＆ワイヤーフレーム生成
概要
バウンディングボックスで画像に注釈を付け、動作を割り当てたら、動作するコンポーネントコードまたはワイヤーフレームレイアウトのいずれかを生成できます。AIはバウンディングボックスの位置、要素タイプ、動作の指示を使用して正確な出力を生成します。
AIアシスタントサイドバー
AIアシスタントパネルは、コードまたはワイヤーフレーム生成の設定とトリガーに使用される右側サイドバーです。以下のコントロールが含まれます：
ビジョンモデルセレクター
画像の分析と出力生成に使用するAIビジョンモデルを選択します。モデルによって異なるレベルの詳細と精度が生成される場合があります。
フレームワークセレクター
コード生成のターゲットフレームワークを選択します（例：React、Vue、Svelte）。生成されたコードは選択したフレームワークの構文とパターンを使用します。
コンポーネント / ワイヤーフレームタブ
注釈付き画像からコンポーネントコード（Componentsタブ）またはワイヤーフレームレイアウト（Wireframesタブ）の生成を切り替えます。
画像グループ
現在のリバースプロジェクトのすべての画像グループを一覧表示します。グループを選択して画像をプレビューし、生成を設定します。各グループには画像数が表示されます。
ブロックを生成
AIの生成プロセスを開始するためにクリックします。AIは選択したグループの画像とバウンディングボックスの注釈と動作を分析して出力を生成します。
出力モード
コードを生成
注釈付き画像をターゲットフレームワーク（React、Vue、Svelteなど）用の動作するコンポーネントコードに変換します。生成されたコードにはレイアウト、スタイリング、バウンディングボックスに定義した動作が含まれます。
ワイヤーフレームを生成
注釈付き画像をワイヤーフレームツールで開くワイヤーフレームレイアウトとしてエクスポートします。各バウンディングボックスはワイヤーフレーム要素となり、さらに調整、再配置、他のスクリーンとの接続が可能です。
コード生成機能
フレームワーク選択
生成前にターゲットフレームワークを選択します。対応フレームワークにはReact、Vue、Svelte、SolidJS、Angularなどが含まれます。
動作マッピング
バウンディングボックスに割り当てた動作は、出力内のイベントハンドラー、ナビゲーションロジック、モーダル、その他のインタラクティブコードに変換されます。
レイアウト精度
AIは画像からのバウンディングボックスの位置とサイズを使用して、オリジナルのビジュアルデザインに近いレイアウトを生成します。
ブロックに保存
生成されたコンポーネントをブロックライブラリに直接保存し、プロジェクト間で再利用できます。
プロジェクトに追加
生成されたコードを新しいコンポーネントファイルとして現在のプロジェクトに直接挿入します。
ヒント
最良の結果を得るには、明確なUI要素を持つ高解像度画像を使用してください。より正確なコード生成のために各要素の周りにバウンディングボックスをタイトに描画します。曖昧な説明よりも具体的な動作を割り当てましょう — 「何かをする」よりも「サインアップモーダルを開く」の方が効果的です。AIは標準的なWebレイアウトと一般的なUIパターンで最も良く機能します。