Über diese Vorlage
Das hier ist der Eintrag Landingpage von Mindloop Landing, veröffentlicht mit dem Briefing, das ihn hervorgebracht hat, statt als Screenshot. Die Palette ist tiefes blau #010713 darunter, gesetzt in Inter. Geliefert wird React und Tailwind CSS, erfasst bei 455x800, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Leih dir die Struktur, nicht das Thema: Die Zahlen zum Thema Landingpage wandern unverändert in deine Marke.
Gemacht für
- Teams, die ein KI- oder SaaS-Produkt Landingpage bauen und die gemessenen Werte (Abstände in 100px-Schritten) wollen statt eines Screenshots zum Abschreiben.
- Gemacht für einen Solo-Gründer, der ein Landingpage-Design für ein KI- oder SaaS-Produkt ausliefert und kein Designsystem im Rücken hat.
- Gemacht für Content-Leads, die ein Landingpage-Design neu betexten, dessen Headline so lang bleiben muss wie die von Mindloop Landing.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Eine schmale Leiste liegt über der Komposition (Landingpage), die Wortmarke links, die Links in Inter gesetzt, damit die Komposition zuerst als Inhalt und erst danach als Rahmen wirkt. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 455x800, damit die Medien darunter bis an den Rand durchlaufen. Hat deine Seite mehr Sektionen, gruppiere sie, statt die Leiste zu verbreitern.
- Werte zum Nachmessen. Das Layout ist gegen feste Werte gelöst (Abstände in 100px-Schritten), und das hält den ersten Screen bei jeder Breite komponiert. Der kleinste und der größte Wert dieser Liste stecken den Bereich ab, in dem die Komposition arbeitet.
- Der Footer ist eine volle Komposition. 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. Behalte den Akzent für eine einzelne Aktion.
- Zurückhaltende Navigation. Fokus- und Hover-Zustände sind für jeden Link festgelegt, statt vom Browser geerbt zu werden. Teste die Leiste über deinen eigenen Medien, bevor sie einen Hintergrund bekommt.
Bewegung & Interaktion
Position statt Timer
Scroll ist ein Auslöser und keine Zeitachse: ein Sticky-Element hält seine Position, während der Inhalt darunter durchläuft, und das Tempo bestimmt, wer scrollt. Reduzierte Bewegung lässt den Effekt weg, ohne den Endzustand der Komposition zu verändern. Hänge die Texte nie hinter einen Scroll-Trigger.
Hover, aber sparsam
Die Seite reagiert nur dort, wo man handeln kann: Hover-Zustände auf Buttons und Links statt auf jeder Karte und ein Sticky-Element, das seine Position hält, während der Inhalt darunter durchläuft. Die Zustände stammen aus der Palette der Seite und nicht aus einem Komponenten-Standard. Halte die interaktive Ebene klein.
So wird der Eintrag Landingpage deiner
Die Komposition ist der wiederverwendbare Teil, das Thema gehört dir. Abstände in 100px-Schritten bleiben, Text, Medien und Markenzeichen werden ersetzt. Das Thema ist der Teil, der sich ändern sollte.
Wie Mindloop Landing 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, die Kennzahlen-Zeile, das Kartenraster und der Hintergrund-Clip sind eine Abfolge, und Abstände in 100px-Schritten funktionieren nur in dieser Reihenfolge. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Warum das Briefing für SaaS trägt
Mindloop Landing funktioniert, weil die Hierarchie entschieden und nicht dekoriert ist. Das Briefing hat die Zahlen schon festgelegt: Abstände in 100px-Schritten, damit neuer Text in den Rahmen fällt, statt ihn wieder aufzureißen. Mindloop Landing nennt das Angebot einmal und lässt die Komposition es wiederholen, statt eine zweite Behauptung zu ergänzen.
Häufige Fragen
Was bekomme ich, wenn ich das Briefing zu Mindloop Landing kopiere?
Das erfasste Briefing umfasst 7.242 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 Mindloop Landing dasselbe wie der Prompt, den ich selbst schreiben würde?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 7.242 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Wie viel von Mindloop Landing hängt von React und Tailwind CSS ab?
Mindloop Landing 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.
