Über diese Vorlage
Organic Odyssey liefert für ein KI- oder SaaS-Produkt einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Die Überschrift der Seite lautet „An odyssey through delicate living forms“, und die Komposition ist um genau diese Worte gebaut. Die Palette umfasst schwarz #000000 darunter, 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 Übergänge von 300ms nicht hinaus. Lass es beim Schreiben offen: Die 4.802 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Wenn die Referenz nur ein Ausgangspunkt ist, können Designer ein 640x470 Rahmen behalten und den Rest des Hero-Bereich-Designs neu bauen.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Organic Odyssey.
- Content-Leads, die eine längere Headline unterbringen müssen, nehmen die Zeilenzahl von Geist als Grenze, nicht die Zeichenzahl.
Was enthalten ist
- Navigation in einer Zeile. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Unterhalb des Tablet-Breakpoints übernimmt ein mobiles Overlay. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 640x470, damit die Medien darunter bis an den Rand durchlaufen.
- Abstände als Werte genannt. Das Briefing nennt die Zahlen: Abstände in 20px-Schritten und 300ms Übergänge. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Die Werte stammen aus dem aufgezeichneten Prompt und sind nicht abgeleitet, deshalb überstehen sie ein erneutes Rendern. Wo das Briefing schweigt, schweigt es mit Absicht.
- Die Skala ist das Styling. Die Größenstufen und Laufweiten im Briefing geben den Ton vor: Geist in enger Display-Größe, danach ein klarer Absturz zum Begleittext. Ein Schriftwechsel ist unproblematisch, solange Größen und Gewichte dort bleiben, wo das Briefing sie gesetzt hat.
- Navigation ohne Hintergrund. Bleib bei vier oder fünf Links; die Zeile ist dafür bemessen. Die Referenz wurde mit 640x470 erfasst.
Bewegung & Interaktion
Eine Dauer für die Bedienelemente
Jeder Zustandswechsel in der Spezifikation hat eine Dauer: Übergänge laufen etwa 300ms. Nichts bleibt beim Browser-Standard, deshalb wirkt die Seite gesetzt und nicht animiert. Dieselbe Dauer wird für alle Bedienelemente wiederverwendet, deshalb wirken die Interaktionen wie ein System. Die Zeiten gehören zum Design, nicht in den Feinschliff.
Statisch mit Absicht
Das Briefing lässt Animation weg und überlässt die Seite dem 640x470-Layout, nur Hover- und Druckzustände ändern sich. Nur die Elemente bewegen sich, die auf den Zeiger reagieren.
Wie der Eintrag Hero-Bereich 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. Eine Quetschung wäre billiger gewesen und würde nicht halten.
Wie Organic Odyssey den ersten Blick ordnet
Nichts konkurriert hier mit der ersten Entscheidung. „An odyssey through delicate living forms“ leistet diese Arbeit ab dem ersten Frame. Das Stützmaterial wartet unter dem Fold, und die Navigation, die Überschrift, die Kennzahlen-Zeile und der Hintergrund-Clip tragen die obere Seite allein. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Das Briefing ist eine Spezifikation: Abstände in 20px-Schritten und 300ms Übergänge, und der Medienrahmen ist bei 640x470 festgelegt, bevor irgendetwas darum herum entworfen wird. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Wie lang ist der Prompt hinter Organic Odyssey?
Das erfasste Briefing umfasst 4.802 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 Organic Odyssey hängt von React und Tailwind CSS ab?
Organic Odyssey 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 viel von Organic Odyssey ist animiert?
Die Übergänge hängen an Zuständen der Oberfläche statt an einer Scroll-Zeitleiste und sind im Bereich von 300ms angesetzt. Das Briefing hält die Werte fest, damit eine Portierung sie ohne Raten übernehmen kann.
