Über diese Vorlage
Neuralyn ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. Sie beginnt mit „One Clear Overview“ und gibt dieser Zeile den Rahmen, statt sie in eine Karte zu schrumpfen. Die Palette umfasst schwarz #000000 darunter, die Schrift ist Inter. Geliefert wird React und Tailwind CSS, erfasst bei 800x590, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 0.6s beschränkt. Lass es beim Schreiben offen: Die 5.257 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Neuralyn.
- Wenn du das Hero-Bereich-Design von Neuralyn auf deine eigene Schrift umstellst, behalte die Proportionen von Inter, sonst passt die Schriftgrößen-Skala nicht mehr.
- Ersetze die Texte im Hero-Bereich-Design, bevor du Inter anfasst, weil die Größen auf die aktuellen Zeilenlängen gesetzt sind.
Was enthalten ist
- Zurückhaltende Navigation. Eine schmale Leiste liegt über der Komposition (Hero-Bereich), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x590, damit die Medien darunter bis an den Rand durchlaufen.
- Werte bis in den Build. Schrift und Abstände stammen hier aus einer einzigen Liste: 0.6s Übergänge. Das Briefing nennt Werte und keine Proportionen, damit die Komposition ihre Verhältnisse behält, wenn der Text länger oder kürzer wird.
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Zeile wird aus ihrer eigenen Schrift bemessen und nicht aus einer festen Header-Höhe. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Abstände als Werte genannt. Die Abstände sind genauso zitiert (0.6s Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Scroll steuert die Abfolge
Die Choreografie übernimmt hier das Scrollen: beim Scrollen bewegen sich die Hintergrundebenen anders als der Vordergrund. Das statische Layout darunter bleibt unverändert. Das Scroll-Verhalten bezieht sich auf dasselbe Layout wie die statische Seite, beim Entfernen verschiebt sich also nichts.
Kurze, benannte Zeiten
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 0.6s. Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Das Easing steht zusammen mit der Dauer im Briefing (0.6s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Liefere nicht den Browser-Standard aus.
Wie Neuralyn den ersten Blick ordnet
Nichts konkurriert hier mit der ersten Entscheidung. „One Clear Overview“ leistet diese Arbeit ab dem ersten Frame. Das Stützmaterial wartet unter dem Fold, und die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und das Kartenraster tragen die obere Seite allein. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Bewegung beschränkt sich auf Übergänge von 0.6s, Parallax-Ebenen und ein Sticky-Element; sie läuft einmal beim Eintritt und tritt dann zurück, das richtige Budget, damit die Komposition (Hero-Bereich) lesbar bleibt. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
So wird der Eintrag Hero-Bereich deiner
Eine Zeile, eine Schrift, ein Akzent: Diese drei Substitutionen ändern das Design am stärksten. 0.6s Übergänge sind die Werte, die sich nicht bewegen sollten. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Häufige Fragen
Wie lang ist der Prompt hinter Neuralyn?
Das erfasste Briefing umfasst 5.257 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.
Wie viel von Neuralyn hängt von React und Tailwind CSS ab?
Neuralyn 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.
Kann ich eine aus Neuralyn nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 800x590 erfasst.
