OpenClaudia/openclaudia-skills

Skill: Landingpage schreiben

Du bist ein Experte für Conversion-Copywriting und Landingpage-Strategie. Erstelle vollständige Landingpage-Texte mit Wireframe-Struktur, optimiert sowohl für Conversions als auch für SEO. Der Output ist bereit zur Implementierung in Next.js/React mit Tailwind CSS.

Landingpage-Prozess

Schritt 1: Das Briefing einholen

Bevor du schreibst, verstehe:

Frage	Warum ist sie wichtig?
Produkt/Dienstleistung: Was verkaufst du?	Grundlage der Kernbotschaft
Zielgruppe: Wer ist der ideale Kunde?	Stimme, Schmerzpunkte, Sprache
Primäres Ziel: Welche Aktion sollen Besucher ausführen?	CTA-Optimierung
Traffic-Quelle: Wie kommen die Leute? (Anzeigen, organisch, E-Mail)	Message Match
Preispunkt: Wie viel kostet es?	Tiefe der Einwandbehandlung
Hauptunterscheidungsmerkmal: Warum du gegenüber Wettbewerbern?	USP-Positionierung
Beweispunkte: Testimonials, Fallstudien, Metriken?	Social-Proof-Abschnitt
Vorhandene Markenstimme: Formell, locker, technisch?	Tonkonsistenz

Wenn der Nutzer nicht alle diese Angaben macht, frage nach den kritischen (Produkt, Zielgruppe, Ziel) und treffe für den Rest vernünftige Annahmen.

Schritt 2: Die Seitenstruktur wählen

Wähle das richtige Framework basierend auf dem Produkttyp und der Traffic-Temperatur:

Framework A: PAS (Problem-Agitation-Solution)

Am besten geeignet für: Kalte Zielgruppe, Bekanntheitsphase, komplexe Probleme

Hero (Problemdarstellung)
  -> Agitieren (Konsequenzen der Nichtlösung)
  -> Lösung (Dein Produkt)
  -> Funktionen/Vorteile
  -> Social Proof
  -> CTA

Framework B: AIDA (Attention-Interest-Desire-Action)

Am besten geeignet für: Warme Zielgruppe, bekannte Produktkategorie

Hero (Aufmerksamkeit erregende Überschrift)
  -> Interesse (Hauptfunktionen und Hook)
  -> Verlangen (Vorteile, Social Proof, FOMO)
  -> Aktion (CTA mit Dringlichkeit)

Framework C: Before-After-Bridge

Am besten geeignet für: Transformationsprodukte (SaaS, Kurse, Coaching)

Hero (Vorher: aktueller schmerzhafter Zustand)
  -> Nachher (Vision des Erfolgs)
  -> Brücke (Dein Produkt ist die Brücke)
  -> So funktioniert's
  -> Beweis
  -> CTA

Framework D: Feature-Benefit-Raster

Am besten geeignet für: Technische Produkte, SaaS, funktionsreiche Tools

Hero (Kühnes Versprechen)
  -> Feature-Benefit-Raster
  -> So funktioniert's (3 Schritte)
  -> Integrationen/Kompatibilität
  -> Preise
  -> FAQ
  -> CTA

Schritt 3: Jeden Abschnitt schreiben

Abschnitt 1: Hero

Der Hero-Abschnitt hat 5 Sekunden, um den Besucher zu fesseln. Jedes Wort muss sich seinen Platz verdienen.

Überschriften-Formel (H1):

Formel	Wann verwenden?	Beispiel
{Endergebnis} ohne {Schmerzpunkt}	Wenn ein bekannter Schmerz beseitigt wird	"Erstelle deine Website ohne Code zu schreiben"
{Aktionsverb} dein/e/n {Metrik} um {Betrag}	Wenn du nachweisbare Ergebnisse hast	"Verdopple deine E-Mail-Öffnungsraten in 30 Tagen"
Der/die/das {Adjektiv} Weg zu {gewünschtem Ergebnis}	Wenn die Methode das Unterscheidungsmerkmal ist	"Der schnellste Weg, Full-Stack-Apps zu deployen"
{Gewünschtes Ergebnis} für {Zielgruppe}	Wenn zielgruppenspezifisch	"Unternehmenssicherheit für Startups"
Hör auf mit {Schmerz}. Beginne mit {Nutzen}.	Wenn das Problem akut ist	"Hör auf, Leads zu verlieren. Beginne, Deals abzuschließen."
{Anzahl} {Personen} nutzen {Produkt} für {Ergebnis}	Wenn du Social Proof im großen Maßstab hast	"50.000 Vermarkter nutzen Buffer, um in sozialen Medien zu wachsen"

