Plane deine Landingpage mit ChatGPT, setze sie möglichst credit-sparend mit der kostenlosen Version von Lovable um und optimiere sie nach dem Workflow aus unserem SMD-Sondertutorium Schritt für Schritt. Eine Landingpage ist keine kleine Unternehmenswebsite. Sie führt eine klar definierte Zielgruppe zu einer möglichst eindeutigen Handlung. Bevor du ChatGPT oder Lovable nutzt, musst du deshalb entscheiden, welche Aufgabe die Seite tatsächlich erfüllen soll. Ein Conversion-Ziel ist die wichtigste Handlung, die ein Besucher ausführen soll, zum Beispiel Beratung buchen, Anfrage senden, Demo anfordern oder Produkt kaufen. Wenn fünf Handlungen gleich wichtig aussehen, entsteht keine Wahlfreiheit, sondern Unklarheit. Eine gute Landingpage macht deshalb schon im Hero deutlich: Was ist das Angebot, für wen ist es und was soll als Nächstes passieren? Eine Landingpage ist auf eine konkrete Entscheidungssituation zugeschnitten. Navigation, Inhalte und CTAs werden danach beurteilt, ob sie diese Entscheidung erleichtern. Ein sekundärer Link darf existieren, sollte visuell aber nicht mit dem Haupt-CTA konkurrieren. Definiere vorab, woran du Erfolg erkennst: z. B. abgeschicktes Formular, Terminbuchung oder Kauf. Mehrere Buttons sind nicht automatisch falsch. Problematisch wird es, wenn mehrere Handlungen gleich wichtig inszeniert werden. „Kostenlose Erstberatung für deine neue Küche buchen“ – Zielgruppe, Nutzen und nächste Handlung sind klar. „Willkommen bei uns – entdecken Sie unsere Welt“ – klingt freundlich, sagt aber weder, was angeboten wird, noch was der Nutzer tun soll. Formuliere in einem Satz: Für wen ist deine Landingpage, welches konkrete Angebot steht im Mittelpunkt und welche eine Handlung soll der Besucher idealerweise ausführen? KI kann nur dann überzeugende Inhalte entwickeln, wenn die strategische Grundlage stimmt. „Für alle“ ist keine Zielgruppe und eine Leistungsbeschreibung ist noch kein Nutzenversprechen. Menschen kaufen nicht die Liste deiner Leistungen, sondern eine erwartete Verbesserung ihrer Situation. Aus „individuelle Beratung“ wird erst dann ein Nutzen, wenn klar wird, was sie dadurch gewinnen. Gute Nutzenargumente verbinden deshalb Merkmal, Wirkung und Relevanz für die Zielgruppe. Beruf, Alter oder Branche reichen selten. Relevanter sind Auslöser, Problem, Wissensstand, gewünschtes Ergebnis und Entscheidungshürden. Frage bei jedem Merkmal: „Was verändert sich dadurch konkret für den Kunden?“ Erst die Antwort darauf ist ein Nutzenargument. Eine starke Value Proposition verbindet Zielgruppe, relevantes Ergebnis und nachvollziehbaren Unterschied – ohne unbelegte Superlative. „Innovativ“, „individuell“ und „ganzheitlich“ klingen positiv, ersetzen aber keine konkrete Wirkung. „Du bekommst einen klaren Kampagnenplan, damit du nicht länger Budget in unstrukturierte Tests steckst.“ „Wir bieten individuelle, innovative und ganzheitliche Lösungen.“ – austauschbar und ohne überprüfbaren Nutzen. Notiere das Hauptproblem, das gewünschte Ergebnis, drei relevante Einwände und drei konkrete Nutzenargumente deiner Zielgruppe. Der Workflow aus dem SMD-Sondertutorium startet nicht mit Lovable, sondern mit der Analyse des vorhandenen Materials. Dadurch wird aus losem Input ein belastbares Briefing. Lade vorhandene PDFs, Präsentationen, Texte oder Briefings zuerst in ChatGPT. Die KI soll in diesem Schritt ausdrücklich noch keine Website bauen. Das verhindert, dass Analyse und Gestaltung vermischt werden. Besonders wichtig: Nicht belegte Unternehmensdaten, Referenzen, Zertifikate, Mitarbeiterzahlen, Adressen oder Leistungen dürfen nicht erfunden werden. Im ersten Schritt soll ChatGPT ordnen und Lücken markieren – noch keine fertigen Website-Texte oder Designideen produzieren. Trenne belegte Fakten, plausible Interpretation und fehlende Information. Nur so erkennst du später Halluzinationen. Die bestätigte Analyse wird zum Referenzpunkt für alle späteren Prompts und Reviews. Ein professionell klingender KI-Satz ist kein Beleg. Unternehmensbehauptungen müssen aus dem Material stammen oder als offen markiert bleiben. Fehlendes Gründungsjahr wird als „[Gründungsjahr ergänzen]“ markiert. ChatGPT ergänzt ein plausibel klingendes Gründungsjahr oder erfindet Kundenstimmen, damit die Seite vollständiger wirkt. Lade dein vorhandenes Material hoch und erstelle daraus eine strukturierte Analyse. Prüfe anschließend jeden Punkt gegen die Originalunterlagen. Jetzt wird aus Strategie und Material eine Dramaturgie. Die Reihenfolge der Sektionen soll Fragen beantworten, Einwände abbauen und den Nutzer Schritt für Schritt zum CTA führen. Eine sinnvolle Grundlogik kann lauten: Hero → Problem/Relevanz → Lösung → konkrete Vorteile → So funktioniert es → Vertrauen → FAQ → Abschluss-CTA. Das ist kein starres Template. Die Reihenfolge muss zum Angebot und zur Entscheidungssituation passen. Bei erklärungsbedürftigen Angeboten braucht der Nutzer mehr Kontext als bei einer einfachen Event-Anmeldung. Ordne Inhalte danach, wann der Nutzer sie für seine Entscheidung braucht – nicht danach, welche Sektion optisch attraktiv aussieht. Eine Sektion sollte z. B. Relevanz herstellen, Nutzen erklären, Vertrauen schaffen, einen Einwand lösen oder zur Handlung führen. Der gleiche Haupt-CTA kann mehrfach erscheinen, wenn der Nutzer an diesen Stellen genügend Information für den nächsten Schritt hat. Eine lange Seite ist nicht automatisch schlecht. Unnötige oder falsch priorisierte Inhalte sind das eigentliche Problem. Nach dem Hero folgt direkt der wichtigste Nutzen und danach ein nachvollziehbarer Ablauf, bevor ein stärkerer CTA wiederholt wird. Direkt nach dem Hero folgen zehn gleich gewichtete Karten, mehrere Themen und drei verschiedene CTA-Ziele. Fiktives Lernbeispiel. Achte auf die Reihenfolge: Relevanz herstellen → Nutzen erklären → Vertrauen aufbauen → Ablauf verständlich machen → Handlung erneut anbieten. Erstelle deine Seitenstruktur mit 6–9 Sektionen. Schreibe hinter jede Sektion in einem Satz, welche Frage des Nutzers sie beantworten soll. Der Hero muss nicht alles erklären. Er muss schnell Orientierung schaffen und den nächsten Schritt verständlich machen. Genau deshalb gehören Headline, Subheadline und CTA zusammen gedacht. Eine gute Headline erzeugt nicht künstlich Spannung, sondern Klarheit. Die Subheadline ergänzt die wichtigsten Bedingungen oder den Mechanismus. Der CTA beschreibt möglichst konkret, was nach dem Klick passiert. „Mehr erfahren“ ist nicht grundsätzlich falsch, aber häufig schwächer als eine handlungsnahe Formulierung. Bewährt ist: optionaler Eyebrow → klare H1 → erklärende Subheadline → primärer CTA → optionales Trust-Signal → unterstützendes Visual. Die H1 transportiert die Hauptbotschaft. Die Subheadline konkretisiert Zielgruppe, Mechanismus oder Rahmenbedingungen. „Beratung buchen“ oder „Kostenloses Erstgespräch sichern“ erzeugt mehr Erwartungsklarheit als ein abstraktes „Starten“. Auf kleinen Screens muss die Kernbotschaft schnell erfassbar bleiben. Nicht jedes Desktop-Element gehört vor den ersten Scroll. Versuche nicht, jede Leistung im Hero unterzubringen. Überladung schwächt die wichtigste Botschaft. Headline: „Mehr qualifizierte Anfragen mit einer Landingpage, die Nutzer führt.“ CTA: „Landingpage planen“ Headline: „Zukunft neu gedacht.“ CTA: „Los geht’s“ – emotional, aber ohne konkreten Inhalt. Achte auf drei Dinge: klare Zielgruppe, konkreter Nutzen und genau eine dominante nächste Handlung. Schreibe drei Hero-Varianten. Teste jede Variante mit den Fragen: Was? Für wen? Welcher Nutzen? Was soll ich tun? Vertrauen entsteht nicht durch möglichst viele Logos oder Sterne, sondern durch relevante und belegbare Signale. KI darf fehlenden Social Proof niemals kreativ ergänzen. Je höher Risiko, Preis oder Erklärungsbedarf, desto wichtiger werden Belege. Geeignet können echte Referenzen, nachvollziehbare Prozesse, konkrete Ergebnisse, Zertifikate oder transparente FAQs sein – aber nur, wenn sie tatsächlich vorhanden und belegbar sind. Fehlende Belege werden nicht erfunden. Je größer das Versprechen oder Risiko, desto stärker muss der Beleg sein: echte Zahlen, nachvollziehbare Prozesse, Referenzen oder konkrete Erfahrungen. Preis, Aufwand, Zeit, Risiko oder Unsicherheit verschwinden nicht, wenn man sie ignoriert. Gute Seiten beantworten relevante Einwände gezielt. Echte Testimonials sind stärker, wenn Person, Kontext und konkretes Ergebnis nachvollziehbar sind. Erfundene Testimonials, Logos oder Kennzahlen sind keine Platzhalter, sondern irreführende Inhalte und dürfen nicht als echte Belege erscheinen. „100 Google-Bewertungen“ nur dann verwenden, wenn Zahl und Quelle aktuell geprüft wurden. „Über 500 zufriedene Kunden“ als KI-generierte Vertrauenszahl ohne Quelle. Auch dieses Beispiel ist vollständig fiktiv. Prüfe, wie die Seite erst das Ergebnis verspricht, dann Substanz liefert und typische Entscheidungshürden vor dem CTA reduziert. Liste die fünf stärksten Einwände deiner Zielgruppe auf und ordne jedem Einwand ein belegbares Vertrauenselement oder eine ehrliche Antwort zu. „Modern und hochwertig“ reicht als Designbriefing nicht. Lovable braucht konkrete Leitplanken für Farben, Typografie, Abstände, Karten, Buttons, Bildstil und mobile Darstellung. Das Sondertutorium erlaubt KI-generierte Bilder ausdrücklich als visuelle Platzhalter für Prototypen. Sie sollen stilistisch einheitlich und später leicht durch reale Fotos ersetzbar sein. Für den Live-Einsatz müssen Bildrechte, Authentizität und tatsächliche Eignung separat geprüft werden. Definiere Farben, Typografie, Abstände, Radien, Buttonlogik und Bildstil so konkret, dass Entscheidungen reproduzierbar werden. Visuals sollen Angebot, Anwendung oder gewünschte Wirkung unterstützen – nicht nur freie Fläche füllen. Ein Designbriefing sollte Desktop und Mobile gemeinsam denken: Prioritäten, Reihenfolge und Lesbarkeit können sich verändern. „Modern, clean und hochwertig“ ist zu unspezifisch. Ohne konkrete Regeln interpretiert jedes Tool diese Begriffe anders. „Großzügige Abstände, klare Typohierarchie, wenige Karten, fotorealistische Detailaufnahmen mit natürlichem Licht.“ „Mach es modern, cool und premium.“ – zu offen, dadurch wird das Ergebnis schnell generisch. Definiere Farbwelt, Typografie, UI-Stil, Abstände, Button-Stil, Bildsprache und drei Dinge, die das Design ausdrücklich nicht tun soll. Bevor du baust, entscheide, welche Rolle Lovable in deinem Projekt spielt. Im Sondertutorium wurde Lovable unter anderem als schnelle Design- und Prototyping-Grundlage genutzt und eine spätere Umsetzung in WordPress/Elementor mitgedacht. Für einen Prototypen zählen Geschwindigkeit, Struktur und visuelle Richtung. Für eine echte Live-Seite kommen zusätzlich Datenschutz, Formulare, Tracking, Hosting, Integrationen und Wartbarkeit hinzu. Wenn du später in WordPress nachbaust, sollte Lovable keine unnötig komplexen Interaktionen erzeugen, die dein Zielsystem nur schwer abbilden kann. Ein Prototyp kann Struktur, Design und Nutzerführung testen, ohne dass Formulare, Tracking oder Backend bereits produktiv angebunden sind. Entscheide, ob Lovable Endsystem oder Entwurfswerkzeug ist. Im Sondertutorium wurde es auch als Vorlage für den Nachbau in WordPress/Elementor genutzt. Eine visuell fertige Oberfläche sagt nichts darüber aus, ob Datenflüsse, E-Mails oder Integrationen produktiv funktionieren. Verwechsle „sieht fertig aus“ nicht mit „ist technisch und rechtlich produktionsbereit“. „Erstelle einen Prototypen, dessen Sektionen und Komponenten sich mit WordPress/Elementor sauber nachbauen lassen.“ Komplexe App-Logik bauen lassen, obwohl am Ende nur ein einfacher WordPress-Onepager benötigt wird. Entscheide dich für einen Modus: Prototyp, direkt nutzbare Landingpage oder Vorlage für WordPress. Notiere daraus drei technische Konsequenzen. Jetzt wird die Vorarbeit in einen direkt einsetzbaren Startprompt übersetzt. Der zentrale Grundsatz aus dem Tutorium: erst ein kontrollierbares Grundgerüst erstellen, danach iterativ verbessern – nicht alles in einen riesigen Prompt packen. Ein guter Startprompt enthält nicht einfach möglichst viel Text. Er gibt Lovable klare Prioritäten und Grenzen. Bei größeren Websites empfiehlt der Tutoriums-Workflow zunächst die Startseite bzw. Basisstruktur und ergänzt Unterseiten anschließend einzeln. So bleiben Änderungen kontrollierbarer. Viele unsortierte Wünsche erhöhen Interpretationsspielraum und erschweren spätere Fehlerdiagnose. Ein guter Startprompt ist umfangreich, aber strukturiert. Kontext → Zielgruppe → Conversion-Ziel → Seitenstruktur → Inhalte → Designsystem → responsive Anforderungen → Constraints → gewünschter Output. Formuliere ausdrücklich, was nicht erfunden, verändert oder ergänzt werden darf. Der Prompt übersetzt das bestätigte Briefing in ausführbare Anweisungen – er ersetzt das Briefing nicht. Ein langer Prompt ist nicht automatisch gut. Entscheidend sind klare Prioritäten, widerspruchsfreie Anforderungen und ein begrenzter Scope. Erst Startseite vollständig umsetzen; Routen für spätere Unterseiten vorbereiten; Unterseiten noch nicht ausarbeiten. Startseite, fünf Unterseiten, Formularlogik, Datenbank, Tracking, Blog und Animationen gleichzeitig in einem Build verlangen. Lass ChatGPT aus deinem bestätigten Briefing einen Startprompt erstellen. Lies ihn anschließend vollständig und streiche alles, was nicht belegt oder für Version 1 nicht nötig ist. Die erste Version ist ein Arbeitsstand. Widerstehe dem Impuls, nach dem ersten Blick sofort zehn Einzeländerungen zu prompten. Erst ansehen, dann bewerten, dann priorisieren. Im Sondertutorium wurde am 31.07.2026 mit damaligen Credit-Modellen gearbeitet. Solche Limits ändern sich. Entscheidend ist der Arbeitsgrundsatz: Denke und strukturiere möglichst viel vor dem Build in ChatGPT und nutze Lovable für gezielte Umsetzungen statt für endlose Trial-and-Error-Schleifen. Der erste Build soll zeigen, wie gut Briefing und Prompt verstanden wurden. Er muss noch nicht pixelperfekt sein. Sammle Auffälligkeiten über die gesamte Seite, bevor du einzelne Korrekturen anstößt. Halte wichtige Zustände fest, damit du Vorher/Nachher und Desktop/Mobile konkret vergleichen kannst. Mikroänderungen direkt nach dem ersten Eindruck verbrauchen Iterationen, bevor du weißt, welche Probleme wirklich wichtig sind. Erste Version bauen → Desktop und Mobile ansehen → Screenshots erstellen → Probleme sammeln → priorisiert korrigieren. Nach jedem kleinen visuellen Detail sofort einen neuen Lovable-Prompt senden. Erstelle Version 1. Mache Screenshots von Hero, Mittelteil, CTA/Footer und – wenn möglich – der mobilen Ansicht. Notiere zunächst nur Beobachtungen. Jetzt übernimmt ChatGPT die Rolle des kritischen Reviewers. Im Promptvorlagen-Dokument wird der erste Lovable-Entwurf anhand klarer Kriterien gegen Analyse und Briefing geprüft. Ein Review ist mehr als „gefällt mir / gefällt mir nicht“. Prüfe systematisch: Positionierung und Zielgruppe, Hero-Botschaft, Nutzerführung und CTA, visuelle Hierarchie, Abstände und Lesbarkeit, Bildsprache, Leistungen und Vertrauen, mobile Nutzbarkeit, SEO-Überschriften und unbelegte Inhalte. Erst danach wird ein Follow-up-Prompt gebaut. Klarheit: Versteht man Angebot und Zielgruppe? Relevanz: Trifft die Seite ein Problem? Hierarchie: Ist die Blickführung klar? Conversion: Ist die nächste Handlung eindeutig? Vertrauen: Sind Behauptungen belegt? Mobile: Funktioniert die Priorisierung auf kleinem Screen? Formuliere zuerst das konkrete Problem, dann seine Auswirkung und erst danach eine Änderung. Hohe Priorität haben Fehler, die Verständnis, Vertrauen, Bedienbarkeit oder Conversion blockieren. „Gefällt mir nicht“ ist keine verwertbare Diagnose. Benenne Element, Problem, Wirkung und gewünschtes Ergebnis. „Hohe Priorität: CTA im Hero ist visuell schwächer als die sekundäre Navigation und wird mobil erst nach dem Fold sichtbar.“ „Mach die Seite moderner und etwas schöner.“ – nicht messbar und nicht gezielt umsetzbar. Lade deine Screenshots in ChatGPT hoch und lass maximal zehn konkrete Verbesserungen priorisieren. Prüfe die Analyse selbst und streiche Punkte, die du nicht nachvollziehen kannst. Nach dem Review folgt ein begrenzter Korrekturdurchlauf. Gute Bereiche bleiben erhalten. Nur priorisierte Probleme werden verändert. Das Promptvorlagen-Dokument verlangt bewusst einen einzigen Follow-up-Prompt, der nur notwendige Verbesserungen beauftragt und nicht die gesamte Seite neu erstellt. Bei größeren Projekten werden Unterseiten anschließend einzeln im bestehenden Designsystem ergänzt. Ein Follow-up-Prompt benennt die zu ändernden Bereiche und schützt ausdrücklich alles, was bereits funktioniert. Korrigiere zuerst Botschaft, Hierarchie, CTA und Bedienbarkeit; dekorative Details kommen später. Nach jedem größeren Durchlauf kontrollierst du, ob das ursprüngliche Problem tatsächlich gelöst wurde und keine neue Schwäche entstanden ist. Mehr Änderungen pro Prompt bedeuten nicht automatisch mehr Fortschritt. Zu großer Scope macht Ursache und Wirkung unklar. „Behalte Header, Farbsystem und Leistungssektion unverändert. Überarbeite nur Hero, CTA-Kontrast und mobile Abstände.“ „Setze alles noch einmal neu auf, aber besser.“ – dadurch können bereits gelungene Teile verloren gehen. Wähle maximal fünf Änderungen mit der größten Wirkung und führe einen gezielten Korrekturdurchlauf durch. Vergleiche danach Vorher/Nachher. Eine hübsche Desktop-Vorschau ist noch keine fertige Landingpage. Vor Veröffentlichung folgt ein systematischer Qualitätscheck auf echten Geräten und über die wichtigsten technischen Grundlagen. Prüfe mindestens Desktop und Smartphone. SEO beginnt hier mit sauberer Struktur: aussagekräftiger Seitentitel, passende Meta Description, eine klare Hauptüberschrift (H1) und logisch gegliederte H2/H3. Prüfe außerdem semantische Struktur, Tastaturbedienung, sichtbaren Fokus, verständliche Link- und Buttontexte, Formular-Labels und Fehlermeldungen, ausreichende Kontraste sowie Alt-Texte für inhaltlich relevante Bilder. Dekorative Bilder brauchen dagegen keinen beschreibenden Alt-Text. Ein automatischer Check ersetzt nicht den manuellen Test. Prüfe Reihenfolge, Textlänge, Touchflächen, Sticky-Elemente, Formulare und tatsächliche Sichtbarkeit wichtiger CTAs auf einem echten Gerät. Seitentitel, Meta Description, klare H1 und logische H2/H3 helfen Suchmaschinen und Nutzern, Inhalt und Hierarchie zu verstehen. Navigiere per Tastatur, prüfe sichtbaren Fokus, Labels, Fehlermeldungen, Kontraste, Linktexte und sinnvolle Alt-Texte. Klicke Links und Buttons, sende Testformulare und prüfe, was danach tatsächlich passiert. Ein automatisches Audit kann Hinweise liefern, ersetzt aber weder echte Geräte noch Tastatur- und Funktionstests. CTA ist mobil gut erreichbar, Text bricht sauber um, keine horizontale Scrollbar, Überschriften folgen einer logischen Hierarchie. Desktop sieht gut aus, mobil überlappt der Hero und Buttons sind nur schwer antippbar. Führe einen vollständigen Desktop- und Smartphone-Check durch. Teste Navigation, CTAs, Formulare und Interaktionen zusätzlich per Tastatur. Kontrolliere Überschriftenstruktur, sichtbaren Fokus, Kontraste, Formular-Labels, Fehlermeldungen, Linktexte, sinnvolle Alt-Texte und offene Platzhalter. Vor dem echten Live-Einsatz müssen nicht nur Gestaltung und Texte stimmen. Formulare, Datenschutz, Tracking, technische Integrationen und verwendete Bilder brauchen eine bewusste Freigabe. Die Promptvorlagen weisen ausdrücklich darauf hin, dass Formularübermittlung, Datenspeicherung und E-Mail-Benachrichtigung technisch angebunden werden müssen, wenn sie im Prototyp nur als Oberfläche gebaut wurden. Kläre vor dem Livegang außerdem: Welche personenbezogenen Daten werden erhoben? Wohin werden sie übertragen oder gespeichert? Welche Drittanbieter und Tracking-Technologien werden geladen? Sind erforderliche Einwilligungen, Datenschutzhinweise und Anbieterinformationen vorhanden? Diese Lernstrecke ist keine rechtliche DSGVO-Prüfung und kann keine Rechtsberatung ersetzen. Nutze eine kontrollierte Vorschau oder Staging-Phase, bevor Kampagnen-Traffic auf die Seite geschickt wird. Dokumentiere, welche personenbezogenen Daten erhoben werden, wohin sie übertragen werden und welche Drittanbieter beteiligt sind. Eine unbeteiligte Person soll nach kurzer Betrachtung Angebot, Zielgruppe und nächsten Schritt wiedergeben können. Beobachte reale Nutzung und Conversion-Daten. Erst echte Nutzung zeigt, welche Hypothesen aus der Konzeption tragen. Eine technische Checkliste ist keine Rechtsberatung und bestätigt keine DSGVO-Konformität. Nach Veröffentlichung werden alle CTAs, Formulare und Links real getestet; eine andere Person macht anschließend den 5-Sekunden-Test. Die Vorschau sieht fertig aus, deshalb wird ohne Formular- oder Datenschutzprüfung live geschaltet. Veröffentliche deine Seite zunächst kontrolliert. Teste alle wichtigen Interaktionen. Zeige sie dann einer anderen Person fünf Sekunden und frage: Was wird angeboten? Für wen? Was soll ich als Nächstes tun? Erstelle eine vollständige Landingpage für ein reales oder fiktives Angebot und dokumentiere deinen Weg vom Briefing bis zum finalen Qualitätscheck. Deine Seite muss die folgenden Kriterien erfüllen: Beantworte die acht Praxissituationen. Du kannst den Check beliebig oft wiederholen. Du kannst jetzt eine Landingpage strategisch planen, vorhandenes Material mit ChatGPT analysieren, ein belastbares Briefing entwickeln, Lovable gezielt einsetzen, KI-Ergebnisse kritisch überprüfen und die Seite iterativ optimieren. Zeige deine Landingpage einer anderen Person nur fünf Sekunden. Danach soll sie drei Fragen beantworten: Was wird angeboten? Für wen ist es? Was soll ich als Nächstes tun? In unseren Weiterbildungen arbeitest du praxisnah mit aktuellen Tools, echten Aufgaben und modernen KI-Workflows. Deine erste Landingpage mit KI
Landingpage verstehen: ein Ziel statt alles gleichzeitig
Fokus statt Funktionssammlung
Primär und sekundär unterscheiden
Messbar denken
Das lernst du
Ich plane eine Landingpage. Hilf mir, genau ein primäres Conversion-Ziel festzulegen. Frage mich nach Angebot, Zielgruppe, Ausgangsproblem, gewünschtem Ergebnis und geschäftlichem Ziel. Schlage danach drei mögliche Formulierungen für das Hauptziel vor und erkläre knapp die Unterschiede. Erfinde keine Informationen.
Zielgruppe, Angebot und Nutzenversprechen schärfen
Zielgruppe über Situation beschreiben
Vom Merkmal zur Wirkung
Value Proposition verdichten
Das lernst du
Analysiere mein Angebot aus Sicht der Zielgruppe. Trenne sauber zwischen 1. Ausgangsproblem, 2. gewünschtem Ergebnis, 3. Einwänden, 4. Leistungsmerkmalen und 5. daraus entstehendem Kundennutzen. Formuliere anschließend eine prägnante Value Proposition. Nutze nur meine Angaben und markiere Annahmen ausdrücklich.
Projektmaterial mit ChatGPT analysieren
Analyse und Gestaltung trennen
Quellenstatus sichtbar halten
Briefing als Kontrollinstanz
Das lernst du
Analysiere ausschließlich die von mir bereitgestellten Projektunterlagen. Arbeite heraus: 1. Unternehmen/Angebot und Positionierung, 2. Leistungen, 3. Zielgruppen, 4. Ziel der Landingpage, 5. Kernbotschaften und Alleinstellungsmerkmale, 6. Tonalität, 7. Design- und Stilvorgaben, 8. benötigte Inhalte/Sektionen, 9. Funktionen und Call-to-Actions, 10. fehlende oder unklare Informationen. Erfinde keine Unternehmensdaten, Referenzen, Zertifikate, Mitarbeiterzahlen, Adressen oder Leistungen. Kennzeichne fehlende Informationen eindeutig als Platzhalter. Gib zunächst nur die Analyse aus.
Seitenstruktur und Nutzerführung planen
Informationshierarchie vor Layout
Jede Sektion braucht einen Job
CTA-Wiederholung mit Kontext
Das lernst du
Entwickle aus meinem bestätigten Briefing eine klare Landingpage-Struktur. Priorisiere Verständlichkeit, Conversion und logische Nutzerführung. Gib für jede Sektion an: Ziel der Sektion, Kernbotschaft, benötigte Inhalte und sinnvoller CTA. Begründe die Reihenfolge knapp. Vermeide unnötige Sektionen und erfinde keine Inhalte.
Hero und CTA: die ersten fünf Sekunden
Anatomie eines klaren Heros
Headline und Subheadline teilen die Arbeit
CTA beschreibt den nächsten Schritt
Above the fold priorisieren
Das lernst du
Erstelle drei unterschiedliche Hero-Varianten für meine Landingpage. Jede Variante braucht Headline, Subheadline, primären CTA und optional einen kurzen Vertrauenshinweis. Formuliere konkret, nutzenorientiert und ohne leere Marketingphrasen. Verwende ausschließlich bestätigte Informationen. Erkläre nach jeder Variante in einem Satz, welche kommunikative Richtung sie verfolgt.
Vertrauen, Einwände und Social Proof
Vertrauen passend zur Behauptung
Einwände explizit bearbeiten
Social Proof braucht Substanz
Das lernst du
Erstelle aus meinem Briefing eine Einwand-Matrix. Spalten: Einwand, zugrunde liegende Sorge, passende Antwort, möglicher Beleg/Vertrauenselement, noch fehlende Information. Verwende nur belegte Informationen. Erfinde keine Bewertungen, Referenzen, Zahlen, Zertifikate oder Ergebnisse.
Designbriefing und Bildsprache definieren
Designsystem statt Adjektivliste
Bildsprache hat eine Funktion
Responsive von Anfang an
Das lernst du
Formuliere aus meinen Designangaben ein präzises UI- und Bildbriefing für Lovable. Beschreibe Farben, Typografie, visuelle Hierarchie, Abstände, Karten, Buttons, Bildsprache, Desktop- und Mobile-Verhalten sowie ausdrücklich unerwünschte Stilrichtungen. KI-Bilder dürfen nur als klar austauschbare Prototyp-Platzhalter vorgesehen werden.
Lovable richtig einordnen: Prototyp oder Live-Seite?
Prototyp bewusst definieren
Produktionsweg vorher klären
Toolgrenzen mitdenken
Das lernst du
Ich möchte Lovable als Grundlage für eine spätere Umsetzung in WordPress/Elementor nutzen. Formuliere Anforderungen so, dass Struktur, Sektionen, Komponenten und responsive Verhalten sauber nachbaubar bleiben. Vermeide unnötig komplexe Interaktionen oder technische Abhängigkeiten, sofern sie für die Landingpage nicht erforderlich sind.
Den Lovable-Startprompt mit ChatGPT bauen
Warum Megaprompts scheitern können
Bausteine eines guten Startprompts
Constraints schützen die Qualität
Prompt Engineering ist Übersetzungsarbeit
Das lernst du
Erstelle auf Grundlage unserer bestätigten Analyse einen vollständigen, präzisen und direkt in Lovable einsetzbaren Startprompt. Definiere Positionierung, Zielgruppe, Hauptziel, Nutzerführung, Tonalität, Designrichtung, Farben, Typografie, Seitenstruktur, Inhalte der Sektionen, Navigation, Call-to-Actions, mobile Darstellung, SEO-freundliche Überschriftenstruktur sowie technische und gestalterische Anforderungen. Erfinde keine Kundenbewertungen, Referenzen, Auszeichnungen, Zahlen oder Unternehmensdaten. Fehlende Informationen bleiben als eindeutige Platzhalter. Lovable soll zunächst ausschließlich die Landingpage bzw. Startseite vollständig umsetzen. Gib nur den fertigen Prompt aus.
Erste Version in Lovable erstellen – ohne Aktionismus
Version 1 ist ein Diagnoseobjekt
Erst beobachten, dann verändern
Screenshots schaffen Vergleichbarkeit
Das lernst du
Lovable-Output mit Screenshots kritisch bewerten
Sechs Review-Linsen
Beobachtung vor Lösung
Priorität nach Wirkung
Das lernst du
Analysiere die beigefügten Screenshots meines ersten Lovable-Entwurfs kritisch und vergleiche sie mit unserem bestätigten Briefing. Prüfe: 1. Positionierung/Zielgruppe, 2. Hero-Botschaft, 3. Nutzerführung/CTAs, 4. visuelle Hierarchie/Abstände/Lesbarkeit, 5. Bildsprache, 6. Leistungen/Vertrauen, 7. mobile Nutzbarkeit soweit erkennbar, 8. SEO-Überschriftenstruktur, 9. erfundene oder unbelegte Inhalte, 10. Gesamtwirkung. Gib zuerst maximal zehn konkrete Verbesserungspunkte, geordnet nach hoher, mittlerer und niedriger Priorität.
Gezielt iterieren statt neu bauen
Iteration braucht Grenzen
Wirkung vor Kosmetik
Vorher/Nachher prüfen
Das lernst du
Erstelle aus der priorisierten Analyse einen einzigen direkt in Lovable einsetzbaren Follow-up-Prompt. Beauftrage nur die notwendigen Verbesserungen und nicht die gesamte Landingpage neu. Nenne konkret, was angepasst werden soll und welche gelungenen Bereiche, Strukturen und Designentscheidungen ausdrücklich unverändert bleiben. Gib ausschließlich den fertigen Follow-up-Prompt aus.
Mobile, SEO, Barrierearmut und Technik prüfen
Mobile ist eine eigene Nutzungssituation
SEO-Struktur schafft Orientierung
Barrierearmut praktisch testen
Technik funktional testen
Das lernst du
Prüfe das aktuelle Lovable-Projekt auf technische, gestalterische und inhaltliche Fehler. Korrigiere ausschließlich: nicht funktionierende Links und Buttons, fehlerhafte mobile Darstellung, horizontales Scrollen, uneinheitliche Abstände, schlechte Kontraste, inkonsistente Überschriften, erfundene Inhalte, nicht gekennzeichnete Platzhalter, fehlende Alt-Texte sowie inkonsistente Sprache. Behalte das bestehende Design und gelungene Inhalte bei. Nimm keine vollständige Neugestaltung vor.
Veröffentlichen, Datenschutzpunkte klären und 5-Sekunden-Test
Livegang ist ein Prozess
Datenfluss verstehen
5-Sekunden-Test misst Klarheit
Nach Veröffentlichung weiterlernen
Das lernst du
Jetzt setzt du den kompletten Workflow selbst um.
Kannst du den Workflow wirklich anwenden?
Du hast den kompletten Landingpage-Workflow durchlaufen.
Marketing lernen, indem du Marketing machst.
Lektion 1 von 14
10 Min. Lernen + 10 Min. Praxis
Praxiswissen
Vertiefung
Typischer Fehler
So ist es klar
So eher nicht
Praxisaufgabe
SelbstcheckKann eine fremde Person nach fünf Sekunden sagen, was angeboten wird, für wen es gedacht ist und was sie als Nächstes tun soll?