Über diese Vorlage
Für ein KI- oder SaaS-Produkt löst AI Workflow Agents das Thema Portfolio-Seite mit einem einzigen erfassten Briefing. „Axon — Digital Workers for Mundane Workflows“ ist die Zeile, auf die das Layout gebaut ist. Farbe bleibt auf weiß #E8E6F1 darunter, tiefes indigo #1B133C für die Schrift und magenta #7A4064 für die Akzente begrenzt, gesetzt in Instrument Serif. Der Eintrag nennt den Stack, der die Seite erzeugt hat (eine einzelne Komponente), statt ihn zu verschweigen. Die Bewegung ist eine Videospur in Schleife und bleibt so zurückhaltend, dass die Texte weiter führen. Es ist die richtige Referenz für eine Portfolio-Seite, die auf dem ersten Bildschirm bewusst gesetzt wirken muss, und sie richtet sich an ein KI- oder SaaS-Produkt.
Gemacht für
- Frontend-Entwickler, die das im Normalbetrieb ausliefern müssen, nutzen eine einzelne Komponente als Referenzimplementierung.
- Halte ein 1444x1080 Rahmen in der Übergabe-Notiz fest, damit der nächste Build die Angabe nicht aus der Seite herauslesen muss.
- Dieses Portfolio-Seite-Design richtet sich an Designer, die einen Build in eine einzelne Komponente an die Entwicklung übergeben und die Bewegung schriftlich haben wollen.
Was enthalten ist
- Leiste im Raster der Seite. Die Links stehen in einer Zeile bei einer einzigen Größe, und die Aktion in #7A4064 schließt die Zeile rechts ab, damit das Auge dort zur Ruhe kommt, wo die Navigation endet. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #7A4064 ist das einzige Element in der Leiste mit Gewicht.
- Größen stehen im Briefing. Das Briefing nennt die Zahlen: 100vh hohe Sektionen. Genau deshalb hält die Komposition zusammen, denn zwischen Schrift und Rahmen liegt keine erfundene Abstandsstufe. Jeder Wert lässt sich gegen den erfassten Prompt prüfen, und genau das macht einen Nachbau überprüfbar statt ungefähr.
- Medien hinter der Schrift. Ein Clip von 6,9s bei 1444x1080 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Die Schleife ist kurz genug (6,9s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Die Skala ist das Styling. Die Display-Zeile steht in Instrument Serif in einer vom Briefing festgelegten Größe, dadurch ist die Headline ein Kompositionselement und kein Absatz. Der Interface-Text bleibt auf einer Schrift, deshalb mischt die Seite nie zwei Stimmen in derselben Größe. Eine Familie mit klaren Rollen schlägt zwei, die konkurrieren.
Bewegung & Interaktion
Hover, aber sparsam
Jedes interaktive Element tut eine Sache (Hover-Zustände auf Buttons und Links statt auf jeder Karte), dadurch bleiben die Zustände vorhersehbar. Weil die Zustände einfach sind, lassen sie sich in jedes Komponentensystem übertragen.
Eine Schleife, keine Timeline
Ein einziger Clip von 6,9s ist die ganze Hintergrundebene: Er läuft hinter dem Text, schleift ohne sichtbaren Schnitt und reagiert nie auf den Zeiger. Sonst animiert nichts auf der Seite durchgehend, das Medium ist also das Einzige, das Aufmerksamkeit verlangt. Dreh oder exportiere in 1444x1080 oder breiter.
Wie der Eintrag Portfolio-Seite umbricht
Ein entworfenes schmales Layout kostet mehr Entscheidungen als eine Quetschung. Das Briefing bezahlt sie: der Bereich wird auf 100vh gehalten, genannt und nicht erst zur Build-Zeit entdeckt. Die Reihenfolge ist das Letzte, was sich ändert.
Was sich in AI Workflow Agents bewegt
Ein kurzes Bewegungsbudget kostet Drama im ersten Frame. Es kauft Lesbarkeit, und es heißt, dass Hover- und Druckzustände und eine Medienschleife von 6,9s ohne Bibliothek portierbar sind. Nichts in diesem Eintrag Portfolio-Seite animiert um seiner selbst willen.
Was du in AI Workflow Agents zuerst änderst
Fang beim Versprechen an, nicht bei der Dekoration. Schreibe „Axon — Digital Workers for Mundane Workflows“ zu einem Satz um, der sagt, was du machst, und setze ihn in Instrument Serif in der Display-Größe aus dem Briefing. Ersetze magenta #7A4064 durch deinen eigenen Akzent und prüfe ihn gegen weiß #E8E6F1, bevor du etwas anderes anfasst. Schreib Text und Medien um, bevor du irgendetwas neu einfärbst.
Häufige Fragen
Ist der Prompt zu AI Workflow Agents eine fertige Spezifikation oder ein Ausgangspunkt?
Das erfasste Briefing umfasst 3.215 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.
Warum nennt der Eintrag eine einzelne Komponente überhaupt?
AI Workflow Agents wurde in eine einzelne Komponente 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.
Was kann ich mit dem Briefing zu AI Workflow Agents machen, sobald ich es habe?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 3.215 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
