leigest519/ScreenCoder

解決する課題

ScreenCoderは、UIスクリーンショットやデザインモックアップを本番環境で使用可能なHTMLおよびCSSコードに変換するプロセスを自動化します。視覚的なレイアウトを機能的なWebページに変換するために必要な手作業を削減し、ビジュアルデザインとフロントエンド開発の間のギャップを埋めることを目的としています。

仕組み

このシステムは、モジュール式のマルチエージェントアーキテクチャを使用して、ビジュアルからコードへのプロセスをいくつかの専門的なステップに分割します。

1. UI要素の検出: スクリーンショットを分析して、コンポーネントとレイアウトブロックを検出します。
2. レイアウト計画: 検出されたコンポーネントを論理的なページ領域にマッピングします。
3. コード合成: 画像のプレースホルダーを使用して初期のHTMLレイアウトを生成します。
4. 画像統合: プレースホルダーを検出し、元のスクリーンショットから切り取った実際の画像に置き換えて、最終的な洗練されたHTMLコードを作成します。

対象ユーザー

このツールは、インターフェースを迅速にプロトタイプ化したり、高忠実度のモックアップをゼロから始めることなく編集可能なコードに変換したいフロントエンド開発者やデザイナー向けに設計されています。

主な特徴

• モジュール式マルチエージェントフレームワーク: 視覚的理解と適応型コード合成を組み合わせて、より高い精度を実現します。
• カスタマイズ可能: 初期生成後のレイアウトとスタイリングの変更をサポートします。
• モデル柔軟性: Doubao、Qwen、GPT、Geminiを含む複数のLLMと互換性があります。
• ScreenBench: 1,000の実世界のWebスクリーンショットと対応するHTMLソースコードからなる新しいベンチマークを含みます。