Melta
Blog
Screenshot in Website umwandeln: was geht und was fehlt
Einen Screenshot in eine Website umwandeln heisst: ein Werkzeug liest Aufbau, Farben und Texte aus dem Bild und baut daraus eine Seite im Browser, einen Rohbau ohne Daten, Formulare und Zustände. Was Beschreiben statt Zeichnen bedeutet, ordnet [Was ist Vibe Coding? Erklärung, Grenzen und was danach kommt](/blog/was-ist-vibe-coding) ein.
Der Haken zuerst: ein Screenshot zeigt einen Moment
Ein Screenshot sieht aus wie die fertige Seite. Er ist ein Foto von einem Augenblick: eine Bildschirmbreite, ein Zustand, saubere Daten. Die Liste ist gefüllt, der Name passt in eine Zeile, das Menü ist zu, nichts lädt, nichts ist danebengegangen.
Eine Website muss den Rest auch können. Den ersten Tag mit leerer Liste. Die abgelehnte Karte. Den Firmennamen, der über zwei Zeilen läuft. Das Handy quer in der Hand. Die Bedienung nur mit der Tastatur.
Dazu kommt der Punkt, den man auf dem Bild nicht sieht. Ein Screenshot hat keinen Text, sondern Pixel, die wie Text aussehen. Was ein Werkzeug daraus liest, ist eine Vermutung. Steht im Bild ein Preis, weiss die Maschine nicht, ob er fest ist, aus einer Datenbank kommt oder von der gewählten Menge abhängt.
Was fehlt, wenn du einen Screenshot in eine Website umwandelst
Der Unterschied lässt sich Zeile für Zeile aufschreiben. Links steht, was im Bild liegt. Rechts steht, was jemand dazubauen muss, bevor die Seite online geht.
| Im Screenshot zu sehen | Was die Website zusätzlich braucht |
|---|---|
| Eine Ansicht in einer Breite | Was dazwischen passiert, vom schmalen Handy bis zum breiten Schirm |
| Text als Pixel | Echter Text, den Suchmaschinen lesen und den du später selbst änderst |
| Eine Schrift, die nach einer bekannten aussieht | Die richtige Schrift mit Lizenz für den Web-Einsatz |
| Drei Produktkarten nebeneinander | Eine Karte, die so oft erscheint, wie Datensätze da sind |
| Ein Formular als Bild | Versand, Prüfung der Eingaben, Schutz vor Spam, Bestätigungsmail |
| Der gefüllte Warenkorb | Leere Liste, abgelehnte Zahlung, doppelt geklickter Knopf |
| Ein Preis im Bild | Die Stelle, an der dieser Preis später gepflegt wird |
| Logo und Fotos im Ausschnitt | Eigene Dateien in den Grössen, die Browser und Vorschaubilder brauchen |
Keine dieser Zeilen ist für sich schwer. Zusammen sind sie der Grund, warum aus einem Screenshot über Nacht kein fertiges Produkt wird, sondern ein Rohbau, der hübsch aussieht und nichts tut.
Wie wandle ich einen Screenshot in eine Website um?
Es gibt vier Wege. Sie unterscheiden sich vor allem darin, wer die Arbeit macht, sobald das Bild auf echte Daten trifft.
Von Hand nachbauen. Eine Entwicklerin legt den Screenshot daneben und schreibt den Code dazu. Das Ergebnis sitzt, jede offene Frage wird unterwegs geklärt, und du bezahlst die Stunden.
Das Bild in ein KI-Chatfenster ziehen. Du lädst den Screenshot hoch und bekommst HTML und CSS zurück, oft nah am Original. Für eine einzelne Seite ohne Anmeldung, ohne Datenbank und ohne Zahlung trägt das. Sobald Zustände dazukommen, wird aus dem einen Bild ein langes Gespräch. Wo dieser Weg endet, steht in Website mit ChatGPT erstellen: was geht und was fehlt.
Screenshot als Vorlage, Beschreibung als Auftrag. Du schreibst auf, was das Produkt können soll, und legst das Bild dazu, damit Aufbau und Farben stimmen. Das Bild bestimmt das Aussehen, der Text bestimmt die Funktion. Was Beschreiben statt Zeichnen im Kern heisst, ordnet Was ist Vibe Coding? Erklärung, Grenzen und was danach kommt ein.
Screenshot nur als Farbmuster. Du nimmst Farben, Abstände und Schriftgrössen ab und baust den Rest neu, passend zu deinen eigenen Inhalten. Das ist der ehrlichste Weg, wenn das Bild von einer fremden Seite stammt.
Wer baut weiter, wenn der Rohbau steht?
Der Rohbau ist der kleinere Posten. Was zählt, ist die Frage, wer die Seite am zweiten Tag ändert, wenn ein Preis steigt oder ein Formular ein Feld mehr braucht.
Ein Beispiel für den beschriebenen Weg ist Melta. Die Kundin beschreibt ihre Idee in eigenen Worten, daraus entsteht ein Konzept in zwei Teilen, eine Kundensicht ohne Technik und ein Bauplan. Nach der Freigabe bauen KI-Agenten das Produkt, und der Bau dauert bis zu 24 Stunden. Das Ergebnis liegt zuerst in einer privaten Vorschau mit Demodaten und Testzugängen. Änderungen laufen danach per Chat, und danach betreibt Melta es weiter: Hosting, Wartung, Änderungen, Support. Wie die Schritte von der Idee bis zum Live-Schalten aussehen, steht auf So funktionierts: von der Idee über Konzept und Vorschau bis live.
Darf ich den Screenshot einer fremden Seite nachbauen?
Der übliche Fall: Dir gefällt die Seite von jemand anderem, du machst ein Bild davon und willst dasselbe. Der grobe Aufbau ist Handwerk, das allen gehört, ein Raster, ein Menü oben, zwei Spalten darunter. Alles, was Arbeit von jemandem enthält, gehört ihm: Texte, Fotos, Icons, Logo, gekaufte Schriften.
Der zweite Grund gegen das Kopieren hat mit Recht nichts zu tun. Die fremde Seite ist für fremde Kundschaft gebaut. Ihre Reihenfolge beantwortet Fragen, die deine Besucher gar nicht stellen, und ihre Texte verkaufen ein anderes Angebot.
Der sichere Weg ist der vierte aus der Liste oben. Du nimmst den Aufbau als Idee und füllst ihn mit deinen Sachen: eigene Texte, eigene Bilder, eigene Farben. Bei Schriften und Fotos lohnt der Blick in die Lizenz, bevor die Datei im Projekt landet.
Was du aus dem Screenshot herausholst, bevor du umwandelst
Vier Notizen sparen später Stunden. Tippe die Texte ab, statt sie aus dem Bild lesen zu lassen, denn eine Zahl mit Lesefehler fällt erst auf, wenn ein Kunde sie bezahlt. Schreib daneben, was klickbar ist und was nach dem Klick passiert, Seite für Seite.
Halte dann fest, welche Daten hinter dem Bild liegen und woher sie kommen. Eine Produktliste ist entweder eine Datei, die du selbst pflegst, oder eine Datenbank mit einem Formular dahinter, und das entscheidet über die halbe Arbeit. Zuletzt notierst du die Zustände, die im Bild fehlen: leer, lädt, Fehler, kein Ergebnis, nicht angemeldet.
Dieselbe Übung lohnt sich, wenn statt des Bildes ein Entwurf vorliegt. Was an dieser Grenze liegen bleibt, steht in Figma zu Website: was der Export kann und was fehlt.
Vom Screenshot zur Website: was am Ende zählt
Einen Screenshot in eine Website umwandeln bringt dich bis zum Aussehen, und das Aussehen ist der Teil, der am schnellsten fertig ist. Die Arbeit liegt hinter dem Bild: echte Daten, die Fälle daneben, und die Frage, wer nächste Woche den Preis ändert. Wer das vorher klärt, bekommt eine Seite, die den ersten echten Kunden aushält. Wer es offen lässt, hat einen hübschen Rohbau und zahlt die eigentliche Arbeit trotzdem, nur später.
FAQ
Kann ich einen Screenshot automatisch in eine Website umwandeln?
Das Aussehen ja, die Funktion nein. Werkzeuge lesen Aufbau, Farben und Textstellen aus dem Bild und bauen daraus eine Seite. Anmeldung, Datenbank und Formularversand entstehen erst, wenn jemand beschreibt, was passieren soll.
Wie genau trifft das Ergebnis das Original?
Nah genug, dass du es wiedererkennst, und selten genau. Abstände, Ecken und Schriften weichen ab, weil aus Pixeln zurückgerechnet wird, was im Original eine Regel war.
Wird aus dem Text im Screenshot echter Text?
Nur wenn ihn jemand abtippt oder neu schreibt. Aus dem Bild gelesene Wörter enthalten Lesefehler, und was als Bild stehen bleibt, lässt sich weder durchsuchen noch später ändern.
Was kostet es, einen Screenshot in eine Website umzuwandeln?
Das kommt darauf an, wer die Seite danach pflegt. Das Umwandeln selbst ist der kleinere Posten, und wer jede spätere Änderung einkauft, zahlt im zweiten Jahr mehr als im ersten.
Reicht ein Screenshot, oder brauche ich ein Design-File?
Für eine einzelne Seite reicht das Bild. Je mehr Seiten, Breiten und Zustände dazukommen, desto mehr wird aus dem einen Screenshot eine Sammlung von Fragen, die jemand beantworten muss.
Themen: Screenshot, Website erstellen, KI, Vibe Coding, Webdesign
Quellen
Weiterlesen
Beschreib dein Produkt - den Rest übernimmt Melta.
Ein Konzept kostet nur wenige Credits. Gebaut, online gestellt und betrieben wird es, sobald du es freigibst.
Frühzugang sichern