LeadMagic/gtm-skills

v0 Landing Page Builder

Überblick

v0 by Vercel ist der schnellste Weg, eine produktionsreife Landing Page zu bauen. Du beschreibst die Seite in natürlicher Sprache. v0 generiert React/Next.js/Tailwind-Code. Du iterierst im Gespräch. Du exportierst und deployst. Was früher einen Designer + Entwickler 1–2 Wochen gekostet hat, dauert jetzt für einen Gründer oder Vermarkter 2–4 Stunden. Diese Skill ist ein Schritt-für-Schritt-Playbook zum Erstellen jeder Art von GTM-Landingpage mit v0.

Autoritative Grundlagen

• v0 by Vercel – Generative UI-Plattform (Guillermo Rauch)
• shadcn/ui – Die Komponentenbibliothek, die v0 antreibt
• Tailwind CSS – Utility-First-CSS-Framework
• Next.js – React-Framework für die Produktion

Wann verwenden

Auslösephrasen: „Landingpage mit v0 bauen“, „v0 Tutorial“, „v0 Landingpage Prompt“, „v0 by Vercel für Marketing“, „KI-Landingpage-Builder“, „Landingpage mit v0 generieren“, „v0 Preisseite“, „v0 Warteliste“

v0 Grundlagen

Was es ist: v0.dev – Vercels generative UI-Plattform. Du tippst. Sie generiert React-Komponenten mit shadcn/ui + Tailwind CSS. Du kannst:

• Vollständige Seiten aus einem einzigen Prompt generieren
• An bestimmten Abschnitten iterieren („ändere die Hero-Überschrift“)
• Einzelne Komponenten generieren („eine Testimonial-Karte mit Avatar“)
• Code in dein Next.js-Projekt exportieren
• Direkt auf Vercel deployen

Preise: Kostenloser Tarif (200 Generierungen/Monat). Pro (20 $/Monat) für unbegrenzt.

Schritt-für-Schritt-Prozess

Phase 1: Vorbereitung (Bevor du v0 öffnest)

Definiere 5 Dinge vor deinem ersten Prompt:

1. Der Seitentyp: Landingpage, Preisseite, Wartelistenseite, Eventseite, Feature-Ankündigung oder Microsite?
2. Die Zielgruppe: Wer sind sie? Was ist ihnen wichtig?
3. Die Aktion: Was ist die EINE Sache, die sie tun sollen? (Testversion starten, Demo buchen, Warteliste beitreten, jetzt kaufen)
4. Die Marke: Farben (Primär/Sekundär/Neutral), Schriftart (Inter ist sicher), Ton (professionell, verspielt, technisch, anspruchsvoll)
5. Die Referenz: Welcher bestehenden Seite soll diese ähneln? „Sauber wie Stripe“ oder „Technisch wie Vercel“ oder „Kühn wie Linear“

Markenkontext-Dokument (in deinen ersten v0-Prompt einfügen):

MARKENKONTEXT:
- Unternehmen: [Name]
- Produkt: [Einzeiler]
- Primärfarbe: #0066FF
- Sekundär: #FF6600
- Schriftart: Inter
- Ton: Direkt, datengestützt, selbstbewusst
- Referenz: Stripe (sauber, minimalistisch) + Linear (dunkel, technisch)
- NICHT: Verläufe, Emojis, Stockfotos, generische SaaS-Tropen

Phase 2: Die Seite generieren (Prompt-Engineering)

Die Master-Prompt-Vorlage:

Baue eine [Seitentyp] für [Unternehmen/Produkt].

Zielgruppe: [ICP]. Ihnen sind [Top 3 Anliegen] wichtig.

