ScreenCoder: Wandelt Design-Screenshots in sauberen, editierbaren HTML/CSS-Code um 236

ScreenCoder ist ein Open-Source-KI-Tool, das beliebige Design-Screenshots in sauber strukturierten, editierbaren HTML/CSS-Frontend-Code umwandelt. Es verwendet eine modulare Multi-Agent-Architektur, die visuelle Erkennung, Layout-Analyse und Code-Generierung kombiniert, um Code mit präziser Semantik und exakter Darstellung zu erzeugen. Anwender können die Oberflächenstruktur und das Styling mühelos anpassen, wodurch ein nahtloser Übergang vom Design zum lauffähigen Frontend ermöglicht wird. Es eignet sich ideal für schnelles Prototyping und Projekte, die eine pixelgenaue Umsetzung erfordern, und steigert die Entwicklungseffizienz deutlich.

Hauptfunktionen von ScreenCoder

• Screenshot zu Frontend-Code: ScreenCoder unterstützt die Umwandlung von UI-Screenshots oder Designentwürfen per Knopfdruck in wohlgeformten HTML- und CSS-Code.

• Hochpräzise Wiedergabe: Der von ScreenCoder erzeugte Code ist in visueller Darstellung und semantischer Struktur dem Originaldesign sehr ähnlich und gewährleistet pixelgenaue Ausrichtung und vollständige Funktionalität.

• Flexibel editierbar: Anwender können die erzeugte Layoutstruktur und Styling-Eigenschaften frei ändern, was die nachfolgende Entwicklung und individuelle Anpassung erleichtert.

• Multi-Modell-Integration: Kompatibel mit mehreren gängigen großen Modellen wie Doubao, Qwen, GPT, Gemini usw., sodass Anwender die Generierungs-Engine nach Bedarf auswählen können.

• Sofort einsetzbarer Output: Der erzeugte Code erreicht Produktionsqualität und kann direkt in Projekten verwendet werden, um schnelles Prototyping oder komplette Frontend-Oberflächen zu ermöglichen.

Technische Architektur von ScreenCoder

• Die Kerntechnologie von ScreenCoder zerlegt die komplexe Aufgabe UI-zu-Code in drei spezialisierte Teilaufgaben, die jeweils von einem dedizierten Agenten übernommen werden:

• Grounding Agent: Verwendet ein Vision-Language-Model (VLM), um Schlüsselkomponenten in der UI-Oberfläche zu erkennen und zu markieren.

• Planning Agent: Organisiert diese Komponenten entsprechend bewährter Frontend-Engineering-Praktiken in einen hierarchischen Layout-Baum.

• Generation Agent: Erzeugt adaptiv hochwertigen Code auf Basis des Layout-Baums und der Benutzeranweisungen.

Anwendungsbereiche von ScreenCoder

• Beschleunigung der Frontend-Entwicklung: UI-Design-Screenshots schnell in hochwertigen HTML/CSS-Code umwandeln und so den Frontend-Entwicklungszyklus verkürzen.

• Zusammenarbeit zwischen Design und Entwicklung: Design-Screenshots direkt in ausführbaren Code umwandeln und so eine nahtlose Zusammenarbeit zwischen Design- und Entwicklungsteams fördern.

• Schnelles Prototyping: Designkonzepte sofort in interaktive Frontend-Prototypen umwandeln und so die frühe Validierung sowie Nutzertests in der Produktentwicklung beschleunigen.

• Bildung und Training: Dient als Lehrmittel, um Studierenden und angehenden Entwicklern den Zusammenhang zwischen UI-Design und Frontend-Code zu verdeutlichen.

• Kleine Teams und Startups: Bietet ressourcenbeschränkten kleinen Teams und Startups eine effiziente Lösung zur Code-Generierung.

Verwendung von ScreenCoder

Installation und Bereitstellung

1. Repository klonen: Führen Sie den folgenden Befehl im Terminal aus, um das ScreenCoder-Projekt lokal zu klonen:

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

2. Virtuelle Umgebung erstellen: Um Abhängigkeitskonflikte zu vermeiden, wird empfohlen, eine Python-Virtual-Environment anzulegen:

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

Windows-Benutzer verwenden: source .venv\Scripts\activate.

3. Abhängigkeiten installieren: Installieren Sie die erforderlichen Python-Bibliotheken des Projekts:

pip install -r requirements.txt

4. Modelle und API-Schlüssel konfigurieren:

• Erstellen Sie im Projektverzeichnis eine einfache Textdatei für das jeweilige Modell (z. B. doubao_api.txt, qwen_api.txt, gpt_api.txt, gemini_api.txt) und fügen Sie den API-Schlüssel in die Datei ein.

• Konfigurieren Sie das gewünschte Modell in block_parsor.py und html_generator.py. Unterstützte Optionen sind: Doubao (Standard), Qwen, GPT, Gemini.

Verwendung

1. Erste Generierung mit Platzhaltern:

Block-Detektion: Führen Sie den folgenden Befehl aus, um den eingegebenen UI-Screenshot zu analysieren und Schlüsselkomponenten zu erkennen:

python block_parsor.py

Initialen HTML mit Platzhaltern generieren: Führen Sie den folgenden Befehl aus, um initialen HTML-Code mit Platzhaltern (z. B. grauen Bildblöcken) zu erzeugen:

python html_generator.py

2. Finalen HTML-Code generieren:

Platzhalter-Detektion: Führen Sie den folgenden Befehl aus, um die zu ersetzenden Bildbereiche zu erkennen:

python image_box_detection.py

UIED zur Erkennung konkreter UI-Elemente ausführen: Führen Sie den folgenden Befehl aus, um konkrete UI-Elemente im Screenshot zu erkennen:

python UIED/run_single.py

Platzhalter und tatsächliche Elemente zuordnen: Führen Sie den folgenden Befehl aus, um Platzhalter und tatsächliche UI-Elemente aufeinander abzubinden:

python mapping.py

Platzhalter-Bilder ersetzen: Führen Sie den folgenden Befehl aus, um die Platzhalter durch die tatsächlich zugeschnittenen Bilder zu ersetzen:

python image_replacer.py

3. Einfache Ausführung: Wenn Sie die Schritte nicht einzeln ausführen möchten, können Sie direkt den folgenden Befehl ausführen, um den finalen HTML-Code auf einen Schlag zu erzeugen:

python main.py

Die Ausgabedateien werden im Verzeichnis output/ gespeichert und enthalten index.html sowie die zugehörigen Ressourcen in css/ und images/.