Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst Cognitra Feature das Thema Feature-Bereich mit einem einzigen erfassten Briefing. Die Zeile lautet „We provide all-in-one AI automation services in one place“, und der Rest des Eintrags Feature-Bereich ordnet sich darum. Farbe bleibt auf gedämpftes orange #877A73 darunter und grau #D2CDC5 für die Schrift begrenzt, gesetzt in Helvetica, Arial. Die Referenz ist mit React und Tailwind CSS gebaut; die Layout-Entscheidungen stehen unabhängig davon im Briefing. Die Seite begrenzt die Bewegung auf Übergänge von 0.08s. Nutze es als Referenz, wenn du eine Feature-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
- Gemacht für Studios, die einem Kunden das Verhalten bei 260px erklären müssen, ohne vorher einen Prototyp zu bauen.
- Entwickler, die das Feature-Bereich-Design auch bei langsamer Verbindung am Leben halten müssen, planen 640x470 und die Schriftgrößen-Skala als Gewichtsbudget ein.
- Wer ein Modell mit einem Feature-Bereich-Briefing versorgt, startet mit dem Prompt über 3.241 Zeichen.
Was enthalten ist
- Obere Zeile, eine Aktion. Die Leiste überlagert Feature-Bereich, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Die Labels passen bei 260px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille. Gib der Wortmarke nicht mehr Raum, als ihre Schrift braucht.
- Die Skala ist das Styling. Die Schrift ist Helvetica, Arial an der Spitze der Skala, der begleitende Text liegt deutlich darunter, damit die Hierarchie ohne Farbe lesbar ist. Die Laufweite wird enger, je größer die Schrift wird, deshalb hält die Display-Zeile über 14px zusammen. Eine Schrift, klare Rollen.
- Eine Zahlenzeile statt einer Behauptung. Die Reihe steht hoch in Feature-Bereich als Beleg und nicht als Dekoration. In der Reihe gibt es keine Trenner, allein der Abstand trennt die Zahlen. Halte die Reihe in einer Zeile. Die Referenz wurde mit 640x470 erfasst.
- Fließend, wo es nötig ist. Das obere Ende der Skala ist fließend (eine Größe zwischen 26px und 32px), der Rest ist fest, damit der Rahmen auch bei schmalerem Viewport komponiert bleibt. Mit schmalerem Viewport ändert die Schrift ihre Größe, nicht ihre Rolle.
Bewegung & Interaktion
Kurze, aufeinander abgestimmte Zeiten
Zustandswechsel sind mit 0.08s angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Das Easing steht zusammen mit der Dauer im Briefing (0.08s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Fast keine Bewegung
Eine Scroll-Bibliothek gibt es hier nicht: Die 640x470-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Warum das Briefing für SaaS trägt
Wo ein Template den Fold mit Modulen füllt, ist die Liste im Eintrag Feature-Bereich kurz: die Navigation, die Kennzahlen-Zeile und der Hintergrund-Clip, und dann ist Schluss. Nichts wird aufgebläht, um Fläche zu füllen; genau das belegen eine feste Display-Größe von 14px und 100vh hohe Sektionen. Cognitra Feature nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Zahlen hinter dem Eintrag Feature-Bereich
Ein Screenshot sagt, wie die Seite aussieht; das Briefing sagt, warum. eine feste Display-Größe von 14px, 100vh hohe Sektionen, Abstände in 32px-Schritten, 0.08s Übergänge und ein Breakpoint bei 260px schließen die Lücke zwischen beiden. Nichts in diesem Eintrag Feature-Bereich hängt an einer Voreinstellung.
So wird der Eintrag Feature-Bereich deiner
Fang mit dem Text an, nicht mit der Farbe. Schreib „We provide all-in-one AI automation services in one place“ zu einem Satz über dein Produkt um und setz ihn in Helvetica, Arial in der Größe, die das Briefing verwendet. Das Thema ist der Teil, der sich ändern sollte.
Häufige Fragen
Was steht eigentlich im Briefing hinter Cognitra Feature?
Das erfasste Briefing umfasst 3.241 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.
Brauche ich React und Tailwind CSS, um Cognitra Feature nachzubauen?
Cognitra Feature 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 0.08s Übergänge in Cognitra Feature?
Auftritte und Zustandswechsel liegen im Bereich von 0.08s. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
