J'ai redesigné et recodé Steam...

Dans cette vidéo, le créateur exprime son profond mécontentement face à l'interface utilisateur de Steam, la qualifiant de "laide" et de "purge" sur Mac. Il raconte comment une remarque d'un internaute l'a poussé à explorer des méthodologies de design plus performantes, notamment le "Cloud Design", qui lui a permis d'améliorer significativement l'apparence de ses propres projets. Il décide alors de refondre entièrement le design et le code de l'application Steam, qu'il considère comme l'une des pires en termes d'expérience utilisateur. Le processus commence par l'utilisation de "Cloud Design", accessible via l'application "Cloud Desktop". Après avoir lancé un nouveau projet, le créateur interagit avec un agent IA, en utilisant la fonctionnalité vocale, qu'il trouve particulièrement pratique pour décrire ses besoins tout en naviguant dans l'application à redessiner. Il détaille les problèmes de l'interface Steam : une tab store qui affiche le contenu d'une webview dans un navigateur interne, un sous-menu "atroce" qui apparaît au survol des onglets, et une bibliothèque de jeux mal organisée, rendant difficile la découverte des jeux possédés. Il souhaite un design "moderne et gamer friendly", contrastant avec l'aspect vieillot de l'interface actuelle, qui semble avoir été construite au fil du temps sans cohérence. Le créateur partage ensuite une astuce essentielle pour l'envoi de captures d'écran à l'IA : sur Mac, maintenir la touche "contrôle" enfoncée avant de relâcher le bouton de la souris lors d'une capture permet de copier l'image directement dans le presse-papiers, évitant ainsi la création de fichiers inutiles et accélérant le processus de communication avec l'agent. Il démontre cette technique en envoyant plusieurs captures d'écran de Steam en quelques secondes. L'agent IA, "Claude", propose rapidement plusieurs directions artistiques pour la page "library" de Steam. Le créateur est impressionné par la capacité de Claude à intégrer les images des jeux présents dans les captures qu'il a envoyées. Il pousse l'IA encore plus loin en lui demandant d'utiliser les "vraies images des vrais jeux" pour une démonstration plus réaliste. Claude parvient à identifier et à récupérer les "hero banners" des jeux, un exploit que le créateur trouve "fou" et attribue à la capacité de l'IA à analyser le texte dans les images (OCR). Le créateur fait une parenthèse pour promouvoir Hostinger et ses VPS, les présentant comme une solution idéale pour héberger des projets en ligne, avec un excellent rapport qualité-prix, particulièrement pendant la période du Black Friday avec des offres exclusives via un code promo. Il souligne la synergie possible entre Hostinger et les agents IA pour la gestion des VPS. De retour sur le design de Steam, le créateur examine les quatre propositions de Claude. Il apprécie particulièrement celles qui sont moins chargées et plus cohérentes visuellement que l'application originale. Il note la réactivité des maquettes et la possibilité d'itérer sur les designs grâce à la fonction chat de Cloud Design. Avant de s'emballer, il s'assure auprès de Claude de la faisabilité technique des designs proposés, notamment en ce qui concerne la récupération et l'affichage des données. Claude confirme que tout est réalisable, citant l'exemple de l'application "Playnite" sur Windows. Fort de ces assurances, le créateur assemble son "Frankenstein" de design, combinant les meilleurs éléments des différentes propositions. L'idée principale est de transformer l'application en une interface centrée sur la librairie de jeux, en commençant par le dernier jeu joué, suivi d'autres suggestions et de collections intelligentes par genre (point & click, roguelite, souls-like). Il valide ce nouveau design, qu'il juge "à Burne". La phase suivante consiste à coder l'application. Le créateur demande à Cloud Design de préparer une passation pour un agent développeur. Le processus génère un fichier CSS avec les "tokens" (couleurs, espacements, etc.), des pages HTML basées sur les maquettes, et un fichier Markdown pour guider l'agent codeur. L'agent "Cloud Code" se lance dans la tâche, et après une heure de travail, une application fonctionnelle avec des données factices est créée, intégrée au format Rust et React. Le créateur exprime son impatience de connecter l'application aux "vraies données". Il partage son expérience de travail avec l'IA, mentionnant qu'il a laissé l'agent travailler en arrière-plan pendant qu'il allait au restaurant, où il a eu un incident malencontreux avec une bière renversée. Il souligne l'efficacité de Claude qui, à son retour, avait bien avancé sur le projet. Il revient sur la feuille de route : la création de l'API, des écrans principaux, et enfin l'empaquetage de l'application. Il mentionne la possibilité de la rendre utilisable sur les ordinateurs personnels. Il présente ensuite la version finale de l'application. L'icône a été générée, et l'application démarre en affichant le dernier jeu joué. La librairie est entièrement accessible, permettant de redécouvrir des jeux oubliés. Les jeux peuvent être regroupés par collections intelligentes. Le lancement d'un jeu, même avec Steam fermé, fonctionne, bien qu'il y ait une petite subtilité à régler concernant le relancement du jeu après le démarrage de Steam. Le créateur envisage d'ajouter une page de détail pour chaque jeu, qui pour l'instant renvoie vers Steam. Le lendemain, il corrige les bugs restants et surtout implémente la page de détail du jeu. Cette page affiche les actualités, les succès, les images du jeu, permettant aux utilisateurs de mieux connaître leurs jeux et de décider d'y jouer. Il explique avoir demandé à Cloud Design de concevoir cette nouvelle page, puis l'avoir transmise à l'agent codeur pour des itérations directes, sans nécessairement repasser par la phase de design si l'agent possède déjà un système de design cohérent. Le créateur conclut en affirmant qu'il est désormais "criminel" de proposer des applications avec des designs "éclatés", grâce aux méthodes et outils disponibles. Il remercie l'abonné qui l'a motivé à améliorer ses designs. Il mentionne que les étapes complètes de sa démarche sont disponibles dans les vidéos bonus de sa formation, qui couvre la construction d'applications avec IA, du développement au déploiement, en passant par la sécurité, avec une réduction pour le Black Friday. Il sollicite l'avis des spectateurs sur le nouveau design de Steam et propose de le rendre open source et multiplateforme si la demande est forte. Il réitère l'idée que l'époque actuelle permet à chacun de coder son propre client selon ses désirs et besoins. Il encourage les utilisateurs à partager leurs propres "Before and After" s'ils utilisent cette méthode pour redessiner leurs applications. La vidéo se termine par des remerciements à Hostinger pour le sponsoring et à Benjamin Col pour sa présentation.