KI kann sehr schnell einen ersten Webseitenentwurf erzeugen. Die schwierigere Frage ist jedoch: Was passiert, nachdem dieser erste Entwurf existiert? Eine Seite kann bereits Hero-Bereich, Karten, Workflow-Blöcke und CTA enthalten, braucht aber vor der echten Übergabe weiterhin menschliches Urteil.
Die letzten 20 % einer KI-generierten Webseite bleiben menschliche Arbeit. Jemand muss entscheiden, ob die Überschrift konkret genug ist, ob der CTA zum Conversion-Ziel passt, ob die visuelle Hierarchie Besucher richtig führt und ob die Seite bereit für Vorschau, Teilen, Speichern oder Export ist.
Dieser Walkthrough nutzt das fiktive SaaS-Produkt SignalDock. Die Seite beginnt als rohes HTML, das von einem externen KI-Tool erzeugt wurde. Wir nutzen nicht den HtmlDrag AI Creator, sondern den HTML-Einfügen-Workflow: KI-generiertes HTML kopieren, in HtmlDrag einfügen, als visuelle Seite rendern und die wichtigen menschlichen Feinarbeiten erledigen.
- Quelle: rohes HTML aus einem externen KI-Tool.
- Einstieg: HTML in HtmlDrag einfügen.
- Bearbeitung: Text, CTA, Farben und Abschnittsklarheit visuell anpassen.
- Übergabe: Ergebnis prüfen und für Speichern oder Export vorbereiten.
Warum die letzten 20 % wichtig sind
KI ist gut darin, Struktur zu erzeugen. Sie kann eine vollständig wirkende Landingpage mit Navigation, Abschnitten, Buttons und responsivem CSS erstellen. Doch eine vollständige Struktur ist nicht dasselbe wie eine fertige Seite.
Der Unterschied zeigt sich in Details. Die Überschrift kann zu allgemein sein. Der CTA kann “Get Started” heißen, obwohl das eigentliche Ziel eine Warteliste ist. Ein Abschnitt kann sauber aussehen und trotzdem den Produktwert nicht klar erklären. Das sind keine reinen Stilfragen, sondern Produkt- und Marketingentscheidungen.
Der bessere Ablauf ist daher nicht „generieren und veröffentlichen“, sondern:
Generieren → Prüfen → Bearbeiten → Vorschau → Übergeben
Demo-Ablauf: externes KI-HTML in HtmlDrag
In diesem Artikel existiert der HTML-Entwurf bereits. Er steht für eine Ausgabe, die Nutzer von ChatGPT, Claude, Gemini, Cursor, v0, Bolt, Lovable oder einem anderen KI-Tool erhalten könnten. HtmlDrag wird dann zum visuellen Arbeitsbereich für die Fertigstellung.
Schritt 1: Den HTML-Einfügen-Einstieg wählen
Der Workflow beginnt auf der Paste-Code-Seite. Wenn HTML bereits aus einem anderen Tool vorliegt und sichtbar bearbeitet werden soll, ist dies der passende Einstieg.
Schritt 2: Den KI-generierten HTML-Entwurf einfügen
Fügen Sie das SignalDock-HTML in das Codefeld ein und geben Sie einen klaren Arbeitstitel an. Zu diesem Zeitpunkt ist die Seite noch rohes HTML. Ziel ist es, sie in HtmlDrag sicher zu rendern und in eine prüf- und bearbeitbare Seite zu verwandeln.
Schritt 3: Eine bearbeitbare Arbeit erstellen
Nach dem Absenden erstellt HtmlDrag aus dem eingefügten Code eine Arbeit. Das ist der Übergabemoment: Der KI-Entwurf wird von Textcode zu einer Seite, die man ansehen, auswählen und bearbeiten kann.
Schritt 4: Mit der Hero-Botschaft beginnen
Die Hero-Überschrift ist oft der Startpunkt der letzten 20 %. Im KI-Entwurf lautet sie “Understand your customers better”. Das ist nicht falsch, aber allgemein. Ein menschlicher Editor kann sie direkt auf der Leinwand auswählen und entscheiden, ob sie konkreter, handlungsorientierter oder näher am Produktversprechen sein sollte.
Visuelle Bearbeitung ist hier wichtig, weil die Überschrift im Kontext beurteilt wird: Größe, Zeilenumbruch, Kontrast und Beziehung zu CTA und Dashboard-Karte.
Schritt 5: Den Entwurf als ganze Seite prüfen
Nach der ersten Änderung lohnt es sich, die gesamte Seite zu betrachten. Der SignalDock-Entwurf ist nicht mehr nur Code, sondern eine visuelle Seite mit Navigation, Hero-Inhalt, Dashboard-Karte, Problemabschnitt und CTA. So lässt sich der Seitenfluss beurteilen, bevor kleinere Details bearbeitet werden.
Schritt 6: Nicht nur den Hero, sondern auch den finalen CTA verbessern
Viele KI-generierte Seiten wirken oben solide und werden weiter unten schwächer. Der finale CTA ist besonders wichtig, weil er die nächste Handlung vorgibt. Für eine Beta-Warteliste passt ein allgemeines “Get Started” oft weniger gut als eine genauere Handlung wie “Join Waitlist”.
Schritt 7: Vor der Übergabe in der Vorschau prüfen
Der Vorschaumodus hilft, die Seite wie ein Besucher zu prüfen. In der Vorschau ist weiterhin sichtbar, welcher Hero-Bereich bearbeitet wurde, sodass klar wird, welche Teile des KI-Entwurfs bereits überprüft wurden.
Schritt 8: Die Geschichte im mittleren Bereich verbessern
Die letzten 20 % betreffen nicht nur den Hero. Auch der Problemabschnitt muss erklären, warum die Seite existiert. Im Screenshot ist die Problemüberschrift ausgewählt. Hier kann ein Mensch die Verbindung zwischen verstreutem Feedback und langsamen Entscheidungen klarer machen.
Schritt 9: Das bearbeitete Ergebnis prüfen
Der letzte Screenshot zeigt das bearbeitete Vorschauergebnis. Die Seite spiegelt nun menschliche Entscheidungen wider: klarere Abschnittssprache, eine bewusstere Wartelistenaktion und ein Seitenfluss, der über den ersten Bildschirm hinaus geprüft wurde.
Was Menschen nach KI-generiertem HTML weiterhin entscheiden
In diesem Workflow erzeugte KI den Startpunkt. HtmlDrag musste die Seite nicht neu generieren. Wichtig war, rohes HTML in ein visuelles Objekt zu verwandeln, das Menschen beurteilen und verbessern können.
- Botschaftsklarheit: Ist die Überschrift konkret genug?
- CTA-Genauigkeit: Passt der Button zum echten Ziel?
- Visuelle Hierarchie: Führt die Seite Aufmerksamkeit in der richtigen Reihenfolge?
- Abschnittsfluss: Unterstützen mittlere und untere Bereiche das Versprechen?
- Übergabereife: Ist die Seite bereit für Vorschau, Speichern, Kopieren oder Export?
Fazit
KI-generiertes HTML ist ein starker Ausgangspunkt, aber selten das fertige Asset. Die letzten 20 % verbinden Produktverständnis, Marketingurteil und visuelle Prüfung.
HtmlDrag schließt diese Lücke. Statt Nicht-Entwickler rohes HTML bearbeiten zu lassen, verwandelt es einen KI-Entwurf in eine visuelle Seite, die geprüft, angepasst, angesehen und übergeben werden kann.