zhu-guli326/image2_UI

解決する課題

Image2 UIは、スクリーンショット、デザインモックアップ、テキストによる説明などの視覚的リファレンスを、編集可能でインタラクティブなフロントエンドコードに変換するツールキットです。静的な画像やアイデアと動作するプロトタイプの間のギャップを埋め、デザイナーや開発者がUIレイアウト、タイポグラフィ、視覚的詳細を迅速に反復できるようにします。

仕組み

このプロジェクトは、OpenAI Codexと統合して実際のコード生成を処理するランタイムおよびCLIツールとして動作します。主に3つのワークフローをサポートしています。

• Recreate: スクリーンショットや参照画像に基づいてレイアウトを再構築します。
• Redesign: リファレンスと新しい製品の方向性を使用して、新しいビジュアルスタイルを確立します。
• Create: 書面による製品ブリーフからUIを生成します。

品質を確保するため、システムはマルチエージェントスケジューラを使用して、専門的な実装、レビュー、QA作業を調整します。また、生成された出力をアクティブなリファレンスと比較する視覚的品質チェックループも含まれています。画像アセット（写真やイラスト）は、フロントエンドコード（ボタン、フォーム、ナビゲーション）とは別に管理されます。

対象ユーザー

• フロントエンド開発者: スクリーンショットを迅速に動作するコードに変換したい方。
• UI/UXデザイナー: 視覚的リファレンスやブリーフからインタラクティブなインターフェースのプロトタイプを作成したい方。

ハイライト

• 実行の再開: 状態とイベント履歴を保存するため、中断された生成プロセスを復旧して継続できます。
• マルチエージェント調整: スケジューラを使用して、実装およびQAのための専門エージェントを管理します。
• アセット管理: 画像生成と来歴追跡のための専用ツール。
• 検証ループ: 生成されたコードを元の参照画像と照合するための組み込みの監査および比較ツール。