Über diese Vorlage
Lies Agent Grove als Spezifikation zum Thema Landingpage: Die Werte standen fest, bevor die Seite gebaut wurde. Farbe bleibt auf schwarz #2B2B2B darunter begrenzt, gesetzt in Geist. Geliefert wird React und Tailwind CSS, erfasst bei 1484x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung beschränkt sich auf Übergänge von 300ms, cubic-bezier(0.16,1,0.3,1) und eine Videospur in Schleife. Nutze es als Referenz, wenn du eine Landingpage für dieses Publikum baust, also für ein KI- oder SaaS-Produkt, und eine fertige Komposition willst statt eines Ausgangspunkts.
Gemacht für
- Produktmarketer, die brauchen, dass die Komposition (Landingpage) auch mit 5,4s Video in Schleife hinter dem Text lesbar bleibt.
- Wer ein Modell mit einem Landingpage-Briefing versorgt, startet mit dem Prompt über 7.959 Zeichen.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Agent Grove.
Was enthalten ist
- Zurückhaltende Navigation. Die Leiste ist eine Zeile aus Text und einer Aktion, auf Abstände in 24px-Schritten und 300ms Übergänge bemessen, damit sie als Streifen wirkt und nicht als Band. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1484x1080, damit die Medien darunter bis an den Rand durchlaufen.
- Scannen statt lesen. Das Raster ist die Struktur: gleich große Panels, in Geist gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Die Panel-Reihenfolge ist die Lesereihenfolge, nichts hängt an Positionshinweisen.
- Spalten, keine Linkhalde. Die Links sind zu Spalten gruppiert, die Wortmarke hat ihren eigenen Block, und das hält einen langen Footer lesbar, statt ihn zu einer Liste zu machen. Die Spalten liegen auf demselben Raster wie die Seite darüber, damit der Footer wie dieselbe Gestaltung wirkt.
- Navigation in einer Zeile. Die Labels sind kurz genug, um bei jeder im Briefing genannten Breite in einer Zeile zu bleiben. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
Bewegung & Interaktion
Die Zeiten stehen im Briefing
Zustandswechsel sind mit 300ms angegeben, die Rückmeldung der Bedienelemente ist damit ein gestalteter Wert und kein Browser-Standard. Dieselbe Dauer wird für alle Bedienelemente wiederverwendet, deshalb wirken die Interaktionen wie ein System. Behalte die Dauern, wenn du die Seite neu gestaltest.
Hintergrundbewegung ohne Scroll-Bibliothek
Die Hintergrundbewegung kommt aus der 5,4s-Schleife in 1484x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
So wird der Eintrag Landingpage deiner
Das Briefing nennt Geist und die Skala daneben. Ersetz die Schrift durch eine mit denselben Proportionen, und die Komposition überlebt. Rahmen und Skala sind das, was unangetastet bleibt.
Wie der Eintrag Landingpage umbricht
Das schmale Layout ist entworfen und nicht geerbt. die Navigation klappt zu einem mobilen Menü zusammen, damit die Hierarchie bei jeder Breite den Umbruch übersteht. Die Hierarchie ist das, was den Umbruch übersteht.
Was sich in Agent Grove bewegt
Der Preis ist, dass die Animation hier keinen zweiten Blick belohnt. Belohnt wird die Leserichtung, und Übergänge von 300ms, eine Medienschleife von 5,4s und Hover- und Druckzustände bestätigen Zustände, statt zu dekorieren. Nichts in diesem Eintrag Landingpage animiert um seiner selbst willen.
Häufige Fragen
Ist der Prompt zu Agent Grove eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 7.959 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 Agent Grove hängt von React und Tailwind CSS ab?
Agent Grove 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 gehe ich mit den Medien von Agent Grove in einem Kundenprojekt um?
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 1484x1080 erfasst.
