Le Meilleur Workflow de Design avec Gemini 3

Le présentateur démystifie l'idée que Gemini 3 permet de créer instantanément des pages d'atterrissage incroyables. Il révèle que les créateurs sur X qui prétendent générer ces sites en un coup utilisent en réalité plusieurs outils en combinaison. Google a lancé de nombreux outils expérimentaux alimentés par Gemini 3 et Nano Banana, mais n'offre pas de méthode intégrée pour les utiliser ensemble. L'objectif de cette vidéo est de présenter un workflow complet qui combine efficacement tous ces outils pour obtenir des résultats professionnels.

WISC est un outil expérimental de Google conçu spécifiquement pour la génération de ressources visuelles, alimenté par Nano Banana. Le problème traditionnel avec les outils d'IA est qu'ils ne produisent pas de résultats cohérents pour les séquences d'images, mais WISC résout cela grâce à un cadre basé sur le sujet, la scène et le style. L'outil utilise Gemini 3 comme couche intermédiaire qui transforme des instructions simples en prompts détaillés, permettant d'obtenir des visuels de haute qualité sans rédiger de longues descriptions. La force principale de WISC réside dans sa capacité à combiner des images de référence et à permettre des modifications itératives en langage naturel, offrant un meilleur contrôle que Nano Banana seul ou Mix Board de Google.

Le présentateur démontre la création d'une animation de caméra en générant deux images clés : une vue frontale et une vue éclatée technique. Pour obtenir des résultats cohérents, il est crucial de définir clairement le sujet, l'intention visuelle et le niveau de détail, incluant des spécifications comme le type de caméra, les reflets sur l'objectif, la résolution et la profondeur. La première image a été générée avec succès en respectant ces instructions détaillées. Pour la seconde image, il a demandé une vue éclatée montrant les lentilles superposées, mais la première tentative a également montré les circuits internes. En précisant qu'il voulait uniquement la superposition des lentilles, WISC a produit l'image correcte, démontrant sa capacité d'ajustement itératif.

Bien que WISC supporte les animations via le modèle VIO, il se concentre sur l'animation d'une seule image plutôt que sur la connexion de plusieurs images clés. C'est pourquoi le présentateur utilise Google Flow, qui combine Gemini pour la planification, les modèles d'images de Google pour des personnages cohérents, et VIO pour créer du contenu vidéo. Pour garantir une transition fluide entre les images de départ et de fin, le prompt doit expliquer comment l'image initiale mène à l'image finale, incluant le sens de l'animation, le style et le chemin logique. La première tentative a échoué avec une rotation incorrecte, mais en reformulant le prompt pour spécifier le sens de rotation souhaité, l'outil a produit l'animation correcte. L'utilisateur doit noter que la génération vidéo est limitée à 180 crédits mensuels, soit environ 9 vidéos avec VIO 3.1 (20 crédits par vidéo).

Les vidéos générées par Flow sont au format MP4, qui est difficile à utiliser directement dans les sections Hero car il complique le mapping des animations de défilement. La solution consiste à convertir les vidéos MP4 en format WebP animé à l'aide d'un convertisseur en ligne gratuit. Le format WebP présente plusieurs avantages cruciaux : il est traité comme une image sur le web et ne nécessite pas d'encapsuleur de lecteur multimédia, il facilite le mapping des interactions de défilement, et les fichiers sont plus compacts avec de meilleures performances. Ces caractéristiques rendent le WebP idéal pour le contenu animé de courte durée dans les sections Hero des pages d'atterrissage.

Après avoir ajouté le fichier WebP converti au répertoire public du projet Next.js, le présentateur utilise Claude pour implémenter l'animation dans la section Hero. Il privilégie les prompts au format XML car les modèles Claude sont optimisés pour comprendre cette structure, permettant d'analyser l'intention de manière plus fiable et de raisonner sur chaque section indépendamment. Le prompt structuré inclut : le contexte de ce qu'il veut créer dans une balise contexte, l'emplacement des assets pour l'animation, le fonctionnement souhaité de l'animation de défilement, les exigences dans des balises dédiées, le comportement d'animation dans des balises spécifiques, et les détails d'implémentation avec contraintes. En utilisant cette approche structurée, Claude a automatiquement implémenté l'animation exactement comme prévu, démontrant l'efficacité des prompts XML bien organisés.

Bien que la section Hero soit réussie, le reste des composants ressemblait aux sites génériques habituels générés par l'IA, car ils utilisaient du CSS vanilla au lieu de bibliothèques de composants élégantes. Pour une page d'accueil d'appareil photo avec un style Apple, le présentateur a choisi Hero UI, une bibliothèque construite sur Tailwind CSS et utilisant Framer Motion pour les animations. Hero UI prend en charge les frameworks couramment utilisés comme Next.js, Vite et Laravel, facilitant l'intégration. Il existe deux méthodes d'installation : soit installer tous les composants à l'échelle du projet, soit installer les composants individuels selon les besoins. En demandant à Claude de remplacer les composants existants par des composants Hero UI, le site web a été considérablement amélioré avec une apparence beaucoup plus professionnelle.

Le mouvement est crucial car les utilisateurs décident de rester ou non sur une page en quelques secondes, et il aide à guider l'attention vers les fonctionnalités importantes, garantissant une meilleure rétention. Implémenter des animations à partir de zéro avec JavaScript vanilla est difficile, c'est pourquoi le présentateur utilise Motion.dev, une bibliothèque gratuite et open source offrant une large gamme d'animations prêtes à l'emploi. Normalement, les animations nécessiteraient de synchroniser manuellement les mises à jour du DOM avec les timings d'animation, mais Motion.dev abstrait cette logique en gérant les mises à jour du DOM en interne. La bibliothèque utilise des composants motion avec des états de début et de fin définis dans les props, et elle gère automatiquement les transitions pendant que l'utilisateur fait défiler. En demandant à Claude d'implémenter des animations de parallaxe et de défilement, l'expérience utilisateur s'est améliorée en guidant l'attention vers les sections clés.

Plutôt que de décrire manuellement l'apparence des sections, le présentateur utilise 21st.dev, une plateforme d'inspiration pour composants UI créés par plusieurs designers, basés sur des bibliothèques populaires comme Aceternity UI, Prism UI, Coconut UI et Magic UI. L'avantage majeur de 21st.dev est que pour tout composant, on peut copier un prompt spécifiquement adapté aux agents de codage IA, éliminant le besoin de guider Claude manuellement. Ces prompts sont structurés de manière extensive, incluant les exigences du projet (support ShadCN et TypeScript), le code à coller dans les répertoires appropriés, toutes les dépendances nécessaires avec leurs chemins, les packages NPM à installer, et un guide d'implémentation détaillé. En utilisant ces prompts pour une section d'appel à l'action et un pied de page, Claude a non seulement intégré les composants exactement comme prévu, mais a également ajouté automatiquement des animations Motion.dev et personnalisé le pied de page pour inclure uniquement les icônes pertinentes au site de produits de caméra, démontrant l'intelligence contextuelle de Claude.

Le présentateur conclut la vidéo en remerciant les spectateurs et en les invitant à soutenir la chaîne via le bouton Super Thanks s'ils souhaitent les aider à continuer de créer du contenu similaire. Il termine par un au revoir traditionnel en annonçant qu'il retrouvera les spectateurs dans la prochaine vidéo.