21st.dev-Integration

Mit Lovable KI-Landingpages mit hoher Conversion-Rate erstellen

Die meisten KI-generierten Landingpages sehen gleich aus – vage Abschnitte, unpassende Farben und keine Persönlichkeit. Aber das muss nicht so sein.

Wir zeigen dir einen strukturierten Workflow mit Lovable und 21stdev, mit dem du Landingpages erstellst, die deine Kund:innen wirklich lieben (wie diese hier).

​

Schritt-für-Schritt-Anleitung

Von der Design-Inspiration bis zum letzten Feinschliff – hier ist die Schritt-für-Schritt-Anleitung, die er verwendet, um schnell zu entwickeln, ohne Abstriche bei der Qualität zu machen:

1. Beginne mit Designinspiration statt mit einer Eingabeaufforderung

   Bevor du auch nur ein Wort deiner Eingabeaufforderung schreibst, stöbere auf Dribbble oder Behance. Achte auf Designs mit:

   • Klarer Typografie und großzügigen Abständen
   • Klaren CTAs und minimalistischem Layout
   • Dezenten Interaktionen (nicht überdesignt)

   Such dir etwas aus, das du realistisch nachbauen kannst. Vermeide übermäßig komplexe 3D-Designs, wenn du sie nicht wirklich umsetzen willst.

   Ein echter Kunde hat nach einem „modernen und minimalistischen“ Design gefragt. Das war der visuelle Ausgangspunkt. Vermeide es, etwas auszuwählen, das du nicht liefern kannst.

2. Mit einem leeren Projekt starten

   Starte dein Lovable-Projekt, indem du eine Eingabeaufforderung eingibst:

   Starte mit einem komplett leeren Projekt. Wir fügen die Details anschließend hinzu.

3. WebP in PNG umwandeln und deinen Design-Screenshot vorbereiten 

   Sobald du dein Referenzdesign gefunden hast, lade es herunter. Wenn es im WebP-Format vorliegt, nutze einen Onlinekonverter, um es in PNG umzuwandeln, damit du es problemlos in Lovable- oder GPT-Workflows verwenden kannst.

   Empfohlene Tools: https://cloudconvert.com/webp-to-png

4. Verwandle deine Inspiration im Chat Mode in eine detaillierte Eingabeaufforderung

   Verwende den Lovable Chat Mode, um Folgendes zu extrahieren:

   • Seitenabschnitte (Hero-Bereich, Features, FAQ usw.)
   • Layoutstruktur, Abstände und Reihenfolge der Inhalte
   • Schriftfamilien, Farbpaletten und Verläufe
   • Animationstypen, Hover-Effekte und Übergänge

   Lovable Chat mode (oder customGPT) wurde außerdem darauf trainiert, Unsplash-Bilder für Blog-Thumbnails und Illustrationen zu empfehlen.

   Lovable benennt Elemente gelegentlich falsch (z. B. wurde die Schriftart „Space Grotesque“ falsch geschrieben). Überprüfe und korrigiere immer die Ergebnisse der Eingabeaufforderung, bevor du sie in Lovable einfügst.

   Du kannst Lovable Chat mode sogar bitten, Abschnitte weiter auszuarbeiten oder die Eingabeaufforderung mit besseren UX-Vorschlägen neu zu formulieren.

5. Erstelle mit Lovable den ersten Entwurf

   Füge die detaillierte Eingabeaufforderung in den Lovable Edit Mode ein. Dann:

   • Lade deinen PNG-Screenshot als Referenz hoch
   • Füge Notizen wie “Use Space Grotesque font” oder “Use Unsplash for blog thumbnails” hinzu

   Diese Kombination führt zu deutlich präziseren Designs als vage Eingabeaufforderungen, die nur aus einem einzigen Satz bestehen.

   Bitte beachte, wie viel schneller sich Lovable im Vergleich dazu anfühlt, als noch vor einem Jahr Tailwind oder Bootstrap manuell einzurichten.

6. In Echtzeit bearbeiten: Visuelle und textbasierte Eingabeaufforderungen

   Verwende das visuelle Bearbeitungstool von Lovable, um:

   • Bilder zu skalieren (z. B. „make this image 800px wide“)
   • Hero-Bilder zu positionieren (z. B. „place this image on the right side“)
   • Designabschnitte am Referenzbild auszurichten

   Kombiniere das mit Bearbeitungen in natürlicher Sprache für mehr Präzision.

