Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst Asme das Thema Hero-Bereich mit einem einzigen erfassten Briefing. Farbe bleibt auf schwarz #000000 darunter und grau #C9CAB9 für die Schrift begrenzt, gesetzt in Instrument Serif. Geliefert wird React und Tailwind CSS, erfasst bei 800x582, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 500ms beschränkt. Nutze es als Referenz, wenn du eine Hero-Bereich für dieses Publikum baust, also für ein KI- oder SaaS-Produkt, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Wer ein Modell mit einem Hero-Bereich-Briefing versorgt, startet mit dem Prompt über 4.360 Zeichen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Asme.
- Content-Leads, die eine längere Headline unterbringen müssen, nehmen die Zeilenzahl von Instrument Serif als Grenze, nicht die Zeichenzahl.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Eine kurze Reihe Links und eine einzelne Aktion liegen in Hero-Bereich, auf 500ms Übergänge gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x582, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Zahlenzeile statt einer Behauptung. Die Zahlen stehen in Instrument Serif in einer Größe, die näher an der Headline liegt als am Fließtext. Die Labels haben eine einzige Größe, ein langes Label ändert die Höhe der Reihe also nicht.
- 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. Der Akzent wird für eine einzige Footer-Aktion wiederverwendet und nicht für das ganze Band.
- Navigation ohne Hintergrund. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Halte die Zeile einzeilig.
Bewegung & Interaktion
Kurze, benannte Zeiten
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 500ms bei jedem Zustandswechsel. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Fast keine Bewegung
Das Briefing lässt Animation weg und überlässt die Seite dem 800x582-Layout, nur Hover- und Druckzustände ändern sich. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Wie der Eintrag Hero-Bereich umbricht
Der Eintrag Hero-Bereich wird bei 800x582 komponiert und für schmale Breiten neu komponiert. die Skala ist fließend statt gestuft, die Telefon-Version ist also eine Entscheidung und keine Quetschung. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Wie Asme den ersten Blick ordnet
Der Eintrag Hero-Bereich hat einen festgelegten Lesepfad. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Danach folgen die Navigation, die Überschrift, die Kennzahlen-Zeile, der Hintergrund-Clip und der Footer der Reihe nach, und genau das verhindert, dass ein einzelner Screen als Liste liest. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Die Zeitwerte hinter dem Eintrag Hero-Bereich
Ehrgeizige Bewegung kostet den ersten Screen meist die Lesbarkeit. Dieses Briefing hält die Liste kurz: Übergänge von 500ms und Hover- und Druckzustände, kurz genug, dass die Schrift nie warten muss. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Häufige Fragen
Wie lang ist der Prompt hinter Asme?
Das erfasste Briefing umfasst 4.360 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.
Wie viel von Asme hängt von React und Tailwind CSS ab?
Asme 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.
Kann ich eine aus Asme nachgebaute Seite veröffentlichen, ohne die Quelle zu nennen?
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 800x582 erfasst.
