Landing Page Generator

Erstelle hochkonvertierende Landingpages aus einer Produktbeschreibung. Liefert vollständige Next.js/React-Komponenten mit mehreren Abschnittsvarianten, bewährten Copy-Frameworks, SEO-Optimierung und performance-orientierten Mustern. Kein Lorem Ipsum – sondern echter Text, der konvertiert.

Ziel: LCP < 1s · CLS < 0,1 · FID < 100ms Ausgabe: TSX-Komponenten + Tailwind-Styles + SEO-Meta + Copy-Varianten

Wann verwenden

Du musst eine Marketing-Landingpage in Next.js oder React generieren.
Die Aufgabe umfasst konvertierungsorientierte Seitenstruktur, Abschnittsvarianten, Tailwind-Styling oder SEO-bewussten Text.
Du möchtest aus einer Produktbeschreibung eine vollständige Landingpage erhalten, keine isolierten UI-Fragmente.

Kernfähigkeiten

5 Hero-Abschnittsvarianten (zentriert, geteilt, mit Farbverlauf, Video-Hintergrund, minimal)
Feature-Abschnitte (Raster, wechselnd, Karten mit Symbolen)
Preistabellen (2–4 Stufen mit Feature-Listen und Umschalter)
FAQ-Akkordeon mit Schema-Markup
Testimonials (Raster, Karussell, einzelnes Zitat)
CTA-Abschnitte (Banner, Vollseite, Inline)
Footer (einfach, Mega, minimal)
4 Designstile mit Tailwind-Klassensätzen

Generierungs-Workflow

Führe die folgenden Schritte für jede Landingpage-Anfrage der Reihe nach aus:

Eingaben sammeln – Produktname, Tagline, Zielgruppe, Schmerzpunkt, Hauptnutzen, Preisstufen, Designstil und Copy-Framework mithilfe des Trigger-Formats unten erfragen. Frage nur nach fehlenden Feldern.
Markenstimme analysieren (empfohlen) – Wenn der Benutzer bereits Markeninhalte hat (Website-Texte, Blogbeiträge, Marketingmaterialien), führe sie durch marketing-skill/content-production/scripts/brand_voice_analyzer.py, um ein Stimmenprofil (Formalität, Ton, Perspektive) zu erhalten. Verwende das Profil, um Designstil und Copy-Framework auszuwählen:
- formell + professionell → Enterprise-Stil, AIDA-Framework
- locker + freundlich → Bold-Startup-Stil, BAB-Framework
- professionell + autoritativ → Dark-SaaS-Stil, PAS-Framework
- locker + gesprächig → Clean-Minimal-Stil, BAB-Framework
Designstil auswählen – Ordne die Auswahl des Benutzers (oder aus der Markenstimmen-Analyse abgeleitet) einem der vier Tailwind-Klassensätze in der Designstil-Referenz zu.
Copy-Framework anwenden – Schreibe alle Überschriften und Fließtexte mit dem gewählten Framework (PAS / AIDA / BAB), bevor du Komponenten generierst. Passe die Formalität und den Ton des Stimmenprofils durchgängig an.
Abschnitte in der richtigen Reihenfolge generieren – Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Überspringe Abschnitte, die für das Produkt nicht relevant sind.
Gegen SEO-Checkliste validieren – Gehe jeden Punkt der SEO-Checkliste durch, bevor du den endgültigen Code ausgibst. Behebe Lücken direkt.
Endgültige Komponenten ausgeben – Liefere vollständige, kopierfertige TSX-Dateien mit allen Tailwind-Klassen, SEO-Meta und strukturierten Daten aus.

Auslösen dieser Skill

Produkt: [Name]
Tagline: [Ein-Satz-Wertversprechen]
Zielgruppe: [Wer sie sind]
Hauptschmerzpunkt: [Welches Problem du löst]
Hauptnutzen: [Primäres Ergebnis]
Preisstufen: [Kostenlos/Pro/Enterprise oder Beschreibung]
Designstil: dark-saas | clean-minimal | bold-startup | enterprise
Copy-Framework: PAS | AIDA | BAB

Designstil-Referenz

Stil	Hintergrund	Akzent	Karten	CTA-Button
Dark SaaS	`bg-gray-950 text-white`	`violet-500/400`	`bg-gray-900 border border-gray-800`	`bg-violet-600 hover:bg-violet-500`
Clean Minimal	`bg-white text-gray-900`	`blue-600`	`bg-gray-50 border border-gray-200 rounded-2xl`	`bg-blue-600 hover:bg-blue-700`
Bold Startup	`bg-white text-gray-900`	`orange-500`	`shadow-xl rounded-3xl`	`bg-orange-500 hover:bg-orange-600 text-white`
Enterprise	`bg-slate-50 text-slate-900`	`slate-700`	`bg-white border border-slate-200 shadow-sm`	`bg-slate-900 hover:bg-slate-800 text-white`

Bold Startup-Überschriften: Füge allen <h1>/<h2>-Elementen font-black tracking-tight hinzu.

Copy-Frameworks

PAS (Problem → Agitation → Lösung)

H1: Schmerzhafter Zustand, in dem sie sich befinden
Sub: Was passiert, wenn sie es nicht beheben
CTA: Was du anbietest
Beispiel – H1: „Ihr Team verschwendet 3 Stunden am Tag mit manuellen Berichten“ / Sub: „Jede Stunde, die in Tabellenkalkulationen investiert wird, ist eine Stunde, in der keine Deals abgeschlossen werden. Ihre Konkurrenten sind bereits automatisiert.“ / CTA: „Automatisieren Sie Ihre Berichte in 10 Minuten →“

