Installiere den belt CLI Skill: npx skills add belt-sh/cli
Landing Page Design
Designen Sie konversionsstarke Landing Pages mit KI-generierten Visuals über die inference.sh CLI.
Schnellstart
Erfordert die inference.sh CLI (belt). Installationsanleitung
belt login
belt app run falai/flux-dev-lora --input '{
"prompt": "professional person smiling while using a laptop showing a clean dashboard interface, bright modern office, natural lighting, warm and productive atmosphere, lifestyle marketing photography",
"width": 1248,
"height": 832
}'
belt app run tavily/search-assistant --input '{
"query": "best SaaS landing page examples 2024 conversion rate"
}'
Above-the-Fold-Formel
Alles, was vor dem Scrollen sichtbar ist, muss den Wert innerhalb von 5 Sekunden vermitteln.
┌─────────────────────────────────────────────────┐
│ [Logo] [Nav] [CTA Button] │
│ │
│ Headline (6-12 Wörter) │
│ ───────────────────────── │
│ Subheadline (15-25 Wörter) [Hero-Bild] │
│ zeigt das │
│ [Primärer CTA-Button] ERGEBNIS, │
│ "Kostenlose Testversion starten" nicht das │
│ Produkt │
│ │
│ Sozialer Beweis: „Vertrauen von 10.000+ Teams“│
│ [Logo] [Logo] [Logo] [Logo] [Logo] │
└─────────────────────────────────────────────────┘
Die 5 Elemente
| Element | Regel | Beispiel |
|---|
| Headline | 6-12 Wörter, nennt das Ergebnis | „Dokumentation in Minuten, nicht Tagen“ |
| Subheadline | 15-25 Wörter, erläutert das Wie | „KI-gestützte Dokumentation, die sich selbst aus deiner Codebasis schreibt. Keine Vorlagen nötig.“ |
| Hero-Bild | Zeigt das ERGEBNIS, nicht das Produkt | Zufriedene Person, die Ergebnisse betrachtet, kein Screenshot der Benutzeroberfläche |
| Primärer CTA | Aktionsverb + Nutzen | „Kostenlose Testversion starten”, nicht „Absenden” oder „Mehr erfahren” |
| Sozialer Beweis | Logos, Anzahl oder Mikro-Testimonial | „Vertrauen von 10.000+ Teams bei [Logos]“ |
Headlines
Formeln, die konvertieren
| Formel | Beispiel |
|---|
| [Ergebnis] ohne [Schmerz] | „Schöne Dokumente ohne Designkenntnisse“ |
| [Ergebnis] in [Zeitraum] | „Starten Sie Ihre Website in 5 Minuten“ |
| Der [bessere Weg] für [alltägliche Aufgabe] | „Der schnellere Weg, um APIs zu erstellen“ |
| Höre auf [Schmerz]. Beginne mit [Ergebnis]. | „Höre auf zu raten. Fang an zu wissen.“ |
| [Zahl] [Dinge], um [Ergebnis] zu erzielen | „Ein Tool, um all deine Daten zu verwalten“ |
Warum Headlines scheitern
❌ „Willkommen auf unserer Plattform“ (sagt nichts über den Wert)
❌ „Die weltweit fortschrittlichste KI-gestützte Lösung“ (Buzzwords, keine Details)
❌ „Wir helfen Unternehmen beim Wachsen“ (vage, generisch)
❌ „Next-Generation Enterprise Software“ (Was tut es?)
✅ „Verwandle Kundenfeedback automatisch in Produktfunktionen“
✅ „Die Tabellenkalkulation, die wie eine Datenbank denkt“
✅ „Finde und behebe Fehler, bevor deine Nutzer sie bemerken“
Hero-Bilder
Zeige das Ergebnis, nicht das Produkt
❌ Screenshot deines Dashboards (langweilig, schwer auf einen Blick zu erfassen)
❌ Abstrakter geometrischer Hintergrund (sagt nichts aus)
❌ Stockfoto eines Händedrucks (Klischee)
✅ Zufriedene Person, die klare Ergebnisse auf ihrem Bildschirm betrachtet
✅ Vorher/Nachher-Transformation
✅ Das Endergebnis der Nutzung deines Produkts
belt app run falai/flux-dev-lora --input '{
"prompt": "happy professional team celebrating around a laptop showing positive growth charts, bright modern office, natural sunlight, authentic candid moment, marketing photography style, warm tones",
"width": 1248,
"height": 832
}'
belt app run bytedance/seedream-4-5 --input '{
"prompt": "clean modern laptop on a minimalist desk showing a beautiful analytics dashboard, floating UI elements emerging from the screen, soft gradient background, product marketing style, professional",
"size": "2K"
}'
CTA-Buttons
Text
| Gute CTAs | Schlechte CTAs |
|---|
| „Kostenlose Testversion starten” | „Absenden” |
| „Kostenlos starten” | „Hier klicken” |
| „In Aktion sehen” | „Mehr erfahren” (geringes Engagement) |
| „Erstellen Sie Ihren ersten Bericht” | „Anmelden” (vage) |
| „14 Tage kostenlos testen” | „Registrieren” |
Formel: Aktionsverb + Nutzen/Ergebnis + (optional: Risiko reduzieren)
Design
| Element | Regel |
|---|
| Farbe | Hoher Kontrast zum Hintergrund – muss das sichtbarste Element sein |
| Größe | Mindestens 44px Höhe (Zielbereich), breit genug für Text + Padding |
| Position | Above the fold, nach jedem größeren Abschnitt wiederholt |
| Weißraum | Großzügiges Padding um den Button, nicht überladen |
| Sekundärer CTA | Falls nötig, als Textlink darunter („oder Demo ansehen”) |
Abschnittsreihenfolge
Die bewährte Reihenfolge für Landing Pages:
| Abschnitt | Zweck | Schlüsselelement |
|---|
| 1. Hero | Kernwert, primärer CTA | Headline + Bild + CTA |
| 2. Sozialer Beweis | Vertrauen aufbauen | Logos, Zahlen, Auszeichnungen |
| 3. Problem | Empathie erzeugen | Schmerzpunkt, den sie erkennen |
| 4. Lösung/Funktionen | Zeigen, wie du es löst | 3 Kernfunktionen mit Visuals |
| 5. So funktioniert's | Komplexität reduzieren | 3 Schritte: anmelden, konfigurieren, profitieren |
| 6. Testimonials | Beweisen, dass es funktioniert | 2-3 spezifische Kundenstimmen |
| 7. Preise | Entscheidung ermöglichen | Klare Stufen, Empfohlen hervorheben |
| 8. FAQ | Einwände behandeln | 5-7 häufige Fragen |
| 9. Abschließender CTA | Nachzügler einfangen | Primären CTA mit Dringlichkeit wiederholen |
Arten von sozialem Beweis
| Art | Wirkung | Platzierung |
|---|
| Firmenlogos | Am schnellsten zu verarbeiten, hohes Vertrauen | Unterhalb des Hero |
| Nutzerzahl | Skalensignal | Hero oder Leiste für sozialen Beweis |
| Sternebewertung | Produktqualität | In der Nähe des CTA |
| Testimonials | Detaillierte Glaubwürdigkeit | Eigener Abschnitt |
| Fallstudien-Statistiken | Spezifischer Beweis | Funktionsabschnitte |
| Vertrauenssiegel | Sicherheit/Compliance | In der Nähe von Formularen, Preisen, Footer |
belt app run exa/answer --input '{
"question": "What is the average conversion rate for SaaS landing pages with social proof vs without?"
}'
Formulardesign
| Regel | Auswirkung |
|---|
| Jedes Feld reduziert die Konversion um ca. 11% | Felder minimieren |
| Name + E-Mail = Maximum für Anmeldungen | Nicht nach Telefon, Firma, Rolle fragen |
| Einspaltiges Layout | Keine mehrspaltigen Formulare |
| Inline-Validierung | Fehler sofort anzeigen, nicht erst beim Absenden |
| Klare Fehlermeldungen | „E-Mail ist erforderlich” nicht „Fehler in Feld 3” |
| Beschriftung des Absende-Buttons = Aktion | „Konto erstellen” nicht „Absenden” |
Mobile Optimierung
| Regel | Warum |
|---|
| CTA-Button in voller Breite | Einfach mit dem Daumen zu tippen |
| Sticky CTA beim Scrollen | Immer erreichbar |
| Kein horizontales Scrollen | Zerstört mobiles Layout |
| Schriftart mindestens 16px | iOS zoomt Eingaben unter 16px |
| Tippziele mindestens 48x48px | Apple HIG, Google Material |
| Bilder responsiv | Nicht über den Viewport hinausragen |
| Headline + CTA priorisieren | Above-the-Fold vereinfachen |
OG-Bild zum Teilen
belt app run falai/flux-dev-lora --input '{
"prompt": "clean professional social sharing card, product name and tagline on modern gradient background, minimal design, corporate tech aesthetic, 1200x630 aspect ratio equivalent",
"width": 1200,
"height": 630
}'
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-family:sans-serif;color:white\"><div style=\"text-align:center\"><h1 style=\"font-size:48px;margin:0\">DataFlow</h1><p style=\"font-size:24px;opacity:0.9\">Ship docs in minutes, not days</p></div></div>"
}'
Seitengeschwindigkeit
| Regel | Ziel | Warum |
|---|
| Hero-Bild | < 200 KB | Wird zuerst geladen |
| Gesamtgewicht der Seite | < 2 MB | Mobile Daten, Geduld der Nutzer |
| Lazy Load unterhalb des Falzes | Immer | Nur laden, was sichtbar ist |
| JavaScript minimieren | < 200 KB | Blockiert das Rendern |
| LCP (Largest Contentful Paint) | < 2.5s | Google Core Web Vitals |
Häufige Fehler
| Fehler | Problem | Behebung |
|---|
| Keine klare Headline | Besucher weiß nicht, was du tust | 6-12 Wörter, ergebnisorientiert |
| CTA sagt „Mehr erfahren” | Zu geringes Engagement | Aktionsverb + spezifischer Nutzen |
| Hero ist ein Produkt-Screenshot | Schwer zu erfassen, langweilig | Zeige das Ergebnis, verwende Lifestyle-Bildmaterial |
| Mehrere konkurrierende CTAs | Entscheidungslähmung | Ein primärer CTA, maximal ein sekundärer |
| Kein sozialer Beweis | Kein Vertrauenssignal | Logos, Zahlen oder Testimonials hinzufügen |
| Zu viele Formularfelder | Konversion sinkt um ca. 11% pro Feld | Name + E-Mail maximal |
| Nur Desktop-Design | 60%+ des Traffics ist mobil | Mobile-First designen |
| Keine Dringlichkeit im abschließenden CTA | Besucher gehen und vergessen | „Starten Sie Ihre kostenlose 14-Tage-Testversion“ |
Verwandte Skills
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@web-search
npx skills add inference-sh/skills@prompt-engineering
Alle Apps durchsuchen: belt app list