Über diese Vorlage
AI Trip Planner: Preissektion für Reisen, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. „Where will you go next?“ ist die Zeile, auf die das Layout gebaut ist. Die Palette umfasst weiß #FAFAFA darunter und schwarz #0A0A0A für die Schrift, die Schrift ist Geist. Geliefert wird React und Tailwind CSS: eine Seite, kein Plugin, kein Build-Tooling zwischen dir und dem Design. Die Bewegung kommt über eine Videospur in Schleife nicht hinaus. Nimm es zur Hand, wenn im Fall Preissektion die Reihenfolge feststehen muss, bevor neue Sektionen dazukommen.
Gemacht für
- Gründer, die eine Agentur briefen, nehmen den 1470x1080-Rahmen als Abnahmekriterium für die erste Runde.
- Gemacht für Studios, die einem Kunden das Verhalten bei 760px erklären müssen, ohne vorher einen Prototyp zu bauen.
- Nimm zuerst Schrift von 15px bis 40px und Abstände in 15px-Schritten und lass die Palette folgen, weil die Abstände dieses Preissektion-Design lesbar machen.
Was enthalten ist
- Navigation in einer Zeile. Eine kurze Reihe Links und eine einzelne Aktion liegen in Preissektion, auf Schrift von 15px bis 40px und Abstände in 15px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Labels passen bei 760px in eine Zeile, und der aktive Eintrag ist über das Schriftgewicht markiert, nicht über eine Pille.
- Ein Clip, keine Illustration. Ein stummer, loopender Clip füllt das Format von 1470x1080 über 6s, auf Cover gesetzt, der Text darüber gestapelt. Das Briefing lässt Overlays vom Video weg, damit es nicht ausgegraut wird. Die Schleife ist kurz genug (6s), dass das Auge sie als Textur liest und nicht als Zeitachse. Exportiere bei 1470x1080 oder breiter, damit der Zuschnitt ehrlich bleibt.
- Eine Pille für das eine Neue. Ein Badge, eine Botschaft: die Pille sitzt in Geist auf der kleinsten Stufe über der Headline, und um diesen Platz konkurriert nichts anderes. Es ist so positioniert, dass die Headline die Mitte der Komposition behält.
- Ein Raster, kein Textblock. Wo ein Textblock stehen könnte, setzt diese Seite eine Reihe Panels, das hält Preissektion scanbar. Jedes Panel nutzt denselben inneren Aufbau, dadurch lässt sich das Raster über die Form scannen.
Bewegung & Interaktion
Interaktion sitzt auf den Bedienelementen
Die interaktive Ebene ist bewusst klein: Hover-Zustände auf Buttons und Links statt auf jeder Karte. Hover und Fokus sind gemeinsam festgelegt, Zeiger und Tastatur bekommen dadurch dieselbe Information.
Hintergrundbewegung ohne Scroll-Bibliothek
Der Hintergrundclip läuft 6s in 1470x1080 als Endlosschleife, stumm und inline, deshalb bewegt sich die Seite weiter, während die Aufmerksamkeit auf dem Text liegt. Eine Scroll-Bibliothek ist nicht nötig, denn die einzige Hintergrundbewegung ist das Medium selbst. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt.
Wie AI Trip Planner 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 das Kartenraster sind eine Abfolge, und Schrift von 15px bis 40px und Abstände in 15px-Schritten funktionieren nur in dieser Reihenfolge. Ein Leser im Bereich Reisen bekommt das Angebot vor den Optionen.
Das Argument des Eintrags Preissektion
Auf dieser Seite steht ein einziges Versprechen, und Schrift von 15px bis 40px und Abstände in 15px-Schritten halten es an seinem Platz. „Where will you go next?“ leistet diese Arbeit ab dem ersten Frame. Nichts unterhalb des Folds muss das Angebot ebenfalls tragen. AI Trip Planner nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
So wird der Eintrag Preissektion deiner
Ändere zuerst Text und Medien, dann die Farbe, zuletzt das Layout. Der Rahmen mit 1470x1080 und die Skala in Geist halten die Seite zusammen; ersetze also um sie herum und nicht durch sie hindurch. Rahmen und Skala bleiben; das Thema ist der Teil, der sich ändern soll.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu AI Trip Planner kopiere?
Das erfasste Briefing umfasst 6.398 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.
Ist das Briefing zu AI Trip Planner dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 6.398 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie viel von AI Trip Planner hängt von React und Tailwind CSS ab?
AI Trip Planner 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.
