Über diese Vorlage
Bloom AI zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für ein KI- oder SaaS-Produkt, und die Anweisungen dazu sind veröffentlicht. Die Überschrift der Seite lautet „Innovating the spirit of bloom AI“, und die Komposition ist um genau diese Worte gebaut. Die Palette ist tiefes blau #030E1A darunter, gedämpftes grün #AAD9C3 für die Schrift und grün #2E5648 für die Akzente, gesetzt in Poppins. Die Referenz ist mit React und Lucide icons gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Hero-Bereich wandern unverändert in deine Marke.
Gemacht für
- Übernimm den 800x564-Rahmen und Abstände in 50px-Schritten aus diesem Hero-Bereich-Design, bevor du irgendetwas anderes mitnimmst.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 3.900 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Bloom AI.
Was enthalten ist
- Leiste im Raster der Seite. Die Zeile setzt ihren Kontrast an genau einer Stelle: die Aktion in #2E5648, während Wortmarke und Links auf der Textfarbe zurücktreten. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #2E5648 ist das einzige Element in der Leiste mit Gewicht.
- Das Briefing nennt die Stufen. Das Briefing legt Abstände in 50px-Schritten fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Karten übernehmen die Struktur. Das Raster ist die Struktur: gleich große Panels, in Poppins gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Jedes Panel paart eine Idee mit einem Icon, damit der Blick horizontal bleibt.
- Navigation in einer Zeile. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x564, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Bewegung, die nicht stört
Das Briefing lässt Animation weg und überlässt die Seite dem 800x564-Layout, nur Hover- und Druckzustände ändern sich. Nur die Elemente bewegen sich, die auf den Zeiger reagieren. Keine Scroll-Timelines nötig.
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 800x564-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren.
Warum das Briefing für SaaS trägt
Angenommen, deine Medien sind lauter als dein Text. Genau dafür ist diese Komposition gebaut. Das Medium ist ein Standbild in 800x564. Der Rahmen bleibt ruhig, und Abstände in 50px-Schritten halten den Leser am Text. Bloom AI nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Ein Screenshot sagt, wie die Seite aussieht; das Briefing sagt, warum. Abstände in 50px-Schritten schließen die Lücke zwischen beiden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
So wird der Eintrag Hero-Bereich deiner
Fang mit dem Text an, nicht mit der Farbe. Schreib „Innovating the spirit of bloom AI“ zu einem Satz über dein Produkt um und setz ihn in Poppins in der Größe, die das Briefing verwendet. Schreib die Display-Zeile um, bevor du die Farbe anfasst.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Bloom AI kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x564, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Kann ich Hero-Bereich von Bloom AI in einem anderen Stack nachbauen?
Die Referenz ist zufällig in React und Lucide icons gebaut. Im Layout hängt nichts von dieser Entscheidung ab: Abstände, Schrift und Bewegungswerte übertragen sich auf das, was du bereits verwendest.
Wie gehe ich mit den Medien von Bloom 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 800x564 erfasst.