7. Gib deinem Design mit 21stdev‑Komponenten den letzten Schliff

   Verwende die vorgefertigten UI-Komponenten von 21stdev, um Folgendes zu verbessern:

   

   • Hero-Sektionen
   • Navigationsleisten mit Hover-Effekten
   • Testimonial-Layouts
   • CTAs und Feature-Grids

   Wähle eine Komponente aus, kopiere die Eingabeaufforderung und füge sie in Lovable ein. Achte darauf, dass der visuelle Stil zum Rest der Website passt.

8. KI-Fehlinterpretationen korrigieren

   KI spart Zeit, aber rechne mit Nacharbeit:

   

   • Passe das Branding an (standardmäßig ist Lovable blau)
   • Optimiere Abstände und Padding manuell
   • Verwende konsequent eine einheitliche Typografie
   • Füge Verläufe oder Tiefe hinzu, damit der Look nicht flach wirkt

   Sorge dafür, dass sich das Design bewusst gestaltet anfühlt – nicht „standardmäßig“.

9. Für Mobilgeräte optimieren (ein Muss)

   Überspringe das nicht. Achte darauf, dass:

   

   • Eingabefelder die gesamte Breite einnehmen
   • Schriftgrößen sich an kleinere Bildschirme anpassen
   • Buttons gut mit dem Finger zu bedienen sind
   • Abschnitte sauber untereinander gestapelt werden und sich flüssig scrollen lassen

   Mobile UX ist entscheidend für Conversions.

10. Dezente Animationen und Mikrointeraktionen hinzufügen

    Um das Look & Feel zu modernisieren:

    • Verwende Fade-ins für Hero-Bereiche
    • Füge Hover-Effekte für Buttons hinzu
    • Animiere Abschnitte beim Scrollen
    • Nutze dezente Hintergrundbewegungen

    Lovable kann Framer Motion out of the box integrieren, wenn du die passende Eingabeaufforderung verwendest.

    
11. Individuelle Visuals mit KI erstellen (optional)

    Formuliere Eingabeaufforderungen für ChatGPT, Midjourney oder Ideogram auf Basis deiner bevorzugten Elemente aus dem Referenzdesign.

    Schritte:
12. Mit nur einem Klick bereitstellen

    Sobald du mit dem Ergebnis zufrieden bist:

    • Klicke in Lovable auf „Bereitstellen“
    • Verbinde bei Netlify eine benutzerdefinierte Domain

    Deine Website ist in wenigen Minuten live. Keine manuelle Einrichtung erforderlich.

13. Mit Kunden teilen & iterieren

    Kopiere den öffentlichen Link und teile ihn mit deinem Kunden. Dein Kunde kann:

    • Die Seite live ansehen
    • Anpassungen vorschlagen
    • Schnell freigeben

    Du kannst die Abschnitte weiterhin mit dem visuellen Editor oder dem Eingabeaufforderungs-Editor von Lovable verfeinern. So entsteht ein schneller Iterationszyklus.

​

Warum funktioniert dieser Ansatz?

KI ist keine Magie. Aber mit Struktur wird sie zur Superkraft. Im Vergleich zu unstrukturierten Eingabeaufforderungen gilt:

• Der erste Entwurf ist zehnmal näher am fertigen Ergebnis
• Du verbringst weniger Zeit damit, Fehler zu beheben
• Jeder Abschnitt hat einen klaren Zweck
• Das Endprodukt wirkt individuell, nicht von der Stange

Es ist eine Mischung aus Automatisierung + Handwerkskunst.

​

Wichtigste Erkenntnisse

• Starte mit starker visueller Inspiration
• Verwende strukturierte Eingabeaufforderungen mit Lovable Chat Mode
• Füge Screenshots hinzu und schaffe klare Erwartungen
• Werte Abschnitte mit 21stdev Components auf
• Behebe Design-Macken und optimiere für Mobilgeräte
• Animiere dort, wo es zählt
• Schnell bereitstellen, noch schneller iterieren

Das ist der Workflow, den Prajwal täglich für seine Kund:innen nutzt – und den wir intern ausprobiert haben –, um schnelle, schöne, hoch konvertierende Landingpages zu bauen – unterstützt von Lovable AI, aber geleitet von klarer Intention.

Viel Spaß beim Bauen!

​

Weitere Ressourcen

• Tutorial von Brock Mesarich
• Tutorial von Lukas Margerie (1 - 2)
• Tutorial von AI Jason
• Tutorial von Mark Kashef
• Tutorial von Alejavi Rivera (Spanisch)
• Tutorial von Fazt Code