À propos de ce modèle
Cette fiche présente DeepThink en landing page, avec le brief qui a produit la page au lieu d’une simple capture d’écran. La palette est #0C0C0C en fond et éclairci #FAFAFA pour le texte, composée en Inter. La livraison est en un seul fichier HTML autonome, capturée en 1280x1928 pour que le cadre soit fixé avant la première ligne de code. L’animation se limite à 90ms de transitions et cubic-bezier(.22,1.36,1), assez discrète pour que le texte reste au premier plan. Gardez-la ouverte pendant la rédaction, car le brief de 13 695 caractères est la partie qui se transfère à votre page.
Conçu pour
- Prestataires qui récupèrent un design de landing page et veulent voir un easing cubic-bezier(.22,1.36,1) dans le dépôt avant le premier commit.
- Équipes qui montent un design de landing page pour un produit IA ou SaaS et doivent consigner un seul fichier HTML autonome par écrit avant de chiffrer.
- Ce design de landing page répond à celui qui construit et veut connaître le rôle exact de des sections de 100vh et des pas d’espacement de 10px dans la mise en page.
Ce qui est inclus
- La barre partage la grille. Le nom de marque tient le bord gauche et les liens courent à sa droite, le tout composé en Inter pour que la barre appartienne à la page en dessous plutôt qu’à un système séparé. La barre se pose sur la composition 1280x1928 sans fond propre, la vidéo court donc bord à bord en dessous.
- Fluide là où il faut. La typographie est dimensionnée avec un clamp entre 22px et 10px plutôt qu’avec des paliers fixes, la ligne display reste donc proportionnée entre les breakpoints au lieu de sauter. Les contrôles restent assez grands pour être touchés et le texte garde son ordre de lecture à toute largeur. Gardez la hiérarchie, changez l’échelle.
- Une navigation sur une seule ligne. La barre se superpose à landing page au lieu de repousser le contenu, la composition garde donc toute la hauteur du premier écran. Reprenez ce motif quand il vous faut une navigation qui tient sous un premier écran chargé.
- Des tailles fixées par le brief. Typographie et espacements sortent ici de la même liste, des sections de 100vh, des pas d’espacement de 10px, des transitions de 90ms et un easing cubic-bezier(.22,1.36,1). Aucune valeur intermédiaire n’est inventée entre les valeurs nommées, la liste de mesures est tout le système.
Animation et interaction
Des durées courtes et nommées
Chaque changement d’état de la spécification porte une durée, les transitions se règlent autour de 90ms avec cubic-bezier(.22,1.36,1). Rien n’est laissé au réglage par défaut du navigateur, et c’est pourquoi la page semble conçue plutôt qu’animée. Rien n’attend une position de scroll, donc la page répond dès que vous la touchez.
Une scène vivante au premier écran
Un canvas vivant fait tout le travail visuel, un canvas WebGL. La scène est dessinée à la taille de son conteneur, donc elle ne dépend pas d’une résolution de rendu fixe. Gardez l’interface plate autour.
Ce qui fonctionne dans landing page
Un hero standard et le design de landing page utilisent les mêmes pièces. Ici, elles sont ordonnées par la navigation, le titre, le badge d’annonce, la ligne de statistiques et la grille de cartes et mesurées avec des sections de 100vh, des pas d’espacement de 10px, des transitions de 90ms et un easing cubic-bezier(.22,1.36,1), si bien que l’écran se lit comme une séquence et non comme un conteneur. Elle donne à un lecteur SaaS le chemin le plus court vers l’offre.
Ce qui bouge dans DeepThink
Quand une page paraît agitée, la cause est souvent un excès d’entrées. Celle-ci garde la liste courte, 90ms de transitions, une apparition de ligne masquée et une apparition au scroll. Rien ne s’anime pour lui-même dans le design de landing page.
Lire DeepThink comme une spécification
13 695 caractères de brief produisent une spécification complète. La partie porteuse est courte, des sections de 100vh, des pas d’espacement de 10px, des transitions de 90ms et un easing cubic-bezier(.22,1.36,1). Rien dans le design de landing page ne dépend d’une valeur par défaut.
Questions fréquentes
Pourquoi la fiche mentionne-t-elle un seul fichier HTML autonome?
La fiche indique un seul fichier HTML autonome pour la provenance, parce que DeepThink 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 est la longueur du prompt derrière DeepThink?
Ce n’est pas une description d’ambiance mais un brief de construction, avec la composition en 1280x1928, les espacements et les valeurs d’animation. Aucun passage ne prend l’image rendue pour la source de vérité.
Puis-je publier une page reconstruite d’après DeepThink sans mentionner la source?
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 1280x1928.