AIDA (Aufmerksamkeit → Interesse → Wunsch → Aktion)

H1: Kühne, aufmerksamkeitserregende Aussage → Sub: Interessante Tatsache oder Nutzen → Features: Wunschbildende Beweispunkte → CTA: Klare Aktion

BAB (Vorher → Nachher → Brücke)

H1: „[Vorher-Zustand] → [Nachher-Zustand]“ → Sub: „So überbrückt [Produkt] die Lücke“ → Features: Wie es funktioniert (die Brücke)

Repräsentative Komponente: Hero (Zentriert mit Farbverlauf – Dark SaaS)

Verwende dies als strukturelle Vorlage für alle Hero-Varianten. Tausche Layout-Klassen, Farbverlaufsrichtung und Bildplatzierung für Split-, Video-BG- und Minimal-Varianten aus.

export function HeroCentered() {
  return (
    <section className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-gray-950 px-4 text-center">
      <div className="absolute inset-0 bg-gradient-to-b from-violet-900/20 to-transparent" />
      <div className="pointer-events-none absolute -top-40 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-violet-600/20 blur-3xl" />
      <div className="relative z-10 max-w-4xl">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-violet-500/30 bg-violet-500/10 px-4 py-1.5 text-sm text-violet-300">
          <span className="h-1.5 w-1.5 rounded-full bg-violet-400" />
          Jetzt in der öffentlichen Beta
        </div>
        <h1 className="mb-6 text-5xl font-bold tracking-tight text-white md:text-7xl">
          Schneller ausliefern.<br />
          <span className="bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent">
            Weniger kaputt machen.
          </span>
        </h1>
        <p className="mx-auto mb-10 max-w-2xl text-xl text-gray-400">
          Die Deployment-Plattform, die Fehler erkennt, bevor deine Nutzer sie sehen.
          Null Konfiguration. Sofortige Rollbacks. Echtzeit-Überwachung.
        </p>
        <div className="flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
          <Button size="lg" className="bg-violet-600 text-white hover:bg-violet-500 px-8">
            Kostenlose Testversion starten
          </Button>
          <Button size="lg" variant="outline" className="border-gray-700 text-gray-300">
            Sieh dir an, wie es funktioniert →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">Keine Kreditkarte erforderlich · 14-tägige kostenlose Testversion</p>
      </div>
    </section>
  )
}

Weitere Abschnittsmuster

Feature-Abschnitt (Wechselnd)

Durchlaufe ein features-Array mit { title, description, image, badge }. Ändere die Layout-Richtung mit i % 2 === 1 ? "lg:flex-row-reverse" : "". Verwende <Image> mit expliziten width/height und rounded-2xl shadow-xl. Ummanteln mit <section className="py-24"> und max-w-6xl-Container.

Preistabelle

Durchlaufe ein plans-Array mit { name, price, description, features[], cta, highlighted }. Der hervorgehobene Plan erhält border-2 border-violet-500 bg-violet-950/50 ring-4 ring-violet-500/20; andere erhalten border border-gray-800 bg-gray-900. Gib null-Preis als „Individuell“ aus. Verwende ein <Check>-Symbol pro Feature-Zeile. Layout: grid gap-8 lg:grid-cols-3.

FAQ mit Schema-Markup

Füge FAQPage-JSON-LD via <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} /> innerhalb des Abschnitts ein. Ordne FAQs mit { q, a } in shadcn <Accordion> mit type="single" collapsible ein. Container: max-w-3xl.

Testimonials, CTA, Footer

Testimonials: Raster (grid-cols-1 md:grid-cols-3) oder einzelner Zitat-Hero-Block mit Avatar, Name, Rolle und Zitattext.
CTA-Banner: Vollbreiter Abschnitt mit Überschrift, Unterüberschrift und zwei Buttons (primär + Geist). Füge Vertrauenssignale (Geld-zurück-Garantie, Logo-Streifen) direkt darunter hinzu.
Footer: Logo + Navigationsspalten + Social-Media-Links + Rechtliches. Verwende border-t border-gray-800 als Trennlinie.

SEO-Checkliste

Validierungsschritt: Überprüfe vor der Ausgabe des endgültigen Codes, ob jeder Punkt der obigen Checkliste erfüllt ist. Behebe Lücken direkt – überspringe keine Punkte.

Leistungsziele

Metrik	Ziel	Technik
LCP	< 1s	Hero-Bild vorladen, `priority` bei Next/Image verwenden
CLS	< 0,1	Explizite Breite/Höhe bei allen Bildern setzen
FID/INP	< 100ms	Nicht-kritisches JS verzögern, `loading="lazy"` verwenden
TTFB	< 200ms	ISR oder statische Generierung für Landingpages verwenden
Bundle	< 100KB JS	Mit `@next/bundle-analyzer` prüfen

Häufige Fehler

Hero-Bild nicht vorgeladen – füge priority-Prop zum ersten <Image> hinzu
Fehlende mobile Breakpoints – immer mobile-first mit sm:-Präfixen designen
CTA-Text zu vage – „Kostenlos starten“ ist besser als „Mehr erfahren“; „Kostenlose Testversion starten“ ist besser als „Anmelden“
Preis-Seite ohne Vertrauenssignale – füge Geld-zurück-Garantie und Testimonials in der Nähe des CTA hinzu
Kein CTA oberhalb der Falz auf mobilen Geräten – stelle sicher, dass der Button ohne Scrollen auf einem 375px-Viewport sichtbar ist

agency-black/Skills

Was ist Skills?

In Ihrer bevorzugten KI fragen

Dokumentation