Über diese Vorlage
Lies Forecast Center als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Farbe bleibt auf tiefes blau #04121B darunter und #FFFFFF für die Schrift begrenzt, gesetzt in Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1466x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 2.55s, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife beschränkt. Wenn du ein Briefing zum Thema Landingpage im Bereich SaaS schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das Easing cubic-bezier(.16,1.3,1) schon enthält, statt sie dem Modell zu überlassen.
- Halte eine eigenständige HTML-Datei in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Wenn der Build auf eine eigenständige HTML-Datei aufsetzt, übernimm zuerst 100vh hohe Sektionen und Abstände in 14px-Schritten und lass die Palette in Ruhe, bis das Raster steht.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1466x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Schmale Navigationsleiste. Eine Aktion pro Leiste. Die Referenz wurde mit 1466x1080 erfasst.
- Das Briefing nennt die Stufen. Die Größen wurden am Render in 1466x1080 abgelesen: 100vh hohe Sektionen, Abstände in 14px-Schritten, 2.55s Übergänge und Easing cubic-bezier(.16,1.3,1). Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern.
- Ein Clip trägt alles. Das Video über 1466x1080 läuft 5,3s in Schleife hinter dem Text, stumm und inline, ohne Tönungsebene dazwischen. Das Poster bei 1466x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt. Exportiere bei 1466x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
Bewegung & Interaktion
Die Schleife übernimmt die Grundbewegung
Die Hintergrundbewegung ist ein Clip von 5,3s in 1466x1080, der leise hinter dem Text schleift statt auf den Zeiger zu reagieren. Weil er stumm ist, kann die Schleife unter dem Text laufen, ohne um Ton oder Aufmerksamkeit zu konkurrieren. Dreh oder exportiere in 1466x1080 oder breiter.
Ein leiserer Zweig ist enthalten
Das Briefing enthält einen Reduced-Motion-Zweig: Die Bewegung, also der Auftritt und die Schleife, lässt sich abschalten, ohne dass etwas am Layout verloren geht. Übernimm diesen Zweig direkt in deinen Build. Die Rückmeldung der Interaktion funktioniert auch bei reduzierter Bewegung; weggelassen werden nur die Auftritte. Das Layout muss auch ohne die Animation bestehen.
Wie Forecast Center den ersten Blick ordnet
Ein Screen, eine Handlung, und dazwischen die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster. Das Briefing legt diese Reihenfolge fest, statt den ersten Screen einem Stapel von Sektionen zu überlassen. Der erste Screen ist eine Route und kein Container.
Wie der Eintrag Landingpage umbricht
Das schmale Layout ist entworfen und nicht geerbt. der Bereich wird auf 100vh gehalten und die Bewegung hat einen Reduced-Motion-Zweig, damit die Hierarchie bei jeder Breite den Umbruch übersteht. Autoplay und Bewegung sind ehrlich behandelt, die Seite kommuniziert also auch ohne sie.
Forecast Center als Spezifikation lesen
11.253 Zeichen Briefing ergeben eine vollständige Spezifikation. Der tragende Teil ist kurz: 100vh hohe Sektionen, Abstände in 14px-Schritten, 2.55s Übergänge und Easing cubic-bezier(.16,1.3,1). Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Was steht eigentlich im Briefing hinter Forecast Center?
Das erfasste Briefing umfasst 11.253 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Kann ich Landingpage von Forecast Center in einem anderen Stack nachbauen?
Forecast Center wurde in eine eigenständige HTML-Datei gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
Wie ist dieser Eintrag zu Forecast Center aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 11.253 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
