Über diese Vorlage
Scene AI ist die Referenz (Hero-Bereich) für dieses Publikum, also für ein KI- oder SaaS-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Die Überschrift der Seite lautet „Create awesome 3D scenes with AI“, und die Komposition ist um genau diese Worte gebaut. Farbe bleibt auf schwarz #000000 darunter und weiß #EBEAD0 für die Schrift begrenzt, gesetzt in Inter. Geliefert wird Tailwind CSS, erfasst bei 2056x1476, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf eine Videospur in Schleife beschränkt. Lass es beim Schreiben offen: Die 2.425 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für ein KI- oder SaaS-Produkt ausliefert und kein Designsystem im Rücken hat.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Scene AI.
- Dieses Hero-Bereich-Layout richtet sich an Gründer, die einen einzigen Screen als Beleg brauchen, dass Copy für SaaS 8s Video in Schleife tragen kann.
Was enthalten ist
- Leiste im Raster der Seite. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf ein 2056x1476 Rahmen gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 2056x1476, damit die Medien darunter bis an den Rand durchlaufen.
- Der Footer ist eine volle Komposition. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Die Wortmarke bekommt ihren eigenen Block, was eine lange Linkliste lesbar hält.
- Eine Leiste ohne Beiwerk. Der aktive Abschnitt ist über das Schriftgewicht markiert, nicht über eine Pille oder eine Unterstreichung. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Medien ohne Overlay. Ein stummer, loopender Clip füllt das Format von 2056x1476 über 8s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Exportiere in 2056x1476 oder breiter, dann funktioniert der Zuschnitt auf volle Abdeckung weiter. Exportiere bei 2056x1476 oder breiter, damit der Zuschnitt ehrlich bleibt.
Bewegung & Interaktion
Rückmeldung an den Bedienelementen
Zustände werden pro Komponente behandelt (Hover-Zustände auf Buttons und Links statt auf jeder Karte) und nicht von einer globalen Animationsschicht. Die interaktiven Ziele sind groß genug zum Tippen, und die Zeiger-Behandlung ist über alle hinweg einheitlich.
Eine Schleife, keine Timeline
Die Hintergrundbewegung kommt aus der 8s-Schleife in 2056x1476 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Der Clip ist kurz genug, um ohne sichtbare Naht zu schleifen, und das zählt mehr als seine Auflösung.
Was du in Scene AI zuerst änderst
Ändere zuerst Text und Medien, dann die Farbe, zuletzt das Layout. Der Rahmen mit 2056x1476 und die Skala in Inter halten die Seite zusammen; ersetze also um sie herum und nicht durch sie hindurch. Das Thema ist der Teil, der sich ändern sollte.
Die Zahlen hinter dem Eintrag Hero-Bereich
Zerleg den Eintrag Hero-Bereich, und die Werte beschreiben ihn weiterhin: ein 2056x1476 Rahmen geben Rahmen und Rhythmus darunter vor. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Das Argument des Eintrags Hero-Bereich
Auf dieser Seite steht ein einziges Versprechen, und ein 2056x1476 Rahmen halten es an seinem Platz. Die Seite sagt es selbst: „Create awesome 3D scenes with AI“. Nichts unterhalb des Folds muss das Angebot ebenfalls tragen. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter Scene AI?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 2056x1476, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag Tailwind CSS überhaupt?
Die Referenz ist zufällig in Tailwind CSS gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Darf ich Scene AI in einem Kundenprojekt verwenden?
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 2056x1476 erfasst.
