Über diese Vorlage
Power AI hält den Entscheidungsweg fest: Hinter dem Eintrag Hero-Bereich stehen 3.838 Zeichen Briefing. „The most powerful AI ever deployed in talent acquisition“ ist die Zeile, auf die das Layout gebaut ist. Farbe bleibt auf schwarz #000000 darunter, gelb #FCD34D für die Schrift und indigo #A855F7 für die Akzente begrenzt, gesetzt in Geist. Geliefert wird eine einzelne Komponente, erfasst bei 800x604, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Das Bewegungsbudget umfasst Übergänge von 100ms. Lass es beim Schreiben offen: Die 3.838 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Halte eine einzelne Komponente in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Wenn der Build auf eine einzelne Komponente aufsetzt, übernimm zuerst eine feste Display-Größe von 220px und Abstände in 82px-Schritten und lass die Palette in Ruhe, bis das Raster steht.
- Die Seite richtet sich an Frontend-Entwickler, die ein Hero-Bereich-Design für ein KI- oder SaaS-Produkt in eine einzelne Komponente nachbauen und die Zahlen hinter der Optik suchen.
Was enthalten ist
- Schmale Navigationsleiste. Die obere Zeile trägt die Wortmarke, vier bis fünf Links und eine einzelne Aktion in #A855F7, knapp genug, um neben dem Rest der Seite leise zu bleiben. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #A855F7 ist das einzige Element in der Leiste mit Gewicht.
- Größen stehen im Briefing. Die Werte sind die Spezifikation: eine feste Display-Größe von 220px, Abstände in 82px-Schritten und 100ms Übergänge, aufgenommen bei 800x604 und nicht aus einem Screenshot abgeleitet. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird.
- Social Proof an der Unterkante. Die Logos stehen unbenannt auf der Grundlinie in einer Reihe in Geist, was die Aussage implizit und die Komposition intakt lässt. Es gibt keine Überschrift und keine Linie, damit die Reihe Teil des ersten Screens bleibt. Lass die Reihe unbenannt.
- Obere Zeile: Wortmarke, Links, eine Aktion. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x604, damit die Medien darunter bis an den Rand durchlaufen.
Bewegung & Interaktion
Ein Laufband trägt den Rhythmus
Ein Laufband zieht in einer Endlosschleife durch die Komposition, gesetzt in Geist, die Seite hat also Bewegung, auch wo beim Scrollen nichts animiert. Der aktive Eintrag ist mit #A855F7 markiert und nicht mit einer Größenänderung.
Zeiten in Millisekunden
Die Bedienelemente reagieren in 100ms, schnell genug, dass die Seite beim Antippen antwortet und nicht erst danach. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst.
Warum diese Komposition für SaaS trägt
Wenn du ein Briefing zum Thema Hero-Bereich im Bereich SaaS schreibst, ist das Schwierigste die Entscheidung, was der erste Screen nicht sagen soll. Power AI beantwortet das vorab: eine Display-Zeile, die Navigation, die Überschrift, die Kennzahlen-Zeile, die Kundenzeile und der Hintergrund-Clip dahinter. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Was sich in Power AI bewegt
Das Briefing bindet jeden Übergang an einen Wert (Übergänge von 100ms, Hover- und Druckzustände und ein laufendes Laufband). Genau das unterscheidet die Seite von einem Template mit aufgesetztem Animations-Preset. Nichts in diesem Eintrag Hero-Bereich animiert um seiner selbst willen.
Was du in Power AI zuerst änderst
Die Palette zuerst neu zu belegen ist der übliche Fehler. Sie ändert die Stimmung, ohne die Komposition anzufassen, und eine feste Display-Größe von 220px und Abstände in 82px-Schritten tragen das Layout weiterhin; mach Text und Medien zuerst und die Palette zuletzt. Das Thema ist der Teil, der sich ändern sollte.
Häufige Fragen
Warum nennt der Eintrag eine einzelne Komponente überhaupt?
Power AI wurde in eine einzelne Komponente 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.
Was steht eigentlich im Briefing hinter Power AI?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x604, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Darf ich Power AI in einem Kundenprojekt verwenden?
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 800x604 erfasst.
