Wandeln Sie Screenshots in funktionierenden Code um
Screenshot-to-Code ist ein Softwaretool, das Screenshot-Dateien analysiert und sie in sauberen HTML-, Tailwind-, React- oder Vue-Code umwandelt. Es ermöglicht Entwicklern, Schnittstellendesigns schnell in funktionierende Codeausschnitte zu übersetzen.
Aktualisierungen
- 18. September 2026: Sterne 75,377 → 79,191.
Was es bringt
- Übersetzt Screenshots und Designdateien in sauberen HTML- oder React-Code
- Verwandelt Website-Aufzeichnungen in funktionale Prototypen
- Tailwind unterstützt CSS und verschiedene gängige Schnittstellenbibliotheken
Installation
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildcd frontend
pnpm install
pnpm devWenn Sie nicht programmieren
Analysieren Sie den Screenshot und erstellen Sie eine saubere und funktionale Codestruktur, die das Design im Bild genau widerspiegelt. Bereiten Sie die Ausgabe im HTML- oder React-Format mit Tailwind CSS vor. Extrahieren Sie die echten Logos und Assets im Bild und fügen Sie sie in den Code ein, um alle Elemente des Designs responsiv zu codieren.
Repository: https://github.com/abi/screenshot-to-code. Richte dich bei der Installation und Ausführung nach den offiziellen Anweisungen in der README-Datei dieses Repositorys.
Prüfe vor dem Start, unter welchem Betriebssystem wir arbeiten und ob die notwendigen Tools (z. B. Python, Node.js, Git, Docker) installiert sind. Installiere fehlende Tools schrittweise entsprechend diesem System.
Erstelle einen neuen, leeren Ordner für die Arbeit. Rühre keine Dateien außerhalb dieses Ordners an und lösche nichts. Sag mir vor jedem Befehl in einem Satz, was du tun wirst.
Sag mir, was ich am Ende jedes Schrittes auf dem Bildschirm sehen sollte. Wenn ein Fehler auftritt, füge ich die Fehlermeldung exakt so ein, wie sie ist, und wir beheben sie gemeinsam.
Verwandte Begriffe aus dem Glossar
Links
TreScout hat dieses Werkzeug nicht entwickelt · wir haben es in den GitHub-Trends gefunden und stellen es vor. Diese Seite beschreibt das Repository so, wie es am 2026-08-28 war: Die Anzahl der Sterne und unser Text stammen von diesem Tag, das Repository kann sich seitdem geändert haben. Den aktuellen Stand finden Sie über den Link zum Repository. Der Präsentationstext wurde mit KI aus der eigenen Dokumentation des Repositories erstellt und diese Seite wurde maschinell übersetzt aus dem türkischen Original · maßgeblich ist die türkische Fassung.