Landing Page Designvon elayadesign

Landing Page Design Skill.

Verbinden Sie die Argumentation der Seite und ihre visuellen Regeln mit einer einzigen angestrebten Conversion.

Landingpages
Texten
Webdesign

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · Landing Page DesignSKILL.md

Aufgabe Landingpages Ergebnis • Ein Seitenentwurf, Hero-Text, Vorteile, Ablauf und ein FAQ-Entwurf. • Eine index/noindex-Empfehlung mit Titel und Beschreibung, wo sinnvoll. • Eine Umsetzung Abschnitt für Abschnitt mit dem gewählten Layout und den visuellen Regeln. Bevor Sie beginnen Es ist keine einzelne Anwendungs-Laufzeitumgebung erforderlich; die Implementierungsbeispiele verweisen auf Tailwind-Werte, IntersectionObserver und optionale Motion-Werkzeuge.

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

01 Funktionen

Eine Landingpage um eine einzige Handlung aufbauen

Planen Sie Angebot, Text, Struktur und SEO-Ansatz und wenden Sie dann die detaillierten visuellen Regeln der Quelle an, wo sie zum Projekt passen.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Landing Page Design beginnt mit einem Angebot, einer Zielgruppe und einer primären Handlung. Die erste Hälfte erfasst Conversion-Ziel, Einwände, Traffic-Kontext, Belege und Rahmenbedingungen und schlägt vor dem Bau die Abschnittsfolge und den Text vor. Die zweite Hälfte schreibt ein detailliertes visuelles System für Typografie, Abstände, Radien, Heros, Icons, Bewegung und Komponentenzustände vor.

Dies ist ein ungewöhnlich eigenwilliger Skill und keine neutrale Checkliste. Er enthält eingeschränkte Schrift- und Abstandsvorgaben, einen verpflichtenden Tagline-Reveal-Abschnitt und bestimmte Animationskonventionen. Diese Vorgaben können mit einem etablierten Markensystem oder mit Barrierefreiheitsanforderungen kollidieren und sollten diese nicht stillschweigend überschreiben. Der Anspruch hoher Conversion ist eine Absicht, kein Beleg für gemessene Conversion-Verbesserungen.

Erwartete Ergebnisse

Ein Seitenentwurf, Hero-Text, Vorteile, Ablauf und ein FAQ-Entwurf.
Eine index/noindex-Empfehlung mit Titel und Beschreibung, wo sinnvoll.
Eine Umsetzung Abschnitt für Abschnitt mit dem gewählten Layout und den visuellen Regeln.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Das Angebot klären
Erfassen Sie Zielgruppe, Handlung, Einwände, Traffic-Quelle und echte Belege in einem einzigen Intake.
02
Die Argumentation wählen
Wählen Sie eine klassische Hero-Seite, eine Long-Form-Story, eine minimale Conversion-Seite oder eine Vergleichsstruktur und begründen Sie die Wahl.
03
Vor dem Bau entwerfen
Erstellen Sie vor der Umsetzung Gliederung, Text, SEO-Ansatz und Layout-Empfehlung.
04
Abschnittsweise bauen und prüfen
Arbeiten Sie die Seite der Reihe nach ab und prüfen Sie dabei Zustände, Links, Semantik, Metadaten und Markenvorgaben.

02 Einsatzbereiche

Wann Sie es einsetzen

Es ist keine einzelne Anwendungs-Laufzeitumgebung erforderlich; die Implementierungsbeispiele verweisen auf Tailwind-Werte, IntersectionObserver und optionale Motion-Werkzeuge.

Gut geeignet

Kampagnen mit einem AngebotNützlich, wenn der Besucher einen klar definierten nächsten Schritt gehen soll.
Von der Strategie zur UmsetzungVerbindet Text und Einwandbehandlung mit konkreten Layout- und Zustandsentscheidungen.

Grenzen, die Sie prüfen sollten

Keine Conversion-GarantieDie Quelle liefert Design- und Textregeln, keine Ergebnisse eines Experiments mit Ihrem Angebot.
Markenregeln können kollidierenDie vorgeschriebenen Schriften, Verläufe, Bewegungen und die Groß-/Kleinschreibung im Text sind keine allgemeinen Anforderungen für bestehende Produkte.
Belege müssen echt seinScheinbar konkrete Statistiken, Kundennamen oder Garantien dürfen niemals als Tatsachenbeleg erfunden werden.

