À propos de ce modèle
Cette fiche présente Cognitra Feature en section fonctionnalités, avec le brief qui a produit la page au lieu d’une simple capture d’écran. Le titre affiché est « We provide all-in-one AI automation services in one place », et le reste de section fonctionnalités s’organise autour de lui. La palette se limite à orange sourd #877A73 en fond et gris #D2CDC5 pour le texte, et la typographie est Helvetica, Arial. La construction repose sur React et Tailwind CSS. Chaque mesure y est écrite, et c’est ce qui la rend réutilisable. Le brief consacre son budget d’animation à 0.08s de transitions. Traitez-la comme le brief de section fonctionnalités pour un produit IA ou SaaS, à faire tenir sous une reconstruction et pas seulement au premier regard.
Conçu pour
- Les fondateurs qui briefent une agence utiliseront le cadre 640x470 comme critère de recette pour la première série.
- Cette composition est prévue pour les studios qui doivent expliquer à un client le comportement à 260px sans construire de prototype.
- Quiconque briefe un modèle sur un design de section fonctionnalités utilisera le prompt de 3 241 caractères comme point de départ.
Ce qui est inclus
- Les liens avant l’action. La navigation tient sur une seule rangée, sans second niveau en dessous. Sous 260px, les liens se replient dans une surcouche plein écran. Les libellés tiennent sur une ligne à 260px, et l’élément actif se signale par la graisse et non par une pastille. Tenez la rangée sur une seule ligne.
- Des graisses nommées par rôle. Ici, la typographie est le système de style, avec Helvetica, Arial au corps display, la même fonte sur toute l’interface, et aucune seconde couleur d’accent pour faire le travail. L’interlettrage se resserre à mesure que le corps grandit, c’est pourquoi la ligne display tient sur toute la plage 14px. L’échelle est citée, servez-vous en.
- Le comportement est défini par largeur. Le haut de l’échelle est fluide (un clamp entre 26px et 32px) et le reste est fixe, le cadre reste donc composé à mesure que le viewport se rétrécit. Les contrôles restent assez grands pour être touchés et le texte garde son ordre de lecture à toute largeur.
- Une structure en un seul écran. La composition est complète en 640x470, avec le texte, les médias et les contrôles tous nommés dans le brief. La page est une seule composition en 640x470, c’est pourquoi elle tient quand le texte change. Rien de décoratif n’a sa place au-dessus de la ligne de flottaison.
Animation et interaction
Rythme court, timings cohérents
L’animation des contrôles est courte et répétable, 0.08s à chaque changement d’état. L’easing est spécifié avec la durée (0.08s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Une durée par comportement.
Presque aucune animation
Le brief laisse l’animation de côté et laisse la mise en page en 640x470 porter la page, les états de survol et d’appui étant les seuls changements. Seuls les éléments qui répondent au pointeur bougent.
L’argument de section fonctionnalités
Il n’y a qu’une promesse sur cette page, maintenue en place par un corps display fixe de 14px et des sections de 100vh. La page le dit sans détour, « We provide all-in-one AI automation services in one place ». Rien sous la ligne de flottaison n’a à porter l’offre en plus. Cognitra Feature énonce la promesse une fois et laisse la composition la répéter au lieu d’ajouter une seconde affirmation.
Les chiffres derrière section fonctionnalités
Là où un moodboard laisse l’échelle ouverte, ce brief la ferme, un corps display fixe de 14px et des sections de 100vh, avec les valeurs voisines dérivées de cette décision. Rien dans le design de section fonctionnalités ne dépend d’une valeur par défaut.
Par où commencer dans Cognitra Feature
Refaire la palette en premier est l’erreur habituelle. Cela change l’ambiance sans toucher à la composition, alors que la mise en page tient encore à un corps display fixe de 14px et des sections de 100vh, donc faites le texte et les médias d’abord, la palette en dernier. Une autre marque peut réutiliser tout le cadre.
Questions fréquentes
Que recevez-vous en copiant le brief de Cognitra Feature?
Comptez 3 241 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.
Faut-il React et Tailwind CSS pour reconstruire Cognitra Feature?
La fiche indique React et Tailwind CSS pour la provenance, parce que Cognitra Feature 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 Cognitra Feature 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 0.08s. 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.
