Screenshot zu Code

Mach einen Screenshot einer Seite, die du im Browser siehst, und IMG2HTML schreibt das HTML mit Tailwind CSS, das sie nachbaut: Navigation, Überschriften, Buttons, Listen und Codeblöcke als echtes, bearbeitbares Markup. Unten siehst du einen echten Durchlauf mit der Startseite von upload-post.com, das Ergebnis genau so, wie es zurückkam.

Screenshot umwandeln Aus Chrome aufnehmen

Ein Screenshot einer echten Landingpage

Screenshot der Startseite von Upload-Post: Navigation mit Dropdowns, die Überschrift „Social Media API, One Call, Every Platform“, Reihen von Social-Media-Icons, ein Terminalfenster mit einem curl-Befehl und der Button „Create your free account“
Eingabe: Browser-Screenshot von upload-post.com (PNG, 1280 x 800)
Das generierte HTML im Browser: dieselbe Navigation, zweifarbige Überschrift, Social-Media-Icons, das Terminal mit dem curl-Befehl, Feature-Liste, Call-to-Action-Button und Integrations-Chips
Ergebnis: das generierte HTML, unverändert in Chrome bei 1280px Breite gerendert. 463 Zeilen HTML mit Tailwind CSS, geliefert in 27 Sekunden.

Was gut geklappt hat

  • Die Navigation mit den Dropdown-Pfeilen, dem Dark-Mode-Button, der Sprachauswahl und dem Button „Try for free“.
  • Die zweifarbige Überschrift, das grüne Zähler-Badge, die Feature-Liste mit ihren kleinen Icons und der Button „Create your free account“.
  • Das Terminalfenster mit allen acht Zeilen des curl-Befehls, als echter, bearbeitbarer Text und nicht als Bild.
  • Erkennbare Marken-Icons aus Font Awesome für TikTok, Instagram, LinkedIn, YouTube, Facebook, Pinterest, Reddit, Discord, Telegram, Slack, Mastodon, WordPress, DEV und Google.

Was du von Hand korrigieren musst

  • Marken, die es in Font Awesome 5 nicht gibt, wurden angenähert: X zeigt den alten Twitter-Vogel, Threads ein @-Zeichen und Bluesky eine Wolke. Setz dort die offiziellen SVGs ein.
  • Die Nutzer-Avatare und die Flagge wurden zu placehold.co-Platzhaltern (U1, U2, U3).
  • Die Icons brechen in drei statt zwei Reihen um, und der Hero-Bereich sitzt etwas tiefer als im Original. Die Abstände brauchen also noch eine Runde Feinschliff.
upload-post-screenshot.html (erste Zeilen des Body)
 <body class="text-slate-900">
  <!-- Navigation -->
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex items-center justify-between">
   <div class="flex items-center gap-2">
    <div class="bg-indigo-600 p-1.5 rounded-lg">
     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      </path>
     </svg>
    </div>
    <span class="text-xl font-extrabold tracking-tight">
     Upload-Post
    </span>
   </div>
   <div class="hidden md:flex items-center space-x-8 text-sm font-medium text-slate-600">
    <a class="hover:text-indigo-600" href="#">
     Add to your SaaS
    </a>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Platforms
     <i class="fas fa-chevron-down text-[10px]">
     </i>
    </div>
    <div class="flex items-center gap-1 cursor-pointer hover:text-indigo-600">
     Integrations
     <i class="fas fa-chevron-down text-[10px]">
Komplette generierte Seite öffnen (463 Zeilen)

Auf der Suche nach screenshot-to-code?

abi/screenshot-to-code ist ein beliebtes Open-Source-Projekt: Du betreibst es selbst mit deinem eigenen API-Key von OpenAI oder Anthropic (der Autor verkauft auch eine gehostete Version). IMG2HTML erledigt dieselbe Aufgabe als sofort nutzbarer Dienst: nichts zu installieren, kein API-Key, ein Editor, um das Ergebnis per Prompt zu korrigieren, und Export nach Tailwind-HTML, React, Vue oder Angular. Hoste das Open-Source-Repo selbst, wenn du volle Kontrolle willst; nimm IMG2HTML, wenn du das HTML in 30 Sekunden direkt im Browser oder über die Chrome-Erweiterung haben willst.

Screenshots, die sich gut umwandeln lassen

Das Modell baut alles nach, was im Bild ist. Je sauberer die Aufnahme, desto weniger musst du hinterher löschen. Der Upload-Post-Screenshot oben wurde mit 1280 x 800 aufgenommen, nachdem das Cookie-Banner geschlossen war. Mit offenem Banner wäre auch das Banner nachgebaut worden.

  • Chrome oder Edge: Öffne die DevTools (F12), drück Ctrl+Shift+P (Cmd+Shift+P auf dem Mac) und führ Capture screenshot für den sichtbaren Bereich aus, oder Capture node screenshot, nachdem du im Panel Elements einen Abschnitt ausgewählt hast. Keine Browserleisten, keine Skalierung.
  • macOS: Cmd+Shift+4 und über den gewünschten Bereich ziehen, oder die Leertaste drücken, um ein einzelnes Fenster aufzunehmen.
  • Windows: Win+Shift+S öffnet die Leiste zum Ausschneiden. Die Aufnahme landet in der Zwischenablage und lässt sich über die Benachrichtigung speichern.

Lass den Browser auf 100 % Zoom und einer normalen Desktop-Breite (1280 bis 1440 Pixel). Schließ vorher Cookie-Banner, Chat-Blasen und Popups. Bei langen Seiten nimmst du Hero, Feature-Raster und Footer als separate Bilder auf.

Vom Screenshot zur funktionierenden Seite

  1. Screenshot hochladen. Bei diesem Beispiel hat die Umwandlung 27 Sekunden gedauert.
  2. Vorschau mit dem Original vergleichen. In diesem Durchlauf stimmten Layout, Texte und curl-Befehl, nur die Icons von X, Threads und Bluesky mussten ersetzt werden.
  3. Den Editor in normalen Worten um Korrekturen bitten oder den Code bearbeiten. Dann die Platzhalter (hier die Avatare und die Flagge) gegen deine Dateien tauschen.
  4. Als Tailwind-HTML exportieren oder auf React oder Vue umstellen, wenn die Seite in eine App kommt.

Screenshots von Apps und Designs

Ein Screenshot muss nicht von einer Website stammen. Screens von Desktop-Apps, Admin-Panels und E-Mail-Templates lassen sich genauso umwandeln. Für mobile Screens und Mockups siehe Bild zu Code, für Frames aus einem Design-Tool siehe Figma zu HTML. Alle vier echten Beispiele nebeneinander findest du auf der Seite Bild zu HTML.

Wenn du das HTML einer Seite schon hast und es dir nur ansehen willst, rendert der kostenlose HTML-Viewer es in Handy-, Tablet- und Desktop-Breite.

IMG2HTML und andere Bild-zu-Code-Tools

Die Tools, die am häufigsten verglichen werden, wenn ein Bild oder ein Screenshot zu Code werden soll, und worin sie sich unterscheiden. Die Angaben zu den anderen Tools stammen von deren eigenen Websites; dort findest du die aktuellen Pläne.

ToolWas es istAusgabePreis
IMG2HTMLGehosteter Konverter: Web-App, Chrome-Erweiterung und APIHTML + Tailwind CSS; Inline-CSS, React, Vue oder Angular über den EditorAb $1.99 im Monat für 3 Umwandlungen
screenshot-to-code (abi)Open-Source-Projekt, das du mit deinem eigenen API-Key von OpenAI, Anthropic oder Gemini betreibst; es gibt auch eine kostenpflichtige gehostete VersionHTML + Tailwind, React, Vue und weitere StacksCode kostenlos; du zahlst die Modell-API
v0 von VercelKI-App-Builder, der mit einem Prompt oder einem Bild startetReact und Next.js mit Tailwind und shadcn/uiKostenlose Stufe und bezahlte Pläne
FrontyBild-zu-HTML/CSS-Dienst mit visuellem EditorHTML und CSSSiehe fronty.com
AnimaDesign-to-Code-Plugin für FigmaReact, HTML und VueSiehe animaapp.com

Fragen zu Screenshot zu Code

In welchen Code wird ein Screenshot umgewandelt?

In eine einzelne HTML-Datei mit Utility-Klassen von Tailwind CSS, Icons von Font Awesome und einer Google-Schrift, die der im Bild nahekommt (alle vier Beispiele auf dieser Website kamen mit Inter zurück). Im Editor kannst du auf Inline-CSS, React, Vue oder Angular umstellen.

Werden Bilder und Verhalten der Seite übernommen?

Nein. Fotos, Avatare und Logos werden zu Platzhaltern mit Beschreibung, und Menüs, Dropdowns und Tabs werden als statisches Markup nachgebaut. Keines der vier Beispielergebnisse enthielt JavaScript außer dem Tailwind-CDN-Skript.

Soll ich einen Screenshot der ganzen Seite verwenden?

Teil lange Seiten in Abschnitte von ein bis zwei Bildschirmhöhen und wandle sie einzeln um. Jedes Beispiel auf dieser Website ist eine Aufnahme von einem Bildschirm, und kürzere Abschnitte lassen sich auch schneller mit dem Original abgleichen.

Kann ich so jede Website umwandeln?

Nutze es für Seiten und Designs, die dir gehören oder die du nachbauen darfst. Das Ergebnis ist ein Nachbau dessen, was der Screenshot zeigt, nicht der Quellcode der Originalseite.