Über diese Vorlage
Bevor du beim Thema Hero-Bereich für ein KI- oder SaaS-Produkt nachbaust, lies Stellar AI: Komposition und Spezifikation stehen beide hier. Die Überschrift der Seite lautet „Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf weiß #FFFFFF darunter und tiefes blau #101117 für die Schrift begrenzt, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 800x708, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 0.1s beschränkt. Lass es beim Schreiben offen: Die 3.973 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn die Bewegung wegfallen muss, funktioniert das Hero-Bereich-Design trotzdem, weil dann eine feste Display-Größe von 80px und Abstände in 30px-Schritten die Hierarchie übernehmen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Stellar AI.
- Wenn der Launch nah ist, übernimm den 800x708-Rahmen und den 0.1s-Einstieg und lass den Rest der Komposition unangetastet.
Was enthalten ist
- Eine Leiste ohne Beiwerk. 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 800x708, damit die Medien darunter bis an den Rand durchlaufen.
- Am Viewport gemessen. Das Layout arbeitet mit absoluten Werten statt mit Verhältnissen: eine feste Display-Größe von 80px, Abstände in 30px-Schritten und 0.1s Übergänge. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Zurückhaltende Navigation. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf eine feste Display-Größe von 80px und Abstände in 30px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert.
- Eine Skala für Schrift und Rahmen. Die Abstände sind genauso zitiert (eine feste Display-Größe von 80px, Abstände in 30px-Schritten und 0.1s Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zeiten in Millisekunden
Die Zeiten sind kurz und einheitlich: Übergänge laufen 0.1s, deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Das Easing steht zusammen mit der Dauer im Briefing (0.1s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Eine kleine interaktive Fläche
Die Zeiger-Arbeit ist klein und festgelegt: Hover-Zustände auf Buttons und Links statt auf jeder Karte und Tabs oder ein Akkordeon, das Inhalte an Ort und Stelle austauscht, angewendet auf die Elemente, die schon interaktiv aussehen. Die Rückmeldung bleibt auf die Bedienelemente beschränkt, die Komposition um sie herum bleibt also still. Prüfe die Zustände auf einem Touch-Gerät.
Wie Stellar AI den ersten Blick ordnet
Eine solche Seite vergräbt die Handlung meist unter einem Feature-Raster. Diese hält die Abfolge fest: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Kundenzeile und das Kartenraster, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was ein KI- oder SaaS-Produkt hier gewinnt
Das Design argumentiert auf einem einzigen Screen. Das Medium ist ein Standbild in 800x708. Die Medien tragen die Atmosphäre, der Text trägt das Angebot, und eine feste Display-Größe von 80px und Abstände in 30px-Schritten halten beides auseinander. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Die Zahlen hinter dem Eintrag Hero-Bereich
Zerleg den Eintrag Hero-Bereich, und die Werte beschreiben ihn weiterhin: eine feste Display-Größe von 80px und Abstände in 30px-Schritten geben Rahmen und Rhythmus darunter vor. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Ist der Prompt zu Stellar AI eine fertige Spezifikation oder ein Ausgangspunkt?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x708, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Stellar AI hängt von React und Tailwind CSS ab?
Stellar AI 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.
Wie gehe ich mit den Medien von Stellar AI 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 800x708 erfasst.
