Landing Page Generator

Generieren Sie hochkonvertierende Landing Pages aus einer Produktbeschreibung. Ausgabe vollständiger Next.js/React-Komponenten mit mehreren Abschnittsvarianten, bewährten Copy-Frameworks, SEO-Optimierung und leistungsorientierten Mustern. Kein Lorem Ipsum – echter verkaufsstarker Text.

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

Kernfunktionen

5 Hero-Abschnittsvarianten (zentriert, geteilt, Verlauf, Video-Hintergrund, minimalistisch)
Feature-Abschnitte (Raster, abwechselnd, Karten mit Symbolen)
Preistabellen (2–4 Stufen mit Feature-Listen und Umschalter)
FAQ-Akkordeon mit Schema-Markup
Testimonials (Raster, Karussell, Einzelzitat)
CTA-Abschnitte (Banner, Vollseite, Inline)
Fußzeile (einfach, Mega, minimalistisch)
4 Designstile mit Tailwind-Klassensätzen

Generierungs-Workflow

Befolgen Sie diese Schritte für jede Landing-Page-Anfrage:

Eingaben sammeln – Produktname, Slogan, Zielgruppe, Schmerzpunkt, Hauptnutzen, Preisstufen, Designstil und Copy-Framework mithilfe des untenstehenden Trigger-Formats erfassen. Fragen Sie nur nach fehlenden Feldern.
Markenstimme analysieren (empfohlen) – Wenn der Benutzer vorhandene Markeninhalte hat (Website-Texte, Blogbeiträge, Marketingmaterialien), führen Sie diese durch marketing-skill/skills/content-production/scripts/brand_voice_analyzer.py, um ein Stimmprofil (Formalität, Ton, Perspektive) zu erhalten. Verwenden Sie das Profil zur Auswahl des Designstils und des Copy-Frameworks:
- formell + professionell → Enterprise-Stil, AIDA-Framework
- lässig + freundlich → Bold-Startup-Stil, BAB-Framework
- professionell + autoritativ → Dark-SaaS-Stil, PAS-Framework
- lässig + dialogorientiert → Clean-Minimal-Stil, BAB-Framework
Designstil auswählen – Die Wahl des Benutzers (oder die aus der Markenstimmenanalyse abgeleitete) einem der vier Tailwind-Klassensätze in der Designstil-Referenz zuordnen.
Copy-Framework anwenden – Alle Überschriften und Fließtexte mit dem gewählten Framework (PAS / AIDA / BAB) schreiben, bevor Komponenten generiert werden. Die Formalität und den Ton des Stimmprofils durchgängig beibehalten.
Abschnitte in der Reihenfolge generieren – Hero → Features → Pricing → FAQ → Testimonials → CTA → Footer. Für das Produkt irrelevante Abschnitte überspringen.
Gegen SEO-Checkliste validieren – Jeden Punkt der SEO-Checkliste durchgehen, bevor der endgültige Code ausgegeben wird. Lücken direkt beheben.
Endgültige Komponenten ausgeben – Vollständige, kopier- und einfügebereite TSX-Dateien mit allen Tailwind-Klassen, SEO-Meta und strukturierten Daten liefern.

Dieses Skill auslösen

Produkt: [Name]
Slogan: [Ein-Satz-Wertversprechen]
Zielgruppe: [Wer sie sind]
Hauptschmerzpunkt: [Welches Problem Sie lösen]
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ügen Sie font-black tracking-tight zu allen <h1>/<h2>-Elementen hinzu.

Copy-Frameworks

PAS (Problem → Aufwühlen → Lösung)

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

AIDA (Aufmerksamkeit → Interesse → Verlangen → Aktion)

H1: Kühne, aufmerksamkeitsstarke Aussage → Sub: Interessante Tatsache oder Nutzen → Features: Verlangen aufbauende Beweispunkte → CTA: Klare Aktion

BAB (Vorher → Nachher → Brücke)

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

Repräsentative Komponente: Hero (Zentrierter Verlauf — Dark SaaS)

Verwenden Sie dies als strukturelle Vorlage für alle Hero-Varianten. Tauschen Sie Layout-Klassen, Verlaufsrichtung und Bildplatzierung für geteilte, Video-Hintergrund und minimalistische 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 liefern.<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 abfängt, bevor Ihre 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">
            So funktioniert es →
          </Button>
        </div>
        <p className="mt-4 text-sm text-gray-500">Keine Kreditkarte erforderlich · 14-tägige kostenlose Testversion</p>
      </div>
    </section>
  )
}

Andere Abschnittsmuster

Feature-Abschnitt (abwechselnd)

Über ein features-Array mit { title, description, image, badge } iterieren. Layoutrichtung mit i % 2 === 1 ? "lg:flex-row-reverse" : "" umschalten. <Image> mit expliziten width/height und rounded-2xl shadow-xl verwenden. In <section className="py-24"> mit max-w-6xl-Container einwickeln.

Preistabelle

Über ein plans-Array mit { name, price, description, features[], cta, highlighted } iterieren. 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. null-Preis als „Benutzerdefiniert" rendern. Pro Feature-Zeile <Check>-Symbol verwenden. Layout: grid gap-8 lg:grid-cols-3.

FAQ mit Schema-Markup

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

Testimonials, CTA, Footer

Testimonials: Raster (grid-cols-1 md:grid-cols-3) oder Einzelzitat-Hero-Block mit Avatar, Name, Rolle und Zitattext.
CTA-Banner: Vollbreiter Abschnitt mit Überschrift, Unterüberschrift und zwei Buttons (primär + Geist). Vertrauenssignale (Geld-zurück-Garantie, Logo-Strip) direkt darunter hinzufügen.
Footer: Logo + Navigationsspalten + Social-Media-Links + rechtliche Hinweise. border-t border-gray-800-Trennlinie verwenden.

SEO-Checkliste

Validierungsschritt: Überprüfen Sie vor der Ausgabe des endgültigen Codes jeden Punkt der obigen Checkliste. Beheben Sie Lücken direkt – überspringen Sie keine Punkte.

Leistungsziele

Metrik	Ziel	Technik
LCP	< 1s	Hero-Bild vorladen, `priority` bei Next/Image verwenden
CLS	< 0,1	Explizite Breite/Höhe für alle Bilder festlegen
FID/INP	< 100ms	Nicht kritisches JavaScript zurückstellen, `loading="lazy"` verwenden
TTFB	< 200ms	ISR oder statische Generierung für Landing Pages verwenden
Bundle	< 100KB JS	Mit `@next/bundle-analyzer` auditieren

Häufige Fallstricke

Hero-Bild nicht vorgeladen – priority-Prop zum ersten <Image> hinzufügen
Fehlende mobile Breakpoints – immer mobile-first mit sm:-Präfixen entwerfen
CTA-Text zu vage – „Loslegen" ist besser als „Mehr erfahren"; „Kostenlose Testversion starten" ist besser als „Registrieren"
Preisseite ohne Vertrauenssignale – Geld-zurück-Garantie und Testimonials in der Nähe des CTA hinzufügen
Kein CTA oberhalb der Falte auf Mobilgeräten – sicherstellen, dass der Button auf einem 375px-Viewport ohne Scrollen sichtbar ist

ibada0410/CLAUDE-SKILLS

Was ist CLAUDE-SKILLS?

In Ihrer bevorzugten KI fragen

Dokumentation