Show HN: screenshot-to-code – Screenshots mit GPT Vision (OSS-Tool) in sauberen HTML-Code umwandeln

• Ein Tool, das mit KI Screenshots, Mockups, Figma-Designs und Bildschirmaufnahmen in sauberen, funktionsfähigen Code umwandelt
• Unterstützte Stacks sind HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap und Ionic + Tailwind
• Unterstützt auch die Umwandlung von Bildschirmaufnahmen, die das Verhalten einer Website zeigen, in funktionsfähige Prototypen
• Standardmäßig verwendete KI-Modelle sind Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6 und Claude Opus 4.8; für die Bilderzeugung wird das auf Replicate basierende z-image-turbo verwendet
• Für die lokale Ausführung sind API-Schlüssel sowie ein Backend-/Frontend-Setup erforderlich; die App-Struktur besteht aus einem React/Vite-Frontend und einem FastAPI-Backend
  • Es wird mindestens ein Schlüssel eines Modellanbieters benötigt: OpenAI, Anthropic oder Gemini
  • Gemini extrahiert echte Logos und Bilder aus Screenshots und wird für den Videomodus benötigt
  • Replicate aktiviert Bildbearbeitung, Hintergrundentfernung und die auf Replicate basierende Bilderzeugung
• Wenn mehr Schlüssel hinzugefügt werden, wählt das System je nach Variante automatisch leistungsfähigere Modellkombinationen; bei nur einem einzelnen Schlüssel werden nur die Modelle dieses Anbieters verwendet
• Die optionale Funktion Screenshot Preview rendert die generierte Seite nach der Installation von Chromium in einem Headless-Browser zur visuellen Prüfung; ist Chromium nicht vorhanden, wird dieses Tool übersprungen
• Unterstützt lokale Entwicklung, die Nutzung der gehosteten App und die Ausführung per Docker; bei der Ausführung mit Docker läuft die App unter http://localhost:5173

[GN⁺]

Hacker-News-Kommentare

