Wie man mit AI eine SaaS-Landingpage erstellt

Bevor du einen Builder öffnest, schreibe auf, welche Aufgabe die Seite erfüllen soll.

Für die meisten SaaS-Landingpages bedeutet das:

• für wen das Produkt gedacht ist
• welches Hauptproblem es löst
• welche eine Aktion du von Besucherinnen und Besuchern erwartest
• welche Belege oder Vertrauenssignale du ehrlich zeigen kannst
• ob du am ersten Tag bereits Login oder Zahlungen brauchst

Eine einfache Landingpage enthält normalerweise:

• Hero-Bereich mit Headline, Unterzeile und primärem Call-to-Action
• Feature-Grid
• Bereich „So funktioniert’s“ oder Workflow
• Preisübersicht oder Plan-Teaser
• FAQ
• abschließenden Call-to-Action

Lege auch fest, was passieren soll, wenn jemand auf den Hauptbutton klickt. Wenn das Ziel Demo-Anfragen oder Waitlist-Anmeldungen sind, reicht vielleicht ein Formular. Wenn du direkt verkaufen willst, brauchst du möglicherweise Stripe Checkout. Wenn Nutzer Konten erstellen sollen, kann Supabase für Login und Daten nötig sein.

Dieser Schritt ist wichtig, weil AI-Builder besser arbeiten, wenn der Rahmen klar ist. Wenn du nur nach „einer SaaS-Website“ fragst, ohne Zielgruppe, Angebot oder Seitenstruktur zu nennen, bekommst du oft generische Copy und ein vages Layout.

In Moremade beschreibst du die Website in normaler Sprache, und der AI-Agent schreibt den Quellcode. Für Websites ist das echter React- und Tailwind-Code, den du später per Chat, visuellem Inspector oder Code-Ansicht anpassen kannst.

Dein erster Prompt sollte Folgendes abdecken:

• Produkttyp
• Zielgruppe
• benötigte Abschnitte
• Tonalität der Copy
• visuelle Richtung
• primärer Call-to-Action
• Einschränkungen wie etwa „keine erfundenen Testimonials“

Hier ist ein solider Start-Prompt:

Erstelle eine SaaS-Landingpage für ein Produkt namens SignalNote, ein AI-Meeting-Notizen-Tool für kleine Vertriebsteams. Verwende einen sauberen B2B-Stil mit weißem Hintergrund, dunklem Text und einer Akzentfarbe. Füge einen Hero-Bereich mit Headline, kurzer unterstützender Copy und einem „Start free“-Button hinzu, danach einen Feature-Bereich, einen dreistufigen „How it works“-Bereich, einfache Pricing-Karten für Free und Pro, ein FAQ und einen finalen CTA. Schreibe knappe Copy für Teamleitungen. Erfinde keine Kundenlogos oder Bewertungen. Mache das Layout responsiv und baue es in React mit Tailwind.

Das reicht, um eine erste Version zu erzeugen, ohne jedes Detail zu überfrachteten.

Moremade zeigt eine Live-Vorschau, und dort beginnt die eigentliche Arbeit. Versuche nicht, alles schon in der ersten Anfrage perfekt zu machen. Starte breit und schärfe dann die Schwachstellen nach.

Prüfe in der ersten Vorschau diese Punkte:

• Ist das Wertversprechen im ersten Bildschirm klar?
• Gibt es eine einzige, offensichtliche Hauptaktion?
• Erscheinen die Abschnitte in einer sinnvollen Reihenfolge?
• Klingt die Copy spezifisch genug für die Zielgruppe?
• Sind Abstände, Kontraste und Button-Stile konsistent?

Gib danach gezielte Folgeanweisungen statt eines kompletten Rewrites. Zum Beispiel:

• „Schreibe den Hero so um, dass er sich an Sales-Manager richtet, nicht an einzelne Nutzer. Mach die Headline kürzer und konkreter.“
• „Reduziere den Feature-Bereich von sechs Karten auf drei und füge unter jeder Karte einen Satz hinzu, der den praktischen Nutzen erklärt.“
• „Ändere den Pricing-Bereich so, dass der Free-Plan zuerst angezeigt wird, der Pro-Plan danach hervorgehoben wird, und füge unter den Buttons einen kurzen Hinweis hinzu, was nach der Anmeldung passiert.“

Spezifische Änderungen liefern meist bessere Ergebnisse als allgemeine Kommentare wie „mach es besser“ oder „mach es ansprechender“. Wenn ein Element falsch ist, nutze den visuellen Inspector, um es direkt auszuwählen und die Änderung präzise anzufordern.

Eine Landingpage braucht nicht immer Backend-Funktionen. Wenn die Seite nur Interesse validieren soll, halte sie einfach.

Nutze Supabase, wenn du brauchst:

