Im Jahr 2026 haben Tools wie Lovable, Bolt.new und v0 das Erstellen von Landingpages, Produktseiten und schnellen MVP-Frontends extrem einfach gemacht. Doch sobald der erste Entwurf steht, taucht ein praktisches Problem auf: Wie bearbeitet man die Seite weiter, ohne wieder in den Code zurückzugehen?
Genau das ist die echte „letzte Meile“ für KI-generierte Websites. In den meisten Fällen existiert die Seite bereits. Du möchtest sie nicht komplett neu bauen. Du willst nur:
- eine Live-Seite per URL importieren
- störende Popups oder Overlays entfernen
- Texte und visuelle Hervorhebungen anpassen
- Bilder austauschen und neu positionieren
- ausgewählte Elemente gesammelt verschieben
- Texte in Eingabebereichen oder Prompt-Boxen bearbeiten
Damit dieses Tutorial konkret bleibt, verwenden wir lovable.dev als öffentliches Beispiel. Es geht nicht darum, den Inhalt zu kopieren, sondern den exakten visuellen Workflow zu zeigen, den du auch auf andere KI-generierte Landingpages anwenden kannst.
Warum dieser Workflow gerade jetzt wichtig ist
Die Suchintention verschiebt sich 2026 von „Welchen KI-Builder soll ich nutzen?“ zu „Ich habe die Seite schon generiert – wie bringe ich sie jetzt wirklich fertig?“ Diese Fertigstellung besteht meist aus kleinen, aber wirkungsvollen Änderungen:
- Copy-Optimierung für klarere Positionierung und bessere Keyword-Fokussierung
- Popup-Bereinigung, damit Banner und Overlays nicht im Weg sind
- Bildaustausch, damit die Seite markenreif statt nach Platzhalter aussieht
- Layout-Anpassung, damit das Endergebnis bewusst gestaltet und nicht nur generiert wirkt
Genau deshalb ist visuelles Bearbeiten einer der nützlichsten Post-Generation-Workflows für Marketer, Indie-Founder und kleine Teams, die schnell veröffentlichen wollen.
Warum lovable.dev als Live-Demo?
Für diese Anleitung eignet sich lovable.dev besonders gut, weil die Seite öffentlich, visuell klar aufgebaut und reich an Elementen ist, die man nach der KI-Generierung oft noch anpassen muss:
- ein klarer Hero-Bereich mit editierbarem Text
- Bildbereiche, die ersetzt und verschoben werden können
- echte Cookie-Hinweise und Overlays, die zuerst bereinigt werden sollten
- eingabeartige Prompt-Bereiche, in denen Microcopy wichtig ist
Schritt für Schritt: Eine Live-Website im KI-Stil visuell bearbeiten
Schritt 1: Die Live-URL importieren
Öffne HtmlDrag, wähle URL Import und füge die URL der Live-Seite ein. In diesem Beispiel verwenden wir:
https://lovable.dev/
Nach der Erfassung wird die Live-Seite als bearbeitbare Fläche in den Editor geladen. Du kannst die Seite direkt visuell prüfen, statt generierten Code nachzuvollziehen oder den Builder erneut zu öffnen.
Schritt 2: Zuerst Popups und Overlays entfernen
Viele Live-Seiten enthalten Cookie-Hinweise, schwebende Banner oder Support-Widgets. Im Live-Betrieb sind sie sinnvoll, beim Bearbeiten stören sie jedoch. Statt alles einzeln zu schließen, nutzt du die integrierte Bereinigungsfunktion.
Das Ergebnis ist sofort sichtbar: Der visuelle Ballast verschwindet und die Seite lässt sich deutlich leichter bearbeiten.
Schritt 3: Texte bearbeiten und Text-Hintergrundfarbe anpassen
Wenn die Seite sauber ist, beginne mit dem Element mit der größten Wirkung: dem Hero-Text. Klicke auf die Überschrift, bearbeite den Wortlaut und passe die visuelle Hervorhebung direkt an. In diesem Beispiel wird zusätzlich die Hintergrundfarbe des Textes geändert, um einen Teil der Aussage stärker hervorzuheben.
Das zeigt sehr gut: KI-generierte Seiten brauchen oft nicht nur bessere Formulierungen, sondern auch menschliches Gespür für visuelle Gewichtung und Hierarchie.
Schritt 4: Ein neues Bild hochladen und neu positionieren
Nur Text zu ändern reicht selten aus. Wenn die ursprüngliche Seite ein schwaches Bild verwendet oder du ein passenderes Produktbild einsetzen möchtest, öffne den Bild-Upload und lade ein neues Asset hoch.
Nach dem Einfügen verschiebst du das Bild visuell so lange, bis es an der gewünschten Stelle sitzt. Das ist deutlich schneller, als Pfade, CSS oder Container-Ausrichtung im Code zu ändern.
Schritt 5: Ausgewählte Elemente und Bilder gesammelt verschieben
Manchmal liegt das Problem nicht an einem einzelnen Element, sondern an einer Gruppe, die zusammen verschoben werden sollte. Statt jede Karte oder jedes Bild einzeln anzupassen, arbeitest du mit ausgewählten Gruppen und verschiebst sie in einem visuellen Schritt.
Das ist besonders hilfreich bei Galerien, Feature-Bereichen oder Inhaltsgruppen, die ein KI-Builder erzeugt hat und die noch etwas Feinschliff brauchen.
Schritt 6: Texte im Eingabebereich aktualisieren
Microcopy in eingabeartigen Bereichen ist wichtiger, als viele Teams denken. Prompt-Texte, Hilfetexte und kurze Interaktionshinweise prägen oft den ersten Eindruck des Produkts. Im folgenden Beispiel wird zunächst der Prompt-Bereich ausgewählt und danach der Text vereinfacht.
Schon eine kleine Textänderung kann dafür sorgen, dass sich die Oberfläche klarer und weniger generisch anfühlt.
Manuelles Bearbeiten vs. visuelles Bearbeiten
| Aufgabe | Manueller Code-Weg | Visueller Bearbeitungsweg |
| Eine Live-Website importieren | Quelldateien öffnen oder den deployten Code prüfen | URL einfügen und die Seite direkt erfassen |
| Popups und Overlays entfernen | Blockierende Elemente einzeln schließen oder löschen | Eine Bereinigungsaktion nutzen und weiterarbeiten |
| Text-Hervorhebung optimieren | Texte im Code ändern und Styles separat abstimmen | Text auswählen und Inhalt plus Styling direkt anpassen |
| Bilder ersetzen und verschieben | Assets, Pfade, Layout-Regeln und Abstände anpassen | Visuell hochladen und sofort neu positionieren |
| Gruppierte Inhalte anpassen | Mehrere Blöcke umstrukturieren und Layout erneut prüfen | Ausgewählte Elemente gemeinsam verschieben |
| Texte in Prompt-Boxen oder Eingabebereichen bearbeiten | Das genaue Node- oder Komponenten-Ziel im Projekt finden | Klicken, bearbeiten und den Wortlaut sofort prüfen |
Für wen dieser Workflow am hilfreichsten ist
- Indie-Founder, die vor dem Launch noch eine generierte Landingpage verfeinern
- Marketer, denen Copy, Layout und CTA-Klarheit wichtiger sind als Code-Details
- Freelancer und kleine Agenturen, die schnelle Anpassungen für Kunden umsetzen
- Nicht-technische Teams, die eine KI-generierte Seite erhalten haben und trotzdem die letzte Kontrolle behalten wollen
FAQ
Funktioniert das nur mit lovable.dev?
Nein. lovable.dev ist nur das öffentliche Beispiel in diesem Artikel. Der gleiche Ansatz funktioniert auch bei anderen Live-Websites, exportierten HTML-Seiten und vielen von Lovable, Bolt oder v0 generierten Landingpages.
Sollte ich eine Live-URL verwenden oder HTML hochladen?
Wenn die Seite bereits veröffentlicht ist, ist die Live-URL meist der schnellste Weg. Wenn du eine saubere exportierte HTML-Einstiegsdatei hast, funktioniert das Hochladen genauso gut.
Warum sollte man Popups vor dem Bearbeiten entfernen?
Weil Overlays, Cookie-Banner und schwebende Widgets die Auswahl blockieren und das Layouten verlangsamen. Wenn du sie zuerst bereinigst, erhältst du eine deutlich klarere Bearbeitungsfläche.
Kann ich nur Überschriften und Bilder bearbeiten?
Nein. Wie oben gezeigt, kannst du auch Texte in Eingabebereichen, gruppierte Elemente und andere sichtbare Inhalte für den letzten Feinschliff anpassen.
Fazit
KI-Builder liefern sehr schnell einen ersten Entwurf. Doch launchfähige Seiten sind selten nur erste Entwürfe. Sie brauchen Bereinigung, visuelle Hervorhebung, den Austausch von Assets und Feintuning bei der Microcopy.
Wenn du bereits eine Live-Seite hast, die von einer KI erstellt wurde, und nur noch die letzte Verfeinerungsrunde brauchst, ist das visuelle Bearbeiten auf htmldrag.com oft deutlich schneller, als den kompletten Code-Workflow erneut zu öffnen.