Kaiju Hub AI

リバースエンジニアリング

リバースエンジニアリングとは?

リバースエンジニアリングは、Kaiju Hub AIのバウンディングボックス指向の画像からコード、画像からワイヤーフレームへの変換ツールです。任意の画像(スクリーンショット、デザインモックアップ、UIの写真)をアップロードし、バウンディングボックスを使用して画像上の各要素が何をすべきかを特定・指示します。結果を動作するコードまたはワイヤーフレームレイアウトに変換します。

Reverse Engineering hub showing project grid with search and Grid/List toggle

リバースプロジェクトの作成

+ 新規リバースエンジニアリングプロジェクトボタンをクリックして新しいプロジェクトを作成します。名前と説明を付けて、リバースエンジニアリング作業を整理します。

New Reverse Project dialog with project name and description fields

仕組み

1

画像をアップロード

リバースエンジニアリングツールにスクリーンショット、デザインモックアップ、または任意のUI画像をアップロードします。

2

バウンディングボックスを描画または自動検出

UI要素の周りにバウンディングボックスを手動で描画するか、AI自動ボックス化を使用して要素を自動検出します。各ボックスは画像上の個別のコンポーネントをハイライトします。

3

要素の動作を直接指定

各バウンディングボックスに対して、何が起こるべきかを定義します — 例えば、ボタンをクリックするとモーダルが開く、ナビリンクが別のセクションに移動する、カードが特定のコンテンツを表示するなど。

4

コードまたはワイヤーフレームを生成

注釈付き画像をターゲットフレームワークの動作するコンポーネントコードに変換するか、ワイヤーフレームツールでさらに編集するためのワイヤーフレームレイアウトとしてエクスポートします。

主な機能

画像アップロード

任意の画像(スクリーンショット、モックアップ、手描きスケッチの写真、既存のアプリUI)をドラッグ&ドロップまたは参照でアップロードします。

バウンディングボックス注釈

個々のUI要素の周りに正確なバウンディングボックスを描画し、コード生成や動作の割り当てのために分離します。

AI自動ボックス化

AIが画像内のUI要素を自動的に検出してボックス化し、多くのコンポーネントを含む複雑なレイアウトの時間を節約します。

動作の指定

ボックス化された要素に動作を割り当て — 生成されたコード内で各要素のクリック、ホバー、インタラクション時に何をすべきかを定義します。

デュアル出力

動作するコード(ターゲットフレームワーク)またはワイヤーフレームツールでさらに調整できるワイヤーフレームレイアウトのいずれかを生成します。

Kaiju Hub AIに表示されるサードパーティのロゴ、商標、ブランド名はそれぞれの所有者に帰属します。識別目的のみに使用され、推奨、後援、提携を意味するものではありません。