Über diese Vorlage
Das hier ist der Eintrag Hero-Bereich von Healcure, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Überschrift der Seite lautet „Healthcare for Good. Today. Tomorrow. Always.“, und die Komposition ist um genau diese Worte gebaut. Die Palette ist gedämpftes blau #374251 darunter. Geliefert wird Tailwind CSS, erfasst bei 1466x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf eine Videospur in Schleife. Nutze es als Referenz, wenn du eine Hero-Bereich für dieses Publikum baust, also für ein Gesundheits- oder Wellness-Produkt, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Hero-Bereich-Design für ein Gesundheits- oder Wellness-Produkt ausliefert und kein Designsystem im Rücken hat.
- Gemacht für Agenturen, die nach Runden abrechnen und Abstände in 14px-Schritten vor der ersten Runde verbindlich haben wollen.
- Wenn du ein Modell statt eines Designers briefst, starte mit dem Hero-Bereich-Briefing und lass den Prompt Tailwind CSS festhalten.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Abstände in 14px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1466x1080, damit die Medien darunter bis an den Rand durchlaufen. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen.
- Badge über dem Falz. Eine kleine Pille sitzt für eine einzelne Ankündigung über der Headline, und das Briefing hält es bei einer, denn der Punkt ist, Bewegung zu signalisieren, ohne den Seitenkopf zum Schwarzen Brett zu machen. Es gibt nur eine Ankündigung, und das lässt das Badge wie eine Neuigkeit wirken.
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Abstände zwischen den Links kommen aus Innenabstand und nicht aus Trennern, damit die Zeile als ein Objekt wirkt. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Gemessen statt geschätzt. Im Layout bleibt nichts dem Gefühl überlassen: Das Briefing nennt Abstände in 14px-Schritten, und der Build muss genau diese Werte treffen. Zwischen den genannten Werten gibt es keinen erfundenen Zwischenwert; die Werteliste ist das ganze System.
Bewegung & Interaktion
Eine Schleife, keine Timeline
Die Hintergrundbewegung kommt aus der 5,4s-Schleife in 1466x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung. Dreh oder exportiere in 1466x1080 oder breiter.
Fast keine Bewegung
Das Briefing lässt Animation weg und überlässt die Seite dem 1466x1080-Layout, nur Hover- und Druckzustände ändern sich. Bewegung ist hier Rückmeldung und nicht Dekoration.
So wird der Eintrag Hero-Bereich deiner
Du musst den Eintrag Hero-Bereich nicht neu bauen, um ihn zu deinem zu machen. Ersetz die Zeile und die Medien, behalt die Skala (Abstände in 14px-Schritten), und das Layout liest weiterhin wie entworfen. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Die Reihenfolge im Eintrag Hero-Bereich
Vergleich den Seitenkopf mit einem typischen Landing-Screen im Bereich Gesundheit. Beide tragen eine Zeile und eine Handlung; hier stehen die Navigation, das Ankündigungs-Badge und die Kennzahlen-Zeile in fester Reihenfolge, statt mit gleichem Gewicht zu konkurrieren. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Der Eintrag Hero-Bereich ist vermessen und nicht geschätzt. Abstände in 14px-Schritten stammen aus dem Briefing, und das Layout folgt diesen Schritten, statt zurechtgeschoben zu werden. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Kann ich eine aus Healcure nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
Der Prompt wurde von sceneai.art ö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.
Warum steht der Prompt von Healcure hier nicht abgedruckt?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.021 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was steht eigentlich im Briefing hinter Healcure?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1466x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