Diese Angaben mitbringen

Angebot und ConversionGeben Sie an, was Besucher erhalten und welche Handlung als Erfolg zählt.
Zielgruppe und EinwändeLiefern Sie den Kontext der Besucher, die Traffic-Quelle und die tatsächlichen Gründe für Zögern.
Belege und MarkenvorgabenStellen Sie freigegebene Screenshots, Testimonials, Daten, Bedingungen und Designsystem-Anforderungen bereit.

03 Wichtige Entscheidungen

Entscheidende Weichenstellungen

Struktur vor Dekoration
Die Argumentation der Seite wird vor den visuellen Regeln gewählt. So sinkt das Risiko, Abschnitte ohne überzeugende Funktion zu verfeinern.
Die Traffic-Absicht zählt
Eine kurze Download-Seite für Nutzer mit hoher Kaufabsicht braucht eine andere Argumentation als eine informierende Landingpage für die Suche.
Die Standardvorgaben prüfen
Die Detailgenauigkeit der Quelle ist nur nützlich, wenn ihre starken visuellen Annahmen zum Projekt passen.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

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

Einrichtung prüfen

Nutzen Sie den aktuellen Installationsweg des Repositorys und binden Sie den vollständigen Skill-Ordner ein. Die Quelle ist ein Designregelwerk, kein gehosteter Seitenbaukasten.

Quelldatei im Upstream

https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

Es ist keine einzelne Anwendungs-Laufzeitumgebung erforderlich; die Implementierungsbeispiele verweisen auf Tailwind-Werte, IntersectionObserver und optionale Motion-Werkzeuge.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellenmaterial und Vorgaben in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Nutze landing-page-design, um eine Evergreen-Seite für unser Produkt design-review zu planen. Die Zielgruppe sind kleine Agenturen, die Handlung ist die Anfrage einer Demo. Verwende nur die bereitgestellten Screenshots und verifizierte Belege. Liefere vor dem Programmieren Gliederung, Hero-Text, einwandorientierte FAQ, SEO-Empfehlung und Layout-Auswahl. Behalte unsere bestehenden Marken-Tokens und die Anforderungen an reduzierte Bewegung bei.

Das Ergebnis prüfen

Prüfen Sie das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

Eine primäre Handlung bleibt vom Hero bis zum abschließenden CTA konsistent.
Jeder sachliche Beleg stammt aus den bereitgestellten Nachweisen.
Die visuellen Regeln sind mit der bestehenden Marke und den Anforderungen an Barrierefreiheit abgestimmt.

OpenDesign bietet Coding-Agenten einen lokalen Design-Arbeitsbereich. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass externe Werkzeuge, Zugangsdaten und Softwareabhä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.

Quelleninhaber: elayadesign
Repository: elayadesign/ai-design-skills
Skill-Datei: skills/landing-page-design/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · 1c1e97cb9878

Redaktionelle Quellenzusammenfassung

Planen Sie Angebot, Text, Struktur und SEO-Ansatz und wenden Sie dann die detaillierten visuellen Regeln der Quelle an, wo sie zum Projekt passen.

Originalzusammenfassung von OpenDesign auf Grundlage 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

Ist der Skill nur für Startseiten gedacht?

Nein. Der zentrale Unterschied ist, dass eine Landingpage ein Angebot und eine Absicht bedient, anders als eine Startseite mit mehreren Zielgruppen oder Zielen.

Muss auf einer bestehenden Website jede Empfehlung befolgt werden?

Nein. Der Skill selbst berücksichtigt ausdrückliche Anweisungen der Nutzer, und eine etablierte Marken- oder Barrierefreiheitsanforderung sollte geklärt statt stillschweigend überschrieben werden.

Garantiert das Hinzufügen der FAQ Sichtbarkeit in der Suche?

Nein. Empfohlen werden nützliche Frage-Antwort-Inhalte und passende Metadaten; Indexierung und Suchleistung sind davon getrennte Ergebnisse.

OpenDesign

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

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

OpenDesign herunterladen Design-Skills durchsuchen