Landing Page Generatorvon Alireza Rezvani

Landing Page Generator Skill.

Verknüpfen Sie ein reales Produktversprechen mit Seitenabschnitten, bevor die Komponenten generiert werden.

Landingpages
Copywriting
Frontend

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Landing Page GeneratorSKILL.md

Aufgabe Landingpages Ergebnis • TSX-Landingpage-Abschnitte für React oder Next.js mit Tailwind-Styles • Textvarianten, geordnet nach einem gewählten Botschaftsrahmen • Gerüst für Titel, Beschreibung, Canonical und strukturierte Daten Vor dem Start Ein kompatibles React- oder Next.js-Projekt mit Tailwind; referenzierte UI-Komponenten und optionale Tools zur Markenanalyse erfordern möglicherweise eine separate Einrichtung.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Eine React-Landingpage aus einem Produktbriefing entwerfen

Ein Workflow vom Produktbriefing zu TSX, der Copy-Frameworks, Landingpage-Abschnitte und Checklisten für SEO und Performance kombiniert.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Landing Page Generator kombiniert Marketing-Copy-Frameworks mit React- oder Next.js-Abschnittsmustern und Tailwind-Styling. Es erfasst Zielgruppe, Schmerzpunkt, Nutzen, Preise und Designrichtung und entwirft dann den Text, bevor die Seite zusammengesetzt wird. Die Quelle bietet Muster für Hero, Features, Preise, FAQ und CTA; irrelevante Abschnitte werden weggelassen statt automatisch gefüllt.

Die Quelle verwendet Conversion- und Performance-Aussagen als Ziele, nicht als gemessene Ergebnisse einer generierten Seite. Ihre Vorlagen enthalten zudem Beispiele für Testimonials, Garantien und Produktaussagen, die durch verifizierte Angaben ersetzt oder weggelassen werden müssen. SEO-Metadaten und strukturierte Daten sind ein nützliches Gerüst, müssen aber zur tatsächlichen Seite sowie zu Routing und Indexierungsrichtlinie der Website passen.

Erwartete Ergebnisse

TSX-Landingpage-Abschnitte für React oder Next.js mit Tailwind-Styles
Textvarianten, geordnet nach einem gewählten Botschaftsrahmen
Gerüst für Titel, Beschreibung, Canonical und strukturierte Daten

Beispielbriefing ansehen

Vom Briefing zur Prüfung

01
Produktfakten sammeln
Legen Sie Zielgruppe, primäre Aktion, Nutzen und tatsächliche Preise fest. Trennen Sie freigegebene Belege von Aussagen, die nicht belegt sind.
02
Zuerst die Botschaft schreiben
Wählen Sie eine Problem-Lösungs- oder Vorher-Nachher-Erzählung, die zum Produkt passt, und entscheiden Sie dann, welche Abschnitte wirklich nötig sind.
03
Bauen und prüfen
Generieren Sie Komponenten im bestehenden Projekt, prüfen Sie Mobile-Layout und Metadaten und messen Sie die tatsächliche Performance, statt die Zielwerte der Vorlage zu wiederholen.

02 Einsatzbereiche

Wann Sie es einsetzen

Ein kompatibles React- oder Next.js-Projekt mit Tailwind; referenzierte UI-Komponenten und optionale Tools zur Markenanalyse erfordern möglicherweise eine separate Einrichtung.

Gut geeignet

Entwürfe für ProduktlaunchesNützlich, wenn die Produktfakten bekannt sind und eine stimmige erste Umsetzung benötigt wird.
BotschaftsvariantenGeeignet, um verschiedene Ansätze für Headline und CTA zu erkunden und dabei dasselbe verifizierte Angebot beizubehalten.

Zu prüfende Grenzen

Keine Conversion-GarantieEin Copy-Framework oder eine Vorlage belegt keine höhere Conversion. Dafür braucht es einen echten Messplan und ausreichend Daten.
Keine erfundenen BelegeTestimonials, Kundenlogos, Garantien und numerische Vorteile müssen aus freigegebenen Quellen stammen, nicht aus der Beispielkomponente.

