Über diese Vorlage
Autonomous Ops zeigt einen Weg, die Komposition (Landingpage) für dieses Publikum zu bauen. Gedacht ist sie für ein KI- oder SaaS-Produkt, und die Anweisungen dazu sind veröffentlicht. Die Zeile lautet „Falcon AI operations overview“, und der Rest des Eintrags Landingpage ordnet sich darum. Die Palette ist #F0F0F0 darunter, #282828 für die Schrift und orange #FF6900 für die Akzente, gesetzt in Segoe UI, Arial, Helvetica. Es kommt als eine eigenständige HTML-Datei, damit sich der ganze Landingpage ohne Design-Übergabe in ein Projekt heben lässt. Die Seite begrenzt die Bewegung auf Übergänge von 3000ms, cubic-bezier(.16,1.3,1) und eine Videospur in Schleife. Nimm es als Briefing für ein KI- oder SaaS-Produkt: Der Eintrag Landingpage muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Übernimm die Struktur aus dem Landingpage-Layout komplett und nimm Easing cubic-bezier(.16,1.3,1) als Maßstab für jede Zeile.
- Das Landingpage-Design zielt auf Teams, die eine eigenständige HTML-Datei schon kennen und nur eine eigenständige HTML-Datei schriftlich brauchen.
- Gemacht für Agenturen, die Projekte aus dem Bereich SaaS pitchen und ein 2028x1080 Rahmen schon in der ersten Antwort an den Kunden brauchen.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #FF6900, während Wortmarke und Links auf der Textfarbe zurücktreten. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #FF6900 ist das einzige Element in der Leiste mit Gewicht. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Eine Skala für Schrift und Rahmen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: 100vh hohe Sektionen, ein 3-Spalten-Raster, Radius 1.59cqw und 3000ms Übergänge. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird. Prüfe einen Nachbau gegen dieselben Zahlen.
- Ein Clip trägt alles. Der Clip läuft 9,7s in 2028x1080 und schleift ohne sichtbaren Schnitt, dadurch wirkt er als Fläche und nicht als Filmmaterial. Das Poster bei 2028x1080 trägt die Komposition, wenn Autoplay nicht verfügbar ist, damit das Layout nicht zusammenfällt.
- Die Schrift trägt den Ton. Die Schriften sind Rollen zugewiesen und nicht gemischt: Segoe UI, Arial, Helvetica trägt Display und Oberfläche zusammen. Die Stufe für Bildunterschriften ist klein genug, um unter einer Abbildung zu sitzen, ohne den Rhythmus der Seite zu ändern.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Das Briefing legt den Übergangswert auf 3000ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Die Werte sind kurz genug, um als Rückmeldung zu lesen und nicht als Animation.
Eine lebende Leinwand im Zentrum
Das Bild entsteht zur Laufzeit (ein WebGL-Canvas) und wird nicht als Standbild geladen, der Rahmen mit 2028x1080 braucht dadurch ein Asset weniger. Plane ein Budget für das Rendering ein: Auf schwacher Hardware kostet es am ehesten Frames. Halte ein Ersatzbild bereit, falls die Canvas nicht startet.
So wird der Eintrag Landingpage deiner
Die Palette zuerst neu zu belegen ist der übliche Fehler. Sie ändert die Stimmung, ohne die Komposition anzufassen, und 100vh hohe Sektionen und ein 3-Spalten-Raster tragen das Layout weiterhin; mach Text und Medien zuerst und die Palette zuletzt. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Die Reihenfolge im Eintrag Landingpage
In dieser Reihenfolge: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster. Jedes Element hat eine Aufgabe, und orange #FF6900 ist ausschließlich dem Element vorbehalten, das gedrückt werden soll. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was sich in Autonomous Ops bewegt
Bewegung ist hier eine Reihe von Entscheidungen, keine Bibliothek: Übergänge von 3000ms, eine Medienschleife von 9,7s und ein maskierter Zeilen-Reveal, und beim Scrollen animiert nichts. Das Ergebnis ist eine Seite, die gesetzt wirkt: kurze Dauern, ein Auftritt und Zustandswechsel, die eine Aktion bestätigen statt sie zu dekorieren. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Warum nennt der Eintrag eine eigenständige HTML-Datei überhaupt?
Autonomous Ops 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.
Ist das Briefing zu Autonomous Ops dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 18.222 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was steht eigentlich im Briefing hinter Autonomous Ops?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2028x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
