Landing Page Director

Was macht Landing Page Director?

Erstellen Sie Landingpages durch explizite Designentscheidungen anstelle von freiem Styling. Die Qualität ergibt sich aus der Sequenzierung: das Briefing verstehen, die visuelle Richtung eingrenzen, ein System festlegen, Referenzen erstellen, diese getreu umsetzen und das gerenderte Ergebnis überprüfen.

Diese Skill besitzt den Landingpage-Workflow. Unterstützende Skill für Bild, Übersetzung, Tests, Marke, Text oder Frameworks können spezialisierte Arbeit beisteuern, dürfen diesen Workflow jedoch nicht ersetzen oder eine zweite konkurrierende Art Direction einführen.

Standardausführung

Verwenden Sie diesen Director für die Art Direction und den vollständigen Build-/Review-Loop. Wenn design-harness installiert und konfiguriert ist, laden Sie es für die isolierte Implementierung, den gespeicherten Kontext, den Browser-Nachweis und begrenzte Revisionen. Führen Sie andernfalls diese Phasen direkt aus und führen Sie die entsprechenden Aufzeichnungen durch; geben Sie nicht vor, dass prüfbare Harness-Prüfungen durchgeführt wurden. Der Benutzer muss keine zweite Skill aufrufen. Einem Kind, das eine einzelne Phase zugewiesen bekommt, muss zu seinem Elternteil zurückkehren, ohne einen weiteren Orchestrierungs-Loop zu starten.

Kompatibilität

Verwenden Sie die integrierte Bildgenerierung für visuelle Referenzen und ein browserfähiges Inspektionstool für die endgültige visuelle Qualitätssicherung. Koordinieren Sie imagegen-frontend-web, image-to-code, brand-consistency und playwright-visual-testing, wenn diese verfügbar sind. Standardmäßig GSAP-Choreografie für vollständige Landingpage-Builds und umfangreiche Neugestaltungen verwenden, mit CSS für lokale Interaktionsrückmeldungen. Respektieren Sie explizite statische Anfragen, Erhaltungsbeschränkungen und vorhandene erforderliche Bewegungssysteme.

Kernvereinbarung

• Behandeln Sie genehmigte Texte, Tatsachenbehauptungen, Logos, Marken-Assets, Seitenreihenfolge und Quellenvorlagen-Anforderungen als gesperrt.
• Fragen Sie nach der Kunden-Website, der Inhaltsquelle, dem Markenleitfaden, Logos, Schriftarten, bereitgestellten Medien, Produktvisualisierungen und relevanten Referenzen, wenn diese noch nicht verfügbar sind; gehen Sie niemals davon aus, dass kein Quellmaterial existiert, nur weil keines der ersten Nachricht beigefügt war.
• Lesen und erfassen Sie jedes bereitgestellte Dokument, jede URL, jedes Bild, jede Markendatei und jede Repository-Quelle, bevor Sie eine Art Direction vorschlagen.
• Erfinden Sie niemals Statistiken, Testimonials, Auszeichnungen, Kunden, Zertifizierungen, Standorte, Kontaktdaten, Produktbildschirme oder Beweise.
• Machen Sie fehlende Informationen mit [NOCH ZU BESTÄTIGEN] sichtbar, wenn diese nicht sicher weggelassen werden können.
• Legen Sie vor der Implementierung eine kohärente visuelle Sprache fest.
• Übernehmen Sie routinemäßige Art-Direction- und Referenzauswahl-Entscheidungen, es sei denn, der Benutzer fordert visuelle Genehmigungs-Checkpoints an. Zeichnen Sie die vom Agenten ausgewählten Referenzen ehrlich auf; bezeichnen Sie sie niemals als benutzergenehmigt. Eskalieren Sie Inhaltsunsicherheiten und Konflikte mit gesperrten Anforderungen, nicht mit gewöhnlichen Designentscheidungen.
• Bevorzugen Sie eine kontrollierte, lesbare Hierarchie gegenüber Spektakel: Ein erstklassiges Ergebnis darf nicht von riesigen Schriften, überladenen Hero-Bereichen, ornamentalen Markierungen oder überdimensionierten Brandings abhängen.
• Behandeln Sie Bewegung als Teil dieser visuellen Sprache: Geben Sie ihr einen Zweck, eine Persönlichkeit, ein Zeitsystem und ein Gegenstück für reduzierte Bewegung.
• Verwenden Sie genau eine primäre Geschmacksrichtung. Mischen Sie nicht mehrere Stil-Skills oder Moodboards.
• Generieren und überprüfen Sie visuelle Referenzen kritisch, bevor Sie codieren, wenn die visuelle Qualität zentral ist.
• Erstellen Sie eine funktionierende Seite, kein statisch aussehendes Mock-up mit trägen Steuerelementen.
• Überprüfen Sie die tatsächlich gerenderte Seite bei Desktop- und Mobilbreiten, bevor Sie die Fertigstellung melden.

