Über diese Vorlage
Nexto 404: 404-Seite für SaaS, gebaut aus einem einzigen geschriebenen Briefing. Diese Seite dokumentiert es. Das Farbschema ist neutral #F5F5F5 darunter und fast schwarz #1A1A1A für die Schrift, und die Seite ist in DM Sans gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1986x1446, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Bewegung bleibt auf Übergänge von 5s und cubic-bezier(0.77, 0, 0.175, 1) beschränkt. Starte beim erfassten Briefing und bearbeite dann den Eintrag 404-Seite, statt von Grund auf neu zu bauen.
Gemacht für
- Wenn drei Leute an einem 404-Seite-Design arbeiten, gib Content-Leads 100vh hohe Sektionen und Abstände in 20px-Schritten statt eines Screenshots.
- Gemacht für einen Solo-Gründer, der ein 404-Seite-Design für ein KI- oder SaaS-Produkt ausliefert und kein Designsystem im Rücken hat.
- Wer ein Modell mit einem 404-Seite-Briefing versorgt, startet mit dem Prompt über 5.689 Zeichen.
Was enthalten ist
- Eine Zeile, keine Schubladen. Eine kurze Reihe Links und eine einzelne Aktion liegen in 404-Seite, auf 100vh hohe Sektionen und Abstände in 20px-Schritten gehalten, damit die Leiste nie mit der Komposition dahinter konkurriert. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 1986x1446, damit die Medien darunter bis an den Rand durchlaufen.
- Eine Idee pro Panel. Das Raster ist die Struktur: gleich große Panels, in DM Sans gesetzt, so angeordnet, dass das Auge quer statt nach unten wandert. Die Panel-Reihenfolge ist die Lesereihenfolge, nichts hängt an Positionshinweisen. Streiche ein Panel, bevor du die Schrift verkleinerst.
- Eine Leiste ohne Beiwerk. Die Leiste überlagert 404-Seite, statt Raum darunter zu belegen, damit die Komposition die volle Höhe des ersten Bildschirms behält. Übernimm dieses Muster, wenn die Navigation einen lauten ersten Screen überstehen soll.
- Größen im Briefing fixiert. Die Größen wurden am Render in 1986x1446 abgelesen: 100vh hohe Sektionen, Abstände in 20px-Schritten, 5s Übergänge und Easing cubic-bezier(0.77, 0, 0.175, 1). Ein Nachbau, der diese Zahlen trifft, sieht ohne weitere Anpassung aus wie die Referenz.
Bewegung & Interaktion
Schnell genug, um bewusst zu wirken
Eine Dauer deckt alle Interaktionen ab (5s auf cubic-bezier(0.77, 0, 0.175, 1)); so wirken Hover und Druck als ein System. Das Easing steht zusammen mit der Dauer im Briefing (5s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen.
Fast keine Bewegung
Das Briefing lässt Animation weg und überlässt die Seite dem 1986x1446-Layout, nur Hover- und Druckzustände ändern sich. Bewegung ist hier Rückmeldung und nicht Dekoration.
Wie der Eintrag 404-Seite umbricht
Die meisten Responsive-Arbeiten hören beim Ausblenden auf. Hier ändert das Layout seine Form: die Skala ist fließend statt gestuft, der Bereich wird auf 100vh gehalten und die Navigation klappt zu einem mobilen Menü zusammen, und nichts Wichtiges fällt weg, damit der Fold passt. Bedienelemente bleiben groß genug zum Tippen, und der Text behält bei jeder Breite seine Lesereihenfolge.
Nexto 404 als Spezifikation lesen
Eine Komposition lässt sich nicht nach Augenmaß fixieren, wenn zwei Leute sie nachbauen. Das Briefing nimmt die Diskussion heraus: 100vh hohe Sektionen, Abstände in 20px-Schritten, 5s Übergänge und Easing cubic-bezier(0.77, 0, 0.175, 1), einmal genannt. Nichts in diesem Eintrag 404-Seite hängt an einer Voreinstellung.
Warum diese Komposition für SaaS trägt
Du könntest das als Stapel einzelner Karten nachbauen und würdest nur das Argument verlieren. Der Eintrag 404-Seite liest sich als eine Entscheidung: die Navigation, die Überschrift, die Kennzahlen-Zeile und das Kartenraster in einer einzigen Abfolge. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Wie lang ist der Prompt hinter Nexto 404?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1986x1446, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Warum nennt der Eintrag React und Tailwind CSS überhaupt?
Nexto 404 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.
Darf ich Nexto 404 in einem Kundenprojekt verwenden?
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 1986x1446 erfasst.
