LandingRabbit/landingrabbit-skills

LandingRabbit Seitenformat-Skill

Zweck

Verwende diesen Skill, wenn ein Nutzer in Claude/ChatGPT/Gemini eine Landingpage-Kopie verfasst und Folgendes möchte:

• Den LLM-Dienst seiner Wahl für die Content-Idee und Content-Erstellung nutzen und den Inhalt später in LandingRabbit importieren.
• Die Kopie in einem Markdown-Format erhalten, das LandingRabbit zuverlässig parsen und in eine Seite umwandeln kann.
• Ausschließlich unterstützte LandingRabbit-Abschnittstypen und Inhaltsfelder verwenden, sodass der Nutzer die fertige Seitenstruktur und den Kopietext einfach in LandingRabbit importieren kann.

Schritt-für-Schritt-Aufgabe

Deine Aufgabe ist es, die fertige Landingpage-Kopie des Nutzers zu lesen und in das LandingRabbit-konforme Markdown-Format zu bringen.

1. Falls im Chat noch nicht besprochen, bitte den Nutzer, einen fertigen Kopietext für eine Landingpage bereitzustellen (z. B. Startseite, Anzeigen-Landingpage, Newsletter-Anmeldeseite, Leadmagnet-Seite, Preisseite usw.).
2. Überprüfe den geplanten Kopietext und die Seitenstruktur.
3. Frage den Nutzer nach weiteren Informationen, falls du dir bei Teilen des Inhalts unsicher bist und welcher Abschnittstyp in LandingRabbit am besten zu jedem Teil des Plans passt.
4. Ordne die Kopie den verfügbaren Abschnitten und Inhaltselementen zu.
5. Gib deine Antwort im LandingRabbit-konformen Markdown entsprechend den Beispielantworten aus.

Wichtige Anweisungen

