Über diese Vorlage
Contact Cybernetic ist eine brauchbare Referenz für dieses Publikum: die Komposition (Hero-Bereich), ausgelegt für ein KI- oder SaaS-Produkt, vermessen und bereit zum Nachbauen. „). Inside, display an acknowledgment banner reading“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist weiß #F1F3F1 darunter und tiefes grün #1C2E1E für die Schrift, gesetzt in Inter. 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 1s beschränkt. Lass es beim Schreiben offen: Die 6.423 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 640x458 Rahmen schriftlich festhalten wollen, bevor ein Angebot rausgeht.
- Agenturen, die Hero-Bereich-Designs für ein KI- oder SaaS-Produkt anbieten und Schrift von 21px bis 76px und Abstände in 23px-Schritten schon im Angebot nennen wollen, damit die Kalkulation nach dem Kickoff noch trägt.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Contact Cybernetic.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Schrift von 21px bis 76px und Abstände in 23px-Schritten bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x458, damit die Medien darunter bis an den Rand durchlaufen. Eine Aktion pro Leiste.
- Leiste im Raster der Seite. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern. Die Referenz wurde mit 640x458 erfasst.
- Nichts davon ist geerbt. Die Größen sind zitiert und nicht vererbt: Schrift von 21px bis 76px, Abstände in 23px-Schritten und 1s Übergänge. Tauschst du die Schrift oder den Text, halten diese Verhältnisse trotzdem. Schrift und Layout teilen dieselben Stufen, damit nichts verrutscht, wenn eines von beiden ersetzt wird.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in Inter auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Die Pille steht auf der kleinsten Stufe im Briefing, damit sie als Label und nicht als zweiter Titel gelesen wird.
Bewegung & Interaktion
Hover nur, wo er etwas bedeutet
Jedes interaktive Element tut eine Sache (Hover-Zustände auf Buttons und Links statt auf jeder Karte), dadurch bleiben die Zustände vorhersehbar. Die interaktiven Zustände verschieben kein Layout, unter dem Zeiger springt also nichts. Wenn ein Zustand keine Aktion bestätigt, lass ihn weg.
Schnell genug, um bewusst zu wirken
Hover-, Druck- und Fokuszustände lösen sich alle in 1s auf, deshalb wirkt die Oberfläche unmittelbar. Das Easing steht zusammen mit der Dauer im Briefing (1s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Wie der Eintrag Hero-Bereich umbricht
Responsiv heißt hier: Die Skala ändert sich, die Abfolge nicht. die Navigation klappt zu einem mobilen Menü zusammen, und die Leserichtung bleibt, wo das Briefing sie hingesetzt hat. Die Breite ändert die Maße, nicht den Lesepfad.
Wie Contact Cybernetic den ersten Blick ordnet
Du könntest diese Blöcke umsortieren, und die Seite würde weiter laden. Sie würde aber nicht mehr als Argument lesen: die Navigation, die Überschrift, das Ankündigungs-Badge, die Kennzahlen-Zeile und der Hintergrund-Clip sind eine Abfolge, und Schrift von 21px bis 76px und Abstände in 23px-Schritten funktionieren nur in dieser Reihenfolge. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Contact Cybernetic als Spezifikation lesen
Die Schrift ist die erste Zahl: Schrift von 21px bis 76px und Abstände in 23px-Schritten. Die Abstände folgen daraus, und alles andere auf der Seite ist gegen diese beiden Werte positioniert. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Ist der Prompt zu Contact Cybernetic eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 6.423 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.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Contact Cybernetic 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 1s Übergänge in Contact Cybernetic?
Die Bewegung ist genauso genau festgelegt wie das Layout: Zustandswechsel sind im Bereich von 1s abgeschlossen. Portiere zuerst die Komposition und danach die Zeitwerte, denn sie lassen sich leichter angleichen, wenn das Layout steht.
