Über diese Vorlage
Beauty Categories: Feature-Bereich für E-Commerce, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Die Palette ist weiß #EBEBEB darunter, tiefes orange #251E18 für die Schrift und orange #593C2D für die Akzente. Geliefert wird React und Tailwind CSS, erfasst bei 640x470, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 150ms. Wenn du ein Briefing zum Thema Feature-Bereich im Bereich E-Commerce schreibst, starte bei dieser Komposition und tausche nur das Thema aus.
Gemacht für
- Gemacht für einen Solo-Gründer, der ein Feature-Bereich-Design für eine E-Commerce-Marke ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem Feature-Bereich-Briefing versorgt, startet mit dem Prompt über 4.038 Zeichen.
- Gemacht für Content-Leads, die ein Feature-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Beauty Categories.
Was enthalten ist
- Abstände als Werte genannt. Das Briefing legt Abstände in 20px-Schritten und 150ms Übergänge fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
- Farbe mit Aufgabenbeschreibung. Der Akzent erscheint nur in Button- und Linkgröße, während weiß #EBEBEB durchgehend flach bleibt. Alles andere liegt auf weiß #EBEBEB, und das hält eine gesättigte Palette lesbar.
- Der Aufbau passt in einen Screen. Alles über dem Falz verdient seinen Platz. Das Briefing nennt den Text, den Rahmen von 640x470 und die Schriftgrößen und lässt nichts Dekoratives daneben konkurrieren. Die Seite ist eine Komposition bei 640x470, und deshalb hält sie zusammen, wenn sich der Text ändert. Über dem Falz hat nichts Dekoratives etwas zu suchen.
- Nichts davon ist geerbt. Die Abstände sind genauso zitiert (Abstände in 20px-Schritten und 150ms Übergänge) und nicht als Skala, die von selbst weiterwächst.
Bewegung & Interaktion
Zustandswechsel mit Zeitwert
Die Zeiten sind kurz und einheitlich: Übergänge laufen 150ms, deshalb lesen sich Hover- und Druckzustände als ein System und nicht als Sammlung einzelner Effekte. Die Dauern sind kurz genug, dass die Rückmeldung als Reaktion wirkt und nicht als Animation.
Statisch mit Absicht
Das Briefing lässt Animation weg und überlässt die Seite dem 640x470-Layout, nur Hover- und Druckzustände ändern sich. Die Komposition steht still, die Hierarchie muss die Seite also tragen, und sie tut es. Keine Scroll-Timelines nötig.
So wird der Eintrag Feature-Bereich deiner
Eine Zeile, eine Schrift, ein Akzent: Diese drei Substitutionen ändern das Design am stärksten. Abstände in 20px-Schritten und 150ms Übergänge sind die Werte, die sich nicht bewegen sollten. Setze den neuen Text in derselben Display-Größe und prüfe den Kontrast erneut, bevor du etwas ergänzt.
Warum diese Komposition für E-Commerce trägt
Verglichen mit einem Template-Hero liegt der Unterschied im Weggelassenen. Es gibt kein Kartenraster, kein Karussell und keinen zweiten Call-to-Action: nur die Kennzahlen-Zeile, das Kartenraster und der Hintergrund-Clip, und Abstände in 20px-Schritten und 150ms Übergänge geben die Maße vor. Beauty Categories nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Die Reihenfolge im Eintrag Feature-Bereich
Eine strenge Reihenfolge kostet später Flexibilität. Kommt eine Sektion über den Fold, müssen Abstände in 20px-Schritten und 150ms Übergänge neu geschnitten werden, weil die Abfolge tragend ist und nicht dekorativ. Ein Leser im Bereich E-Commerce bekommt das Angebot vor den Optionen.
Häufige Fragen
Wie lang ist der Prompt hinter Beauty Categories?
Das erfasste Briefing umfasst 4.038 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 Beauty Categories hängt von React und Tailwind CSS ab?
Beauty Categories 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.
Was steuert die Bewegung in Beauty Categories?
Auftritte und Zustandswechsel liegen im Bereich von 150ms. Sie hängen an Zustandswechseln statt an einer Scroll-Bibliothek und halten die Texte nie auf.
