Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst Intelligent Operations das Thema Landingpage mit einem einzigen erfassten Briefing. Die Palette umfasst grau #BCCCD4 darunter und schwarz #0A0A0A für die Schrift, die Schrift ist Inter. Geliefert wird React und Tailwind CSS, erfasst bei 1476x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung ist Übergänge von 700ms und eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Es ist die richtige Referenz für eine Landingpage, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an ein KI- oder SaaS-Produkt.
Gemacht für
- Dieses Landingpage-Design beantwortet die Frage, was 100vh hohe Sektionen und Abstände in 10px-Schritten im Layout tatsächlich bewirken.
- Dieses Landingpage-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 7,9s Video in Schleife tragen kann.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 10.447 Zeichen.
Was enthalten ist
- Ein Breakpoint für die Links. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1476x1080, damit die Medien darunter bis an den Rand durchlaufen. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Eine Skala für Schrift und Rahmen. Hier ist nichts geschätzt. Die Spezifikation legt 100vh hohe Sektionen, Abstände in 10px-Schritten und 700ms Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet. Ändere das Thema, nicht die Stufen.
- Zurückhaltende Navigation. Die Wortmarke ist als Schrift behandelt und nicht als Logo-Lockup, wodurch die obere Zeile auf einer Grundlinie bleibt. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Am Viewport gemessen. Die Abstände sind genauso zitiert (100vh hohe Sektionen, Abstände in 10px-Schritten und 700ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Das Animationsbudget ist klein und ausdrücklich benannt: 700ms, eingesetzt für Zustandswechsel und nicht für Auftritte. Die Werte sind kurz genug, um als Rückmeldung zu lesen und nicht als Animation.
Zeiger-Zustände, mehr nicht
Die Rückmeldung beschränkt sich auf Hover-Zustände auf Buttons und Links statt auf jeder Karte und ein Sticky-Element, das seine Position hält, während der Inhalt darunter durchläuft; genau das verhindert, dass eine dichte erste Bildschirmfläche überladen wirkt. Druck-Zustände sind ebenso festgelegt wie Hover, ein Tippen bestätigt also genauso wie ein Klick. Halte die interaktive Ebene klein.
Die Zahlen hinter dem Eintrag Landingpage
Die Schrift ist die erste Zahl: 100vh hohe Sektionen und Abstände in 10px-Schritten. Die Abstände folgen daraus, und alles andere auf der Seite ist gegen diese beiden Werte positioniert. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Die Zeitwerte hinter dem Eintrag Landingpage
Übernimm das Muster und nicht die Werte: Behalte die Art der Bewegung, die hier genannt wird (Übergänge von 700ms, eine Medienschleife von 7,9s und ein Scroll-Reveal), und lass deine Marke die Dauern setzen. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Wie der Eintrag Landingpage umbricht
Es gibt kein separates Mobil-Design zu pflegen. der Bereich wird auf 100vh gehalten, und dieselbe Hierarchie trägt über alle Breiten. Der Umbruch hält die Handlung in jeder Breite erreichbar.
Häufige Fragen
Ist der Prompt zu Intelligent Operations eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1476x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Landingpage von Intelligent Operations in einem anderen Stack nachbauen?
Intelligent Operations wurde in React und Tailwind CSS 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.
Woher stammt das Design von Intelligent Operations?
Das Briefing ist eine Beschreibung, keine Lizenz zur Weitergabe fremder Dateien. Behalte Struktur und Zahlen, ersetze Medien und Markenzeichen, und nenne die Quelle, wenn ein Kunde fragt, woher das Layout stammt. Die Referenz wurde mit 1476x1080 erfasst.
