Screenshot to Code: vom Bild zur eigenen Webseite
Ein Screenshot kann den Einstieg in deine neue Webseite erheblich leichter machen. Er gibt der KI eine sichtbare Richtung. Hier findest du das Werkzeug aus dem Reel, einen Auftrag zum Einrichten und mein kostenloses Handout für den Weg bis zur Veröffentlichung.
Das Tool – und was kostenlos ist
Screenshot to Code: Zum offiziellen Projekt auf GitHub. Das Projekt erzeugt aus Bildern und Entwürfen Seiten-Code. Auch Bildschirmaufnahmen werden als Eingabe unterstützt. Eine perfekte Rekonstruktion beliebiger Websites ist damit nicht versprochen.
Der Quellcode ist unter der MIT-Lizenz kostenlos. Für den lokalen Betrieb brauchst du einen Schlüssel eines unterstützten Modellanbieters; dessen Nutzung kann Geld kosten. Alternativ gibt es die gehostete App mit eigenen Konditionen. Ein Chat-Abonnement ist nicht automatisch API-Guthaben.
Drei Schritte zu deinem ersten Entwurf
- Vorlage und Ziel festlegen: Nimm einen eigenen Entwurf oder einen Screenshot deiner bisherigen Seite. Halte fest, was bleiben soll und was du verändern willst. Fremde Texte, Logos und Fotos ersetzt du durch deine eigenen Inhalte.
- Einen Abschnitt erstellen: Beginne mit dem oberen Bereich der Seite. Gib zusätzlich Zielgruppe, Angebot, Wunschfarben und den wichtigsten Klick an. Lass dir zuerst einen kleinen Entwurf zeigen, bevor du die gesamte Seite ausbaust.
- Das Ergebnis benutzen: Öffne es am Handy und am Computer. Lies jeden Text, klicke jeden Link und teste das Formular. Ein Button, der richtig aussieht, hat noch keine funktionierende Buchung dahinter.
Für den ersten Versuch genügen eine klare Überschrift, ein kurzer Angebotstext und ein sinnvoller nächster Schritt. Die Details kannst du danach verbessern. Mein Tipp: Lass dir erklären, welche Teile bereits funktionieren und welche nur als Platzhalter aussehen.
Lass deine KI beim Einrichten helfen
Diesen Auftrag gibst du einem Coding-Assistenten in einem neuen Projektordner. Die KI soll die aktuelle Anleitung prüfen, weil sich Installationsschritte ändern können.
Ich möchte Screenshot to Code aus https://github.com/abi/screenshot-to-code für einen eigenen Website-Entwurf nutzen. Mein Rechner: [Mac / Windows / Linux] Mein Ziel: [welche Seite für wen, gewünschter Hauptklick] Meine Vorlage: [Screenshot anhängen] Prüfe die aktuelle offizielle Installation und die Voraussetzungen. Erkläre mir zuerst die Unterschiede zwischen lokalem Betrieb und gehosteter App, einschließlich möglicher Modellkosten. Frage nach meinem bevorzugten Weg. Richte danach den gewählten Weg in einem eigenen Ordner ein. Zugangsschlüssel soll ich sicher selbst hinterlegen; gib sie nie in Logs aus. Erstelle zuerst nur einen Seitenabschnitt mit meinen eigenen Texten und Bildern. Zeige Desktop- und Handyansicht. Liste auf, welche Funktionen noch fehlen. Veröffentliche erst nach meiner Freigabe.
Vom Entwurf zur veröffentlichten Website
Das im Reel angesprochene Material zum Webseitenbau findest du hier: Mein kostenloses Website-Handout führt durch Vorbereitung, Aufbau und Veröffentlichung mit Cloudflare. Du kannst es direkt lesen, ohne etwas kaufen zu müssen.
In meiner kostenlosen Community findest du den Austausch dazu. Die Workshop-Aufzeichnung ist ein separates Angebot; die Mitgliedschaft in der kostenlosen Community schaltet nicht automatisch jeden bezahlten Kurs frei. Zur Website-Workshop-Lektion in Skool – Skool zeigt dir nach der Anmeldung deinen Zugang und gegebenenfalls die Kaufoption.
Ist das Ergebnis schon eine vollständige Website?
Zunächst ist es ein Entwurf. Formulare, Buchungen, mobile Darstellung und deine Inhalte gehören vor dem Start geprüft. Welche Arbeit übrig bleibt, hängt von deinem Vorbild und deinen Anforderungen ab.
Kann ich das ohne Programmierkenntnisse ausprobieren?
Ja, mit Unterstützung eines Coding-Assistenten oder über die gehostete App. Beim lokalen Weg musst du dennoch Zugänge einrichten und Fehler prüfen lassen. Plane dafür mehr als den eigentlichen Generierungsschritt ein.
Häufige Fragen
Ich hätte lieber ein fertiges Setup. Geht das auch?
In meiner kostenlosen Community kannst du jederzeit in einen bezahlten Plan (Premium oder VIP) upgraden. Dort bekommst du meine fertigen Setups und Arbeitsabläufe, die du mit Claude auf dein Business anpassen kannst. Hier findest du die Pläne und ihren aktuellen Umfang.
Falls du über „Kommentiere SCREENSHOT“ hierher gekommen bist: Den Link verschickt mein selbstgebautes Instagram-System. Wie du dir das baust, zeige ich dir in meiner kostenlosen Community: Hier geht’s direkt zum Video. 😉