So starten Sie in einem Nachmittag eine echte Website (2026)

Von einer leeren Seite zu einer polierten Live-Website mit Zahlungen, Kontaktformular und E-Mail-Liste in etwa drei Stunden, mit drei Tools und null handgeschriebenem Code.

Im Jahr 2026 ist eine polierte Einzelseiten-Website mit Zahlungen, einem Kontaktformular und einer E-Mail-Anmeldung ein Projekt für drei Stunden am Samstagnachmittag. Kein Projekt, um „etwas zum Laufen zu bringen“, sondern ein Projekt, „das einem Design-Check standhalten würde“. Der Engpass ist nicht mehr Code oder Design. Es ist Klarheit darüber, was die Seite sagen soll.

Dies ist der genaue Workflow, um an einem Nachmittag eine echte, Live-fähige Website für bezahlten Traffic zu starten.

Was Sie in 3 Stunden liefern können

Eine Landingpage mit:

Sie werden heute Nachmittag kein Designsystem, kein CMS oder keine 12-seitige Marketing-Website liefern. Versuchen Sie es nicht.

• Einem Hero-Bereich mit Ihrem Wertversprechen und einem funktionierenden Call-to-Action
• Einem Preisbereich mit echtem Stripe Checkout
• Einem „Über uns“- oder Social-Proof-Bereich
• Einem Kontaktformular, das Ihnen eine E-Mail sendet, wenn jemand es ausfüllt
• Einer E-Mail-Anmeldung, die Personen zu einer echten Liste hinzufügt (Resend, ConvertKit oder Beehiiv)
• Einer benutzerdefinierten Domain, HTTPS und einem halbwegs guten Lighthouse-Score

Der Drei-Tool-Stack

Sie benötigen außerdem: ein Stripe-Konto (Testmodus ist für den heutigen Versand in Ordnung), einen Domainnamen und ein Wertversprechen, das Sie in einem Satz formulieren können.

• Lovable als Rückgrat, es baut und hostet die gesamte Website, verwaltet die Datenbank und schaltet Stripe frei.
• V0 für die ein oder zwei Abschnitte, die Sie besonders poliert haben möchten (Hero, Preise).
• Photoroom für Hero-Bilder in Ihrer Markenpalette.

Schritt 1: Schreiben Sie die Seite, bevor Sie ein Tool öffnen (20 Minuten)

Öffnen Sie ein leeres Dokument. Schreiben Sie fünf Dinge:

Ohne dies wird Lovable Ihnen eine perfekt aufgebaute Seite liefern, die nichts aussagt.

• Das Versprechen. Ein Satz. „X für Y, die Z wollen.“ Spezifisch. Konkret.
• Drei Vorteile. Keine Features. Ergebnisse. „Sparen Sie 5 Stunden pro Woche“ nicht „KI-gestützte Terminplanung“.
• Der Preis. 9 $ / 19 $ / 99 $ / „Sprechen Sie uns an.“ Wählen Sie einen aus. Entscheiden Sie später, ob er richtig ist.
• Ein Social Proof. Ein Testimonial, eine Logo-Leiste, ein Screenshot, ein Ergebnis. Erfundene Testimonials töten die Konversion, wenn sie entdeckt werden, also verwenden Sie ein echtes Zitat von jemandem, den Sie kennen, wenn Sie müssen.
• Der Call-to-Action. Was soll ein Besucher in den nächsten 60 Sekunden tun? „Kostenlose Testversion starten.“ „Buchen Sie einen 15-minütigen Anruf.“ Wählen Sie einen aus. Nur einen.

Schritt 2: Bauen Sie das Rückgrat in Lovable (60 Minuten)

Öffnen Sie Lovable und geben Sie alles ein, was Sie geschrieben haben. Der Eröffnungs-Prompt, der funktioniert:

Erstellen Sie eine Landingpage für [Ihr Wertversprechen]. Hero mit [Überschrift]. Drei Vorteilskarten: [Liste]. Preisbereich mit einer Stufe für X $ unter Verwendung von Stripe Checkout. Kontaktformular, das mir an [Ihre E-Mail] sendet. E-Mail-Anmeldung, die sich mit Resend integriert. Dunkles Thema mit [Farbe] Akzent. Verwenden Sie [Framework: Next.js oder Vite].

Lovable erstellt ein vollständiges Projekt, stellt es auf eine temporäre URL und zeigt Ihnen eine funktionierende Vorschau. Es wird sofort zu 70 % richtig aussehen und nach drei Folge-Prompts zu 90 % richtig sein:

Für Zahlungen: Lovable übernimmt die Stripe Checkout-Verdrahtung, wenn Sie Ihr Stripe-Konto verbinden. Verwenden Sie heute Testmodus-Schlüssel; wechseln Sie vor dem Start zu Live-Schlüsseln.

Für das Kontaktformular: Wählen Sie Resend als E-Mail-Anbieter im Integrationspanel von Lovable. Es ist kostenlos für die ersten 3.000 E-Mails/Monat.

• „Machen Sie den Hero-Text größer und fügen Sie mehr vertikalen Abstand über dem CTA hinzu“
• „Schalten Sie die Vorteilskarten auf dem Desktop in ein 3-Spalten-Raster um“
• „Fügen Sie einen festen Header mit dem Logo links und dem CTA rechts hinzu“