• Gib deine Antwort als ein einzelnes Dokument aus, das einfach kopiert und in LandingRabbit eingefügt werden kann.
• Vermeide Änderungen am Text und an der Abschnittsreihenfolge des Nutzers.
• Teile nur das LandingRabbit-konforme Markdown mit Abschnittstypen und vorgeschlagenen Layouts mit. Füge in deiner Antwort keine zusätzlichen Kommentare oder Erklärungen hinzu.
• Die Beispiele in diesem Skill dienen nur zur Veranschaulichung der unterstützten Struktur. Behalte den Inhalt und den Ton des Nutzers bei.
• Du musst nicht alle verfügbaren Abschnitte und Inhaltselemente verwenden. Respektiere den fertigen Inhalt des Nutzers.
• Verwende --- nur zwischen Abschnitten in der endgültigen Antwort, niemals innerhalb von Inhaltsblöcken eines Abschnitts.
• Erfinde niemals optionale Layout-Konfigurationen. Beziehe dich auf die Anweisungen des Nutzers und frage bei Bedarf um Anleitung.
• Wenn der Nutzer einen Blogbeitrag, ein Hilfedokument oder eine andere Seite im Standard-Artikelformat plant, kannst du einen einzelnen „Custom“-Abschnitt mit Markdown verwenden.
• Gib keine URL-zeilen (z.B. /termin-vereinbaren, https://...) als normalen Kopietext aus; behalte URLs nur innerhalb von Markdown-Links [Text](url).

Verfügbare Abschnitte

• hero: Der Hauptabschnitt mit dem zentralen Wertversprechen und der primären Conversion-Aktion auf den meisten Seiten.
• trustedBy: Social-Proof-Abschnitt für Logos und Glaubwürdigkeitsinhalte.
• collection: Strukturierte Blöcke wie „Wie es funktioniert“, Vorteile und Listen von Dienstleistungen/Funktionen mit wiederholbaren Elementen. Dies sind die typischsten Layouts auf jeder Landingpage.
• testimonials: Kundenbeweis-Zitate.
• pricing: Ein einzelnes Dienstangebot oder eine Preistabelle zum Vergleich.
• steps: Prozess, Checkliste, Abfolge von Aktionen/Ergebnissen oder Probleme, mit denen Kunden konfrontiert sind. Nur für klare und einfache Listen und Aussagen gedacht, nicht für die Beschreibung von etwas Komplexerem, das mehrere wiederholbare Elemente erfordert.
• comparison: Vorher/Nachher- oder Aktuell/Zukünftig-Vergleich. Zum Beispiel, um zu zeigen, wie sich der Kunde vor und nach dem Kauf der Dienstleistung gefühlt hat.
• faq: Frage-und-Antwort-Abschnitt, um Einwände zu behandeln.
• cta: Fokussierter Conversion-Abschnitt, oft am Ende, manchmal aber auch zwischen den Seiteninhalten.
• custom: Freiform-Mischinhalt (Überschriften, Textblöcke, Bilder, Einbettungen, CTA). Typischerweise für Abschnitte wie „Über uns“, einfache Aussagen (z. B. H2 und Textblock) oder den gesamten Inhalt einer Artikelseite.
• tabs: Anklickbare Tabs, die jeweils ihre eigene Inhaltskarte einblenden. Zum Beispiel ein Tab pro Zielgruppe oder Anwendungsfall.
• feed: Dynamische Liste von Beiträgen aus einer Workspace-Sammlung (nur Konfiguration). Zeigt z. B. die neuesten Blogbeiträge und Nachrichtenartikel auf einer Startseite an.

Antwortformat für Abschnitte

Gib den Abschnittstyp in deiner Antwort an (z. B. Abschnittstyp: hero) und, wenn vom Nutzer gewünscht, abschnittsspezifische Layout-Konfigurationen.

Verwende für jeden Abschnitt eine Markdown-native Struktur wie folgt:

• Eyebrow: [eyebrow]: ...
• Icon (für collection + boxes-icons-Elemente): [icon]: ... (leer lassen, wenn der Nutzer Icons in der UI auswählen soll)
• Kleingedrucktes: [smallprint]: ...
• Abschnitts- oder Elementtitel: #, ##, ###
• Beschreibung/Text: einfache Markdown-Absätze
• CTA-Links: einer pro Zeile (jeweils in einer eigenen Zeile), z. B.: [Primärer CTA](url) [Sekundärer CTA](url)
• Bilder: ![Alt](url)
• Einbettungen/Formulare/Widgets: als eingerückte html-Blöcke

In hero, cta und collection (alternatives Layout) können Nutzer hinzufügen:

• Ein Raster von Boxen, das z. B. Unternehmenserfolge oder Details zur Dienstleistung zeigt. Beginne mit einer [boxes]-Zeile, dann eine Überschrift + Absatz pro Box (### in hero/cta, #### innerhalb eines collection-alternate-Elements).
  • Felder: [eyebrow]: ... (optional), Titel (die ###/####-Überschrift), Beschreibung (Absatz), CTA-Links (eine pro Zeile)
• Ein Testimonial eines zufriedenen Kunden oder Partners, das den Kopietext des Abschnitts unterstützt und ihm Glaubwürdigkeit verleiht. Beginne mit einer [testimonial]-Zeile.
  • Felder: Zitat (erste Zeile), Name, Rolle, Unternehmen

(In collection gelten [boxes] und [testimonial] nur, wenn suggestedLayout: alternate.)

Verwende --- zwischen Abschnitten.

Aufzählungslisten in Beschreibungen

Beginne in einem Beschreibungs- oder Untertitel-Feld eine Zeile mit einem dieser Marker, um eine stilisierte Aufzählungsliste hinzuzufügen:

• ✅ Text - Erfolg (grüner Haken); Vorteile, Funktionen, positive Ergebnisse
• ✓ Text - Erfolg (einfacher Haken); Vorteile, Funktionen, positive Ergebnisse
• ☑ Text - Check (Kontrollkästchen); Checklisten, „Was ist enthalten“
• ❌ Text (oder ✗) - destruktiv (rotes X); Probleme, Schmerzpunkte, negative Punkte
• ⭐ Text - Stern; Highlights, hervorgehobene Elemente
• → Text (oder ➡️) - Pfeil; Richtungsabläufe, „nächster Schritt“
• - Text (oder *, •) - Standard-Aufzählungspunkt (Punkt); neutrale Listen
• :wort: Text - ein benutzerdefiniertes Icon mit einem Wort, z. B. :rocket: Schneller bauen. Das Wort wird zu einem passenden Icon aufgelöst, wenn es eine sichere Übereinstimmung gibt; andernfalls wird es als einfacher Punkt dargestellt.

Mische Markertypen und reguläre Absätze im selben Feld. Aufeinanderfolgende Zeilen mit demselben Marker werden zu einer Liste.

Beispiel - Heldenbeschreibung mit Erfolgs-Bullets:

# Ihre Seitenüberschrift

✅ Seiten sind in 5 Minuten live
✅ Beliebt bei über 200 Teams
✅ DSGVO-konform

[Jetzt starten](/signup)

Vorgeschlagenes Layout

Für Abschnitte, die mehrere Layouts unterstützen, füge vor dem Abschnittsinhalt eine eigene Zeile mit suggestedLayout: ein.

---

Hero

• horizontal (Standard) - Text links, Medium rechts
• horizontal-reversed - Medium links, Text rechts
• vertical - Text zentriert, kein Medium oder Medium darunter

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• mediaVisibility: all | desktop | mobile | none — zeige oder verstecke das Hero-Medium pro Gerät (none blendet es aus)
• imageFit: fill | free-ratio — wie das Hero-Medium seinen Platz füllt

---

Steps

stepDecoration steuert das Symbol, das neben jedem Element angezeigt wird. Füge es vor dem Abschnittsinhalt hinzu.

• number (Standard) - nummeriert; für sequenzielle Prozessschritte
• none - kein Symbol; für einfache Inhaltslisten
• check - Häkchen; für Funktions-Checklisten und „Was ist enthalten“-Listen
• star - Stern; für Highlights und bemerkenswerte Erfolge
• arrow - Pfeil; für Richtungsabläufe und „nächster Schritt“-Sequenzen
• success - ausgefüllter Kreis mit Haken; für Vorteile und positive Ergebnisse
• destructive - ausgefüllter Kreis mit X; für Probleme und Schmerzpunkte

Wenn die Zeilen der Steps-Elemente bereits mit Emoji-Markern beginnen (z. B. 😩, ✅, 🚀), setze stepDecoration: none. Wenn stepDecoration nicht none ist, entferne führende Emoji-/Symbol-Marker aus den Steps-Zeilen.

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• mediaVisibility: all | desktop | mobile | none — zeige oder verstecke das Abschnittsmedium pro Gerät
• imageFit: fill | free-ratio — wie das Abschnittsmedium seinen Platz füllt
• mediaPosition: left | right — auf welcher Seite der Liste sich das Medium befindet
• stepIcon: <ein beschreibendes Wort oder genauer CamelCase-Name des Symbols> — benutzerdefiniertes Symbol neben jedem Schritt (ersetzt stepDecoration)

---

Tabs

• top (Standard) - Tab-Leiste über der Karte
• left - Tab-Leiste in einer Spalte links von der Karte
• right - Tab-Leiste in einer Spalte rechts von der Karte

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• cardStyle: stacked | split — Karte als ein Stapel oder Medium in eigener Spalte (nur top-Layout)
• mediaSide: left | right — auf welcher Seite die Medienspalte ist (top-Layout mit cardStyle: split)
• tabContentMode: expand | show-all — ob nur der aktive Tab seine Beschreibung anzeigt oder alle (nur left/right-Layouts)
• autoplay: <Sekunden> | off — automatischer Tab-Wechsel
• autoplayProgress: on | off — beweglicher Fortschrittsbalken auf jedem Tab
• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• imageFit: fill | free-ratio — wie das Kartenmedium seinen Platz füllt

---

Collection

• alternate - narrative Vorteilsblöcke (jedes Element: Titel + Absatz, alternierende Seiten) → Zum Beispiel Vorteile, Wertversprechen, Lösungen, „Warum wir“, Fallstudienbeispiele und Kundengeschichten
• boxes - Funktionsraster mit Bildern pro Element → Zum Beispiel Dienstleistungen, Features, Integrationen, Technische Fähigkeiten
• boxes-text - Nur-Text-Funktionsraster, keine Bilder → Zum Beispiel Anwendungsfälle, Fähigkeitslisten, Kurze Feature-Zusammenfassungen
• boxes-icons - Symbolraster (Symbol wird separat vom Textinhalt behandelt) → Oft schnelle Feature-/Service-Highlights oder „Wie es funktioniert“ in wenigen Schritten (Zahlen als Symbole)

Bei Verwendung von boxes-icons füge KEIN [eyebrow]: ... über dem Symbol hinzu, es sei denn, es wird in der geplanten Kopie ausdrücklich gewünscht. Verwende für jedes [icon]: EIN beschreibendes Wort (z. B. [icon]: rocket), einen genauen CamelCase-Komponentennamen, der vorzugsweise ein oder zwei semantische Wörter enthält (z. B. [icon]: IconRocket oder [icon]: IconArrowRight), oder lasse es leer ([icon]:) für den Nutzer, der es in der UI auswählt. Exakte Namen und sichere Ein-Wort-Übereinstimmungen werden zu echten Symbolen aufgelöst. Wenn eine Phrase angegeben wird, wird nur ihr erstes Wort durchsucht; nicht übereinstimmende Werte fallen auf leer zurück.

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• imageFit: fill | free-ratio — wie das Elementmedium seinen Platz füllt (nur alternate- und boxes-Layouts)
• sectionHeaderPosition: above | left — Platzierung der Abschnittsüberschrift (nur Boxen-Layouts)
• dividers: on | off — Trennlinien zwischen Boxen (nur Boxen-Layouts)

---

Testimonials

• carousel (Standard) - horizontales Scrollen, am besten für 3+ Testimonials
• grid - alle Testimonials gleichzeitig sichtbar, am besten für 2-4

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• sectionHeaderPosition: above | left | right — Platzierung der Abschnittsüberschrift
• imageFit: fill | free-ratio — wie das Testimonial-Medium seinen Platz füllt
• carouselAutoplay: on | off — automatischer Wechsel des Karussells (nur Karussell-Layout)
• carouselAutoplayDuration: 2-30 — Sekunden pro Folie (Dezimalstellen erlaubt; nur bei eingeschaltetem Autoplay)

---

Comparison

• boxes-text (Standard) - nebeneinanderliegender Nur-Text-Vergleich
• boxes - Seiten mit einem Bild pro Seite
• boxes-icons - Seiten mit einem Symbol pro Seite (bereitgestellt über [icon]: ... innerhalb jeder Seite)

Bullet-Line-Symbole: Ein führender Marker wählt das Symbol dieser Zeile aus und wird aus dem Text entfernt — ✅ → Erfolg, ✓ → Check, ❌/✗ → destruktiv, ⭐ → Stern, → → Pfeil. Nicht markierte Zeilen verwenden die Seitenstandards (vorher: destruktiv, nachher: Erfolg). Ein Marker pro Zeile; verwende keine anderen Emojis als Zeilenmarker.

imageFit: fill | free-ratio steuert, wie die Seitenbilder ihre Plätze füllen (nur boxes-Layout).

---

CTA

• default (Standard) - zentrierter Titel, Beschreibung und Schaltflächen
• embed - Titel und Schaltflächen mit Bild oder Einbettung daneben

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• mediaVisibility: all | desktop | mobile | none — zeige oder verstecke das Medium pro Gerät (nur Embed-Layout)
• imageFit: fill | free-ratio — wie das Medium seinen Platz füllt (nur Embed-Layout)

---

Custom

• left (Standard) - linksbündig, Artikel- oder Blog-Stil
• middle - zentriert, Landingpage-Stil

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an

---

Pricing

Pricing hat keine Layout-Optionen.

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• pricingSwitch: billing-period=toggle, currency=tabs — Auswahlstil pro Schalter (rohes toggle oder tabs wird auf den Abrechnungsschalter angewendet; toggle benötigt genau zwei Optionen)

---

FAQ

FAQ hat keine Layout-Optionen.

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• sectionHeaderPosition: above | left — Platzierung der Abschnittsüberschrift

---

TrustedBy

TrustedBy hat keine Layout-Optionen.

Basierend auf der Anfrage des Nutzers kannst du auch optionale Layout-Konfigurationen definieren:

• style: <Name des gespeicherten Stils> — wende einen benannten Abschnittsstil an
• logosScroll: off | right-to-left | left-to-right — automatisches Scrollen der Logoreihe (standardmäßig aus)
• logosScrollSpeed: 5-120 — Sekunden pro Scroll-Durchlauf (nur wenn Scrollen aktiviert ist)

---

Feed

• boxes (Standard) - Beitragsraster mit Bildern pro Beitrag
• boxes-text - Nur-Text-Beitragsraster, keine Bilder
• alternate - narrative Beitragsblöcke, alternierende Seiten

Die Feed-Konfiguration erfolgt in eigenen Zeilen nach Abschnittstyp: feed:

• suggestedLayout: boxes | boxes-text | alternate
• style: <Name des Abschnittsstils>
• collection: <genauer Titel oder Slug der Sammlung>

---

Beispiele

Beispiel 1 – Einfache Hero + Collection + CTA

Abschnittstyp: hero
suggestedLayout: horizontal

# Transformieren Sie Ihr Team mit KI

✅ Automatisieren Sie Routineaufgaben
✅ Steigern Sie die Produktivität um 40 %
✅ Nahtlose Integration mit Ihren bestehenden Tools

[Kostenlos testen](/start)
[Demo anfordern](/demo)

---

Abschnittstyp: collection
suggestedLayout: boxes-icons

## Wie es funktioniert

[icon]: verbinden
### Verbinden Sie Ihre Tools

Integrieren Sie in wenigen Minuten Ihre vorhandenen Arbeitsabläufe.

[icon]: automatisieren
### Automatisieren Sie Arbeitsabläufe

Erstellen Sie leistungsstarke Automatisierungen mit KI-gestützten Workflows.

[icon]: skalieren
### Skalieren Sie Ihr Unternehmen

Wachsen Sie ohne zusätzlichen manuellen Aufwand.

---

Abschnittstyp: cta
suggestedLayout: default

# Bereit zu starten?

Schließen Sie sich über 10.000 Teams an, die bereits automatisieren.

[Kostenlos starten](/signup)