ScreenCoder：デザイン截图を構造が明確で編集可能なHTML/CSSコードに変換 238

ScreenCoder は、任意のデザインスクリーンショットを構造が明確で編集可能な HTML/CSS フロントエンドコードに変換できるオープンソースのAIツールです。モジュール型のマルチエージェントアーキテクチャを採用し、視覚理解、レイアウト解析、コード生成技術を組み合わせることで、出力されるコードは意味的に正確でレイアウトも精密です。ユーザーはインターフェース構造やスタイルを簡単に調整でき、デザイン図から動作可能なフロントエンドインターフェースへのシームレスな連携を実現します。迅速なプロトタイプ開発やピクセル単位の再現が必要なプロジェクトに適しており、開発効率を大幅に向上させます。

ScreenCoderの主な機能

• スクリーンショットからフロントエンドコードへ：ScreenCoder は UI スクリーンショットやデザイン稿をワンクリックで構造の整った HTML および CSS コードに変換できます。

• 高忠実度の再現：ScreenCoder が生成するコードは、視覚的レイアウトと意味的構造の双方において元のデザインに非常に近く、ピクセル単位の整合性と機能の完全性を保証します。

• 柔軟に編集可能：ユーザーは生成されたレイアウト構造やスタイル属性を自由に変更でき、その後の開発やカスタマイズの調整に便利です。

• マルチモデル統合：Doubao、Qwen、GPT、Gemini などの主要な大規模モデルと互換性があり、ユーザーは必要に応じて生成エンジンを選択できます。

• すぐに使える出力：生成されるコードは本番品質に達しており、プロジェクトに直接使用でき、迅速なプロトタイプ構築や完全なフロントエンドインターフェースの作成をサポートします。

ScreenCoderの技術アーキテクチャ

• ScreenCoder の核心技術は、UI からコードへの複雑なタスクを 3 つの専門的なサブタスクに分割し、それぞれのサブタスクを専用のエージェントが担当することです：

• 位置決めエージェント（Grounding Agent）：視覚言語モデル（VLM）を用いて UI インターフェース内の重要なコンポーネントを検出し、ラベル付けします。

• 計画エージェント（Planning Agent）：フロントエンドエンジニアリングのベストプラクティスに基づき、これらのコンポーネントを階層化されたレイアウトツリーとして構成します。

• 生成エージェント（Generation Agent）：レイアウトツリーとユーザー指示に基づき、高品質なコードを適応的に生成します。

ScreenCoderの活用シーン

• フロントエンド開発の加速：UI デザインのスクリーンショットを高品質な HTML/CSS コードに迅速に変換し、フロントエンド開発サイクルを短縮します。

• デザインと開発の連携：デザインのスクリーンショットを直接操作可能なコードに変換し、デザインと開発チームのシームレスな連携を促進します。

• 迅速なプロトタイプ作成：デザインのコンセプトを即座にインタラクティブなフロントエンドプロトタイプに変換でき、製品デザインの初期検証やユーザーテストを加速します。

• 教育・トレーニング：教育ツールとして、学生や初心者開発者が UI デザインとフロントエンドコードの関係を理解するのを支援します。

• 小規模チームやスタートアップ：リソースが限られる小規模チームやスタートアップに、効率的なコード生成ソリューションを提供します。

ScreenCoderの使用方法

インストールとデプロイ

1. リポジトリのクローン：ターミナルで以下のコマンドを実行し、ScreenCoder プロジェクトをローカルにクローンします：

git clone https://github.com/leigest519/ScreenCoder.git
cd ScreenCoder

2. 仮想環境の作成：依存関係の競合を避けるため、Python の仮想環境を作成することをお勧めします：

python3 -m venv .venv
source .venv/bin/activate

Windows ユーザーは以下を使用します：source .venv\Scripts\activate。

3. 依存関係のインストール：プロジェクトに必要な Python ライブラリをインストールします：

pip install -r requirements.txt

4. モデルと API キーの設定：

• プロジェクトのルートディレクトリに、選択したモデルに対応するテキストファイル（例：doubao_api.txt、qwen_api.txt、gpt_api.txt、gemini_api.txt）を作成し、API キーをファイルに貼り付けます。

• block_parsor.py と html_generator.py 内で必要なモデルを設定します。サポートされるオプションは次のとおりです：Doubao（デフォルト）、Qwen、GPT、Gemini。

使用方法

1. プレースホルダーを使用した初期生成：

ブロック検出：以下のコマンドを実行し、入力された UI スクリーンショットを分析して重要なコンポーネントを識別します：

python block_parsor.py

プレースホルダーを含む初期 HTML の生成：以下のコマンドを実行し、プレースホルダー（灰色の画像ブロックなど）を含む初期 HTML コードを生成します：

python html_generator.py

2. 最終 HTML コードの生成：

プレースホルダーの検出：以下のコマンドを実行し、置換が必要な画像領域を検出します：

python image_box_detection.py

UIED を実行して具体的な UI 要素を検出：以下のコマンドを実行し、スクリーンショット内の具体的な UI 要素を検出します：

python UIED/run_single.py

プレースホルダーと実際の要素のマッピング：以下のコマンドを実行し、プレースホルダーと実際の UI 要素をマッピングして位置合わせします：

python mapping.py

プレースホルダー画像の置換：以下のコマンドを実行し、プレースホルダーを実際のクロップ画像に置き換えます：

python image_replacer.py

3. 簡単な実行：ステップごとに実行せず、以下のコマンドを直接実行することで、最終 HTML コードをワンクリックで生成できます：

python main.py

出力ファイルは output/ ディレクトリ配下に保存され、index.html と対応する css/ および images/ リソースが含まれます。