img2ui
UI画像を編集可能な構造へ変換し、Figmaとフロントエンド工程へ接続。
プロジェクト情報
img2uiは、フロントエンドエンジニアやcoding agentがUI画像から作業を始めるための製品です。
レイアウト、部品、視覚関係を解析して編集可能な構造へ整理し、Figmaプラグインで設計工程へ戻します。
01UI画像の構造解析
02編集可能な部品・レイアウト
03Figmaプラグイン連携
04フロントエンド・coding agent工程
実際の流れ
視覚入力を、デザインと開発が使い続けられる構造へ。
- 01 入力
UIスクリーンショットまたは参照画像を解析に入れます。
- 02 構造化
色、token、レイアウト、コンポーネントを扱える設計構造に分解します。
- 03 継続利用
JSON、HTML、ドキュメント、編集可能なFigmaノードとして作業へ戻します。
01 01
画素の複製ではなく、構造を読み取る
ウェブ、アプリなどの画面画像から、領域、階層、文字、部品の関係を解析します。結果は編集でき、実装やcoding agentの明確な出発点になります。
02 02
Figmaプラグインで日常の制作環境へ戻す
結果をデモ内に閉じず、Figmaプラグインで既存ファイルへ取り込みます。デザイナーとエンジニアが確認・調整し、そのまま制作を続けられます。プラグインは公開済みです。
03 03
出力は、眺めるためではなく使い続けるためにある。
img2uiは参照画像を編集可能なFigma構造とcoding agent向けの形式に変え、視覚上の観察を実装の始点へつなげます。
04 04
Galleryは、何を読み取れるかの公開記録。
公開例と非公開ワークスペースを分け、フロントエンド開発者とcoding agentの実務で使えることを軸に開発しています。ワンクリックで制作が完結するとは謳いません。
次の事例
丞石建築 →