00:00:00Comment savoir quels outils de design valent vraiment la peine quand un nouveau sort chaque semaine ?
00:00:04Le problème, c'est qu'il en sort tous les jours, tous promettant la qualité, mais la plupart ne sont que du vent.
00:00:09En testant ces outils, nous en avons trouvé quelques-uns qui tiennent leurs promesses et s'intègrent bien à notre flux de travail.
00:00:15L'un de nos collaborateurs travaillait sur la page de destination d'une voiture avec une animation 3D dans la section d'accueil.
00:00:21Le code source de ce site et toutes les fonctionnalités utilisées sont disponibles dans AI Labs Pro.
00:00:25Pour ceux qui ne le savent pas, c'est notre communauté récemment lancée où vous trouverez des modèles, des prompts, des commandes et des compétences à intégrer directement dans vos projets.
00:00:36Si vous appréciez notre travail et souhaitez soutenir la chaîne, c'est le meilleur moyen. Liens dans la description.
00:00:42La première étape pour créer un tel site est d'avoir un bon asset, et pour cela j'ai utilisé Tripo3D, le générateur d'objets 3D par IA.
00:00:50À l'inscription, j'ai reçu environ 300 crédits, ce qui était largement suffisant pour une dizaine de générations.
00:00:54Maintenant, j'avais besoin d'une image à convertir en 3D.
00:00:57J'avais une image de la voiture, mais l'arrière-plan gênait la génération du modèle car la distinction fond/forme est complexe pour ces outils, et je ne voulais pas gaspiller de crédits.
00:01:08J'ai donc supprimé l'arrière-plan avec l'outil de Canva, mais vous pouvez aussi utiliser Remove BG, qui est une alternative gratuite.
00:01:16Une fois l'arrière-plan retiré, je suis allé sur Tripo3D et j'ai soumis cette image comme référence.
00:01:21Il a fallu environ une minute pour générer le modèle, et il correspondait parfaitement à l'image.
00:01:25J'ai pu vérifier tous les angles de vue, et le modèle ressemblait fidèlement à l'objet sous tous les côtés.
00:01:31Une fois le modèle 3D prêt, je l'ai exporté.
00:01:34Sur Tripo3D, on n'a droit qu'à 15 exports avec le plan gratuit. J'ai donc vérifié la génération et téléchargé la meilleure des deux tentatives.
00:01:43J'ai réglé la résolution sur 4K et j'ai lancé l'exportation.
00:01:45Après avoir téléchargé le fichier GLB, je l'ai ajouté au répertoire public d'une nouvelle application Next.js pour y accéder facilement.
00:01:52J'ai choisi le format GLB car il regroupe textures et matériaux en un seul fichier, et c'est un format web natif qui s'intègre facilement aux bibliothèques web.
00:02:04Une fois le fichier GLB prêt, il était temps de l'implémenter dans l'application web.
00:02:08Pour construire la page de destination, j'ai choisi l'application Codex, récemment sortie et uniquement disponible sur macOS.
00:02:14Vous vous demandez peut-être pourquoi utiliser Codex alors que Claude Code existe déjà ?
00:02:19Avec le lancement de leur nouveau produit, ils offrent des limites étendues et un quota généreux même en gratuit. C'est le moment idéal pour en profiter.
00:02:29Mais vous pouvez utiliser le même processus avec n'importe quel agent de votre choix.
00:02:32J'ai téléchargé Codex et ouvert le dossier du projet.
00:02:34L'interface ressemble beaucoup au gestionnaire d'agents d'AntiGravity, mais davantage axée sur les agents que sur le code.
00:02:40La fonctionnalité "skills" (compétences) est ce qui nous a le plus plu.
00:02:43Avec d'autres agents, pour créer une compétence, il faut utiliser un créateur open-source et tout construire de zéro.
00:02:49Mais Codex intègre déjà un créateur de compétences et propose de nombreuses options prêtes à l'emploi dès l'installation, ce que les autres n'ont pas.
00:02:56Pour simplifier l'animation 3D, j'ai utilisé le créateur de compétences en décrivant précisément comment construire l'animation et quelles bibliothèques utiliser.
00:03:06Après avoir répondu à quelques questions, l'outil a exécuté les scripts, créé la compétence et l'a rendue opérationnelle.
00:03:13Cependant, il y avait une petite différence.
00:03:14D'habitude, les agents installent les compétences dans un dossier .agent ou .claud, mais Codex l'a mis à la racine. Je l'ai donc déplacé manuellement.
00:03:24Le format suivait bien la structure open-source de Claude, avec les scripts, les références et tous les assets nécessaires.
00:03:33Il y avait aussi un fichier YAML avec le prompt générique servant de référence à l'agent pour savoir quand activer la compétence.
00:03:40J'ai demandé à Codex de configurer les animations via cette nouvelle compétence, en incluant tous les détails requis dans le prompt.
00:03:47L'implémentation a commencé et les commandes d'installation ont été lancées.
00:03:49Après un long moment, il a fini mais n'a pas pu installer les dépendances à cause d'un délai d'attente dépassé. Je lui ai donc demandé de les inscrire dans le package.json.
00:04:01En lançant l'installation manuellement, j'ai eu des erreurs dues à des conflits de versions entre les bibliothèques du projet.
00:04:08J'ai dû déboguer plusieurs fois avec Codex jusqu'à ce que l'animation de la section d'accueil fonctionne enfin comme voulu.
00:04:14Codex étant assez lent pour chaque fonctionnalité, j'ai divisé le travail en quatre sous-tâches.
00:04:21Chaque tâche correspondait à une fonction isolée de la page, avec ses propres objectifs, exigences et contraintes.
00:04:28J'ai utilisé la fonction multi-agent de Codex pour que chaque agent s'occupe d'une tâche précise.
00:04:32Comme ils travaillaient tous sur la même page, je les ai fait travailler sur des branches séparées pour éviter les conflits de code sur la branche principale.
00:04:43Presque tous les agents ont terminé leur travail dans le même laps de temps.
00:04:46J'ai fusionné les résultats et obtenu toutes les fonctionnalités sans conflit, bien plus rapidement qu'avec un seul agent Codex.
00:04:55Le site était prêt, mais à part la section d'accueil, tout semblait un peu figé. Je me suis donc tourné vers GSAP pour les animations.
00:05:03GSAP est la bibliothèque d'animation JavaScript de référence pour les professionnels, offrant des performances constantes.
00:05:09À cause des problèmes de dépendances précédents, j'ai installé GSAP moi-même via le terminal avec la commande npm install.
00:05:18J'ai donné à Codex un prompt très détaillé pour ajouter des animations, en lui précisant de ne pas toucher à la section d'accueil déjà finie.
00:05:27J'ai ajouté des instructions précises sur le type et l'emplacement des animations. Cela a pris du temps.
00:05:33Il y a eu quelques erreurs mineures que j'ai corrigées en renvoyant simplement les messages d'erreur à Codex.
00:05:37Finalement, les animations ont été implémentées sans modifier la section d'accueil.
00:05:42Des animations déclenchées au défilement ont été ajoutées partout, ce qui a radicalement amélioré le rendu du site.
00:05:48Même avec ces animations, certains composants paraissaient encore plats comparés à la section d'accueil.
00:05:54Je suis donc allé sur Aceternity UI pour choisir des composants qui intègrent déjà des micro-interactions et des animations prêtes à l'emploi.
00:06:04J'ai demandé à Codex de remplacer les composants existants par ceux d'Aceternity tout en conservant les animations.
00:06:10Après l'implémentation, j'ai remarqué des dégradés qui ne collaient pas du tout au thème de l'application.
00:06:14Je lui ai envoyé une capture d'écran pour signaler le problème, et il a alors ajusté les couleurs pour qu'elles correspondent au thème.
00:06:21Mais les composants étaient statiques et n'avaient pas les micro-interactions habituelles d'Aceternity.
00:06:30J'ai précisé à Codex qu'il existait des versions avec effets d'inclinaison au survol et je lui ai demandé de les utiliser.
00:06:38Désormais, les composants réagissaient au survol, rendant le site beaucoup plus interactif.
00:06:44Pour peaufiner le tout, j'ai utilisé un dépôt public nommé "post-processing", disponible via NPM.
00:06:51C'est une couche d'animation qui s'applique après les effets quand on utilise React Three Fiber.
00:06:56Cela permet d'utiliser le traitement d'image, comme la correction gamma, pour un rendu de haute qualité.
00:07:01J'ai demandé à Codex d'utiliser cette bibliothèque pour créer des effets de lumière subtils et de me guider.
00:07:07Il n'a pas réussi du premier coup et il n'y avait aucune différence visible à l'écran.
00:07:11Après plusieurs tentatives, il a enfin réussi à ajouter un éclat subtil et une lumière chaude au modèle 3D, donnant un aspect fini à la section d'accueil.
00:07:23Voilà qui nous amène à la fin de cette vidéo.
00:07:25Si vous voulez soutenir la chaîne et nous aider à continuer, vous pouvez utiliser le bouton "Super Thanks" ci-dessous.
00:07:31Comme toujours, merci d'avoir regardé et on se retrouve dans la prochaine !