• Das wirkt wirklich wie Magie, und ich weiß nicht, wo ich das in meinem mentalen Modell davon einordnen soll, wie Berechnung funktioniert
  Ich hatte universelle Funktionsapproximatoren so verstanden, dass sie eine Menge von Funktionen modellieren, die Eingaben auf Ausgaben in einer bestimmten Domäne abbilden; bei Beispielen wie MNIST ist das konzeptionell nachvollziehbar
  Aber hier frage ich mich, ob das allgemeine Training von GPT eine Wertzuordnung von Pixelintensitäten zu HTML+Tailwind-Text-Token implementiert und das Ergebnis, wenn der Browser diese Token interpretiert und rendert, das Eingabebild annähernd reproduziert
  Wenn das so ist, modelliert GPT nicht nur die Umwandlung von Pixeln in HTML/CSS, sondern auch die Art, wie ein Browser HTML/CSS rendert; dass so eine Abbildung existiert, kann ich akzeptieren, aber erstaunlich ist, dass GPT das hergeleitet hat, während es gleichzeitig auch noch über unzählige andere Themen schreiben kann
  Praktischer gefragt: Kann man so ein Tool als Diagramm-Compiler betrachten, der später Teil einer Build-Pipeline wird, welche Artefakte aus Sketch/Figma entgegennimmt und HTML/CSS/JS ausgibt?

  • Meine Erklärung wäre: Ein LLM ist im Grunde ein latenter Raum und ein Mittel, sich darin zu bewegen
    Der latente Raum ist ein n-dimensionaler Raum, in dem Ideen und Konzepte umso näher beieinander liegen, je ähnlicher sie sind; diese Anordnung entsteht während des Trainings aus den Trainingsdaten, daher ist der Trainingsprozess letztlich der Prozess, diesen latenten Raum zu erzeugen
    Man kann sich auf einem 2D-Gitter vorstellen, dass „house“ und „mansion“ nahe beieinander liegen, während „growling“ in einer ganz anderen Ecke liegt. Ein latenter Raum wie bei GPT-4 ist ähnlich, hat aber Hunderte bis Tausende Dimensionen, und dieser Größenunterschied erlaubt es, enormes Wissen auf nützliche Weise zu ordnen
    Zurück zum Lesen von Bildern: In den Trainingsdaten gab es Bilder von Webseiten und den dazugehörigen Code, und dieser Code hat dem Trainingsprozess vermittelt, wo solche Code-Bild-Paare platziert werden. Labels und Captions helfen ebenfalls dabei, Bilder wie Text im latenten Raum zu verorten
    Gibt man GPT-4 also ein neues Webseitenbild und bittet um das passende HTML, kann es dieses Bild im latenten Raum platzieren und das dazugehörige HTML aus der Nähe abrufen
  • Mit universellem Funktionsapproximator ist nur gemeint, dass mehrschichtige neuronale Netze jede beliebige beschränkte stetige Funktion bis zu einer gewünschten Genauigkeit approximieren können
    Aber das sagt nichts über die Lernbarkeit oder die dafür nötige Struktur aus, und die benötigte Struktur könnte unrealistisch groß sein
    Der verwendete Lernalgorithmus, also Backpropagation mit stochastischem Gradientenabstieg, ist kein universeller Lerner und garantiert auch nicht, ein globales Minimum zu finden
  • Der Prozess ist einfacher. GPT liest das Bild und erstellt eine vollständige Beschreibung, danach formuliert der Nutzer einen Prompt, der auf Basis dieser Beschreibung um eine Tailwind-Implementierung bittet
    Es sieht eher danach aus, den Sketch/Figma-Schritt zu überspringen und direkt zu einem ausführbaren Prototyp zu gelangen
  • Diese Art von Neugier ist erfrischend, nachdem man monatelang nur bedeutungslose semantische Streitereien gesehen hat
    Die Sichtweise „es kann jede beliebige Funktion anpassen“ stimmt zwar, sagt aber nicht, ob das mit endlichen Ressourcen in der Praxis tatsächlich möglich ist, und ist deshalb für sich genommen nicht besonders nützlich
    Das eigentlich Erstaunliche ist nicht der universelle Approximator, den es schon lange gibt, sondern dass er abstrakte Konzepte so gut approximiert, und die Antwort liegt im Umfang der Daten
    Es gibt die Sichtweise, dass Kompression Intelligenz ist, und man kann diese Modelle als gute Kompressoren betrachten. Während des Trainings haben die Gewichte eine feste Größe und sind viel kleiner als die Daten, die angepasst werden sollen, und wenn das Ziel die Rekonstruktion des Originals ist, also die Vorhersage des nächsten Tokens, bleibt im Grunde nichts anderes übrig, als die Daten sehr gut zu komprimieren
    Je intelligenter ein Modell ist, desto besser sagt es vorher und komprimiert; wenn man es zur Kompression zwingt, zwingt man es damit gewissermaßen auch dazu, Intelligenz zu erwerben. Das ist ähnlich wie vor einer Prüfung: Man kann Antworten auswendig lernen, aber wenn es Tausende Fragen gibt und Auswendiglernen nicht reicht, ist es am besten, das Fach zu verstehen und die Antworten während der Prüfung herzuleiten
    Diese Dualität von Kompression und Intelligenz ist unter denen umstritten, die die Generalisierungsfähigkeit von LLMs bestreiten, aber sie ist derzeit mein mentales Modell, und ich konnte sie noch nicht widerlegen
    Wenn man diese Sichtweise akzeptiert, sind multimodale Fähigkeiten eher ein Engineering-Problem. Wie GPT-4V intern genau funktioniert, wissen wir nicht, aber man kann es aus veröffentlichter multimodaler Forschung abschätzen
    Wenn es Paare aus Bildern und Texten gibt, die diese Bilder beschreiben, werden Bilder ähnlich wie Text tokenisiert/eingebettet. Mit etwas wie ViT (Visual Transformer) kann man Bilder in visuelle Merkmale pro Patch umwandeln und so in eine lange Sequenz überführen
    Wenn man diese Embeddings einem vortrainierten LLM gibt und es dazu zwingt, den beschreibenden Bildtext vorherzusagen, bleibt ihm nichts anderes übrig, als aus den Bild-Embeddings ein allgemeines Bildverständnis zu gewinnen
    Sobald es die Informationen eines gegebenen Bildes verstehen und in natürlicher Sprache ausdrücken kann, muss man dieses Verständnis nur noch durch Instruction Tuning nutzbar machen
    Generative Bildmodelle wie Stable Diffusion funktionieren ähnlich: Man trainiert ein Kontrastmodell wie CLIP, sodass Bild-Embeddings und Text-Embeddings desselben Konzepts nahe beieinander liegen, und nutzt diese duale Information dann, um die Generationsrichtung zu steuern
    Erstaunlich ist, dass diese Fähigkeitsstufe bereits erreicht wurde und dass mit mehr Rechenleistung wohl noch mehr Fähigkeiten möglich sind. Wenn der endgültige Verlust von GPT-4 derzeit 1 ist, könnte es bei einer Senkung auf 0,1 auf die eine oder andere Weise deutlich leistungsfähiger werden
    Zur zweiten Frage: Es sieht nach genau dieser Richtung aus, und wahrscheinlich wäre das sogar jetzt schon möglich
  • Falls dich erstaunt, dass GPT das hergeleitet hat: Dann denke an die Anzahl der Dimensionen und die Rechengeschwindigkeit, mit denen wir es hier zu tun haben

