Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst Luminex das Thema Hero-Bereich mit einem einzigen erfassten Briefing. Die ganze Seite baut auf tiefes blau #010A12 darunter, weiß #CFDDD8 für die Schrift und blau #143F62 für die Akzente auf. Der Bau ist React; jedes Maß darin ist aufgeschrieben, und genau das macht ihn wiederverwendbar. Wenn du ein Briefing zum Thema Hero-Bereich im Bereich SaaS schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Wenn die Bewegung wegfallen muss, funktioniert das Hero-Bereich-Design trotzdem, weil dann 800x600 die Hierarchie übernehmen.
- Gemacht für Product Manager, die ein Hero-Bereich-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 162 Zeichen.
Was enthalten ist
- Eine Zeile, keine Schubladen. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #143F62, knapp genug, um neben dem Rest der Seite leise zu bleiben. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #143F62 ist das einzige Element in der Leiste mit Gewicht. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
- Die Komposition ist der Inhalt. Die Komposition (Hero-Bereich) ist so gebaut, dass der Text vor allem anderen ankommt: die Schrift trägt die Hierarchie, der Rahmen von 800x600 hält die Komposition, und die begleitenden Werte bleiben leise. Die Seite ist eine Komposition bei 800x600, und deshalb hält sie zusammen, wenn sich der Text ändert.
- Links vor der Aktion. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Eine Palette mit einer Stimme. Der Akzent trägt jede Aktion auf der Seite: blau #143F62 für Buttons und Links, tiefes blau #010A12 für den Rahmen dahinter. Der Akzent bleibt in kleinen Größen lesbar, weil #143F62 und tiefes blau #010A12 weit genug auseinanderliegen.
Bewegung & Interaktion
Statisch mit Absicht
Eine Scroll-Bibliothek gibt es hier nicht: Die 800x600-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Nur die Elemente bewegen sich, die auf den Zeiger reagieren.
Bewegung, die nicht stört
Diese Seite kommt als stehende Komposition in 800x600, die Hierarchie muss also ohne Bewegung funktionieren, und sie tut es. Stillstand ist eine gültige Entscheidung.
Wie Luminex den ersten Blick ordnet
Wenn deine Seite heute mit Features beginnt, ist das die Reihenfolge zum Übernehmen: die Navigation vorn, das Stützdetail danach, und ein 800x600 Rahmen bestimmen den Abstand. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Wie der Eintrag Hero-Bereich umbricht
Einen schmalen Screen kann man nicht durch Verkleinern reparieren. Dieses Briefing behandelt die Änderung in Schrift und Navigation: die Skala ist fließend statt gestuft. Bei schmalen Breiten fällt nichts Wichtiges weg.
So wird der Eintrag Hero-Bereich deiner
Die meisten fangen mit der Akzentfarbe an. Fang stattdessen beim Versprechen an: Schreib die Display-Zeile um und prüf dann blau #143F62 gegen deine eigenen Medien. Eine andere Marke kann den ganzen Rahmen wiederverwenden.
Häufige Fragen
Darf ich Luminex in einem Kundenprojekt verwenden?
Der Prompt wurde von motionsites.ai öffentlich veröffentlicht, die Vorschau hier ist deren Rendering. Behandle sie als Referenz für Struktur und Bewegung, prüfe die Bedingungen der Quellseite und bau die Komposition mit eigenen Texten, Medien und eigener Palette nach, bevor du sie auslieferst.
Wie lang ist der Prompt hinter Luminex?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x600, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Luminex hängt von React ab?
Luminex wurde in React 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.
