bittencourtthulio/perfect-landing-page

Perfect Landing Page

Generiert eine vollständige Startseite in einer einzigen HTML-Datei (HTML + CSS + JS inline, nur externe Schriften von Google Fonts), bereit zum Öffnen im Browser und zum Veröffentlichen.

Das Referenzmodell ist exemplos/osvaldo-software.html (eine Verwaltungssoftware für Handyhüllen-Läden, als Beispielsfall verwendet). Es entstand aus mehreren Überarbeitungsrunden mit dem Ziel, „professionell und weniger KI-haft“ zu wirken.

Wann verwenden

• Anfrage nach einer Website, Landingpage oder Startseite für ein Unternehmen.
• Anfrage „im gleichen Stil wie die Beispiele“ oder „ähnlich dieser Referenzseite“.
• Anfrage zur Neugestaltung einer bereits erstellten Website, um sie professioneller aussehen zu lassen.

Nicht verwenden für: Systeme mit Login/Backend, Shops mit Warenkorb, mehrseitige Websites oder Social-Media-Beiträge.

Schritt 1: Briefing (fragen Sie nur, was fehlt)

Wenn eine Briefing-Datei (BRIEFING.md, BRIEFING2.md) vorhanden ist, lesen und verwenden Sie diese. Andernfalls nehmen Sie aus der Anfrage, was bereits gesagt wurde, und fragen Sie in einer einzigen Runde nur, was nicht klar ist:

1. Firmenname und was sie verkauft (Segment/Nische).
2. Hauptunterscheidungsmerkmal: das Einzige, woran sich der Besucher erinnern soll. Es organisiert die gesamte Seite.
3. Zielgruppe: wer kauft und wie dessen Alltag aussieht.
4. Funktionen oder Dienstleistungen (3 bis 6). Wenn der Benutzer es nicht weiß, Vorschläge basierend auf der Nische machen und darauf hinweisen, dass es Vorschläge sind.
5. Kontakt: Telefon, WhatsApp, E-Mail. Wenn nicht vorhanden, offensichtliche Platzhalter wie (00) 0000-0000 verwenden.
6. Farben oder visuelle Stimmung (optional). Wenn nicht vorhanden, aus der Nische ableiten.

Wenn der Benutzer bereits genug angegeben hat, nichts fragen: schreiben und Anpassungen für später lassen.

Wenn der Benutzer eine Referenzseite sendet, diese vor dem Schreiben analysieren: Schriftart, Hero, Dichte, Ecken und Kanten, Rhythmus der Abschnitte, Footer. Die Prinzipien übernehmen, nicht die Kopie. Blöcke der Referenz, die von Daten abhängen, die das Unternehmen nicht hat (Testimonials, Kundenlogos, Pläne und Preise), nicht einfügen: dies bei der Übergabe mitteilen und die Daten auflisten, die jeden Block ermöglichen würden.

Schritt 1b: Bilder (automatisch, niemals fragen)

Vor dem Schreiben, vom Projektstammverzeichnis aus ausführen:

python3 -I <skill-ordner>/scripts/gerar_imagens.py --detectar

(<skill-ordner> ist der Ordner, in dem diese Skill installiert ist, z.B. ~/.claude/skills/perfect-landing-page; das Skript gibt nur sim oder nao aus, niemals den Schlüssel)

• sim: Das Projekt hat einen OpenRouter-API-Key in der Umgebungsdatei. Die Website mit Bildern generieren, ohne etwas zu fragen oder Bestätigung einzuholen (Schritt 2c).
• nao: Die Website ohne Bilder generieren, ohne zu fragen oder darauf hinzuweisen, dass „der Schlüssel fehlt“. Die Seite ist die Version ohne Fotos (Produktbildschirm und Farbblöcke), die bereits vollständig ist. Erst bei der Übergabe in einer Zeile mitteilen, dass sie ohne Bilder erstellt wurde.
• Niemals den Inhalt der Umgebungsdatei lesen, ausgeben oder kommentieren. Nur das Skript greift darauf zu.