• Der Kern steckt hier: https://github.com/abi/screenshot-to-code/blob/main/backend/...
  Der Prompt weist an, als Tailwind-Experte für den Nutzer einen Screenshot anzusehen und daraus eine Single-Page-App mit Tailwind, HTML und JS zu bauen.
  Es gibt Anweisungen, Hintergrundfarbe, Textfarbe, Schriftgröße, Padding, Margin, Rahmen usw. exakt abzugleichen, den Text aus dem Screenshot unverändert zu übernehmen, „den vollständigen Code zu schreiben“, die Anzahl wiederholter Elemente anzupassen, nichts mit Kommentaren auszulassen, placehold.co-Bilder zu verwenden und im alt eine detaillierte Beschreibung einzutragen.
  Tailwind über https://cdn.tailwindcss.com, Google Fonts und Font Awesome dürfen verwendet werden, und es heißt außerdem, dass der komplette Code nur innerhalb von Tags zurückgegeben werden soll und keine Markdown-Code-Fences verwendet werden dürfen.
  Ich persönlich glaube nicht, dass defensives Prompting der Weg der Zukunft ist, aber dass das hier funktioniert, ist wirklich beeindruckend. Es fühlt sich an, als wäre etwas, wovon ich als Teenager geträumt habe, jetzt mit vergleichsweise wenig Aufwand möglich.

  • Computer funktionieren endlich so, wie wir immer geglaubt haben.
    Sie befolgen Anweisungen auf unzuverlässige Weise, erzeugen Bugs, und man repariert sie, indem man die Maschine anschreit.
  • Ich mag es nicht, GPT in Großbuchstaben anschreien zu müssen, weil es sich schon zu vertraut anfühlt. Wir haben inzwischen 128k Token, also sollte es einfach die Arbeit machen und die Antwort liefern.
    Wenn ich noch einmal „dies ist eine komplexe Herausforderung“ lesen muss, werde ich wirklich müde. Selbst wenn die Leistung nur bei 60 % liegt, ist ein weniger „faules“ Modell manchmal besser. Um an die restlichen 40 % der Fähigkeiten zu kommen, braucht man zusätzliches Prompt Engineering, und das fühlt sich eher nach absichtlicher Abschwächung als nach einer technischen Grenze an.
    Trotzdem ist das für Konkurrenten immer noch eine schwierige Anforderung, deshalb gewinnt OpenAI im Moment.
    Es ist natürlich weiterhin unglaublich cool und nützlich, also will ich nicht nur meckern; wenn Konkurrenz auftaucht, die wirklich liefert, dürften die nächsten Jahre spannend werden.
  • Ich wusste nicht, dass Formulierungen, die LLMs bedrohen, so gut funktionieren :D
  • Ich frage mich, ob es besser wäre, zuerst ein Tool zur Identifizierung des Tech-Stacks laufen zu lassen und den Prompt dann auf diese Technologie abzustimmen, statt immer zwangsläufig auf Tailwind zu gehen.

• Man sollte vielleicht hinzufügen: „Das hier richtig zu machen, ist für meine Karriere sehr wichtig.“
  Ich finde es gerade nicht, aber laut irgendeinem YouTube-Forschungsvideo soll sich die Qualität der Ausgabe bei vielen Aufgaben deutlich verbessert haben.

  • „Sie sind ein Experte, der Schritt für Schritt darüber nachdenkt, wie wichtig diese Aufgabe für meine Karriere ist.“
  • Ziemlich lustig, und dieses ganze KI-Thema überrascht einen immer wieder. Bei einer schnellen Suche habe ich diesen Artikel gefunden: https://www.businessinsider.com/chatgpt-llm-ai-responds-bett...
    Laut der Studie führten Prompts mit emotionaler Sprache bei Aufgaben wie „einen Satz in formelle Sprache umwandeln“ oder „gemeinsame Merkmale gegebener Objekte finden“ insgesamt zu einer Leistungssteigerung von 8 %.

• Ich weiß inzwischen nicht mehr, wie ich darüber denken soll, was man jetzt überhaupt noch bauen sollte.
  Das soll dieses Projekt überhaupt nicht kleinreden, und ich bin auch dankbar, dass der Quellcode offenliegt, aber es gibt jetzt eine ganze Klasse von Problemen, die ziemlich leicht lösbar wirkt, sodass man sich fragt: „Warum eigentlich noch?“
  Ich glaube, wir müssen die Problemstellung neu kalibrieren — sowohl bei der Frage, was es wert ist, gelöst zu werden, als auch wie man es lösen sollte.

  • Wenn die Ausgabe gut genug ist, spart man Zeit, weil man nicht mehr das ganze HTML von Hand schreiben muss.
    Wenn so ein Tool „ausreichend guten Code“ erzeugen kann, der nur noch ein bisschen Feinschliff braucht, ist das eine große Zeitersparnis.
    Wenn es einfach nur chaotischen Code ausspuckt, ist es entsprechend weniger nützlich.
  • Man sollte Dinge bauen, die schmerzhafte oder interessante Probleme lösen. Etwas Neues schaffen und den aktuellen Zustand wenigstens ein Stück weit in eine vernünftigere, ausgewogenere, bessere Richtung schieben.
    Techniker neigen dazu, sich übermäßig auf die Werkzeuge selbst zu fixieren. Ich kann gar nicht zählen, wie oft ich vollkommen leere, völlig gewöhnliche „Hello World“-Projekte ausgestellt gesehen habe, nur weil dort Framework A und Toolkit B gewaltsam miteinander verklebt wurden, und das ist wirklich langweilig.
    LLM-basierte Technologie ist in diesem Kontext herausfordernd, weil man die Möglichkeiten selbst neu durchdenken muss. Wenn das Werkzeug universell ist, hat es wenig Sinn, einfach nur eine Showcase-Demo zu bauen.

