Über diese Vorlage
DeepThink 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 Palette umfasst #0C0C0C darunter und aufhellung #FAFAFA für die Schrift, die Schrift ist Inter. Geliefert wird eine eigenständige HTML-Datei, erfasst bei 1280x1928, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 90ms und cubic-bezier(.22,1.36,1). Lass es beim Schreiben offen: Die 13.695 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Studio-Teams, die ein Projekt briefen und nach Easing cubic-bezier(.22,1.36,1) suchen, um darauf zu reagieren.
- Wer mit einem KI-Builder arbeitet und ein Briefing will, das eine eigenständige HTML-Datei schon enthält, statt sie dem Modell zu überlassen.
- Teams, die ein KI- oder SaaS-Produkt Landingpage bauen und die gemessenen Werte (100vh hohe Sektionen und Abstände in 10px-Schritten) wollen statt eines Screenshots zum Abschreiben.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1280x1928, damit die Medien darunter bis an den Rand durchlaufen.
- Am Viewport gemessen. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt 100vh hohe Sektionen, Abstände in 10px-Schritten, 90ms Übergänge und Easing cubic-bezier(.22,1.36,1), und der Build muss genau diese Werte treffen. Jeder Wert hat genau eine Aufgabe: eine Schriftstufe, ein Abstand, ein Eckenradius oder ein Übergang.
- Links vor der Aktion. Die Leiste ist eine Zeile aus Text und einer Aktion, auf 100vh hohe Sektionen und Abstände in 10px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band.
- Werte bis in den Build. Die Abstände sind genauso zitiert (100vh hohe Sektionen, Abstände in 10px-Schritten, 90ms Übergänge und Easing cubic-bezier(.22,1.36,1)) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Die Seite setzt sich beim Scrollen zusammen
Beim Scrollen verändert beim Eintritt in den Viewport werden Sektionen sichtbar die Komposition, die Reihenfolge des Layouts bleibt fest. Das statische Layout darunter bleibt unverändert, die Komposition bleibt also lesbar, wenn der Effekt aus ist. Hänge die Texte nie hinter einen Scroll-Trigger.
Eine Dauer für die Bedienelemente
Die Bewegung ist hier in Millisekunden angegeben: 90ms auf cubic-bezier(.22,1.36,1). Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Ein Wert wird für alle Bedienelemente wiederverwendet, ihr Timing kann also nicht auseinanderlaufen.
Was der Eintrag Landingpage richtig macht
Das Versprechen steht einmal auf der Seite, in Displaygröße. Alles Weitere im Eintrag Landingpage ordnet sich um diese Zeile: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster folgen aufeinander, und kein zweites Versprechen kämpft um den ersten Blick. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Was sich in DeepThink bewegt
Der Preis ist, dass die Animation hier keinen zweiten Blick belohnt. Belohnt wird die Leserichtung, und Übergänge von 90ms, ein maskierter Zeilen-Reveal und ein Scroll-Reveal bestätigen Zustände, statt zu dekorieren. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Die Zahlen hinter dem Eintrag Landingpage
Die meisten Referenzen zeigen das Ergebnis und behalten die Zahlen. Diese dreht es um: 100vh hohe Sektionen, Abstände in 10px-Schritten, 90ms Übergänge und Easing cubic-bezier(.22,1.36,1) stehen neben der Seite, damit das Ergebnis reproduzierbar ist und nicht angenähert. Nichts in diesem Eintrag Landingpage hängt an einer Voreinstellung.
Häufige Fragen
Kann ich Landingpage von DeepThink in einem anderen Stack nachbauen?
DeepThink 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 lang ist der Prompt hinter DeepThink?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1280x1928, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie gehe ich mit den Medien von DeepThink in einem Kundenprojekt um?
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 1280x1928 erfasst.