ABSCHNITTE (in Reihenfolge):
1. Nav: [Firmenlogo links, Links mittig, CTA rechts – „Kostenlose Testversion starten"]
2. Hero: Überschrift [nutzenorientiert, unter 10 Wörtern]. Untertitel [ein Satz mit
   Erweiterung]. Primärer CTA [„Kostenlose Testversion starten"]. Sekundärer CTA [„So
   funktioniert es"]. Hero-Bild/Video-Platzhalter.
3. Sozialer Beweis: 6 Kundenlogos in einer Reihe. „Vertrauen von 2.000+ Teams"
4. Wertversprechen: 3 Spalten. Jede: Symbol, Überschrift, ein Satz. Fokus auf
   ERGEBNISSE, nicht auf Funktionen.
5. So funktioniert es: 3 Schritte. Jeder: Schrittnummer, Überschrift, ein Satz.
   Visual: Screenshot/GIF-Platzhalter.
6. Funktionen: 2-spaltiges Raster. 6 Funktionen. Jede: Funktionsname + ein Satz.
7. Testimonials: 3 Zitatkarten. Jede: Zitat (1-2 Sätze), Name, Titel,
   Unternehmen, Porträt-Platzhalter.
8. Preise (falls Preisseite): 3 Stufen. Monatlich/jährlich Umschalter. Empfohlene
   Stufe hervorgehoben. Jede Stufe: Preis, Beschreibung, 5 Funktionen, CTA.
9. FAQ: 6 Fragen mit aufklappbaren Antworten. Decken Preise, Einrichtung, Sicherheit,
   Support, Kündigung, Vergleich ab.
10. Finaler CTA: Gleicher wie Hero-CTA. „Kostenlose Testversion starten." Keine
    Kreditkarte erforderlich.
11. Footer: Logo, Links, Copyright, Social-Icons.

STIL:
- Dark-Theme (oder Light – wähle eines)
- Farbpalette: Primär #0066FF, Sekundär #FF6600, Hintergrund #0A0A0A,
  Text #FFFFFF, dezent #9CA3AF
- Typografie: Inter, Überschriften fett, Text normal
- Abstände: großzügig. 80-120px zwischen den Abschnitten
- Karten: subtile Rahmen, 8px Radius, Hover-Lift-Effekt
- Buttons: primär (gefüllt, weißer Text), sekundär (umrandet, Primärfarbe)
- Maximale Breite: 1200px, zentriert

TECHNISCH:
- Mobil-responsive: Abschnitte auf Mobilgeräten vertikal stapeln
- Touch-Ziele: 44px+ auf Mobilgeräten
- Animationen: dezentes Fade-in beim Scrollen (Intersection Observer)
- Keine schweren Animationen. Respektiere prefers-reduced-motion.

Warum dieser Prompt funktioniert:

• Er spezifiziert jeden Abschnitt in der richtigen Reihenfolge (v0 baut von oben nach unten)
• Er enthält visuelle Gestaltung (Farben, Typografie, Abstände)
• Er enthält technische Anforderungen (responsive, barrierefrei)
• Er gibt konkrete Beispiele („Kostenlose Testversion starten" nicht „CTA hier")

Phase 3: Abschnitt für Abschnitt iterieren

Versuche nicht, alles in einem Prompt zu korrigieren. Iteriere Abschnitt für Abschnitt:

ITERATIONSSEQUENZ (15-30 Minuten):

1. „Die Hero-Überschrift ist zu generisch. Mache sie spezifisch: '[Unternehmen] hilft
   [ICP] [Sache] in [Zeitraum] zu tun'"
2. „Die Wertversprechen sind funktionsorientiert. Schreibe sie als Ergebnisse um:
   'Kampagnen in 2 Stunden statt 2 Wochen ausliefern' statt 'KI-gestützter
   Kampagnen-Builder'"
3. „Die Testimonials sind zu lang. Jedes Zitat sollte maximal 1-2 Sätze haben"
4. „Füge eine Vergleichstabelle oberhalb der FAQ ein. 5 Zeilen: [Funktion], Wir, Mitbewerber
   A, Mitbewerber B. Häkchen für uns. Wo Mitbewerber fehlen, verwende '—'"
5. „Die Preiskarten brauchen Hover-Zustände. Füge einen subtilen scale(1.02) + Schatten
   beim Hover für die empfohlene Stufe hinzu"
6. „Ersetze den Hero-Bild-Platzhalter durch eine Screenshot-Komponente.
   Dunkler Hintergrund, abgerundete Ecken, subtiler Rahmen"
7. „Die CTA-Buttons fühlen sich klein an. Erhöhe auf 16px Padding, 16px Schrift"
8. „Auf Mobilgeräten sollte die Navigation zu einem Hamburger-Menü zusammenklappen.
   Zeige mir die mobile Version"
9. „Füge eine sticky CTA-Leiste hinzu, die nach dem Scrollen am Hero erscheint.
   'Kostenlose Testversion starten'-Button, weißer Hintergrund, subtiler Schatten"
10. „Mache die gesamte Seite responsive. Teste bei 375px, 768px, 1024px, 1440px"

Phase 4: Einzelne Komponenten generieren

Wenn die gesamte Seite gut ist, aber ein Abschnitt mehr Arbeit braucht:

„Generiere nur den Testimonial-Abschnitt. 3 Karten in einer Reihe. Jede Karte:
- Hintergrund: etwas heller als Seitenhintergrund
- Rahmen: 1px, subtil
- Padding: 32px
- Zitat oben: groß, kursiv
- Autor darunter: Avatar (Kreis, 48px) + Name + Titel + Firmenlogo
- Hover: subtiler Rahmenakzent, kein Lift"

v0 wird nur diese Komponente neu generieren. Ersetze den vorhandenen Abschnitt durch die verbesserte Version.

Phase 5: Für die Produktion polieren

Vor dem Deployment iteriere über:

1. Texte: Ersetze jeden Lorem-Ipsum-Text durch echte Texte. „v0 generiert Platzhaltertexte – du MUSST sie ersetzen." Schreibe echte Überschriften, echte Wertversprechen, echte Testimonials.

2. Bilder: Ersetze Platzhalter durch echte Bilder:

   • Hero: Produktscreenshot (Cmd+Shift+4, in v0 hochladen)
   • Kundenlogos: echte Kundenlogos (hochladen)
   • Testimonial-Porträts: echte Kundenfotos

3. Links: Verbinde alle Buttons und Links:

   • „Kostenlose Testversion starten" → Anmelde-URL
   • „Demo buchen" → Calendly-Link
   • „Preise ansehen" → Preise-Abschnitts-Anker
   • Footer-Links → tatsächliche Seiten

4. Formulare: Wenn deine Seite ein Formular hat (Warteliste, Kontakt, Demo-Anfrage):

   • Verbinde mit Formular-Backend (ConvertKit, HubSpot, Google Forms oder API)
   • Füge Validierung hinzu (E-Mail-Format, Pflichtfelder)
   • Füge Erfolgsmeldung hinzu („Danke! Wir melden uns.")
   • Füge Fehlerbehandlung hinzu

5. Analytics: Füge vor dem Deployment hinzu:

   <!-- Zum head hinzufügen -->
   <script defer data-domain="deinedomain.com"
    src="https://plausible.io/js/script.js"></script>
   

   Oder Google Analytics, PostHog, etc.

Phase 6: Exportieren und Deployen

Option A: Direkt von v0 deployen (am schnellsten)

1. Klicke auf „Deploy" in v0
2. Verbinde dein Vercel-Konto
3. Füge eine benutzerdefinierte Domain in den Vercel-Einstellungen hinzu
4. Fertig – live in unter 5 Minuten

Option B: In ein Next.js-Projekt exportieren (mehr Kontrolle)

1. npx shadcn@latest add [komponenten-url] – fügt die v0-Komponente zu deinem bestehenden Next.js-Projekt hinzu
2. Oder: Kopiere den Code manuell aus v0 → füge ihn in dein Projekt ein
3. git push → Vercel deployed automatisch bei Push

Option C: Als statisches HTML exportieren (am einfachsten)

1. Kopiere das generierte HTML/CSS
2. Füge es in eine neue Datei ein
3. Deploye auf einem beliebigen statischen Host (Netlify, Cloudflare Pages, GitHub Pages)

Phase 7: Iteration nach dem Launch

Nach dem Launch basierend auf Daten iterieren:

DATENGETRIEBENE PROMPTS:

1. „Der Hero-CTA hat eine Klickrate von 2,1 %. Generiere 3 Hero-Varianten mit
   unterschiedlichen Überschriften und CTAs zum A/B-Testen"
2. „Die mobile Absprungrate beträgt 68 %. Prüfe die mobile Version und behebe
   Layout-Probleme. Staple alle Abschnitte vertikal. Stelle sicher, dass Touch-Ziele 44px+ sind"
3. „Die Preisseite hat eine Conversion-Rate von 1,2 %. Generiere 3 Preisseiten-Varianten:
   eine mit jährlicher Voreinstellung, eine mit monatlicher Voreinstellung, eine mit einem
   'Am beliebtesten'-Badge auf der mittleren Stufe"
4. „Die Seitenladezeit beträgt 4,2 Sekunden. Optimiere: Lazy Load für Bilder unterhalb des
   Bildschirms, entferne ungenutztes CSS, verschiebe nicht-kritische Skripte"

v0-Prompts für spezifische Seitentypen

SaaS-Landingpage

„Baue eine SaaS-Landingpage für [Produkt]. Dark-Theme. Abschnitte: Hero,
sozialer Beweis (Logos), 3 Wertversprechen (Ergebnisse), so funktioniert es (3 Schritte),
Testimonials (3), Preise (3 Stufen, jährlich voreingestellt, Growth empfohlen),
FAQ (6), finaler CTA, Footer. Stil: sauber wie Stripe, dunkel wie Linear.
Primär: #0066FF. Schriftart: Inter."

Preisseite

„Baue eine Preisseite für [Produkt]. 3 Stufen: Starter 49 $/Monat, Growth
199 $/Monat (EMPFOHLEN), Enterprise (Kontaktiere uns). Monatlich/jährlich Umschalter,
jährlich voreingestellt. Funktionen-Vergleichstabelle unter den Stufen. FAQ-Bereich mit
8 Fragen. Enterprise enthält einen 'Gespräch buchen'-CTA anstelle eines Preises."

Wartelistenseite

„Baue eine Wartelistenseite für [Produkt], das im [Monat] startet. Hero: Produktname,
einzeiliges Wertversprechen, E-Mail-Eingabe + 'Zur Warteliste hinzufügen'-Button.
Darunter: 3 Dinge, die du bekommst (früher Zugang, Gründungspreise, Prioritäts-Support).
Sozialer Beweis: '2.000+ auf der Warteliste.' Zähler mit Anmeldeanzahl."

Event-/Webinar-Seite

„Baue eine Anmeldeseite für [Event-Name] am [Datum]. Hero: Event-Name,
Datum/Uhrzeit, einzeilige Beschreibung. Darunter: 3 Gründe zur Teilnahme.
Sprecherabschnitt mit Porträts, Namen, Titeln, Vortragstiteln.
Agenda/Zeitplan. Anmeldeformular: Name, E-Mail, Unternehmen.
'Platz sichern'-CTA."

Ausgabeformat

v0 LANDINGPAGE-BAU – [Seitenname]

v0-Projekt-URL: [v0.dev-Link]
Deployte URL: [Produktions-URL]

Verwendeter Prompt:
[Master-Prompt-Text]

Iterationsprotokoll:
1. v1 generiert – [was funktionierte, was geändert werden musste]
2. [„Hero ändern"] – [Ergebnis]
3. [„Testimonial-Abschnitt hinzufügen"] – [Ergebnis]
...

Exportmethode: [Direktes Deployment / shadcn add / manuelles Kopieren]

Nach dem Launch:
- Analytics: [Plausible / GA / PostHog verbunden]
- Conversion-Rate: X% (Ziel: Y%)
- Nächste Iteration: [Datum / Auslöser]

Umsetzungs-Checkliste

• Echte Texte – kein Lorem Ipsum, keine KI-generierten Platzhaltertexte
• Echte Bilder – Produktscreenshots, Kundenlogos, tatsächliche Porträts
• Alle CTAs mit tatsächlichen URLs verlinkt (nicht „#")
• Formulare mit Backend verbunden (ConvertKit, HubSpot, API)
• Mobil-responsive (getestet auf iPhone SE + iPhone Pro Max + iPad)
• Seitenladezeit unter 3 Sekunden (Lighthouse-Score 90+)
• Analytics installiert und verifiziert (Echtzeit-Dashboard prüfen)
• SEO: Titel-Tag, Meta-Beschreibung, H1, Alt-Texte auf allen Bildern
• Rechtliches: Datenschutz-Link, AGB-Link im Footer
• Kein KI-„Schrott" – keine generischen SVG-Illustrationen, kein Lorem Ipsum

Qualitätsprüfung

Vor der Auslieferung überprüfen:

• Ausgabe entspricht der formulierten Anfrage des Benutzers
• Genannte Frameworks oder Quellen spiegeln sich in der Empfehlung wider
• Das Ergebnis ist spezifisch genug, dass ein Agent es ausführen kann
• Annahmen, Risiken oder Abhängigkeiten sind explizit genannt
• Keine unbegründeten Behauptungen, erfundenen Fakten oder privaten/internen Verweise enthalten

Häufige Fallstricke

1. Prompt aus einem Guss. „Baue eine SaaS-Website" in einem Prompt = generisches, unmarkiertes, mittelmäßiges Ergebnis. Behebung: Baue Abschnitt für Abschnitt. Zuerst Hero. Iterieren. Dann Preise. Iterieren.

2. Generisches Ergebnis ohne Markenkontext. Ohne Markenfarben, Schriftarten und Referenzen generiert v0 generisches Tailwind. Behebung: Füge deinen Markenkontext in den ersten Prompt ein. Verweise auf eine bekannte Website für den Stil.

3. Platzhalterinhalte, die in die Produktion gelangen. v0 generiert „Lorem ipsum" und Platzhalterbilder. Das live zu schalten = amateurhaft. Behebung: Ersetze ALLE Platzhalterinhalte vor dem Deployment.

4. Nicht auf Mobilgeräten iterieren. v0 generiert standardmäßig Desktop-first. Das mobile Layout geht oft kaputt. Behebung: „Zeige mir die mobile Version" als dedizierten Iterationsschritt.

5. Keine Formularanbindung. Ein „Kostenlose Testversion starten"-Button, der auf „#" verlinkt, ist ein gebrochenes Versprechen. Behebung: Verbinde Formulare und CTAs vor dem Deployment.

6. Zu viele Abschnitte. v0 generiert auf Wunsch gerne 15 Abschnitte. Mehr Abschnitte = mehr kognitive Last = niedrigere Conversion. Behebung: Maximal 6-8 Abschnitte. Schneide alles weg, was nicht direkt das Conversion-Ziel unterstützt.

Expertenreferenzen

• Guillermo Rauch (@rauchg) – v0-Ersteller, Vercel-CEO. Folge ihm für v0-Updates, Prompt-Techniken und generative UI-Philosophie.
• v0-Dokumentation: v0.dev/docs – Prompt-Anleitung, Komponentenbibliothek, Export-/Deploy-Anweisungen
• shadcn/ui: ui.shadcn.com – die Komponentenbibliothek, die v0 generiert. Lerne sie, um zu verstehen, was v0 baut.

Ausführungsartefakte

• references/framework-notes.md – Benannte Frameworks und Referenztabellen
• templates/output-template.md – Ergebnisschablone für die Agentenausgabe
• scripts/check-output.py – Leichter Ergebnisprufer

Verwandte Skills

• vibe-coding – Vollständiger KI-Entwicklungstool-Vergleich (v0, Lovable, Bolt, Cursor)
• vibe-marketing – KI-gestützte Marketinginhalte in großem Maßstab
• landing-pages – CRO-Audits, Conversion-Optimierungsmuster
• design-system-gtm – Marken-Tokens, CSS-Variablen für konsistente KI-Ausgabe
• popular-web-designs – 54 Marken-Designsysteme als visuelle Referenz
• ui-ux-gtm – Landingpage-UX, Formulardesign, Barrierefreiheit