Schritt 2: Visuelle Richtung

Was die Seite professionell aussehen lässt, ist Zurückhaltung. Vor dem Codieren festlegen:

• Kurze Palette: die dunkle Markenfarbe, eine Akzentfarbe, ein neutrales Off-Weiß für die hellen Abschnitte und zwei Grautöne für Text (einer für dunklen, einer für hellen Hintergrund). Wenn die Marke schwarz ist, echtes Schwarz (#000) verwenden, kein Fast-Schwarz. Alles als CSS-Variablen in :root: die Identität zu ändern, sollte nur Änderungen an diesen Variablen erfordern.
• Der Akzent erscheint an wenigen Stellen: primärer Button, die letzte Zeile des H1, das aktive Element und die Farbblöcke hinter den Produktbildschirmen. Kein Glanz, kein radialer Verlauf oder ganzer Streifen in der Akzentfarbe.
• Text auf hellem Akzent (z.B. Gelb) ist immer in der dunklen Markenfarbe, niemals weiß. Auf hellem Hintergrund den Akzent nicht als Textfarbe verwenden.
• Abschnitte wechseln zwischen dunklem und hellem Hintergrund, von Kante zu Kante. Hero, Module und Footer dunkel; Differenzierungsmerkmal und Kontakt hell.
• Typografie: nur eine serifenlose Familie, mit Hierarchie durch Gewicht und Größe. Vermeiden Sie die Schriftarten, die zum Standard generierter Websites geworden sind (Space Grotesk, Inter allein, Serif + Sans Paar). Vor der Auswahl den tatsächlichen H1 in 4 bis 6 Kandidaten von Google Fonts rendern und im Screenshot vergleichen. Im Modell: Hanken Grotesk, Gewichte 400 bis 800.
• Begrenzte Skalierung: H1 bis ~52px (Gewicht 800, Zeilenabstand 1.05, negativer Tracking), H2 bis ~40px, Fließtext 16 bis 18px. Riesige Überschrift und übertriebener Abstand sind Markenzeichen von Vorlagen.
• Ecken nach Hierarchie: 8px bei Buttons und Feldern, 12px bei Fenstern, 16px bei Kästchen, 28px nur bei den Farbblöcken. Kein Pillen-Look und kein einheitlicher Radius für alles.
• Dünne Linien anstelle von Schatten. Schatten nur unter den Produktfenstern.
• Buttons rechteckig, ohne farbigen Glanz und ohne Pfeil im Text.
• Keine Emojis auf der Seite. Auch nicht in Symbolen, Avataren, Kontakten, WhatsApp-Button oder Bestätigungsnachrichten.

Was eine KI-generierte Website verrät (vermeiden)

• Siegel oder Pille mit blinkendem Punkt im Hero.
• Etikett in Großbuchstaben über jeder Überschrift.
• Raster gleicher Karten nebeneinander zur Darstellung von Funktionen.
• Geneigte Karte, radialer Glanz in den Ecken, farbiger Schatten bei Buttons.
• Lauftextbanner (Marquee).
• Große erfundene Zahl, die nur als „Ankerdaten“ dient (z.B. „China“ anstelle einer Zahl schreiben).
• Animation zum Hochgleiten und Erscheinen in jedem Abschnitt.
• Emoji und Standardsymbolbibliothek.
• Durch Punkte verbundene Texte („A · B · C“) und Pfeil am Ende der Buttons.

Schritt 2b: Handgezeichnete Symbole (obligatorisch)

• Symbole in eigenem SVG zeichnen, eins pro Geschäftskonzept, und alle in einem versteckten <svg> mit <symbol> am Anfang des <body> sammeln; <svg><use href="#i-name"/></svg> verwenden, wo benötigt.
• Gleiche visuelle Familie bei allen: viewBox 32x32 (24x24 für Kontakte), Strich 2px mit runden Enden, Farbe currentColor und ein Akzentdetail gefüllt mit var(--accent). Wenn das Symbol auf dem Akzent selbst liegt, --accent durch Weiß ersetzen.
• Den Symbolen einen Nischenbezug geben (Blatt im Obst- und Gemüseladen, Handy mit Hülle im Handyhüllenladen).
• Offensichtliche Symbole vermeiden (Blitz, Händedruck, Schloss, Rakete). Eine Metapher des Geschäfts bevorzugen.

Schritt 2c: Generierte Bilder (nur wenn Schritt 1b sim ergab)

Kostenbetrag in Cent: 3 Bilder generieren, die alles abdecken: Hero (Hintergrund), Differenzierungsmerkmal (unterstützt die Karte des Unterscheidungsmerkmals) und Kontakt (neben der Überschrift).

1. imagens.json im Projektstammverzeichnis schreiben, mit einem gemeinsamen estilo und den Prompts auf Portugiesisch. Der Stil legt fest: realistische redaktionelle Fotografie, Kinolicht, die Markenpalette (dunkle dominante Farbe, die Akzentfarbe als Licht), ohne Text, Buchstaben, Logos, echte Marken oder Wasserzeichen.
2. Jeder Prompt beschreibt die Zielgruppe und den Alltag der Nische, nicht die Software: den Arbeitsplatz des Kunden (für den Handyhüllenladen die Theke mit der Handyhüllen-Wand), die Hände bei der Aufgabe, die das Alleinstellungsmerkmal löst, den Kundenservice. Nichts von Computerbildschirm mit Schnittstelle (wird unleserlich).
   • hero (16:9, Modell pro): weite Szene, linke Seite dunkler und leer für den Text.
   • diferencial (4:5, Modell flash): Detail der Aufgabe, die das Alleinstellungsmerkmal löst, von oben gesehen.
   • contato (3:2, Modell flash): menschlicher Moment des Kundenservice, ohne Aufschrift auf der Verpackung oder Schilder („glatte Verpackung, kein Schild oder Wort sichtbar“).
3. python3 -I <skill-ordner>/scripts/gerar_imagens.py imagens.json ausführen (um nur ein Bild neu zu generieren, den Namen am Ende angeben). Die Bilder werden in imagens/*.jpg abgelegt. Das Verhältnis 16:10 existiert nicht: 3:2 verwenden.
4. Jedes Bild vor der Verwendung ansehen. Neu generieren (nur das fehlgeschlagene), wenn es Text, lesbares Logo, deformierte Hand oder Gesicht oder eine nicht zur Nische passende Szene enthält. Maximal 2 Neugenerierungen pro Bild.
5. Im HTML liegen die Bilder in imagens/ und werden mit relativem Pfad referenziert (der Ordner wird mit der Veröffentlichung mitgeliefert). Siehe exemplos/osvaldo-software-com-imagens.html:
   • Hero: Foto im background des Abschnitts, mit zwei schwarzen Verlaufsschichten darüber: horizontal (≈94% links bis ≈22% rechts) und leicht vertikal. Der Text liegt immer über dem dunklen Teil. Lesbarkeit von H1 und Untertitel im Screenshot testen.
   • Differenzierungsmerkmal: das Foto im Farbblock, in einem ::before mit filter:brightness(2.4) grayscale(.35) und mix-blend-mode:multiply über dem Akzent: wird zum Duotone in der Markenpalette. Die Beschriftung darüber bleibt hell.
   • Kontakt: <img> in zwei Spalten mit der Überschrift, aspect-ratio:3/2, height:auto (ohne dies dehnt das height-Attribut das Bild), loading="lazy", width/height und beschreibendem alt. Auf Mobilgeräten unterhalb des Textes.
   • Der alt-Text der Fotos besagt, dass das Bild illustrativ und KI-erstellt ist.
6. Der Hinweis im Footer lautet nun, dass die Bildschirme und Fotos Illustrationen, KI-erstellt sind. Ein generiertes Foto wird niemals als Foto des Ladens, des Teams oder echter Kunden präsentiert.

Ohne Schlüssel (nao): diesen gesamten Schritt überspringen. Der Hero bleibt einfarbig schwarz, der Farbblock des Differenzierungsmerkmals bleibt in der Akzentfarbe und der Kontaktabschnitt wird einspaltig, wie in exemplos/osvaldo-software.html.

Schritt 2d: Mausreagierende Effekte (Standard, immer)

Jede Website enthält Effekte, die auf die Maus reagieren, insbesondere im Hero. Den CSS-Block und das Skript aus exemplos/osvaldo-software-com-efeitos.html kopieren und nur Farben und Intensität anpassen. Canvas 2D und requestAnimationFrame, keine Bibliothek (weder Tween.js noch GSAP).

Hero (der Ort mit der meisten Lebendigkeit):

• Ebenen: das Foto (oder der einfarbige Hintergrund, ohne Bilder) kommt in eine eigene div.hero-bg, mit inset:-36px; darüber div.hero-light und canvas.hero-fx, alle aria-hidden und pointer-events:none; der Inhalt liegt auf z-index:3.
• Taschenlampe: radial-gradient in der Akzentfarbe, mit mix-blend-mode:screen, die dem Cursor über --mx/--my folgt und verschwindet, wenn die Maus verlässt.
• Lichtstaub auf der Leinwand: bis zu 120 kleine Punkte (Akzentfarbe und Weiß), die langsam aufsteigen und blinken; nahe am Cursor (Radius ~150px) fliehen sie und verbinden sich durch dünne Linien in der Akzentfarbe mit dem Cursor; ein dezenter Ring markiert den Cursor. devicePixelRatio (bis 2) verwenden und Maße bei resize neu berechnen.
• Tiefe: der Hintergrund bewegt sich entgegen der Maus (bis ~22px); das Produktfenster neigt sich in 3D (bis ~6°) mit Lichtreflex (::after mit soft-light); die schwebende Karte und der Farbblock bewegen sich mit unterschiedlichen Geschwindigkeiten, über die translate-Eigenschaft (nicht transform, um nicht mit der Eingangsanimation zu kollidieren).

Rest der Seite:

• .tilt bei den hervorgehobenen Elementen (Karte des Differenzierungsmerkmals, Panel der Bildschirme): neigen sich bis ~7° (3,5° beim großen Panel) mit Glanz unter dem Cursor und kehren zur Mitte zurück, wenn die Maus verlässt.
• Magnetische Buttons (.btn-y, .btn-k, .fab): ziehen ~25% in Richtung des Cursors, mit transition bei translate.

Regeln:

• Jede Bewegung wird durch Interpolation (lerp) geglättet, niemals springend.
• Die Hero-Schleife stoppt, wenn der Hero den Bildschirm verlässt (IntersectionObserver).
• prefers-reduced-motion: keine Effekte.
• Ohne Maus (pointer: fine falsch, Mobilgerät und Tablet): nur aufsteigender Staub, keine Neigung oder magnetische Buttons.
• Der Eintritt der Bildschirmlinien verwendet @keyframes (animation), nicht transition: dies ist robuster mit der laufenden Animationsschleife.
• Die Effekte ändern weder Layout noch Text. Wenn der Benutzer eine Version ohne Effekte wünscht, reicht es, den Skriptblock und die drei Ebenen des Hero zu entfernen.

Schritt 3: Seitenstruktur (in dieser Reihenfolge)

Alles linksbündig. Jeder Abschnitt erledigt eine Aufgabe; wenn zwei dasselbe sagen, zusammenführen.

1. Fixierter Header in dunkler Farbe: Logo in einer Zeile (Marke + Name), Menü mit Ankern rechts, WhatsApp-Link als Text und CTA-Button. Auf Mobilgeräten nur Logo und Button.
2. Hero in zwei Spalten. Links: H1 in drei kurzen Zeilen, die Nische + Alleinstellungsmerkmal zusammenfassen, mit der letzten Zeile in der Akzentfarbe; Untertitel aus zwei Sätzen; zwei Buttons (gefüllt und umrandet); eine kleine Unterstützungszeile unter den Buttons, die sagt, was nach dem Klick passiert. Kein Etikett über der Überschrift. Rechts: ein Fenster des Systems, das das Alleinstellungsmerkmal beweist, mit seitlichem Menü, Suche und Liste, über einem Farbblock in der Akzentfarbe, der bis zum Bildschirmrand ausläuft, plus einer schwebenden Karte mit Details des ausgewählten Elements.
3. Statischer Streifen: eine Zeile mit 4 kurzen Sätzen des Alleinstellungsmerkmals, jeder mit einem Symbol, getrennt durch dünne Linien.
4. Differenzierungsmerkmal (heller Abschnitt): links ein vergrößerter Ausschnitt des Produktbildschirms über dem Akzentblock, der zur gegenüberliegenden Seite des Hero ausläuft. Rechts: affirmative Überschrift, ein Absatz, drei durch eine Linie verbundene Schritte (die „Funktionsweise“ lebt hier) und ein Button.
5. Modulare Tabs (dunkler Abschnitt): Überschrift und Absatz links, gefolgt von der nummerierten Liste (01, 02...), mit eigenem Symbol, Name und einer Unterstützungszeile; das aktive Element öffnet einen Satz und erhält einen Akzentbalken. Rechts ein festes Panel mit der gezeichneten Vorschau des Bildschirms jedes Moduls, in einfachem HTML/CSS. Nur nummerieren, wenn die Reihenfolge sinnvoll ist (im Modell der Warenweg: vom Lieferanten zur Theke). Wechsel per Hover, Klick und Tastatur; role="tablist", role="tab", role="tabpanel", aria-selected und tabindex nur bei der aktiven Registerkarte verwenden. Auf Mobilgeräten das Panel unterhalb der Liste. 4 bis 6 Module verwenden.
6. Kontakt (heller Abschnitt): Überschrift als Frage, der hervorgehobene Satz des Alleinstellungsmerkmals direkt darunter, und zwei Kästchen nebeneinander: ein dunkles mit dem Formular (Name, Unternehmen, WhatsApp) und eines in der Akzentfarbe mit den direkten Kontakten.
7. Footer in Spalten: Marke und ein Satz, Navigation, Module und Kontakt. Unten das Urheberrecht und der Hinweis, dass die Bildschirme Illustrationen sind. Nur existierende Links setzen: keine sozialen Netzwerke, Blog oder Richtlinie ohne die tatsächliche Seite.
8. Schwebender WhatsApp-Button, klein, in der Akzentfarbe.

Produktbildschirme

• Als echtes Produkt zeichnen: seitliches Menü, Suchleiste, Tabelle mit Spalten, Aktions-Button. Heller Bildschirm auf dunklem Hintergrund ergibt den Kontrast.
• Gleiche Oberfläche in allen (Hero, Differenzierungsmerkmal, Tabs) beibehalten.
• Jeder Bildschirm ist als „Illustration mit Beispieldaten“ gekennzeichnet.
• Der Bildschirm darf nicht versprechen, was der Text nicht kann: keine Kunden- oder Lieferantenzählung, „verifiziert“-Siegel, Frist, Importpreis oder Sternebewertung, wenn der Text keine Kundenbewertungen erwähnt.

Die „Struktur“ der Bildschirme (gemeinsam für alle)

Jeder Bildschirm hat:

• Kopfzeile mit Suchen-Symbol und 3 Punkten
• Menü links
• Inhaltstabelle: Spaltenüberschriften (z.B. „Produkt“, „Bestand“, „Preis“), Zeilen mit Daten und unterschiedlichem Status (z.B. grüner Punkt für „vorrätig“). Die letzte Spalte hat einen Aktions-Button („Bearbeiten“).

Hero-Bildschirm: hervorhebt das Produkt, das das Alleinstellungsmerkmal beweist. Die ausgewählte Zeile ist heller, mit der schwebenden Karte, die detaillierte Daten anzeigt: Produktbild (generiert oder einfarbig), Name, Preis und Beschreibung. Die Karte schwebt über dem rechten Rand des Bildschirms.

Differenzierungsmerkmal-Bildschirm: kompakter, fokussiert auf einen wichtigen Teil des Systems. Vergrößerter Ausschnitt der Tabelle mit nur 2 Spalten und die Schritte, die das System tut.

Tab-Bildschirme: jeder Tab hat seine eigene Vorschau. Einfach und selbstbeschreibend – suchen, filtern, konfigurieren.

Modell in exemplos/osvaldo-software-com-efeitos.html: die Bildschirme haben die Klassen .screen-hero, .screen-diff, .screen-tab. Die Schritte des Differenzierungsmerkmals heißen .step1, .step2, .step3.

Schritt 4: Code-Erstellung

Die ganze Seite ist eine einzige gültige HTML-Datei (<!DOCTYPE html> bis </html>), ohne externe Abhängigkeiten (außer Google Fonts).

HTML

• lang="pt-BR" (oder andere, je nachdem, was das Unternehmen verwendet).
• Semantische Tags: <header>, <main>, <section>, <footer>. <div>-Blöcke für Layout. Kein <article> außerhalb der Tabs.
• Alle Symbole sind im <svg>-Block am Anfang des <body>.
• Der CTA-Button ruft die Telefonnummer oder WhatsApp auf.
• role="tablist", role="presentation" und aria-selected für die Tabs.
• Der Footer-Link für „KI-illustrierte“ Bildschirme muss vorhanden sein.

CSS

• Alles inline in <style>.
• Variablen in :root.
• Kein Leerraum am Seitenrand: der Hintergrund der Abschnitte reicht bis zum Rand.
• Responsives Raster: 2-Spalten auf dem Desktop, 1 Spalte auf Mobilgeräten, ohne Medienabfragen für kleine Änderungen (nur max-width: 768px und max-width: 480px).
• Keine CSS-Frameworks (Bootstrap, Tailwind).
• Die Anzahl der Farbvariablen ist begrenzt, das gesamte Thema wird von ihnen gesteuert.
• .btn-k (Akzentfüllung), .btn-y (dunkle Füllung mit hellem Rand), .fab (schwebender Button).
• Verwenden Sie .hero-light für den Taschenlampeneffekt und .hero-fx für die Leinwand. (Siehe Modell in exemplos/osvaldo-software-com-efeitos.html).
• .tilt bei Elementen mit 3D-Neigung.
• .btn-y, .btn-k, .fab magnetisch.

JavaScript

• Inline in <script>.
• requestAnimationFrame für die Hero-Effekte, gesteuert durch IntersectionObserver.
• lerp(current, target, speed) für Glättung.
• Tab-Navigation: Tabindex nur in der aktiven Registerkarte, Wechsel per Klick und Tastatur.
• devicePixelRatio-Unterstützung für Schärfe.
• prefers-reduced-motion deaktiviert alle Effekte.
• Mauserkennung mit pointer: fine, um Mobilgeräte auszuschließen (matchMedia).
• Der Taschenlampeneffekt verwendet --mx/--my mit Prozentwerten, die den Cursor-Positionen entsprechen.
• Generierte Bilder (falls vorhanden) im background des Hero, mit Verlaufsschichten (horizontal und vertikal).
• Bei resize heroBg, heroLight und heroFx neu berechnen.

Schritt 5: Lieferung

Die vollständige HTML-Datei im Antworttext ausgeben. Die generierten Bilder gehen nach imagens/ im Projektstammverzeichnis.

Nach der Ausgabe eine kurze Erklärung hinzufügen: was getan wurde, welche Bilder generiert wurden (oder nicht, und warum), und dass die Struktur und die Maus-Effekte nach dem Referenzmodell implementiert wurden. Keine Vorstellung des Unternehmens oder ausführliche Zusammenfassung – nur das Nötigste.

Wenn das Unternehmen keine Kontaktdaten hat, die Platzhalter in der Datei erwähnen.