Aston1690/Landing-Page-Skill

Landing Page Builder

Erstellen Sie die fertige Seite, nicht ein Prompt, Wireframe, Moodboard oder eine Teilprobe. Liefern Sie funktionierenden Code, der durch echte Browser-QA abgesichert ist. Premium-Qualität bedeutet markenspezifische Entscheidungen, exzellente Typografie/Komposition/Bildmaterial, Conversion-Klarheit, responsives Handwerk, zielgerichtete Bewegung, Barrierefreiheit, Leistung und faktische Integrität.

Beim Aufruf lesen Sie metadata.version oben und notieren Sie landing-page v<version> im Projekt-Brief. Wiederholen Sie diese exakte Version im Abschlussbericht, damit jede generierte Landing Page auf die Skill-Version zurückverfolgbar bleibt, die sie produziert hat.

Harte Ausgabevereinbarung

Liefern:

• eine vollständige responsive Implementierung in einem neuen oder explizit genehmigten bestehenden Projekt;
• exakt vom Benutzer bereitgestellten Text, wörtlich erhalten; Text schreiben, bearbeiten oder umstrukturieren nur, wenn der Benutzer explizit darum bittet;
• ein funktionierendes Markensystem, Asset-Manifest/Provenienznotizen und Integrationsnotizen;
• Produktionsbildmaterial statt Platzhalter, wenn Bildgenerierung oder genehmigte Assets verfügbar sind;
• zielgerichtete GSAP-Choreografie, scroll-getriggerte Abschnittsbewegung und Steuerungs-Mikrointeraktionen standardmäßig für vollständige Builds, vorbehaltlich der dokumentierten Modusausnahmen;
• SEO/OG-Metadaten, semantische Struktur, Barrierefreiheitszustände und optimierte Medien;
• browser-getestete Benutzer-Viewport, Breakpoint-Grenzen, Tablet, schmales Mobilgerät und gängige Mobilzustände;
• Vercel-Deployment standardmäßig, gefolgt von Live-Desktop/Mobil-Verifizierung; fragen Sie nur, wenn Authentifizierung oder ein anderer echter Blocker das Deployment verhindert.

Erfinden Sie niemals Behauptungen, Metriken, Referenzen, Testimonials, Kundenlogos, regulierte Formulierungen, Produkte, Screenshots, Kontaktdaten oder Formularerfolge.

Erforderliche Skill-Routing

Vor dem Bau laden:

1. frontend-design für markenspezifische Art Direction und visuelle These.
2. design-taste-frontend für Anti-Slop-Implementierung und responsiven Preflight.
3. imagegen-frontend-web nur, wenn die autoritative Modusmatrix es auflöst: bei visueller Ambiguität, bildgeführter Richtung, angeforderten Konzepten oder unzureichenden genehmigten Assets.
4. Dieses landing-page Skill für Orchestrierung, Bau, QA und Auslieferung.
5. Die verfügbare Produktions-Bildgenerierungsfähigkeit oder media-use, wenn das offizielle/bereitgestellte Asset-Inventar die genehmigte visuelle Richtung nicht unterstützen kann.
6. imagegen-frontend-mobile nur für klar gekennzeichnete konzeptionelle App-Bildschirmmedien oder genehmigte Produktbildschirmkonzepte auf einer Mobile-App-Marketing-Seite. Verwenden Sie es niemals, um responsives mobiles Web zu entwerfen oder zu implizieren, dass generierte Bildschirme verifizierte Produktfunktionalität sind.

Lesen Sie references/frontend-skill-stack.md für Stack-Konfliktregeln.

Projektmodus-Entscheidung

Lesen Sie references/policy-matrix.md. Es ist die einzige autoritative Quelle für Imagegen, GSAP, Erhaltung, Genehmigung, Integrationssicherheit, Viewport-Abdeckung und Qualitätsgate-Routing. Wählen Sie genau einen seiner sechs Modi aus und notieren Sie die getroffenen Entscheidungen plus Begründung. Kein anderer Text darf die Matrix überschreiben.