Workflow-Zustandsautomat

Folgen Sie den Phasen in der Reihenfolge. Überspringen Sie eine Phase nur, wenn der Benutzer bereits alles geliefert hat, was diese Phase etablieren würde. Bitten Sie den Benutzer nicht, Informationen zu wiederholen, die bereits im Briefing, in den Dateien, im Gespräch, im Marken-Kit oder in der Referenz-URL vorhanden sind.

1. Briefing lesen und klassifizieren

Erfassen Sie alles, was bereits im Gespräch und Arbeitsbereich vorhanden ist, bevor Sie den Benutzer nach etwas fragen. Lesen Sie guided-intake.md und führen Sie dessen Quellmaterial-Vorprüfung durch, wenn der Quellensatz fehlt oder unvollständig ist.

Die Quellenerfassung umfasst:

• Kundenname, aktuelle Website oder Quellseiten-URL und ob die Aufgabe eine neue Seite, Neugestaltung, Klon oder Erweiterung ist
• Genehmigtes Inhaltsdokument, Textstatus, erforderliche Seiten-/Abschnittsreihenfolge, Behauptungen, Rechtstexte und primäre Konversion
• Markenleitfaden, Logos, Marken, Farbspezifikationen, Schriftdateien und -lizenzen, Symbolsysteme und frühere Kollateralien
• Bereitgestellte Fotografie, Video, Illustration, Diagramme, Produkt-Screenshots, UI-Aufnahmen, Testimonials, Nachweise und Compliance-Material
• Wettbewerbs- oder Inspirationsreferenzen, einschließlich dessen, was der Kunde mag und nicht mag
• Vorhandenes Repository, Framework, Komponentensystem, technische Einschränkungen, Analyse-/Formularziele und Bereitstellungserwartungen

Wenn nichts existiert, dokumentieren Sie, dass das Projekt eine Neuland-Entwicklung ist, und fahren Sie fort, ohne vorzugeben, dass Assets geliefert wurden. Wenn der Benutzer angibt, dass eine Website, ein Dokument, ein Ordner oder ein Assetset existiert, aber nicht zugänglich ist, fordern Sie die URL, den Anhang, den Pfad oder die Berechtigung an, bevor Sie Entscheidungen treffen, die davon abhängen.

Klassifizieren Sie die Aufgabe:

• Neu und visuell undefiniert: geführtes Intake und Richtungsauswahl durchführen.
• Neu mit explizitem visuellen Briefing: das zusammengestellte Briefing bestätigen und zu den Referenzen übergehen.
• Referenzgeführt oder Klon: die Referenz analysieren und die angeforderte Struktur, den Inhalt und das Interaktionsmodell beibehalten.
• Neugestaltung: die aktuelle Seite überprüfen, bevor eine Richtung vorgeschlagen wird; die funktionale Funktionalität und gesperrten Text beibehalten.

Überprüfen Sie das Repository und seine Anweisungsdateien, bevor Sie Code ändern. Behalten Sie das vorhandene Framework, den Paketmanager, die Komponentenkonventionen und die Laufzeitumgebung bei, es sei denn, der Benutzer fordert explizit eine Migration an.

2. Geführtes Intake bei Bedarf durchführen