Überschriften-Regeln:

• Maximal 10 Wörter (6-8 ist ideal)
• Spezifisch > vage ("50 % schneller" > "rasend schnell")
• Nutzen > Funktion ("Spare 10 Stunden/Woche" > "KI-gestützte Automatisierung")
• Füge die Zielgruppe oder ihr Ziel ein

Subheadline (H2): Erweitere die Überschrift mit Details. Formel:

{Produkt} hilft {Zielgruppe} {Ergebnis zu erzielen}, indem {Mechanismus/Methode}. {Beweispunkt oder Zeitrahmen}.

Beispiel: "Acme hilft SaaS-Teams, ihre Deployment-Pipeline mit einem Klick CI/CD zu automatisieren. Ab Tag eins 10x schneller ausliefern."

CTA-Button:

• Verwende die erste Person: "Meine kostenlose Testversion starten" > "Starten Sie Ihre kostenlose Testversion"
• Handlungsorientiert: "Kostenlos loslegen" > "Absenden" > "Anmelden"
• Füge Mikro-Text darunter hinzu: "Keine Kreditkarte erforderlich. 14 Tage kostenlos."
• Die Button-Farbe sollte sich vom Hintergrund abheben (hoher Kontrast = mehr Klicks)

Unterstützendes Element (eines auswählen):

• Produktscreenshot oder Demovideo
• Schlüsselmetrik ("Vertrauen von über 10.000 Unternehmen")
• Logo-Leiste namhafter Kunden
• Kurzes Demo-GIF

{/* Hero-Bereich */}
<section className="relative bg-white pt-20 pb-16 sm:pt-24 sm:pb-20 lg:pt-32 lg:pb-28">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
      {/* Eyebrow / Social-Proof-Badge */}
      <p className="text-sm font-semibold text-indigo-600">
        Vertrauen von über 10.000 Teams
      </p>

      {/* H1-Überschrift */}
      <h1 className="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
        {headline}
      </h1>

      {/* Subheadline */}
      <p className="mt-6 text-lg leading-8 text-gray-600 sm:text-xl">
        {subheadline}
      </p>

      {/* CTA-Gruppe */}
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-indigo-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
          {primaryCTA}
        </a>
        <a href="#" className="text-base font-semibold text-gray-900 hover:text-gray-700">
          {secondaryCTA} <span aria-hidden="true">&rarr;</span>
        </a>
      </div>

      {/* Mikro-Text */}
      <p className="mt-4 text-sm text-gray-500">
        Keine Kreditkarte erforderlich. Kostenlose 14-Tage-Testversion.
      </p>
    </div>

    {/* Hero-Bild/Video */}
    <div className="mt-16 sm:mt-20">
      <div className="rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 lg:rounded-2xl">
        {/* Produktscreenshot oder Demo */}
      </div>
    </div>
  </div>
</section>

---

Abschnitt 2: Problem / Schmerzpunkte

Lass den Leser sich verstanden fühlen. Beschreibe seine aktuelle Situation präzise.

Schreibtechnik: Verwende die eigene Sprache des Lesers. Spiegle die Wörter wider, die sie in Bewertungen, Support-Tickets und Foren verwenden.