• E-Mail-Erfassung, die in einer Datenbank gespeichert wird
• Benutzerkonten und Login
• Dateispeicher oder einfache App-Daten hinter der Seite

Nutze Stripe, wenn du brauchst:

• einen Checkout-Flow direkt von der Landingpage aus
• Preise, die du für einen oder mehrere Pläne festgelegt hast

Moremade hat integrierte Verbindungen für Supabase und Stripe. Das bedeutet, dass du diese Ergänzungen in normaler Sprache anfordern kannst, statt alles manuell von Grund auf zu verdrahten.

Beispiele:

• „Füge ein Waitlist-Formular hinzu, das auf Supabase basiert, mit Feldern für geschäftliche E-Mail und Teamgröße. Zeige nach dem Absenden eine Erfolgsmeldung.“
• „Füge Stripe-Checkout-Buttons zu den Pricing-Karten mit den von mir festgelegten Preisen für Free und Pro hinzu und lasse den Rest der Seite unverändert.“

Wenn du Login oder Billing noch nicht brauchst, lass sie weg. Eine gute erste Landingpage braucht oft nur klare Copy, einen Call-to-Action und eine Möglichkeit, Interesse zu messen.

Eine SaaS-Landingpage sieht auf dem Desktop oft erst einmal in Ordnung aus, bevor auf dem Handy die kleinen Probleme sichtbar werden. Prüfe das mobile Layout sorgfältig.

Achte auf:

• schlecht umbrechende Headlines
• Buttons, die zu schmal sind oder zu eng beieinander liegen
• Pricing-Karten, die über den Bildschirm hinauslaufen
• Feature-Grids, die zu langen, schwer erfassbaren Stapeln werden
• zu viel vertikalen Abstand zwischen den Abschnitten

Bitte um konkrete Korrekturen. Zum Beispiel:

• „Reduziere auf Mobile die Größe der Hero-Headline um eine Stufe und lasse den CTA-Button die volle Breite einnehmen.“
• „Staple die Pricing-Karten auf kleinen Bildschirmen vertikal und kürze den Feature-Bullet-Text, damit jede Karte schneller erfassbar ist.“
• „Verringere auf Mobile den oberen und unteren Innenabstand über alle Abschnitte hinweg.“

Teste außerdem, ob die Hauptaktion auf kleineren Bildschirmen früh genug sichtbar bleibt. Wenn ein Besucher erst durch eine große Illustration scrollen muss, bevor er das Angebot versteht, solltest du den Hero überarbeiten.

Sobald die Seite brauchbar ist, veröffentliche sie. Moremade kann mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain live gehen. Wenn du einen kostenpflichtigen Plan hast, kannst du eine eigene Domain verbinden. Domains lassen sich auch direkt in Moremade kaufen.

Ein sinnvoller Ablauf ist:

• zuerst auf der kostenlosen Subdomain veröffentlichen
• die Live-Version auf echten Geräten prüfen
• letzte Layout- oder Copy-Probleme beheben
• die eigene Domain verbinden, nachdem die Seite stabil ist

Da das Projekt echter React- + Tailwind-Code ist, kannst du den vollständigen Quellcode jederzeit auch als ZIP exportieren oder zu GitHub pushen. Das ist praktisch, wenn du den Code später an Entwickler weitergeben, das Hosting wechseln oder die Seite in eine größere Produktwebsite integrieren möchtest.

Das häufigste Problem ist, der AI zu früh zu viel zuzumuten. Eine Landingpage funktioniert besser, wenn du mit einer Zielgruppe, einem Angebot und einer Aktion startest.

Weitere Fehler:

• Vage Prompts. „Erstelle mir eine moderne SaaS-Website“ liefert schwache Ergebnisse. Nenne Zielgruppe, Abschnitte und Tonalität.
• Zu viele Calls to Action. Wenn die Seite Besucher gleichzeitig zum Teststart, zur Demo-Buchung, zum Lesen der Docs, zum Newsletter-Abo und zum Video schauen auffordert, wird die Conversion meist unklar.
• Zahlungen zu früh einbauen. Verknüpfe Stripe nicht mit einer Seite, deren Botschaft noch unklar ist.
• Falsche Belege verwenden. Füge keine erfundenen Testimonials, Logos oder Nutzungszahlen hinzu.
• Mobile ignorieren. Viele erste Entwürfe brauchen auf kleineren Bildschirmen Anpassungen bei Abständen und Hierarchie.
• Neu aufbauen statt bearbeiten. Wenn 80 Prozent passt, fordere gezielte Änderungen an, statt die ganze Seite neu generieren zu lassen.

Wenn du den Umfang klein hältst und in kleinen Schritten iterierst, ist AI sehr nützlich, um schnell eine solide erste Version zu bekommen, ohne dich an ein proprietäres Ergebnis zu binden.