Beschreibung
Screenshot to Code ist ein KI-gestütztes Tool, das visuelle Designs in funktionalen Code umwandelt. Es akzeptiert verschiedene Eingaben, darunter Screenshots, Mockups, Figma-Designs und sogar Bildschirmaufnahmen von Websites in Aktion, und konvertiert diese in sauberen, einsatzbereiten Code. Das Tool unterstützt gängige Frontend-Stacks wie HTML mit Tailwind CSS, React mit Tailwind CSS, Vue mit Tailwind CSS, Bootstrap und Ionic mit Tailwind CSS.
Benutzer haben zwei Hauptmöglichkeiten, mit Screenshot to Code zu interagieren: durch lokale Ausführung für Anpassungen und Beiträge oder durch Nutzung der offiziellen gehosteten Anwendung unter screenshottocode.com für sofortige Tests ohne lokale Einrichtung. Die lokale Ausführung des Tools beinhaltet die Einrichtung eines React/Vite-Frontends und eines FastAPI-Backends, wofür API-Schlüssel von KI-Modellanbietern wie OpenAI, Anthropic und Gemini erforderlich sind. Gemini wird besonders für seine Asset-Extraktionsfähigkeiten empfohlen, die die Wiederverwendung von echten Logos und Bildern aus Screenshots ermöglichen, während Replicate für Bildgenerierung, Hintergrundentfernung und Bearbeitungsfunktionen entscheidend ist.
Das Projekt unterstützt eine Reihe von KI-Modellen, darunter Gemini 3 Flash und Gemini 3.1 Pro Preview, GPT-5.5 und GPT-5.4 Mini sowie Claude Opus 4.6/4.8. Die Integration mehrerer API-Schlüssel verbessert die Genauigkeit und Qualität des generierten Codes, indem die App eine stärkere Mischung von Modellen auswählen kann. Für diejenigen, die an erweiterten Funktionen wie der Konvertierung von Bildschirmaufnahmen in funktionale Prototypen interessiert sind, ist Gemini eine Voraussetzung. Das Projekt bietet auch Docker-Unterstützung für eine einfachere Bereitstellung und Ausführung.
Screenshot to Code zielt darauf ab, den Workflow der Webentwicklung zu optimieren, indem der mühsame Prozess der Übersetzung von Designs in Code automatisiert wird. Dies ist besonders vorteilhaft für Entwickler, Designer und Teams, die Prototyping beschleunigen, manuelle Codierungsaufwände reduzieren und die Konsistenz zwischen Design und Implementierung sicherstellen möchten. Das Projekt wird aktiv auf GitHub gepflegt und fördert Community-Beiträge und Feedback.
Screenshot to Code's Kernfunktionen
Konvertiert Screenshots und Mockups in HTML-, Tailwind-, React- und Vue-Code.
Unterstützt Bildschirmaufnahmen zur Generierung funktionaler Prototypen.
Bietet eine gehostete Anwendung für die sofortige Nutzung.
Ermöglicht lokale Ausführung für Anpassung und Beitrag.
Integriert sich mit mehreren KI-Modellen, einschließlich Gemini, GPT und Claude.
Bietet KI-gestützte Asset-Extraktion mit Gemini.
Unterstützt Bildgenerierung, Hintergrundentfernung und Bearbeitung über Replicate.
Stellt ein React/Vite-Frontend und ein FastAPI-Backend bereit.
Enthält eine optionale Screenshot-Vorschau zur visuellen Überprüfung.
Docker-Unterstützung für vereinfachte Bereitstellung.
Erste Schritte mit Screenshot to Code
Klonen Sie das Repository von GitHub.
Installieren Sie Abhängigkeiten mit Poetry für das Backend und Yarn für das Frontend.
Konfigurieren Sie API-Schlüssel für KI-Modellanbieter (OpenAI, Anthropic, Gemini, Replicate) in Umgebungsdateien.
Installieren Sie notwendige Browser-Abhängigkeiten wie Chromium.
Starten Sie den Backend-Server mit Poetry.
Starten Sie den Frontend-Entwicklungsserver mit Yarn.
Greifen Sie über die bereitgestellte lokale URL (z. B. http://localhost:5173) auf die Anwendung zu.
Screenshot to Code's Anwendungsfälle
- Schnelles Prototyping
- Frontend-Entwicklung
- Design-zu-Code-Konvertierung
- Beschleunigung des UI/UX-Workflows
- Bildschirmaufnahme zu Prototyp
- Asset-Extraktion
- Vergleich von Code-Generierungen