Wenn Designentscheidungen delegiert werden, wählen Sie ungelöste visuelle Präferenzen aus dem Kundenkontext und dokumentieren Sie Ihre Argumentation, anstatt ein Interview durchzuführen. Verwenden Sie die folgenden Fragen nur, wenn der Benutzer eine kollaborative Richtungsauswahl wünscht oder eine materielle Anforderung nicht sicher abgeleitet werden kann.

Die Quellmaterial-Vorprüfung erfolgt vor der Design-Befragung und zählt nicht zum Design-Fragen-Limit. Fragen Sie nicht nach Material, das bereits im Gespräch, Arbeitsbereich, auf der aktuellen Website oder in der verbundenen Quelle gefunden wurde.

Stellen Sie eine Entscheidung nach der anderen. Jede Frage sollte zwei oder drei sich gegenseitig ausschließende Optionen enthalten, die empfohlene Option zuerst nennen, ihre visuelle oder kommerzielle Wirkung in einem Satz erklären und eine freie Alternative zulassen. Halten Sie einen sichtbaren Fortschritt fest, z. B. „Richtung 1 von 4".

Priorisieren Sie nur ungelöste Entscheidungen. Ein typisches vages Briefing benötigt vier Entscheidungen:

1. Visuelle Richtung
2. Farbstimmung
3. Typografischer Charakter
4. Hero-/Layout-Struktur

Fragen Sie nach Bildmaterial, Bewegung oder Konversionsarchitektur nur, wenn das Briefing diese nicht ableitbar macht. Wenn Bewegung kommerziell oder narrativ wichtig ist, fragen Sie, ob das Erlebnis zurückhaltend, ausdrucksstark oder scrollgeführt sein soll, und erklären Sie den Leistungskompromiss. Halten Sie das Interview auf sechs Fragen oder weniger, es sei denn, der Benutzer wünscht einen tieferen Workshop.

Beginnen Sie nicht mit dem Codieren, solange eine materielle Richtungswahl ungelöst bleibt.

3. Drei benannte Richtungen präsentieren

Für eine undefinierte Markenrichtung schlagen Sie drei wirklich unterschiedliche Wege vor – nicht drei Farbvariationen desselben Layouts. Jede Richtung muss Folgendes angeben:

• Ein einprägsamer Name
• Die strategische Idee und der Eindruck beim Publikum
• Schriftpaarung oder typografische Kategorie
• Palette-Stimmung mit repräsentativen Farbrollen
• Hero-Komposition
• Hero-Dichte, Headline-Spannweite, Erstansichts-Inhaltsbudget und was bewusst unter dem Falz platziert wird
• Bildbehandlung
• Logo-Behandlung in Navigation und Footer, einschließlich Hintergrundbehandlung und maximalem visuellem Fußabdruck
• Oberfläche, Rand, Radius und Schattencharakter
• CTA-Behandlung und wie die primäre Konversion visuell dominant wird, ohne dekorative Unordnung
• Bewegungscharakter
• Der Hauptkompromiss

Wenn Design delegiert wird, vergleichen Sie die Wege kurz, wählen Sie den stärksten und generieren Sie dessen Hero-Referenz. Andernfalls empfehlen Sie einen Weg und präsentieren Sie die Alternativen für den angeforderten kollaborativen Checkpoint. Vermeiden Sie es, drei vollständige Richtungen zu generieren, wenn ein ausgewählter Weg die Aufgabe lösen wird.

4. Design-Briefing zusammenstellen und sperren

Lesen Sie design-brief-schema.md. Schreiben Sie DESIGN-BRIEF.md innerhalb des Projekts unter Verwendung dieser Struktur.

Lesen Sie visual-calibration.md, um ein konkretes visuelles Ziel und die Korrekturschleife festzulegen. Dies ist besonders wichtig, wenn das Briefing nur „premium", „modern" oder „mach es besser" sagt.

Übersetzen Sie Entscheidungen in implementierungsbereite Regeln: benannte Schriftarten, Schriftgewichte, Schriftgrößenskala, Farb-Tokens, Raster, maximale Breiten, Abstandsrhythmus, Radien, Ränder, Schatten, Bildregeln, Abschnittsrhythmus, Interaktionen, Bewegungs-Tokens, Bewegungsreduzierung und Breakpoint-Transformationen.