Wenn der Benutzer „von Grund auf“ oder „fassen Sie vorherige Builds nicht an“ sagt, erstellen Sie ein eindeutig benanntes Projekt und bearbeiten Sie niemals vorherige Arbeit.

Phase 1: Aufruf-Eingabe

Stellen Sie eine kurze Frage nach der anderen. Kombinieren Sie niemals mehrere Felder in einem Absatz oder Fragebogen. Warten Sie auf die Antwort, bevor Sie die nächste wirklich erforderliche Frage stellen.

Verwenden Sie diese Reihenfolge und überspringen Sie alles, was bereits geliefert oder sicher ableitbar ist:

1. Für welches Unternehmen/Produkt und welche offizielle Website ist dies?
2. Wo ist der endgültige, vom Benutzer genehmigte Text? Text ist erforderlich und wird genau erhalten.
3. Wo sind der Markenleitfaden, das Logo und die genehmigten Assets, falls vorhanden?
4. Ist dies ein neuer separater Build oder eine Bearbeitung eines bestehenden Projekts?
5. Fragen Sie nach Zielgruppe, CTA-Ziel, Integration oder Compliance nur, wenn die gelieferte Website/der Text diese nicht beantwortet und es die Implementierung materiell blockiert.

Fragen Sie nicht, ob Text umgeschrieben werden kann. Bieten Sie nicht an, Text zu schreiben oder zu ändern. Schreiben, Bearbeiten oder Umstrukturieren ist nur durch eine explizite Benutzeranfrage aktiviert. Fragen Sie nicht, ob deployed werden soll; Vercel-Deployment ist der Standard.

Lesen Sie references/intake-brand-assets.md und befolgen Sie dessen Quellenhierarchie, Logo-Wiederherstellung, Markenleitfaden-Fallback, Compliance, Integration und Provenienzregeln.

Phase 2: Evidenz und Marken-Audit

Nach der Eingabe:

1. Lesen Sie Projektanweisungen, genehmigten Brief/Inhalt, vorherige Genehmigungen und gelieferte Referenzen.
2. Öffnen Sie die offizielle Website in einem echten Browser, wenn eine existiert; andernfalls notieren Sie den Neumarken-/keine-Website-Zustand und fahren Sie mit dem gelieferten Kontext fort.
3. Extrahieren Sie berechnete Schriften/Farben, Logo-Varianten, Abstände, Raster, Radien, Buttons, Icons, Bildmaterial, Navigation, Formulare, Footer, responsives Verhalten und Bewegung.
4. Stellen Sie ein offizielles SVG oder transparentes hochauflösendes PNG-Logo wieder her und verifizieren Sie es visuell. Wenn kein vorhandenes Logo verfügbar ist, fragen Sie den Benutzer danach. Wenn kein Logo existiert, bestätigen Sie, ob eine reine Text-Produktnamenbehandlung akzeptabel ist, und notieren Sie, dass das Logo-Design außerhalb des Umfangs liegt. Zeichnen oder generieren Sie niemals ein Kundenlogo neu.
5. Extrahieren Sie Dokumenttext und Bilder zusammen; bewahren Sie Bild-zu-Text-Beziehungen.
6. Erstellen Sie ein verifiziertes Asset-Manifest.
7. Wenn kein Markenleitfaden existiert, erstellen Sie einen kompakten, vom Agenten verfassten Projektleitfaden und kennzeichnen Sie ihn ehrlich.

Für regulierte/vertrauenswürdige Arbeiten bewahren Sie gelieferte Haftungsausschlüsse, Lizenzen, Auszeichnungen, Berechtigungen, Zustimmungen und Qualifikationen, es sei denn, Änderungen werden explizit autorisiert.

Phase 3: Inhalts- und Conversion-Architektur

Erstellen Sie ein Inhaltsmanifest vor dem Design:

• quellengestützte Überschrift/Körper/CTA/Behauptung für jeden Abschnitt;
• Aufgaben des Abschnitts: anziehen, erklären, beweisen, differenzieren, beantworten oder konvertieren;
• Evidenzquelle oder ungelöster Platzhalter;
• beabsichtigtes visuelles/Medien und Asset-Status;
• primärer Conversion-Pfad und CTA-Ziel.
• approval_status und verification_status getrennt verfolgt für faktische Behauptungen, Testimonials, Metriken, Anmeldeinformationen und regulierte Formulierungen.

Standard-Inhaltsrichtlinie ist die exakte Erhaltung des vom Benutzer bereitgestellten Texts. authorized_editing oder agent_draft_unapproved dürfen nur ausgewählt werden, wenn der Benutzer explizit das Bearbeiten oder Schreiben anfordert. Agentenentwürfe bleiben nicht genehmigt und dürfen keine unbelegten Behauptungen enthalten.

Verwenden Sie nur Abschnitte, die eine echte Conversion-Frage beantworten. Fügen Sie nicht mechanisch Held + Vertrauen + drei Karten + Testimonials + FAQ ein. Eine Hauptidee pro Abschnitt. Bewahren Sie genehmigte IA in bestehenden Projekten, es sei denn, Sie sind autorisiert, sie zu ändern.

Phase 4: Design-Brief und Imagegen

Schreiben Sie den Pre-Code-Brief:

• Zielgruppe, Conversion-Ziel, Quelle der Wahrheit, Projektmodus;
• eine themenspezifische visuelle These und narrative Achse;
• Palette, Typografie-Rollen, Raster/Abstände, Form-/Komponentengrammatik;
• Bildqualität, Asset-Karte, Bildgenerierungsplan, Signaturelement;
• Desktop/Tablet/Mobil Erst- und komplexes Abschnittsverhalten;
• Bewegungsstoryboard mit einem Zweck für jede Sequenz;
• explizite Vermeidungsliste und Akzeptanzkriterien.

Lehnen Sie die Richtung ab, wenn sie unverändert für eine nicht verwandte Marke wiederverwendet werden könnte.

Wenn die Richtlinienmatrix Imagegen auf „ein“ setzt, lesen Sie references/imagegen-production.md:

1. Verwenden Sie imagegen-frontend-web und kündigen Sie die ausgewählte Referenzanzahl an.
2. Generieren und inspizieren Sie eine separate horizontale Referenz für jeden ausgewählten Abschnitt.
3. Behalten Sie eine Markenwelt bei, während Sie Komposition und Dichte variieren.
4. Sperren Sie die Richtung entweder durch einen Benutzer-Checkpoint (angeforderter/konsequenter Kompromiss) oder ein Agenten-Akzeptanz-Gate (autonom, umkehrbar, quellengestützt). Notieren Sie, welcher Genehmigungsmodus verwendet wurde.
5. Generieren/auflösen von Produktions-Assets separat in echten Seitenverhältnissen ohne eingebackenen Text, Logos, Behauptungen oder Wasserzeichen. UI ist ausgeschlossen, außer für den richtliniengesteuerten, klar gekennzeichneten konzeptionellen App-Bildschirmfall.
6. Inspizieren, zuschneiden, optimieren, Alt-Text hinzufügen und Provenienz notieren.

Bewerten Sie Bildmaterial nach narrativem Nutzen, sichtbarer Wiederholung, Markenspezifität und Asset-Qualität, nicht nach Quoten. Eine bewusste typografisch geführte oder asset-reiche Seite kann die Generierung mit einer notierten Begründung überspringen; eine versehentlich textlastige oder stock-generische Seite fällt durch.

Phase 5: Statische Implementierung und Genehmigung

Wählen Sie den einfachsten Stack, der den Brief erfüllt:

• bewahren Sie das Framework, Styling, Routing, Komponenten, Analysen und Asset-Pipeline eines bestehenden Repositorys;
• verwenden Sie semantisches HTML, externes CSS und externes JS für wirklich statische Seiten;
• verwenden Sie React/Vite/Next nur, wenn bestehende Architektur, wiederverwendbare Komponenten, Integrationen, Zustand oder komplexe Interaktion dies rechtfertigen;
• überprüfen Sie Abhängigkeiten vor dem Import.

