Über diese Vorlage
Digitwist AI Builder zeigt einen Weg, die Komposition (Hero-Bereich) für dieses Publikum zu bauen. Gedacht ist sie für ein KI- oder SaaS-Produkt, und die Anweisungen dazu sind veröffentlicht. „Design at the speed of thought“ ist die Zeile, auf die das Layout gebaut ist. Die Palette ist helles blau #3054FF darunter und gedämpftes blau #B4C0FF für die Schrift, gesetzt in Instrument Sans. Der Eintrag nennt den Stack, der die Seite erzeugt hat (React und Lucide icons), statt ihn zu verschweigen. Die Bewegung beschränkt sich auf Übergänge von 0.6s. Lass es beim Schreiben offen: Die 6.001 Zeichen Briefing sind der Teil, der sich auf deine Seite überträgt.
Gemacht für
- Studio-Teams, die ein Projekt briefen und nach ein 800x556 Rahmen suchen, um darauf zu reagieren.
- Teams, die ein KI- oder SaaS-Produkt Hero-Bereich bauen und die gemessenen Werte (Schrift von 20px bis 136px und Abstände in 120px-Schritten) wollen statt eines Screenshots zum Abschreiben.
- Gemacht für Content-Leads, die ein Hero-Bereich-Design neu betexten, dessen Headline so lang bleiben muss wie die von Digitwist AI Builder.
Was enthalten ist
- Navigation ohne Hintergrund. Die Navigation ist eine einzige Zeile ohne zweite Ebene darunter. Die Leiste liegt ohne eigene Hintergrundfläche über der Komposition von 800x556, damit die Medien darunter bis an den Rand durchlaufen.
- Gemessen statt geschätzt. Hier ist nichts geschätzt. Die Spezifikation legt Schrift von 20px bis 136px, Abstände in 120px-Schritten und 0.6s Übergänge fest, und der Rest des Layouts leitet sich aus diesen Werten ab. Weil die Werte feststehen, ändert ein Austausch die Optik, ohne den Rhythmus zu verändern.
- Badge über dem Falz. Ein Badge, eine Botschaft: die Pille sitzt in Instrument Sans 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 Badge, eine Botschaft.
- Eine Zeile, keine Schubladen. Die Wortmarke hält die linke Kante, rechts davon laufen die Links, alles in Instrument Sans gesetzt, damit die Leiste zur Seite darunter gehört und nicht zu einem eigenen System.
Bewegung & Interaktion
Zeiten in Millisekunden
Das Briefing legt den Übergangswert auf 0.6s fest, ein Nachbau kann also keinen langsameren Standard einsetzen. Das Easing steht zusammen mit der Dauer im Briefing (0.6s), ein Nachbau kann also nicht unbemerkt ein anderes Gefühl einsetzen. Die Zeiten gehören zum Design, nicht in den Feinschliff.
Bewegung, die nicht stört
Eine Scroll-Bibliothek gibt es hier nicht: Die 800x556-Komposition steht still, und nur die Elemente bewegen sich, die auf dich reagieren. Im Briefing steht keine Animationsbibliothek, der Nachbau bleibt also klein.
Die Reihenfolge im Eintrag Hero-Bereich
Eine strenge Reihenfolge kostet später Flexibilität. Kommt eine Sektion über den Fold, müssen Schrift von 20px bis 136px und Abstände in 120px-Schritten neu geschnitten werden, weil die Abfolge tragend ist und nicht dekorativ. Ein Leser im Bereich SaaS bekommt das Angebot vor den Optionen.
Die Zahlen hinter dem Eintrag Hero-Bereich
Das Briefing ist eine Spezifikation: Schrift von 20px bis 136px, Abstände in 120px-Schritten und 0.6s Übergänge, und der Medienrahmen ist bei 800x556 festgelegt, bevor irgendetwas darum herum entworfen wird. Nichts in diesem Eintrag Hero-Bereich hängt an einer Voreinstellung.
Was hier für KI & SaaS funktioniert
Digitwist AI Builder funktioniert, weil die Hierarchie entschieden und nicht dekoriert ist. Das Briefing hat die Zahlen schon festgelegt: Schrift von 20px bis 136px, Abstände in 120px-Schritten und 0.6s Übergänge, damit neuer Text in den Rahmen fällt, statt ihn wieder aufzureißen. Es gibt einem Leser im Bereich SaaS den kürzesten ehrlichen Weg zum Angebot.
Häufige Fragen
Was steht eigentlich im Briefing hinter Digitwist AI Builder?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 800x556, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Brauche ich React und Lucide icons, um Digitwist AI Builder nachzubauen?
Digitwist AI Builder wurde in React und Lucide icons 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 Digitwist AI Builder 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 800x556 erfasst.