Sperren Sie auch die praktischen Kompositionsbeschränkungen, die häufig zu Ablehnungen in späten Phasen führen:

• Maximale Hero-Headline-Breite und -Größe bei Desktop und Mobil
• Priorität der Erstansicht und ein Dichtebudget für Text, Medien, Nachweise und Aktionen
• Header-Höhe plus maximale Logo-Höhe und -Breite; verwenden Sie ein wirklich transparentes Asset, wenn das Zeichen ohne Hintergrund sitzen muss
• Primäre CTA-Hervorhebung durch Größe, Kontrast, Platzierung und unterstützenden Kontext
• Minimaler Abstand zwischen Indizes, Trennlinien, Rändern, Symbolen und Text
• Abschnittsspezifische Kompositionsregeln, sodass Nachweis-, Erfolgs-, Prozess- und Konversionsabschnitte nicht zu Variationen desselben Kartenrasters werden
• Explizite genehmigte Behandlungen, abgelehnte Behandlungen und zurückgewiesene Motive, die später auf der Seite nicht wieder auftauchen dürfen

Trennen Sie drei Arten von Informationen:

• Gesperrt: genehmigte Texte, Markenfakten, bereitgestellte Assets, ausgewählte Richtung.
• Abgeleitet: Design-Tokens, responsives Verhalten, Kompositionsregeln.
• Ungelöst: Informationen, die noch auf Bestätigung warten.

Führen Sie node scripts/validate_design_brief.mjs <project>/DESIGN-BRIEF.md aus, wenn das gebündelte Skript dieser Skill zugänglich ist. Korrigieren Sie fehlende oder Platzhalter-Abschnitte, bevor Sie fortfahren.

5. Bildorientierte Abschnittsreferenzen erstellen

Laden Sie imagegen-frontend-web, verwenden Sie dann die integrierte Bildgenerierungsfunktion.

Planen Sie die Erzählung der Seite. Generieren und überprüfen Sie zuerst die Hero-Referenz kritisch, korrigieren Sie schwache Kompositionen, bevor Sie sie auf die anderen Abschnitte ausdehnen. Generieren Sie ein separates, großes, horizontales Referenzbild für jeden geplanten Abschnitt. Eine Seite mit sieben Abschnitten erhält sieben Abschnittsbilder. Generieren Sie frische Detailreferenzen anstatt kleine Fragmente aus einer Vollseiten-Komposition zu beschneiden.

Halten Sie diese über alle Referenzen hinweg konstant:

• Palette und Farbrollen
• Schriftpaarung und typografische Persönlichkeit
• Rasterlogik und Abstandsrhythmus
• Rand-, Radius-, Symbol- und Oberflächensprache
• Bildbehandlung und Art Direction

Variieren Sie die Abschnittskomposition bewusst. Vermeiden Sie standardmäßig Links-Text/Rechts-Bild, Kartenraster, Bento-Container und überdimensionierte zentrierte Headlines.

Speichern Sie projektgebundene Referenzen unter design-references/ mit geordneten Namen wie 01-hero.png, 02-proof.png und 03-product.png. Behandeln Sie genehmigte Referenzen als visuelle Quelle der Wahrheit.

Überprüfen Sie Referenzen in einem realistischen Viewport-Zuschnitt, nicht nur als isolierte Tafeln. Bestätigen Sie vor der Implementierung:

• Der Hero hat eine dominante Botschaft, eine dominante Aktion und kein konkurrierendes Cluster aus Nachweisen, Bildmaterial, Beschriftungen oder dekorativen Elementen.
• Die Anzeigeschriftart wirkt bei normaler Betrachtungsgröße selbstbewusst und nicht überdimensioniert für die Leinwand.
• Das Header-Logo ist optisch der Navigation untergeordnet und führt kein versehentliches weißes Rechteck oder nicht übereinstimmenden Hintergrund ein.
• Der abschließende Konversionsabschnitt ist ein gestalteter Moment mit ausreichend Kontrast und visuellem Gewicht, nicht nur zentrierter Text und ein Button.
• Nummerierte Zeilen, Timeline-Schritte und aufgelistete Listen haben auf beiden Seiten ihrer Linien Atemraum.
• Kein dekoratives Symbol wird als Ersatz für Komposition oder Bedeutung verwendet.

