DZMing/claude-code-config

Landing Page — Schnell eine Landingpage mit hoher Conversion erstellen

Auslöser

• Der Benutzer sagt: „Hilf mir eine Landingpage zu erstellen“, „Generiere eine Startseite“ oder „Erstelle eine Landingpage“
• Ein Produkt benötigt eine öffentliche Präsentationsseite
• Das Produkt soll verkauft werden und benötigt eine Vorstellungsseite

Arbeitsablauf

1. Informationen sammeln: Produktname, Ein-Satz-Beschreibung, 3 Kernfunktionen, Zielgruppe, Preis
2. Struktur generieren: Hero → Problem → Solution → Features → Pricing → FAQ → CTA
3. Texte schreiben: Fokussiere dich auf die Schmerzpunkte des Benutzers, schreibe keine Funktionsliste, sondern beschreibe die Ergebnisse für den Benutzer
4. Code generieren: Next.js + Tailwind + shadcn/ui, direkt ausführbar
5. Conversion prüfen: Stelle sicher, dass jeder Bildschirmabschnitt einen CTA enthält und die Hauptbutton-Farbe ausreichend Kontrast bietet

Ausgabeformat

• Vollständige app/page.tsx-Datei
• Alle Abschnitte in einer Datei (Landing Pages benötigen keine Komponentenaufteilung)
• Mobile-First (sm: Breakpoints)
• Enthält <meta> SEO-Tags

Beispiel

Eingabe:

Ich habe einen KI-Schreibassistenten entwickelt, der Nutzern hilft, die Angst vor der leeren Seite zu überwinden, Preis: 9 $/Monat, Zielgruppe: freiberufliche Autoren

Ausgabe-Textstruktur:

Hero: „Nie wieder auf eine leere Seite starren“ — [Kostenlose Testversion starten]
Problem: 80 % der Schreibzeit wird damit verschwendet, „nicht zu wissen, wie man anfängt“
Solution: KI gibt dir den ersten Satz, du schreibst den Rest
Features: Intelligente Anfangssatz-Generierung / Stil-Anpassung / Gliederungs-Generierung
Pricing: 9 $/Monat, 7 Tage kostenlose Testversion, jederzeit kündbar
FAQ: Was ist der Unterschied zu ChatGPT? Wird es mich beim Schreiben ersetzen?

Code-Ausschnitt:

// Hero Section
export function Hero() {
  return (
    <section className="flex flex-col items-center py-24 text-center">
      <h1 className="text-5xl font-bold tracking-tight max-w-2xl">
        Nie wieder auf eine leere Seite starren
      </h1>
      <p className="mt-4 text-xl text-muted-foreground max-w-lg">
        KI gibt dir den ersten Satz, du schreibst den Rest. 80 % der Schreibzeit wird für den Anfang verschwendet – wir lösen dieses Problem.
      </p>
      <Button size="lg" className="mt-8">Kostenlose 7-Tage-Testversion starten</Button>
    </section>
  )
}