Über diese Vorlage
Prosthetics Hero ist die Referenz (Hero-Bereich) für dieses Publikum, also für ein Gesundheits- oder Wellness-Produkt. Das Briefing dahinter ist eine vollständige Bauvorgabe statt eines Moodboards. Die ganze Seite baut auf weiß #FDFCFC darunter auf. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Tailwind CSS), statt ihn zu verschweigen. Das Bewegungsbudget umfasst Übergänge von 200ms. Nimm es als Briefing für ein Gesundheits- oder Wellness-Produkt: Der Eintrag Hero-Bereich muss einem Nachbau standhalten, nicht nur dem ersten Blick.
Gemacht für
- Teams, die Hero-Bereich-Designs für ein Gesundheits- oder Wellness-Produkt bauen und ein 640x464 Rahmen schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Dieses Hero-Bereich-Design beantwortet die Frage, was Schrift von 12px bis 14px und Abstände in 13px-Schritten im Layout tatsächlich bewirken.
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 3.421 Zeichen.
Was enthalten ist
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Schrift von 12px bis 14px und Abstände in 13px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x464, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Pille für das eine Neue. Das Badge ist das einzige Element, das über der Headline stehen darf, und genau dadurch wirkt es als Ankündigung und nicht als Rahmenwerk. Es gibt nur eine Ankündigung, und das lässt das Badge wie eine Neuigkeit wirken.
- Zurückhaltende Navigation. Die Aktion ist das einzige Element der Zeile mit Füllung, dadurch bleiben die Links als Text lesbar. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Am Viewport gemessen. Die Werte sind die Spezifikation: Schrift von 12px bis 14px, Abstände in 13px-Schritten und 200ms Übergänge, aufgenommen bei 640x464 und nicht aus einem Screenshot abgeleitet. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
Bewegung & Interaktion
Dauern aus dem Briefing
Die Bewegung ist hier in Millisekunden angegeben: 200ms. Das ist das gesamte Animationsbudget, und es fließt in Zustandswechsel statt in eine Scroll-Timeline. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst.
Bewegung, die nicht stört
Das Briefing lässt Animation weg und überlässt die Seite dem 640x464-Layout, nur Hover- und Druckzustände ändern sich. Nur die Elemente bewegen sich, die auf den Zeiger reagieren.
Die Zahlen hinter dem Eintrag Hero-Bereich
Die Seite enthält mehr Zahlen, als es den Anschein hat. Schrift von 12px bis 14px, Abstände in 13px-Schritten und 200ms Übergänge sind die, die ein Nachbau behalten muss; der Rest darf wandern. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Was der Eintrag Hero-Bereich richtig macht
Ein Screen bedeutet eine Entscheidung für den Leser, und das ist der Preis dieses Layouts: Alles andere rutscht unter den Fold. Im Briefing stehen Schrift von 12px bis 14px, Abstände in 13px-Schritten und 200ms Übergänge, damit die unteren Sektionen denselben Rhythmus behalten. Prosthetics Hero nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Wie Prosthetics Hero den ersten Blick ordnet
Eine solche Seite vergräbt die Handlung meist unter einem Feature-Raster. Diese hält die Abfolge fest: die Navigation, die Überschrift, das Ankündigungs-Badge und der Hintergrund-Clip, mit der Handlung im ersten Screen statt nach drei Scrolllängen. Ein Leser im Bereich Gesundheit bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Prosthetics Hero?
Das erfasste Briefing umfasst 3.421 Zeichen und beschreibt Rahmen, Schriftgrößen-Skala, Palette und Übergänge. Wenn du es kopierst, hast du genau diesen Text; schickst du es an Studio, wird dieselbe Anfrage mit der bereits beschriebenen Seite vorbereitet.
Brauche ich React und Tailwind CSS, um Prosthetics Hero nachzubauen?
Prosthetics Hero 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 verhalten sich die 200ms Übergänge in Prosthetics Hero?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 200ms angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