Vollenden Sie die statische Seite vor der Bewegung. Sie muss bereits haben:

• korrekten Text, verifiziertes Logo/Assets, echte CTA-Ziele;
• kohärente Tokens und Komponentengrammatik;
• kontrollierte Typografie und Zeilenumbrüche im Viewport des Benutzers;
• genügend kompositorische Vielfalt, um sichtbare Wiederholung zu vermeiden, ohne numerische Layout-Quoten;
• absichtliche Bildzuschnitte und reservierte Abmessungen;
• funktionierende Navigation, Formulare/Links, Fokus- und Interaktionszustände;
• bewusstes responsives Reflow statt versehentliches Stapeln;
• keine defekten Medien, Überläufe, Clipping, Fake-UI, Platzhalter oder Quellenreste.

Screenshot-QA und Behebung der statischen Komposition vor dem Start von GSAP.

Phase 6: GSAP-Produktionsdurchlauf

Lesen Sie references/gsap-motion.md für jeden vollständigen Build und jedes wesentliche Redesign; planen Sie Bewegung im Brief und implementieren Sie sie nach der statischen Kompositions-QA.

Bewegung ist standardmäßig für vollständige Builds unter der Richtlinienmatrix aktiviert. Liefern Sie Helden-Choreografie, inhaltspezifische Abschnittsbewegung und Feedback für bestehende interaktive Steuerelemente. Passen Sie die Intensität an die Marke an. Eine gültige statische/runtime/Erhaltungsbeschränkung kann dies ändern; das Fehlen einer expliziten Animationsanfrage ist kein Grund zum Überspringen. Notieren Sie Runtime-Beobachtungen in QA/motion-review.md; Screenshots allein können keine Bewegungsakzeptanz bestehen.

Halten Sie kritische Inhalte sichtbar, wenn Skripte fehlschlagen oder langsam laden. Verwenden Sie keine rohen Window-Scroll-Listener. Verifizieren Sie die Animation im aktiven Tab, da Hintergrund-Tabs Timer drosseln.

Phase 7: Browser-QA

Führen Sie die Seite lokal aus und inspizieren Sie echte Screenshots und Zustände:

• tatsächlicher Viewport des Benutzers, jede Layout-Breakpoint-Grenze, ein Tablet, ein schmales Mobilgerät und ein gängiges Mobilgerät; 375px/390px sind Standardeinstellungen, keine universellen Anforderungen;
• erster Fold, mehrere mittlere Seitenabschnitte, endgültiger CTA/Footer;
• aktive und ruhende Bewegungszustände plus reduzierte Bewegung;
• Menüs, Anker, Formulare, Akkordeons, Tabs, Karussells und Tastaturnutzung;
• berechnete Schriftfamilien/-gewichte, wo Typografie wichtig ist;
• Bildladung/natürliche Abmessungen, Zuschnitt, Alt-Text;
• horizontaler Überlauf, Clipping, Konsolen-/Netzwerkfehler, CLS-Risiken;
• Formular-/CTA-Ziel und Erfolgs-/Fehlerverhalten. Verwenden Sie Sandbox-/Test-Endpunkte und synthetische Daten. Übermitteln Sie niemals Live-Leads, CRM-Datensätze, Zahlungen, E-Mails oder Analyseereignisse ohne explizite Genehmigung.

Beheben Sie Fehler vor der Übergabe. Ein durchlaufender Build ist kein Design-QA.

Phase 8: Premium-Qualitätsgate

Lesen Sie references/premium-quality-gate.md und bewerten Sie mit Evidenz:

1. Markenspezifität
2. Conversion und Erzählung
3. Typografie
4. Komposition und Abstände
5. Bildmaterial und Art Direction
6. Komponenten-Handwerk
7. Responsives Design
8. Bewegung
9. Barrierefreiheit und Integrität
10. Leistung und Produktionsreife