Richtungsauswahl und Referenzüberprüfung sind separate Checkpoints. Ein benannter Weg stellt nicht sicher, dass seine Ausführung gut ist. Wenn der Benutzer eine Referenz ablehnt, überarbeiten Sie sie; beginnen Sie nicht mit dem Codieren auf Basis der abgelehnten Komposition.

Standbilder können Timing nicht vollständig spezifizieren. Fügen Sie dem Design-Briefing präzise Bewegungsanmerkungen für jeden Abschnitt hinzu, der sich bewegt: Auslöser, Ablauf, räumliche Änderung, Dauer, Beschleunigung, Wiederholung, mobile Anpassung und Ergebnis bei reduzierter Bewegung. Erfinden Sie keine Animation, nur weil eine Referenz Tiefe oder geschichtetes Bildmaterial enthält.

Wenn der Benutzer eine visuelle Genehmigung angefordert hat, zeigen Sie die Referenzen und warten Sie an diesem Checkpoint. Andernfalls wählen Sie die Referenzen nach kritischer Überprüfung aus und fahren Sie autonom fort. In diesem Workflow können vom Agenten akzeptierte Referenzen als Quelle der Wahrheit für die Implementierung dienen, dürfen jedoch nicht als benutzergenehmigt beschrieben werden.

6. Referenzen in Code übersetzen

Laden Sie image-to-code und analysieren Sie jede genehmigte Referenz auf Typografie, Abstand, Farbe, Komposition, Bildmaterial, Komponenten, responsive Absicht und Interaktionshinweise.

Bevor Sie Abschnitte zusammenstellen, implementieren Sie semantische Tokens für:

• Hintergrund-, Vordergrund-, gedämpfte Text-, Akzent-, Rand- und Oberflächenfarben
• Anzeige- und Textschriftfamilien
• Schriftgrößenskala und Zeilenhöhenverhältnisse
• Abstandsrhythmus und Inhaltsbreiten
• Radius-, Rand- und Schattenstufen
• Bewegungsdauer und Beschleunigung

Implementieren Sie Header und Hero als ersten visuellen Ausschnitt und überprüfen Sie sie bei 1440 und 390 Pixeln, bevor Sie die restlichen Abschnitte übersetzen. Korrigieren Sie Logogröße und -hintergrund, Hero-Dichte, Headline-Umbruch, CTA-Gewicht und Faltkomposition an diesem Punkt, damit ein schwacher erster Bildschirm nicht durch die Seite propagiert wird.

Verwenden Sie intrinsische transparente Bild-Assets für Logos, wenn verfügbar. CSS-Blending, weiße Container, Ausschneiden oder Filter sind kein Ersatz für das Entfernen eines unerwünschten eingebetteten Hintergrunds. Dimensionieren Sie Logos nach ihrem sichtbaren Merkmal, nicht nur nach den Quell-Bitmap-Abmessungen.

In aufgelisteten oder nummerierten Komponenten reservieren Sie expliziten Abstand zwischen der Nummer und dem Trenner oder dem Inhaltsrand. Überprüfen Sie den optischen Freiraum im gerenderten Ergebnis; mathematisch gleicher Abstand kann in der Nähe dünner Linien dennoch beengt wirken.

Erstellen Sie semantische, zugängliche HTML-Strukturen. Vermeiden Sie die Verwendung von div als Ersatz für Text- und Bild-Container, wenn native Elemente (wie header, section, nav, h1-h6, img, button) verwendet werden können. Nutzen Sie semantische Tags, um Lesbarkeit, Zugänglichkeit und SEO zu verbessern.

Überprüfen Sie das gerenderte Ergebnis bei Desktop- und Mobilbreiten, bevor Sie die Fertigstellung melden. Nehmen Sie iterative Anpassungen vor, um sicherzustellen, dass das Design wie beabsichtigt auf verschiedenen Bildschirmgrößen funktioniert.

Wenn ein Fehler oder eine Inkonsistenz erkannt wird, kehren Sie zur vorherigen Phase zurück und verfeinern Sie die Referenz oder das Briefing, bevor Sie fortfahren.