À propos de ce modèle
AI Workflow Hero est un exemple de section hero SaaS, construit à partir d’un seul brief écrit, et cette page documente ce brief. La palette est vert profond #1F2A1D en fond, composée en Inter. La livraison tient en React et Tailwind CSS, une seule page, sans plugin ni outillage de build entre vous et le design. L’animation se cantonne à 400ms de transitions et cubic-bezier(0.22,1,0.36,1). Gardez-la ouverte pendant la rédaction, car le brief de 16 580 caractères est la partie qui se transfère à votre page.
Conçu pour
- Les chefs de produit qui doivent chiffrer la reconstruction liront un cadre 640x470 comme le périmètre du travail.
- Ce design est pensé pour les responsables de contenu qui réécrivent un design de section hero dont le titre doit rester aussi long que celui de AI Workflow Hero.
- Remplacez les textes du design de section hero avant de toucher à Inter, car les tailles sont réglées pour les longueurs de ligne actuelles.
Ce qui est inclus
- Les liens avant l’action. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à des pas d’espacement de 10px et des transitions de 400ms pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 640x470 sans fond propre, la vidéo court donc bord à bord en dessous.
- La typographie fait la hiérarchie. Avec Inter aux commandes, les tailles chutent nettement du titre vers le texte secondaire et l’interlettrage se resserre à mesure que le corps grandit, si bien que la hiérarchie passe par la typographie et non par la couleur. Remplacer la fonte est possible, mais les proportions doivent survivre à la substitution. Gardez les paliers, changez la fonte.
- Une navigation sur une seule ligne. Tenez la rangée sur une seule ligne. La référence a été capturée en 640x470.
- Les tailles sont dans le brief, pas dans une échelle. Les tailles sont citées plutôt qu’héritées, des pas d’espacement de 10px, des transitions de 400ms et un easing cubic-bezier(0.22,1,0.36,1). Changez la fonte ou le texte, ces relations tiennent toujours. Chaque valeur correspond à un seul rôle, un palier de taille, un espacement, un rayon ou une transition.
Animation et interaction
Tout le budget d’animation
L’animation des contrôles est courte et répétable, 400ms à chaque changement d’état. Les valeurs sont assez courtes pour se lire comme un retour d’information et non comme une animation.
L’interaction est sur les contrôles
L’interaction reste locale à chaque contrôle (des états de survol sur les boutons et les liens plutôt que sur chaque carte), donc rien d’autre sur la page ne bouge. Les cibles interactives sont assez grandes pour être touchées et le traitement du pointeur reste cohérent entre elles.
Ce qui bouge dans AI Workflow Hero
Le budget d’animation est énoncé, 400ms de transitions, des états de survol et de clic et un canvas animé. Rien ne bouge dans le design de section hero sans une valeur attachée. Rien ne s’anime pour lui-même dans le design de section hero.
L’ordre de section hero
Placez votre propre texte dans le design de section hero et la séquence tient toujours, car les éléments de la navigation, le badge d’annonce, la ligne de statistiques, la liste de fonctionnalités et le clip de fond ne sont pas interchangeables. Un lecteur SaaS reçoit l’offre avant les options.
Pourquoi le brief SaaS tient
Vous pourriez reconstruire ceci en pile de cartes séparées et ne perdre que l’argument. Le design de section hero se lit plutôt comme une seule décision, la navigation, le badge d’annonce, la ligne de statistiques, la liste de fonctionnalités et le clip de fond dans une séquence unique. AI Workflow Hero énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Questions fréquentes
Que contient réellement le brief derrière AI Workflow Hero?
Comptez 16 580 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 React et Tailwind CSS?
La fiche indique React et Tailwind CSS pour la provenance, parce que AI Workflow Hero a été réalisé avec cette pile technique. Le brief ne décrit que des positions, des tailles et des durées, donc il se reconstruit dans n’importe quel framework capable de composer du texte et de placer des éléments.
Quelle part de AI Workflow Hero est animée?
L’animation est décrite avec le même niveau de détail que la mise en page, et les changements d’état se stabilisent dans la plage 400ms en cubic-bezier(0.22,1,0.36,1). Portez la composition d’abord et les durées ensuite, car il est plus facile de les caler une fois la mise en page en place.