Schritt 3: Polieren Sie zwei Abschnitte in V0 (30 Minuten)

Die Standardeinstellungen von Lovable sind gut, aber nicht großartig. Die Hero- und Preisabschnitte sind entscheidend dafür, ob Besucher weiterlesen.

Erstellen Sie diese beiden in V0. Geben Sie in V0 einen Screenshot eines von Ihnen gewünschten Hero-Bereichs (Linear, Vercel oder eine beliebige SaaS-Website, die Sie bewundern) plus Ihren Text ein:

Erstellen Sie diesen Hero mit meinem Text: Überschrift „[Ihre Überschrift]“, Unterüberschrift „[Ihre Unterüberschrift]“, CTA-Schaltfläche „[Ihr CTA]“. Dunkler Modus, [Akzentfarbe]. Fügen Sie einen dezenten Farbverlauf und einen Platzhalter für ein Screenshot-Mockup rechts hinzu.

Kopieren Sie den Komponentencode von V0 in Lovable und ersetzen Sie den vorhandenen Hero-Bereich. Dasselbe gilt für die Preise. Lovable übernimmt die Integration sauber, da beide Tools Tailwind + React ausgeben.

Schritt 4: Hero-Bild in Photoroom (15 Minuten)

Generische Stockfotos lassen eine Website wie jede andere aussehen. Verwenden Sie Photoroom, um entweder:

Die Funktion „Hintergrund generieren“ ist das, was 2026 die Hauptarbeit leistet. Geben Sie Ihren Produkt-Cutout und einen Prompt für die Szene ein und erhalten Sie ein kohärentes Bild in Ihren Farben zurück.

Fügen Sie das Ergebnis in den Lovable-Hero ein.

• Ein markenkonformes Produkt-Mockup zu generieren, wenn Sie ein SaaS-/App-/Digitalprodukt haben
• Ein echtes Foto in Ihre Markenpalette umzugestalten, wenn Sie eine Dienstleistung verkaufen

Schritt 5: Domain, DNS und Versand (30 Minuten)

Gehen Sie in Lovable zu Domain → Benutzerdefinierte Domain verbinden → Geben Sie Ihre ein. Lovable zeigt Ihnen die DNS-Einträge, die Sie bei Ihrem Registrar hinzufügen müssen (normalerweise 2 Einträge: ein A-Eintrag und ein CNAME). Fügen Sie sie hinzu, warten Sie 5-10 Minuten auf die Verbreitung.

Während die DNS-Einträge verbreitet werden, führen Sie die Versand-Checkliste durch:

Sie sind live.

• Klicken Sie auf jede Schaltfläche auf Ihrer Website. Stellen Sie sicher, dass keine 404-Fehler auftreten.
• Testen Sie das Kontaktformular, füllen Sie es selbst aus, bestätigen Sie, dass die E-Mail ankommt.
• Testen Sie die E-Mail-Anmeldung, bestätigen Sie, dass Sie in Ihrer Resend/ConvertKit-Liste erscheinen.
• Kaufen Sie Ihr eigenes Produkt im Stripe-Testmodus. Bestätigen Sie, dass die Empfangsbestätigung per E-Mail ankommt, bestätigen Sie, dass der Willkommens-Workflow ausgelöst wird.
• Führen Sie Lighthouse in den Chrome DevTools aus. Mobil + Desktop. Streben Sie >85 Leistung, >90 Barrierefreiheit, >90 SEO an.
• Fügen Sie grundlegendes SEO hinzu: Seitentitel, Meta-Beschreibung, OG-Bild. Lovable hat ein einzelnes Panel dafür.
• Wechseln Sie Stripe zu Live-Schlüsseln. Testen Sie eine Live-Transaktion mit Ihrer eigenen Karte. Erstatten Sie sich selbst.

Fehler, die den Start verhindern

• Mehrere CTAs. Wählen Sie einen aus. „Kostenlose Testversion starten ODER Demo buchen ODER Newsletter abonnieren“ erzielt null Konversionen.
• KI-generierte Team-Headshots. Menschen erkennen sie in 0,5 Sekunden und das Vertrauen schwindet. Wenn Sie keine echten Fotos haben, überspringen Sie den Team-Bereich ganz.
• Lorem ipsum, das irgendwo übrig bleibt. Suchen Sie vor dem Versand mit Cmd+F nach „Lorem“. Lovable hinterlässt es gelegentlich in Karten, die Sie nicht angepasst haben.
• Keine Analysen. Fügen Sie Plausible oder PostHog hinzu, bevor Sie jemandem die URL mitteilen. Sie werden es bereuen, keine Daten vom ersten Tag an zu haben.

Wohin als Nächstes

Nach dem Versandtag verlagert sich die Arbeit vom Bauen zum Lernen. Die erste Woche besteht aus:

Die Website, die Sie heute starten, ist ein Entwurf. Die Website, die Sie in drei Monaten haben, ist diejenige, die zählt. Liefern Sie den Entwurf heute.

• Holen Sie 100 Besucher. Betteln Sie Freunde an, posten Sie in 2-3 relevanten Communities, führen Sie einen kleinen Anzeigen-Test durch.
• Sehen Sie sich Sitzungsaufzeichnungen an (PostHog oder Hotjar). Finden Sie die Stelle, an der jeder abspringt.
• Korrigieren Sie diese Stelle. Starten Sie die Änderung neu. Wiederholen Sie.