Verwenden Sie binäre kritische Checks plus evidenzgestützte 0/5/8/10-Anker. Keine anwendbare Kategorie darf unter 8/10 punkten; Ziel ist 9+ insgesamt. N/A ist nur mit schriftlicher Begründung erlaubt, einschließlich Bewegung auf einer bewusst statischen Seite. Zitieren Sie Screenshot-, DOM-, Audit- oder Test-Evidenz für jede Punktzahl. Jedes kritische Ablehnungskriterium lässt die Seite unabhängig vom Durchschnitt durchfallen. Beheben Sie die schwächste anwendbare Kategorie, wiederholen Sie die Evidenz und bewerten Sie neu.

Wenn der Benutzer die Arbeit als basisch, generisch oder schlecht bezeichnet, machen Sie die aktuelle Art Direction ungültig. Hören Sie mit Mikro-Tweaks auf, identifizieren Sie die systemische Ursache, setzen Sie die These/Referenz/ersten Fold zurück, bauen Sie neu auf und machen Sie erneut QA.

Phase 9: SEO, Leistung und Deployment

Vor der Auslieferung:

• eine H1, logische Überschriftenstruktur, Titel, Beschreibung, Kanonische, OG-Metadaten und Favicon;
• responsive optimierte Bilder, Helden-Priorität/Preload, wo angemessen, Lazy-Below-Fold-Medien;
• maximal zwei gerechtfertigte Schriftfamilien und nur erforderliche Gewichte;
• semantische Elemente, Labels, Alt-Text, Kontrast, Fokus, Tastatur- und Reduced-Motion-Unterstützung;
• keine Fake-Integrationen, unbelegte Behauptungen, Konsolenfehler, defekte Links oder ungelöste Geheimnisse;
• Quellennotizen mit Copy-/Assets-/Logo-/Imagegen-/Integrations-Provenienz.

Deployen Sie jede fertige Landing Page standardmäßig auf Vercel unter Verwendung der bestehenden Vercel-Konfiguration des Projekts oder eines isolierten neuen Projektnamens. Wenn Authentifizierung, Eigentum, Geheimnisse oder ein anderer echter Blocker das Deployment verhindert, fragen Sie nur nach diesem Blocker. Überprüfen Sie den exakten Live-Alias in einem echten Browser auf Desktop und Mobilgerät; überprüfen Sie Titel-/Inhaltsmarker, Assets, Navigation, Formulare, Überlauf, Konsole, Bewegung und Alias-Eigentum. CLI-Erfolg oder HTTP 200 allein sind kein Beweis.

Anti-Slop-Ablehnungsliste

Lehnen Sie ab:

• generische lila/blaue KI-Verläufe, Blobs, bedeutungslose Glaskarten, schwebende 3D-Füller;
• nicht verwandte Stock-Händeschütteln, Fake-Dashboards, erfundene Diagramme/KPIs, falsche soziale Beweise;
• übergroße oder kondensierte Überschriften ohne Markengrund, winziger Körpertext, unbeholfene Umbrüche;
• identische dreikartige Reihen, wiederholte Layout-Familien, übermäßige Pillen/Radien/Schatten;
• Text wie „revolutionieren“, „entfesseln“, „nächste Generation“, „nahtlos“ oder vage CTA-Beschriftungen;
• generierte Wörter/Logos/UI in Produktionsbildmaterial;
• Mobilversion, die lediglich Desktop gestapelt ist;
• Animation, die verwendet wird, um schwaches statisches Design zu verbergen;
• dekorative Elemente, deren einzige Aufgabe das Füllen von Platz ist.

Bevorzugen Sie verifizierte Marken-Assets, themenspezifisches Bildmaterial, kontrollierte Typografie, abwechslungsreiche aber kohärente Komposition, eine einprägsame Signatur, zielgerichteten Leerraum, klaren Beweis und einen entscheidenden Conversion-Pfad.

Referenzkarte

Bedarf	Lesen Sie
Autoritatives Projektmodus-Routing	references/policy-matrix.md
Eingabe, Website/Marke/Logo/Inhalt/Assets/Integrationen	references/intake-brand-assets.md
Frontend-Stack-Routing/Konflikte	`references/frontend-skill-stack.m

…

[gekürzt zur Übersetzung]