Diese Angaben mitbringen

Produkt und ZielgruppeNennen Sie das tatsächliche Angebot, die Zielkunden und die Hauptaufgabe, die die Seite unterstützen soll.
Angebot und BelegeLiefern Sie aktuelle Preise und alle freigegebenen Testimonials, Kennzahlen oder Garantien; benennen Sie fehlende Belege.
ProjektvorgabenGeben Sie das React- oder Next.js-Setup, Markenregeln und SEO-Konventionen der Website an.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

Text vor Komponenten
Wer zuerst das Versprechen formuliert, bindet die Abschnittswahl an das Angebot statt an einen festen Vorlagenkatalog.
SEO im Entwurf
Metadaten, Canonical-Behandlung und semantische Struktur werden zusammen mit dem Seitencode bedacht, statt bis zur Übergabe vergessen zu werden.

04 Beispielbriefing

Ein fokussiertes Briefing ausprobieren

Das folgende Beispielbriefing wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie es verwenden.

Einrichtung prüfen

Laden Sie den vollständigen Skill und passen Sie dessen Komponentenbeispiele an das Repository an. Gehen Sie nicht davon aus, dass Beispiel-Imports oder SEO-Dateien auf Website-Ebene bereits vorhanden sind.

Upstream-Quelldatei

https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md

Ein kompatibles React- oder Next.js-Projekt mit Tailwind; referenzierte UI-Komponenten und optionale Tools zur Markenanalyse erfordern möglicherweise eine separate Einrichtung.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellmaterial und Vorgaben dieses Briefings an, bevor Sie den Skill ausführen.

Beispielbriefing

Nutze landing-page-generator, um anhand des bereitgestellten Briefings eine Next.js-Seite für unser Terminplanungsprodukt zu entwerfen. Verwende nur die von mir gelieferten Preise und Vorteile, lasse Testimonials und Garantien weg, da keine freigegeben sind, und behalte unsere Brand-Tokens bei. Schreibe zuerst die Varianten für Headline und CTA und baue dann die relevanten Abschnitte. Ergänze Metadaten und nur unterstützte strukturierte Daten und weise gemessene Performance getrennt von Zielwerten aus.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Jede Aussage und jedes Preisdetail entspricht einer freigegebenen Angabe.
Die Seite hat eine klare primäre Aktion und nutzbare mobile Abschnitte.
Metadaten und strukturierte Daten spiegeln den sichtbaren Inhalt wider, und Performance-Ergebnisse sind nach Messstatus gekennzeichnet.

OpenDesign bietet einen lokalen Design-Workspace für Coding-Agenten. Diese Auflistung bedeutet nicht, dass der Skill gebündelt ist oder dass externe Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Quickstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber: Alireza Rezvani
Repository: alirezarezvani/claude-skills
Skill-Datei: product-team/skills/landing-page-generator/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 19392f7a0826

Redaktionelle Quellenzusammenfassung

Ein Workflow vom Produktbriefing zu TSX, der Copy-Frameworks, Landingpage-Abschnitte und Checklisten für SEO und Performance kombiniert.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätsurteil.

06 Fragen vor dem Start

Fragen vor dem Start

Garantiert es bessere Conversion?

Nein. Die Quelle bietet Text- und Layoutmuster; ihre geschäftliche Wirkung muss am tatsächlichen Produkt und Publikum getestet werden.

Muss jede Seite Testimonials und Preise enthalten?

Nein. Der Workflow erlaubt ausdrücklich, irrelevante Abschnitte zu überspringen, und nicht belegte Nachweise dürfen nicht erfunden werden.

Sind die Performance-Zahlen bewiesene Ergebnisse?

Es sind in der Quelle genannte Zielwerte. Messen Sie die entstandene Seite in ihrer realen Umgebung, bevor Sie eine erreichte Kennzahl angeben.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellmaterial und Designarbeit in einem lokalen Workspace zusammen. Prüfen Sie die eigene Einrichtung des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen