Bild zu Code

Gib IMG2HTML ein Bild einer Oberfläche (einen App-Screen, ein Mockup, eine Komponente, die du irgendwo gesehen hast), und es schreibt den Code dafür: zuerst HTML mit Tailwind CSS, dann im Editor React, Vue oder Angular, falls du eine Komponente brauchst.

Das Beispiel auf dieser Seite ist der Screen eines mobilen Habit Trackers. Er zeigt das typische Ergebnis bei App-UIs: Struktur und Zustände stimmen, die Korrekturen sind klein und konkret.

Bild in Code umwandeln Beispiel ansehen

Das Mockup

Das generierte HTML bei 390 Pixel Breite: Begrüßung, Fortschrittsring, Gewohnheitszeilen mit abgehakten und offenen Kästchen und eine fixierte Tab-Leiste unten — Die generierte Seite

Ein Mockup einer mobilen App

Eingabe: Mockup eines App-Screens (PNG, 864 x 1536)

Was gut geklappt hat

Die Begrüßung mit dem Namen in der türkisen Akzentfarbe, das Datum und die abgerundete Übersichtskarte.
Der Fortschrittsring, als SVG gezeichnet und passend zu 3 von 5 gefüllt, mit der Nachricht „Keep going!“ daneben.
Fünf Gewohnheitszeilen mit den richtigen abgehakten und offenen Zuständen und eine Tab-Leiste unten mit Font-Awesome-Icons und unterstrichenem aktiven Tab.

Was du von Hand korrigieren musst

Die Emoji-Icons der Gewohnheiten wurden als placehold.co-Bilder mit dem Emoji als Text geschrieben und erscheinen als leere Quadrate. Nutze die Emojis direkt oder deine eigenen Icons.
Die Tab-Leiste ist unten am Bildschirm fixiert, aber die Liste hat kein Padding, deshalb verdeckt die Leiste die letzte Gewohnheit. Gib der Liste unten ein Padding in der Höhe der Leiste.

habit-app-mockup.html (erste Zeilen des Body)

 <body class="text-[#0a2533] min-h-screen flex flex-col">
  <div class="max-w-md mx-auto w-full px-6 pt-12 pb-24 flex-grow">
   <!-- Header -->
   <header class="mb-8">
    <h1 class="text-4xl font-bold leading-tight">
     Good morning,
     <br/>
     <span class="text-[#006d6d]">
      Ana
     </span>
    </h1>
    <p class="text-[#708090] mt-2 text-lg">
     Tuesday, 23 September
    </p>
   </header>
   <!-- Progress Card -->
   <div class="bg-[#eef7f6] rounded-3xl p-6 mb-8 flex items-center">
    <div class="relative flex items-center justify-center w-32 h-32 mr-6">
     <svg class="w-full h-full">
      <circle class="text-[#d1e5e3]" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-width="10">
      </circle>
      <circle class="text-[#006d6d] progress-ring__circle" cx="64" cy="64" fill="transparent" r="48" stroke="currentColor" stroke-dasharray="301.59" stroke-dashoffset="120.63" stroke-linecap="round" stroke-width="10">
      </circle>
     </svg>
     <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
      <span class="text-3xl font-bold text-[#006d6d]">

Komplette generierte Seite öffnen (191 Zeilen)

Den generierten Code lesen

Die Datei mit 191 Zeilen folgt dem Bild von oben nach unten: ein Header-Block mit der Begrüßung, die Übersichtskarte mit einem Inline-SVG für den Fortschrittsring, ein div pro Gewohnheit und ein unten fixiertes nav für die Tabs. Die Farben stammen aus dem Bild (das Türkis ist als Tailwind Arbitrary Value gesetzt), und die abgehakten Kästchen sind gestylte divs mit einem Häkchen aus Font Awesome, keine Formularfelder. Wenn sie umschaltbar sein sollen, mach Checkboxen oder Buttons daraus und verwalte den Zustand in deinem Framework.

Code, den du direkt in eine App übernehmen kannst

Bild umwandeln und die Vorschau in der Breite des Zielgeräts prüfen.
Korrigieren, was das Modell nicht wissen konnte: welches Icon-Set du nutzt, welche Daten dynamisch sein sollen und die Abstände unter fixierten Leisten (hier hat die Tab-Leiste die letzte Gewohnheit verdeckt).
Im Editor die Ausgabe auf React, Vue oder Angular umstellen. Das Markup wird zu einer Komponente, die du in kleinere aufteilen kannst, etwa eine HabitRow, die fünfmal wiederholt wird.

Gute Vorlagen für Bild zu Code

Exporte aus Design-Tools in 1x oder 2x, bei denen der Text scharf ist.
Ein Screen pro Bild, damit jede Umwandlung genau einer Seite oder einer Komponente entspricht.
Echte Texte statt Lorem ipsum, denn der Text wird so übernommen, wie er ist, und bleibt dir erhalten.

Für Webseiten, die du im Browser siehst, gibt es auf der Seite Screenshot zu Code ein Desktop-Beispiel. Für Design-Frames erklärt die Anleitung Figma zu HTML den Export. Um vorher exakte Farben aus einem Mockup zu holen, nimm die kostenlose Farbpipette für Bilder.

Fragen zu Bild zu Code

Welche Programmiersprachen unterstützt Bild zu Code?

Die Umwandlung erzeugt HTML mit Tailwind CSS. Im Editor kannst du daraus HTML mit Inline-CSS oder eine Komponente in ReactJS, VueJS oder AngularJS machen, oder den Namen eines anderen Frameworks eintippen. Diese Seite zeigt nur die Standardausgabe in Tailwind-HTML.

Funktioniert das mit Designs für mobile Apps?

Ja, als Webseite. Der Habit Tracker oben wurde in eine 390 Pixel breite Seite mit fixierter Tab-Leiste unten umgewandelt. Das ist eine gute Basis für eine Web-App oder einen Prototyp. Für eine native App nutzt du es als Vorlage für Layout und Texte.

Wie werden Icons behandelt?

Gängige Interface-Icons (Home, Diagramm, Häkchen, Nutzer, Einstellungen) werden auf Font Awesome 5 abgebildet. Emojis, Markenzeichen und eigene Icons gibt es dort nicht immer, sie kommen dann als Platzhalter oder Annäherung zurück, wie in diesem Beispiel.

Kann es handgezeichnete Bilder oder Bilder schlechter Qualität lesen?

Es liest, was auch ein Mensch lesen könnte. Ein klares Handyfoto eines Wireframes auf Papier funktioniert (ein Beispiel gibt es auf der Seite Bild zu HTML). Verschwommener Text, winzige Beschriftungen und starke JPEG-Artefakte führen zu geratenen Wörtern, prüf also die Texte.