Über diese Vorlage
Visual Hero: Hero-Bereich für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Überschrift der Seite lautet „Forma's AI understands context, composition, and style like a creative director would“, und die Komposition ist um genau diese Worte gebaut. Die Seite ist in Instrument Serif gesetzt, die Größen stehen im Briefing fest. Geliefert wird React und Tailwind CSS, erfasst bei 996x720, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung kommt über eine Videospur in Schleife nicht hinaus. Lass es beim Schreiben offen: Die 8.275 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Nimm zuerst Abstände in 50px-Schritten und lass die Palette folgen, weil die Abstände dieses Hero-Bereich-Design lesbar machen.
- Produktmarketer, die brauchen, dass die Komposition (Hero-Bereich) auch mit 6,9s Video in Schleife hinter dem Text lesbar bleibt.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Visual Hero.
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 996x720, damit die Medien darunter bis an den Rand durchlaufen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Werte zum Nachmessen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: Abstände in 50px-Schritten. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen. Tausch die Schrift oder den Text, aber nicht die Skala.
- Eine Zahlenreihe, keine Tabelle. Die Ziffern sind als Schrift gesetzt und nicht in einer Karte: Instrument Serif in der Display-Größe mit Labels eine Stufe darunter. Die Zeile gehört zum ersten Screen und nicht zu einem eigenen Band, was den Beleg nah an der Aussage hält.
- Navigation ohne Hintergrund. Fokus- und Hover-Zustände sind für jeden Link festgelegt, statt vom Browser geerbt zu werden. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
Bewegung & Interaktion
Scroll treibt die Komposition
Parallax läuft, während die Seite in Bewegung ist; die Komposition hat damit einen definierten Ruhezustand. Das statische Layout darunter bleibt unverändert, die Komposition bleibt also lesbar, wenn der Effekt aus ist.
Eine Schleife, keine Timeline
Die Hintergrundbewegung ist ein Clip von 6,9s in 996x720, 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.
Visual Hero als Spezifikation lesen
Ein Nachbau beginnt meist mit einem Screenshot und einer Vermutung. Hier beginnt er mit 8.275 Zeichen Spezifikation: Rahmen, Abstände und Bewegung stehen fest, bevor die erste Codezeile entsteht. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Die Reihenfolge im Eintrag Hero-Bereich
Ein feature-getriebenes Layout listet, was das Produkt tut; dieses führt den Leser zu einer einzigen Entscheidung. Die Route zeigen die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip, und Abstände in 50px-Schritten staffeln sie. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Warum diese Komposition für SaaS trägt
Die meisten Seiten im Bereich SaaS hängen eine weitere Sektion an, wenn der erste Screen schwach ist. Diese hier streicht Optionen: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip in genau dieser Reihenfolge, und nichts, was das Angebot wiederholt. Visual Hero nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Ist der Prompt zu Visual Hero eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 8.275 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.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Visual Hero 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 Visual Hero?
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 996x720 erfasst.
