Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst AI Workflow Hero das Thema Hero-Bereich mit einem einzigen erfassten Briefing. Das Farbschema ist tiefes grün #1F2A1D darunter, und die Seite ist in Inter gesetzt. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Bewegung bleibt auf Übergänge von 400ms und cubic-bezier(0.22,1,0.36,1) beschränkt. Lass es beim Schreiben offen: Die 16.580 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Teams, die Hero-Bereich-Designs für ein KI- oder SaaS-Produkt bauen und ein 640x470 Rahmen schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von AI Workflow Hero.
- Content-Leads, die eine längere Headline unterbringen müssen, nehmen die Zeilenzahl von Inter 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 Abstände in 10px-Schritten und 400ms Übergänge gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x470, damit die Medien darunter bis an den Rand durchlaufen.
- Leiste im Raster der Seite. Halte die Zeile einzeilig. Die Referenz wurde mit 640x470 erfasst.
- Am Viewport gemessen. Das Briefing nennt die Zahlen: Abstände in 10px-Schritten, 400ms Übergänge und Easing cubic-bezier(0.22,1,0.36,1). Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
- Schriftgewichte je Rolle benannt. Die Schriften sind Rollen zugewiesen und nicht gemischt: Inter trägt Display und Oberfläche zusammen. Die Display-Schrift kommt nur in einer Größe vor, deshalb konkurriert sie nie mit sich selbst. Setze die Display-Zeile zuletzt.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Das Briefing legt den Übergangswert auf 400ms fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Kurze Zeiten lassen die Seite gesetzt wirken; ein langsamer Standard würde die Komposition zunichtemachen.
Interaktion sitzt auf den Bedienelementen
Interaktion spielt sich hier an jedem Bedienelement ab (Hover-Zustände auf Buttons und Links statt auf jeder Karte), nichts auf der Seite bewegt sich als Nebeneffekt. Die interaktiven Zustände verschieben kein Layout, unter dem Zeiger springt also nichts.
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 400ms, Hover- und Druckzustände und eine live gerenderte Canvas, kurz genug, dass die Schrift nie warten muss. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Die Reihenfolge im Eintrag Hero-Bereich
Der Eintrag Hero-Bereich hat einen festgelegten Lesepfad. die Navigation etabliert das Produkt und gibt Rückkehrenden einen vertrauten Weg. Danach folgen die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip 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.
Warum das Briefing für SaaS trägt
Wo ein Template den Fold mit Modulen füllt, ist die Liste im Eintrag Hero-Bereich kurz: die Navigation, das Ankündigungs-Badge, die Kennzahlen-Zeile, die Feature-Liste und der Hintergrund-Clip, und dann ist Schluss. Nichts wird aufgebläht, um Fläche zu füllen; genau das belegen Abstände in 10px-Schritten und 400ms Übergänge. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter AI Workflow Hero?
Das erfasste Briefing umfasst 16.580 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 AI Workflow Hero hängt von React und Tailwind CSS ab?
AI Workflow 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 400ms Übergänge in AI Workflow Hero?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 400ms mit cubic-bezier(0.22,1,0.36,1) abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
