Über diese Vorlage
Sentinel AI zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für ein KI- oder SaaS-Produkt, und die Anweisungen dazu sind veröffentlicht. Die Zeile lautet „We implement security correctly“, und der Rest des Eintrags Hero-Bereich ordnet sich darum. Das Farbschema ist schwarz #000000 darunter und gedämpftes grün #8EB992 für die Akzente, und die Seite ist in Sora gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 800x594, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 0.7s und cubic-bezier(0.16, 1, 0.3, 1). Lass es beim Schreiben offen: Die 5.940 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Sentinel AI.
- Wenn deine Marke zwei Farben hat, sollten Marketingverantwortliche entscheiden, welche die Rolle von #8EB992 übernimmt und welche die von #000000.
- Frontend-Entwickler, die eine Figma-Datei übernehmen, prüfen anhand von #000000 und #8EB992, ob die Palette den Handoff überstanden hat.
Was enthalten ist
- Navigation ohne Hintergrund. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #8EB992 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #8EB992 ist das einzige Element in der Leiste mit Gewicht.
- Abstände als Werte genannt. Die Größen sind zitiert und nicht vererbt: Abstände in 20px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen. Miss nach, bevor du anpasst.
- Eine Schrift, diszipliniert eingesetzt. Die Schriften sind Rollen zugewiesen und nicht gemischt: Sora trägt Display und Oberfläche zusammen. Die Ziffern nutzen dieselbe Schrift wie das Interface, Statistiken und Labels gehören damit zu einem System.
- Die Komposition ist der Inhalt. Die Komposition (Hero-Bereich) ist so gebaut, dass der Text vor allem anderen ankommt: die Schrift trägt die Hierarchie, der Rahmen von 800x594 hält die Komposition, und die begleitenden Werte bleiben leise. Die Seite ist eine Komposition bei 800x594, und deshalb hält sie zusammen, wenn sich der Text ändert.
Bewegung & Interaktion
Dauern aus dem Briefing
Eine Dauer deckt alle Interaktionen ab (0.7s mit cubic-bezier(0.16, 1, 0.3, 1)); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (0.7s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Hover, aber sparsam
Nur die Bedienelemente reagieren auf den Zeiger (Hover-Zustände auf Buttons und Links statt auf jeder Karte), die Seite wirkt also reaktionsschnell, ohne jedes Element zur Zielscheibe zu machen. Die Zustände sind im Briefing benannt, die Seite hängt also nicht an einer Hover-Effekt-Bibliothek. Ein paar verlässliche Zustände schlagen eine lange Liste von Effekten.
Die Zahlen hinter dem Eintrag Hero-Bereich
5.940 Zeichen Briefing ergeben eine vollständige Spezifikation. Der tragende Teil ist kurz: Abstände in 20px-Schritten, 0.7s Übergänge und Easing cubic-bezier(0.16, 1, 0.3, 1). Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Wie Sentinel AI den ersten Blick ordnet
Aufmerksamkeit wird gelenkt und nicht dem Zufall überlassen. Die Seite sagt es selbst: „We implement security correctly“. Die Abfolge steht fest: die Navigation, die Kennzahlen-Zeile und die Feature-Liste, und Abstände in 20px-Schritten und 0.7s Übergänge bestimmen die Größe jeder Station, damit nichts in falscher Reihenfolge ankommt. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Was ein KI- oder SaaS-Produkt hier gewinnt
Dass das für ein KI- oder SaaS-Produkt funktioniert, liegt daran, dass die Referenz dem Leser nie zumutet, die Botschaft selbst zusammenzusetzen. Layout, Schrift und Farbe sind entschieden (schwarz #000000 und gedämpftes grün #8EB992, gesetzt in Sora), die erste Bildschirmfläche liest sich also als fertiges Argument und nicht als Haufen von Teilen. Sentinel AI nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Sentinel AI kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x594, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Sentinel AI hängt von React und Tailwind CSS ab?
Sentinel AI 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 Sentinel AI 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 800x594 erfasst.
