Screenshot zu Code KI kostenlos: der Open-Source-Konverter und der DeepSeek-Weg
Zwei Wege, aus einem Design-Screenshot lauffähigen Code zu machen: das MIT-lizenzierte abi/screenshot-to-code per Docker aufsetzen (ein Modelschlüssel genügt) — oder das Bild an DeepSeek hängen und als einzelne HTML-Datei nachbauen lassen. 15 Schritte, jede Aussage gegen Repository-Quelltext und api-docs.deepseek.com geprüft.
Die Kurzfassung
- Die Software ist kostenlos, die Tokens nicht. abi/screenshot-to-code steht unter MIT und kostet im Eigenbetrieb nichts — man braucht aber mindestens einen Modelschlüssel von OpenAI, Anthropic oder Gemini, und der wird pro Token berechnet.
- DeepSeek ist dort kein wählbares Modell. Die Default-Liste im README führt Gemini 3 Flash / 3.1 Pro, GPT-5.5 / 5.4 Mini und Claude Opus 4.6 / 4.8, und eine Suche nach "deepseek" im Repository liefert null Treffer.
- DeepSeeks Sehmodell ist deepseek-flash: In der offiziellen Preistabelle steht bei Vision für flash ein ✓, für deepseek-v4-pro "Not supported". Bilder gehen als base64, als öffentliche URL oder als Files-API-file_id.
- Beide Wege enden gleich — mit einer einzelnen HTML-Datei, die man per Doppelklick öffnet. Nach den veröffentlichten Flash-Preisen kostet ein Screenshot plus ein paar tausend Tokens Markup deutlich unter einem US-Cent.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
Kanal:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
Kanal:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
Doku:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
Doku:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
Doku:api-docs.deepseek.comDocs
Die Frames stammen aus zwei sauberen Bildschirmaufnahmen (keine Kameraeinblendungen, keine eingebrannten Untertitel); unterstützte Stacks, nötige Schlüssel, Docker-Befehle und DeepSeeks Bildgrenzwerte sind gegen das abi/screenshot-to-code-README, dessen Quelldateien und api-docs.deepseek.com abgeglichen.
Screenshots werden den aufnehmenden Kanälen zugeschrieben, jeder Schritt verlinkt tief auf den exakten Zeitpunkt. Beide Aufnahmen entstanden vor den heutigen DeepSeek-Modellnamen; wo ein Frame ein älteres Label zeigt, folgt der Text der offiziellen Dokumentation.
Alle 15 Schritte: vom Screenshot zur laufenden Seite
Am Anfang steht ein Screenshot
- 1
Den UI-Ausschnitt abgreifen, der nachgebaut werden soll
Es funktioniert mit jedem stehenden Bild — die Demo des Konverters nutzt eine YouTube-Kanalseite, der DeepSeek-Weg unten ein 68 KB starkes Login-Mockup als log.PNG. Ein Screenshot schlägt jede schriftliche Beschreibung, weil Abstände, Farben und Hierarchie bereits entschieden sind: Das Modell liest sie ab, statt sie zu erfinden. Schneide nur die Komponente aus, um die es geht — ein ganzer Bildschirm verballert Tokens an Blende, die du später löschst.
Der Ausgangspunkt: ein als PNG gespeichertes Login-Card-Mockup, noch nichts umgewandelt.Ansehen bei 1:02 - 2
Den Konverter öffnen und die vier Eingangswege sehen
Nach der lokalen Installation zeigt http://localhost:5173 einen Upload-Block und drei Abkürzungen: Record Screen (ein Clip einer laufenden Seite), Enter URL plus Capture (der Konverter fotografiert eine URL selbst) und Import from Code (bestehendes HTML zum Weiterbearbeiten einfügen). Im Generating-Dropdown steht der Stack — HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap oder Ionic + Tailwind. Ein Konto ist nicht im Spiel; die App redet direkt mit deinem Modellanbieter.
Die Eingangshalle der Selbstbau-Version: Dropzone, Bildschirmaufnahme, URL-Erfassung und Code-Import.Ansehen bei 4:00
Den kostenlosen Open-Source-Konverter installieren
- 3
Vor der Installation das System prüfen
Die App besteht aus einem React/Vite-Frontend und einem FastAPI-Backend, und der Docker-Weg braucht eine laufende Docker Engine. Fahd Mirza prüft zuerst mit cat /etc/*release seine Maschine — hier Ubuntu 22.04.4 LTS — weil die folgenden Befehle eine POSIX-Shell und verfügbares docker compose voraussetzen. macOS und Windows funktionieren genauso, solange Docker Desktop läuft.
Ein Zwei-Sekunden-Check: Ubuntu 22.04.4 LTS, dahinter läuft Docker Desktop.Ansehen bei 2:12 - 4
Repository klonen und einen Schlüssel in backend/.env schreiben
git clone https://github.com/abi/screenshot-to-code, dann hinein-cd und den Schlüssel in die .env-Datei schreiben, die der Compose-Stack liest — die Zeile aus dem README lautet echo "OPENAI_API_KEY=sk-your-key" > .env. Zum Start genügt ein Schlüssel; OpenAI, Anthropic und Gemini sind die drei, die das README akzeptiert, und mehr Schlüssel erlauben der App, pro Lauf eine stärkere Modelkombination zu wählen. DeepSeek steht auf dieser Liste nicht — warum die Base-URL-Override daran nichts ändert, erklärt FAQ-Frage 2.
Der Platzhalter-Schlüssel direkt aus dem README, geschrieben in die Datei, die das Backend beim Start lädt.Ansehen bei 2:55 - 5
Beide Container mit einem Befehl bauen und starten
Im Repository-Root zieht docker compose up -d --build die Basis-Images, installiert Poetry fürs Backend und die yarn-Pakete fürs Frontend und lässt beide im Hintergrund laufen. Bei leerem Cache dauert das ein paar Minuten: Die Compose-Datei mappt das Backend auf Port 7001 und das Frontend auf 5173. Das README warnt, dass dieser Weg zum Ausführen und nicht zum Entwickeln da ist — Dateiänderungen lösen keinen Neuaufbau aus.
Die komplette Installation ist ein Befehl; -d stellt ihn ab, das Terminal kann zu.Ansehen bei 3:25 - 6
Dem Build-Log von Backend und Frontend zusehen
Das Log ist der nützliche Teil, wenn etwas knallt: backend 2/7 RUN pip install "poetry==1.4.1" und frontend 4/5 RUN yarn install sind die Schichten, die hinter einem Proxy oder in einem abgeschotteten Netz zuerst brechen. Wenn es hier stoppt, liegt die Lösung fast immer am Docker-DNS oder einem npm-Mirror, nicht an der App. Ist die letzte Schicht durch, antwortet localhost:5173.
Nach 20 Sekunden Build haben beide Images ihre Abhängigkeitsschichten hinter sich.Ansehen bei 3:45
Umwandeln, speichern, nachschärfen
- 7
Den Screenshot hineinziehen
Datei auf die gestrichelte Box ziehen oder klicken und den Dateiwähler öffnen; das Bild landet als ORIGINAL SCREENSHOT in der linken Leiste und bleibt dort Referenz für jede spätere Version. Dunkel oder hell ist eine Voreinstellung im Zahnrad, kein Funktionsunterschied. In diesem Zahnrad-Dialog kannst du Schlüssel auch einfügen, statt die .env anzufassen — laut README leben dort gesetzte Schlüssel nur im Browser und überschreiben die .env-Konfiguration.
Dieselbe App im dunklen Theme, wartet auf die Datei — die Dropzone ist praktisch die ganze Oberfläche.Ansehen bei 4:45 - 8
Generieren und die Varianten vergleichen
Die App lässt pro Prompt mehrere Modelle laufen, damit du ein Ergebnis auswählst, statt das erste zu akzeptieren: Option 1 und Option 2 sind Reiter über demselben Screenshot, und wie viele es sind, steht in NUM_VARIANTS in backend/config.py — vier bei Bild-, zwei bei Videoeingabe. Der Code streamt beim Entstehen in die Seitenleiste, mit einem Cancel-Knopf, falls die Richtung nicht passt. Jeder Lauf bleibt unter Versions erhalten, Experimentieren kostet also nichts.
Zwei Varianten desselben Screenshots mitten im Stream, darunter festgepinnt das Original.Ansehen bei 5:00 - 9
Drei Ansichten: Desktop, Mobile, Code
Über dem Vorschaubereich liegen drei Schalter — Desktop, Mobile und Code — und für die Übergabe zählt Code, denn dort steht das rohe Markup zum Kopieren. Reset wirft den Lauf weg, Download exportiert ihn, und unter den Varianten sitzen Update (weitere Anweisung), Regenerate (dieselbe noch einmal) und Select and update (mit einer Box markieren, was sich ändern soll). Hier hört Screenshot-zu-Code auf, eine Demo zu sein, und wird ein Bearbeitungslauf.
Die nachgebaute Seite neben den Reglern, mit denen man weiter an ihr arbeitet.Ansehen bei 5:20 - 10
Das Markup als einfache .html-Datei speichern
Den Code aus dem Code-Reiter in eine Datei kopieren — hier test.html im Ordner mycode — und damit besteht der gesamte Buildschnitt daraus. Die Ausgabe ist selbstständiges HTML mit Tailwind-Klassen, zwischen dir und der Seite stehen weder Paketinstallation noch Dev-Server. Wenn es in einen echten Komponentenbaum soll, füge es stattdessen in eine React- oder Vue-Datei ein und ziehe die Klassennamen dort um.
Eine Datei, 3,1 kB, per Rechtsklick in Firefox geöffnet.Ansehen bei 5:40 - 11
Vom Datenträger öffnen und prüfen, was übrig blieb
Die Datei direkt aus dem Dateisystem zu laden, beweist, dass das Ergebnis ohne Server läuft. Danach ehrlich gegen das ORIGINAL-SCREENSHOT-Vorschaubild vergleichen: Layout, Typo-Hierarchie und Abstände kommen meist gut rüber, angenähert werden Fremdlogos und Fotos — genau deshalb empfiehlt das README nachdrücklich einen Gemini-Schlüssel (er macht Asset-Extraction, also das Wiederverwenden der echten Bilder aus dem Screenshot) und einen Replicate-Schlüssel (Bildgenerierung und Freistellen). Was fehlt, ist ein Folgebefehl, kein Neustart.
Die konvertierte Seite läuft vom lokalen Dateisystem, Banner und Kopfzeile sind nachgebaut.Ansehen bei 6:12 - 12
Mit Update-Prompt nachschärfen statt neu generieren
Die Änderung in das Feld unter den Varianten tippen — hier "change the background color to deep blue" — und die App liefert eine neue Version statt einer neuen Seite, weshalb Versions beide hält: Create v1 und das Update als v2. Wer "Include screenshot of current version?" ankreuzt, schickt die aktuelle Renderung mit — das verhindert, dass eine Nachbesserung in ein generisches Layout zurückdriftet. Dieser Kreislauf ist der Grund, warum sich die Installation lohnt.
Einen Befehl später liegt die Änderung als v2, v1 bleibt einen Klick entfernt.Ansehen bei 6:45
Weg B: DeepSeek sieht das Bild
- 13
Weg B: den Screenshot an DeepSeek hängen
Wer nichts aufsetzen will: DeepSeek nimmt das Bild direkt im Chatprodukt — die Büroklammer fügt log.PNG hinzu, der Composer zeigt es als Anhang mit 68,14 KB, und die Anweisung ist ein Satz: "give me html and css code for this image in a single html file". Der Chip in dieser Aufnahme sagt DeepThink (R1); die Labels im Auswahlfeld ändern sich schneller als Tutorials, also vertraue dem Mechanismus, nicht der Beschriftung. Zurück kommt eine Datei, die du einfügen und öffnen kannst.
Der Screenshot im DeepSeek-Chat angehängt, darunter die Ein-Datei-Anweisung.Ansehen bei 1:22 - 14
Erst den Plan lesen, dann den Code
Das Thinking-Panel zeigt, ob das Modell wirklich hingeschaut hat: Es zählt die Überschrift "Login" auf, die Labels "User Name" und "Password", die Eingabefelder und den Submit-Knopf und entscheidet sich dann für Flexbox mit zentriertem justify-content und align-items bei 100vh Höhe. Wenn der Nachbau danebengeht, ist das die Stelle zum Hinsehen — ein Modell, das die Labels übersprang, liefert ein Formular ohne sie. Klappe es auf, und wenn die Beschreibung falsch ist, schneide den Screenshot neu und schick ihn nochmal.
Zehn Sekunden Denken: Das Modell nennt jedes Element, das es nachbauen will.Ansehen bei 1:45 - 15
Vorschauen, dann den Code herausnehmen
DeepSeek rendert die eigene Antwort in einem Vorschaumodal — die Login-Card mit übereinander gesetzten Labels, zwei Eingaben und einem blau durchgezogenen Submit-Knopf, darunter der Hinweis "AI-generated, for reference only". Es ist eine Vereinfachung, kein Klon: Die Farbverlaufsblasen und Feld-Icons des Mockups sind weg. Kopiere das HTML, speichere es als index.html und öffne es, genau wie in den Schritten 10 und 11. Der Ehrlichkeit halber: Sowohl DeepSeeks Chatprodukt als auch seine API nehmen Bilder, reine Textgeneratoren — inklusive unseres eigenen Artifact-Generators auf dieser Site — tun es nicht, also beschreibe dort die UI in Worten, statt zu erwarten, dass sie deinen Screenshot sieht.
Die nachgebaute Card in der DeepSeek-Vorschau — nah genug zum Weiterbauen, vereinfacht genug zum Nachprüfen.Ansehen bei 2:48