À propos de ce modèle
La capture de Digitwist AI Builder a été faite en 800x556 et conservée comme spécification, pas comme image de galerie. Le titre affiché est « Design at the speed of thought », et le reste de section hero s’organise autour de lui. La palette est bleu vif #3054FF en fond et bleu sourd #B4C0FF pour le texte, composée en Instrument Sans. La référence est construite avec React et Lucide icons, et les décisions de mise en page sont énoncées indépendamment de cette stack. Le brief consacre son budget d’animation à 0.6s de transitions. Gardez-la ouverte pendant la rédaction, car le brief de 6 001 caractères est la partie qui se transfère à votre page.
Conçu pour
- Des équipes qui construisent une section hero pour un produit IA ou SaaS et veulent le détail mesuré (une typographie de 20px à 136px et des pas d’espacement de 120px) plutôt qu’une capture d’écran à copier.
- 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 Digitwist AI Builder.
- Remplacez les textes du design de section hero avant de toucher à Instrument Sans, car les tailles sont réglées pour les longueurs de ligne actuelles.
Ce qui est inclus
- Une navigation sans fond. Une courte suite de liens et une seule action se posent au-dessus de section hero, tenues à une typographie de 20px à 136px et des pas d’espacement de 120px pour ne jamais concurrencer la composition en dessous. La barre se pose sur la composition 800x556 sans fond propre, la vidéo court donc bord à bord en dessous.
- La pastille d’annonce. Un badge, un message. La pastille se place au-dessus du titre en Instrument Sans au plus petit palier, et rien d’autre ne vient concurrencer cette position. Il est positionné pour que le titre garde le centre de la composition. Un badge, un seul message.
- Les liens avant l’action. La navigation tient sur une seule rangée, sans second niveau en dessous.
- Mesuré contre le viewport. Les tailles sont citées plutôt qu’héritées, une typographie de 20px à 136px, des pas d’espacement de 120px et des transitions de 0.6s. Changez la fonte ou le texte, ces relations tiennent toujours. La plus petite et la plus grande valeur de cette liste bornent la plage dans laquelle travaille la composition.
Animation et interaction
Assez rapide pour être voulu
Une seule durée couvre les interactions (0.6s), et c’est ce qui fait que survol et pression se lisent comme un seul système. L’easing est spécifié avec la durée (0.6s), donc une reconstruction ne peut pas substituer discrètement une autre sensation. Ne livrez pas le défaut du navigateur.
Presque aucune animation
Le brief laisse l’animation de côté et laisse la mise en page en 800x556 porter la page, les états de survol et d’appui étant les seuls changements. La composition reste immobile, donc la hiérarchie doit porter la page, et elle le fait.
Comment Digitwist AI Builder ordonne la première lecture
Un ordre strict coûte de la souplesse par la suite. Ajoutez une section dans le premier écran et il faut recalculer une typographie de 20px à 136px et des pas d’espacement de 120px, parce que la séquence porte la structure au lieu de la décorer. Un lecteur SaaS reçoit l’offre avant les options.
Les chiffres derrière section hero
Le brief est une spécification. Il énonce une typographie de 20px à 136px, des pas d’espacement de 120px et des transitions de 0.6s et nomme le cadre média en 800x556 avant qu’on dessine quoi que ce soit autour. Rien dans le design de section hero ne dépend d’une valeur par défaut.
Ce qui tient la route pour IA et SaaS
Le compromis porte sur la densité, car le design de section hero dit moins sur le premier écran qu’une mise en page pilotée par les fonctionnalités. Ce qu’il garde, c’est l’ordre de lecture, et le travail qu’une page plus longue étalerait revient à la navigation, le titre, le badge d’annonce, la ligne de statistiques et le clip de fond. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Questions fréquentes
Que recevez-vous en copiant le brief de Digitwist AI Builder?
Comptez 6 001 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 Lucide icons pour reconstruire Digitwist AI Builder?
La fiche indique React et Lucide icons pour la provenance, parce que Digitwist AI Builder 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.
Puis-je utiliser Digitwist AI Builder 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 800x556.
