À propos de ce modèle
AI Workflow Agents est un design de portfolio pour un produit IA ou SaaS, livré avec les instructions qui l’ont produit. La page affiche son propre titre, « Axon — Digital Workers for Mundane Workflows », et la composition est construite autour de ces mots exacts. La couleur se réduit à blanc #E8E6F1 en fond, indigo profond #1B133C pour le texte et magenta #7A4064 pour les accents, composée en Instrument Serif. La fiche nomme la stack qui a produit la page (un seul composant) au lieu de la passer sous silence. L’animation se limite à un fond vidéo en boucle. Prenez-la lorsque l’ordre de portfolio doit être arrêté avant d’ajouter de nouvelles sections.
Conçu pour
- Les développeurs front-end qui doivent livrer ce type de page en production utiliseront un seul composant comme implémentation de référence.
- Cette base est prévue pour un designer qui arrive sur un projet déjà livré en un seul composant et qui n’a que les textes à remplacer.
- Des développeurs front-end qui reconstruisent cette page en un seul composant et veulent les transitions spécifiées plutôt que devinées.
Ce qui est inclus
- Une ligne, aucun tiroir. La rangée concentre son contraste sur un seul élément, l’action en #7A4064, tandis que le nom de marque et les liens restent sur la couleur d’encre. Les liens sont d’un corps inférieur à celui du nom de marque, et l’action en #7A4064 est le seul élément de la barre à porter du gras.
- Les pas d’espacement sont cités. Les valeurs sont la spécification, des sections de 100vh, relevées sur 1444x1080 et non déduites d’une capture d’écran. La typographie et la mise en page partagent les mêmes pas, rien ne dérive donc quand l’une des deux est remplacée.
- Une seule fonte, employée avec rigueur. La typographie est Instrument Serif, et le brief assigne un rôle à la fonte plutôt que de mélanger pour varier. Graisses, interlettrage et paliers de taille sont spécifiés, la hiérarchie survit donc à un remplacement. Les graisses sont spécifiées par rôle, la hiérarchie ne dépend donc pas d’une approximation au moment du build. N’ajoutez pas de taille sans rôle.
- Une navigation sans fond. La barre se pose sur la composition 1444x1080 sans fond propre, la vidéo court donc bord à bord en dessous.
Animation et interaction
Le pointeur là où il aide
La page ne répond que là où l’on peut agir (des états de survol sur les boutons et les liens plutôt que sur chaque carte). Un contrôle qui a l’air interactif se comporte comme tel, donc aucune affordance trompeuse.
Une ambiance sans bibliothèque de scroll
Le mouvement d’ambiance est un clip de 6,9s en 1444x1080, qui boucle discrètement derrière le texte au lieu de réagir au pointeur. Le clip est en sourdine et en inline, donc la première image est disponible sans interaction. Tournez ou exportez en 1444x1080 ou plus large.
Le réagencement de portfolio
Une mise en page étroite conçue demande plus de décisions qu’un simple écrasement. Le brief les assume en énonçant la section est tenue à 100vh plutôt qu’en les découvrant au build. L’échelle change avec le viewport, la séquence non.
Les timings derrière portfolio
Un budget d’animation court coûte du spectaculaire sur la première image. Il achète de la lisibilité et permet de porter des états de survol et de clic et une boucle média de 6,9s sans bibliothèque. Rien ne s’anime pour lui-même dans le design de portfolio.
Par où commencer dans AI Workflow Agents
Commencez par la promesse, pas par la décoration. Réécrivez « Axon — Digital Workers for Mundane Workflows » en une phrase qui dit ce que vous faites, puis composez-la en Instrument Serif au corps display du brief. Remplacez magenta #7A4064 par votre propre accent et vérifiez-le contre blanc #E8E6F1 avant de toucher au reste. Si un nouvel élément n’aide pas à expliquer la promesse ou l’action suivante, sa place est sous la ligne de flottaison.
Questions fréquentes
Que recevez-vous en copiant le brief de AI Workflow Agents?
Comptez 3 215 caractères pour le brief capturé, qui décrit le cadre, l’échelle typographique, la palette et les transitions. Le copier vous donne ce texte tel quel, et l’envoyer à Studio prépare la même demande avec la page déjà décrite.
Pourquoi la fiche mentionne-t-elle un seul composant?
Non. Le brief est une spécification, pas une liste de dépendances. Il a été écrit pour un seul composant, mais la même composition se reconstruit avec ce que vous utilisez déjà. La stack est nommée pour que vous sachiez comment la référence a été produite.
Comment gérer les médias de AI Workflow Agents dans un projet client?
Le brief est une description, pas une autorisation de redistribuer les ressources d’un tiers. Gardez la structure et les chiffres, remplacez les médias et les marques, et citez la source si un client demande d’où vient la mise en page. La référence a été capturée en 1444x1080.