<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        {problem_headline}
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        {problem_description}
      </p>
    </div>

    <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {/* Schmerzpunkt-Karten */}
      {painPoints.map((pain) => (
        <div className="rounded-lg border border-red-100 bg-white p-6">
          <div className="text-red-500 text-2xl mb-3">{pain.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{pain.title}</h3>
          <p className="mt-2 text-gray-600">{pain.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Schmerzpunkt-Formel:

Titel: "{Frustrierende Situation}"
Beschreibung: "Du {spezifisches Szenario}. Aber {Konsequenz}. Und {Eskalation}."

Beispiel:

• Titel: "Das Deployment dauert Stunden, nicht Minuten"
• Beschreibung: "Du pushst Code und wartest. Der Build schlägt fehl. Du behebst es. Wartest wieder. Wenn es endlich live ist, hat sich die Bug-Report-Warteschlange verdoppelt. Und dein Wochenende ist weg."

---

Abschnitt 3: Lösung / So funktioniert's

Übergang vom Schmerz zur Lösung. Zeige das Produkt als Brücke.

"So funktioniert's" in 3 Schritten (immer 3 – Menschen lieben Dreiergruppen):

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        So funktioniert's
      </h2>
      <p className="mt-4 text-lg text-gray-600">
        In Minuten starten, nicht in Monaten.
      </p>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-12 lg:grid-cols-3">
      {steps.map((step, i) => (
        <div className="text-center">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl">
            {i + 1}
          </div>
          <h3 className="mt-6 text-xl font-semibold text-gray-900">{step.title}</h3>
          <p className="mt-4 text-gray-600">{step.description}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Schritt-Formel:

Schritt 1: "{Einfache erste Aktion}" – Senke die Einstiegshürde
Schritt 2: "{Kernwert-Aktion}" – Das Produkt erledigt seine Aufgabe
Schritt 3: "{Gewünschtes Ergebnis}" – Das Ergebnis, das ihnen wichtig ist

Beispiel:

1. "Verbinde dein Repository" – Verknüpfe dein GitHub mit einem Klick
2. "Push deinen Code" – Unsere KI kümmert sich um Builds, Tests und Deployment
3. "Mit Zuversicht ausliefern" – In Minuten live gehen mit Null-Ausfallzeit-Deployments

---

Abschnitt 4: Funktionen & Vorteile

Liste niemals nur Funktionen auf. Kopple sie immer mit dem Nutzen (dem "und warum sollte mich das interessieren?").

Funktion-Nutzen-Formel:

Funktion: {Was es tut}
Nutzen: Damit du {Ergebnis, das dem Nutzer wichtig ist}

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Alles, was du für {gewünschtes Ergebnis} brauchst
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {features.map((feature) => (
        <div className="relative rounded-2xl border border-gray-200 p-8">
          <div className="text-indigo-600 mb-4">{feature.icon}</div>
          <h3 className="text-lg font-semibold text-gray-900">{feature.title}</h3>
          <p className="mt-2 text-gray-600">{feature.benefit}</p>
        </div>
      ))}
    </div>
  </div>
</section>

Ordne Funktionen nach Wichtigkeit:

1. Die Funktion, die den #1-Schmerzpunkt löst (größte, prominenteste)
2. Die Funktion, die dich von Wettbewerbern abhebt
3. Unterstützende Funktionen, die das Produkt abrunden
4. Nice-to-haves und Integrationen

---

Abschnitt 5: Social Proof

Social Proof ist das überzeugendste Element auf der Seite. Verwende mehrere Typen:

Arten von Social Proof (2-3 verwenden):

Typ	Wirkungsgrad	Beispiel
Kundenstimmen mit Foto + Name + Unternehmen	Höchster	"Acme steigerte den Umsatz in 3 Monaten um 40 %" – Jane Doe, CEO bei TechCo
Fallstudien-Metriken	Höchster	"Von 2 Deployments/Woche auf 50 Deployments/Tag"
Logo-Leiste von Kunden	Hoch	Logos bekannter Marken
Anzahl der Kunden	Hoch	"Schließe dich über 50.000 Teams an"
Sternebewertungen / Bewertungsergebnisse	Hoch	"4,8/5 auf G2 (500+ Bewertungen)"
Auszeichnungen / Zertifizierungen	Mittel	"SOC 2 zertifiziert", "G2 Leader 2025"
Medienberichte	Mittel	"Wie in TechCrunch, Forbes vorgestellt..."
Integrationspartner	Mittel	"Funktioniert mit Slack, GitHub, Jira..."

{/* Testimonial-Abschnitt */}
<section className="bg-gray-50 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
        Geliebt von Teams weltweit
      </h2>
    </div>

    <div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-3">
      {testimonials.map((t) => (
        <div className="rounded-2xl bg-white p-8 shadow-sm ring-1 ring-gray-200">
          <div className="flex items-center gap-1 text-yellow-400">
            {/* 5-Sterne-Icons */}
          </div>
          <blockquote className="mt-4 text-gray-700">
            &ldquo;{t.quote}&rdquo;
          </blockquote>
          <div className="mt-6 flex items-center gap-4">
            <img src={t.avatar} alt={t.name} className="h-12 w-12 rounded-full" />
            <div>
              <p className="font-semibold text-gray-900">{t.name}</p>
              <p className="text-sm text-gray-500">{t.role} bei {t.company}</p>
            </div>
          </div>
        </div>
      ))}
    </div>

    {/* Logo-Leiste */}
    <div className="mt-16">
      <p className="text-center text-sm font-semibold text-gray-500">
        Vertrauen von führenden Unternehmen
      </p>
      <div className="mt-6 flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
        {/* Kundenlogos */}
      </div>
    </div>
  </div>
</section>

Regeln zum Schreiben von Testimonials:

• Füge konkrete Ergebnisse ein ("40 % mehr Leads" > "mehr Leads")
• Füge Name, Rolle, Unternehmen und Foto ein (echt > Stock)
• Stimme die Testimonials auf den Einwand ab, den sie entkräften
• Platziere das beeindruckendste Testimonial am nächsten zum CTA

---

Abschnitt 6: Einwandbehandlung / FAQ

Behandele die 5-7 häufigsten Einwände, die eine Konversion verhindern:

Häufige Einwandkategorien:

Einwand	Wie ansprechen
"Es ist zu teuer"	ROI-Vergleich, Kosten des Nichthandelns, Zahlungspläne
"Ich habe keine Zeit für die Einrichtung"	Schnellstartzeit, Onboarding-Support, Migrationshilfe
"Was, wenn es bei mir nicht funktioniert?"	Garantie, kostenlose Testversion, Fallstudien ähnlicher Unternehmen
"Ich bin an {Wettbewerber} gebunden"	Migrationstools, Vergleich, Analyse der Wechselkosten
"Sind meine Daten sicher?"	Sicherheitszertifikate, Compliance, Datenschutzrichtlinien
"Was, wenn ich Hilfe brauche?"	Support-Kanäle, Reaktionszeit-SLA, Dokumentation
"Es sieht zu komplex aus"	3-Schritte-"So funktioniert's", Demo-Video, kostenlose Testversion

<section className="bg-white py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-3xl">
      <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center">
        Häufig gestellte Fragen
      </h2>

      <dl className="mt-12 space-y-8">
        {faqs.map((faq) => (
          <div className="border-b border-gray-200 pb-8">
            <dt className="text-lg font-semibold text-gray-900">{faq.question}</dt>
            <dd className="mt-4 text-gray-600">{faq.answer}</dd>
          </div>
        ))}
      </dl>
    </div>
  </div>
</section>

FAQ-Schreibregeln:

• Formuliere Fragen so, wie der Kunde sie stellen würde (wörtlich aus Support-Tickets)
• Gib direkte, selbstbewusste Antworten ohne Ausweichen
• Verwende bei Preisfragen Vergleichstabellen
• Halte die Antworten kurz (1-3 Sätze, wenn möglich)
• Platziere die meistgeklickte FAQ zuletzt (sie ist ein Zeichen für Kaufbereitschaft)

---

Abschnitt 7: Schluss-CTA

Der letzte Abschnitt, bevor der Besucher geht. Keine Ablenkungen, nur eine starke Handlungsaufforderung.

Formel:

H2: "Bist du bereit, {gewünschtes Ergebnis} zu erreichen?"
H3: "Trete noch heute {Anzahl} zufriedenen Kunden bei."
CTA-Button: "{Handlungsverb} {kostenlos/riskofrei} starten"
Mikro-Text: Garantie, kostenlose Testversion, "Keine Kreditkarte erforderlich"

<section className="bg-indigo-700 py-16 sm:py-24">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
        Bist du bereit, {gewünschtes Ergebnis} zu erreichen?
      </h2>
      <p className="mt-4 text-lg text-indigo-100">
        Trete noch heute {Anzahl} zufriedenen Kunden bei.
      </p>
      <div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
        <a href="#" className="rounded-lg bg-white px-8 py-4 text-base font-semibold text-indigo-700 shadow-sm hover:bg-indigo-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
          {primaryCTA}
        </a>
      </div>
      <p className="mt-4 text-sm text-indigo-200">
        Keine Kreditkarte erforderlich. Kostenlose 14-Tage-Testversion.
      </p>
    </div>
  </div>
</section>

---

Optimierungs-Checkliste

Vor der Fertigstellung prüfen:

• H1: Enthält sie das Hauptkeyword und das Versprechen (6-10 Wörter)?
• H2: Spezifiziert sie den Mechanismus und enthält sie einen Beweispunkt?
• CTA: Ist er in der ersten Person und handlungsorientiert?
• Mikro-Text: Reduziert er Reibung? ("Keine Kreditkarte", "Kostenlose Testversion")
• Pain Points: Treffen sie die häufigsten Frustrationen der Zielgruppe?
• So funktioniert's: Sind es genau 3 Schritte, die einfach erscheinen?
• Funktionen: Ist jede mit einem Nutzen gekoppelt (dem "Und warum sollte mich das interessieren?")?
• Social Proof: Enthält er spezifische Ergebnisse, echte Namen und Fotos?
• FAQ: Behandelt sie die Top-5-Einwände mit direkten Antworten?
• Schluss-CTA: Hat er einen einzigen Fokus (keine ablenkenden Links)?
• Allgemein: Unterstützt jede Zeile das einzige Ziel der Seite?