• Erstaunlich ist natürlich, dass das mit einem allgemeinen Modell funktioniert, aber überwachte Trainingsdaten für diese Aufgabe zu erzeugen, scheint ziemlich einfach zu sein.
  HTML generieren → rendern und einen Screenshot machen → diese Daten dann umgekehrt fürs Training verwenden.

• Auf der GitHub-Seite steht, dass eine gehostete Version über Pico angeboten werden soll, und ich frage mich, warum Pico gewählt wurde.
  Ich habe Pico gerade erst über diese Seite kennengelernt, und es sieht so aus, als würde Pico nur 30 % des Umsatzes auszahlen. Das ist die Hälfte des üblichen 60-%-Anteils eines App-Stores, und soweit ich gelesen habe, wird nur gezahlt, wenn kostenlose Nutzer die App ausprobieren und sich danach anmelden; wenn bestehende Plattformnutzer sie verwenden, scheint nichts ausgezahlt zu werden.
  Die Bedingungen wirken deutlich schlechter als bei traditionellen Plattformen, und die Nutzerbasis scheint auch kleiner zu sein, deshalb würde mich die Begründung für diese Wahl interessieren.

  • Ich bin der Typ, der Pico gebaut hat :) Gemeint war hier, dass diese Funktionen in Pico integriert werden sollen.
    Und Pico ist eine allgemeine Plattform zum Erstellen von Web-Apps. Diese 30 % vom Umsatz gelten nur für Affiliates, nicht für In-App-Zahlungen. Pico unterstützt In-App-Zahlungen derzeit noch nicht.

• Ich verstehe den Punkt nicht so ganz. Wenn man bestehende Websites kopieren will, verstehe ich nicht, warum man nicht einfach Httrack benutzt.
  Die Original-Website wird immer ähnlicher sein, und man spart sich auch die Kosten für die GPT-API. Diese Technik glänzt eher im Fall von der Skizze zur Website.

  • Man muss ja nicht unbedingt eine bestehende Website eingeben, man könnte auch Screenshots oder Designs verwenden.
  • Eine Oberfläche von Grund auf neu zu schreiben, ist besser als das, was Httrack macht.

• Mir hat sehr gefallen, dass die Demo der generierten Website während der Erstellung direkt in einem iframe mit srcdoc angezeigt wurde.
  Einfach und elegant.

  • Unterhaltsamer, als eine Minute lang zu warten, bis die KI ohne jedes Feedback fertig ist.

• Wenn man die Implementierungsdetails der „KI“ ignoriert, erzeugt das im Grunde HTML in einem ähnlichen Sinne, wie man ein Rasterbild in SVG umwandelt, das beim Hochskalieren schlecht aussieht und den Renderer dazu bringt, unnötige Linien zu zeichnen und Flächen zu füllen.
  Das heißt, die Ausgabe wirkt nicht sauber genug, um sie an einen Webentwickler weiterzugeben. Der Entwickler wird vermutlich ohnehin fast alles neu schreiben müssen, abgesehen von der offensichtlichsten groben Grundstruktur, die ein Snippet-Plugin im Texteditor auch ohne High-End-Tool besser hinbekommt.
  Vieles an der Webentwicklung ist gar nicht sichtbar. Barrierefreiheit ist Metadaten, die man aus einem Screenshot nicht gewinnen kann, und für responsives CSS bräuchte man wohl ein Video, das sämtliche Interaktionen und Animationen lückenlos erfasst.
  JavaScript scheint sich mit keiner Menge an Bilderkennung sinnvoll ableiten zu lassen.
  Wäre es nicht besser, im Entwicklertool das echte HTML einfach direkt zu kopieren?

• Damit dürfte sich die Erstellung von Phishing-Seiten deutlich beschleunigen

  • Vielleicht habe ich da etwas missverstanden, aber ich sehe nicht, wie das schneller sein soll, als einfach das HTML und CSS der Originalseite unverändert zu übernehmen.