L'auteur de la compétence de design n°1 des tendances GitHub vient d'améliorer à nouveau le design IA
AAI LABS
Computing/SoftwareInternet Technology
Transcript
00:00:00Si vous avez déjà conçu un site avec l'IA, vous savez à quel point les designs générés par ces modèles
00:00:04peuvent sembler génériques. Il existe beaucoup d'outils et de compétences pour essayer de résoudre ce problème, et certains
00:00:09offrent des designs très solides. Mais il y a un manque commun à absolument tous ces outils,
00:00:14et c'est pourquoi leurs designs semblent toujours artificiels. Pour combler ce manque, il existe un outil appelé Inspo, créé
00:00:19par la même personne derrière Hallmark, qui est l'une des compétences de design les plus populaires sur
00:00:23GitHub depuis longtemps. Inspo résout le problème d'une manière qui ne se contente pas d'améliorer le design
00:00:28de votre agent, mais lui donne aussi un meilleur goût esthétique. Et alors que d'autres outils similaires
00:00:33sont payants, celui-ci est entièrement gratuit. Si c'est votre première fois ici, nous sommes une
00:00:38entreprise de logiciels, et voici notre chaîne AI Labs. Dans cette vidéo, nous allons vous montrer exactement
00:00:43comment Inspo résout le problème de design de votre agent. Mais avant de voir ce que fait cet outil, vous devez
00:00:48comprendre pourquoi les modèles créent des sites au look si générique. Un modèle est entraîné sur une immense
00:00:54quantité de données, et durant cet apprentissage, il repère les motifs qui apparaissent le plus souvent dans les
00:00:59designs qu'il observe. Comme ils apparaissent constamment, le modèle estime que ce style de design est
00:01:05le plus sûr. C'est pourquoi, sans instructions de design précises dans votre prompt, il choisit simplement les
00:01:10motifs qu'il a vus le plus fréquemment, car c'est ce qu'il considère comme une valeur sûre. Ces choix
00:01:14peuvent sembler corrects au début, mais à force de les revoir sur plein de sites, on les reconnaît comme le
00:01:19style propre au modèle. Chaque modèle a sa propre signature qui ressort sur tous ses sites. Pour certains,
00:01:25c'est le choix du violet ou du bleu sur fond blanc. Pour d'autres, c'est devenu l'association
00:01:30d'un orange chaud et d'une couleur crème. C'est pourquoi vous avez besoin d'un moyen de guider le modèle loin de
00:01:35ce rendu générique, afin que votre site se démarque des autres. Il existe déjà plein de compétences en design
00:01:40qui corrigent ce problème, et nous en avons présenté beaucoup sur notre chaîne. Elles fonctionnent toutes
00:01:45très bien, chacune aidant à sa manière en donnant une direction esthétique aux modèles pour qu'ils puissent
00:01:50générer un bon design. L'une d'elles est celle mentionnée plus tôt, Hallmark, sur laquelle nous avons
00:01:55déjà fait une vidéo. C'est une compétence que nous utilisons beaucoup, car elle donne au modèle une orientation esthétique
00:02:00et vérifie la page par rapport aux pièges habituels des modèles. Nous utilisons aussi d'autres compétences de design,
00:02:06et celles intégrées à nos flux de travail font partie de notre système de design AI Labs Pro, que nous avons partagé
00:02:11avec notre communauté. Toutes ces compétences fournissent des instructions au modèle sur ce qu'il doit faire et lui indiquent
00:02:16les erreurs courantes à éviter. Certaines, comme Hallmark, intègrent aussi des références issues de
00:02:21sites populaires ayant fait leurs preuves, afin que le modèle puisse s'en inspirer lors de la création,
00:02:26car ce sont des modèles éprouvés. Mais la plupart de ces références
00:02:30et instructions sont décrites dans des fichiers Markdown, qui sont du texte à partir duquel l'agent doit déduire
00:02:36à quoi doit ressembler la page finale. Il peut lire quelles polices utiliser et comment agencer la page,
00:02:41mais cette description ne l'aide pas à visualiser le rendu global du site une fois tous les composants
00:02:46assemblés. Les modèles ne comprennent pas non plus le type de design nécessaire au site, et se contentent de concevoir
00:02:51ce qui est listé dans leurs instructions. C'est exactement pour cela qu'Inspo était nécessaire, car il offre
00:02:56aux modèles bien plus que de simples consignes de design. Mais avant de passer à l'outil, n'hésitez pas à vous
00:03:01abonner à la chaîne et à cliquer sur le bouton J'aime. Ce petit geste d'encouragement nous aide énormément.
00:03:07Inspo est en fait un serveur MCP qui résout le problème évoqué en donnant à votre agent de codage
00:03:13accès à de vrais sites web plutôt qu'à de simples instructions textuelles. C'est très utile car désormais, grâce à cet
00:03:18outil, l'agent sait quel design a fonctionné pour le type de site que vous concevez et peut réellement
00:03:23analyser le design. À partir de là, il en crée un nouveau pour vous. Il répertorie 832 sites avec
00:03:292 320 pages capturées sous forme d'images. Il intègre aussi des captures d'écran de ces sites prises sur
00:03:36ordinateur et sur mobile, afin que votre agent voie comment le design s'adapte aux petits écrans et puisse concevoir
00:03:42pour tous les formats. Il contient aussi des références pour des sections spécifiques, comme le menu de navigation
00:03:47ou la section des tarifs. Ainsi, lorsque l'agent travaille sur une partie précise de votre site, il peut consulter
00:03:53des exemples dédiés. L'agent peut aussi récupérer le code du composant qu'il souhaite utiliser. Mais surtout,
00:03:58chaque site est accompagné d'un fichier design.md, qui décrit la structure du design d'une manière que
00:04:04les agents comprennent parfaitement. Il contient la palette de couleurs avec les valeurs exactes, ainsi que
00:04:09les polices précises et les mesures relevées pour la taille des textes et les espacements. L'agent peut
00:04:15s'appuyer sur ce fichier pour comprendre les composants graphiques au lieu de devoir deviner les polices et styles
00:04:20uniquement à partir de l'image. Vous pouvez explorer ces sites sur leur page d'accueil, où vous trouverez un
00:04:25large choix de sites, chacun avec son propre style visuel. Vous pouvez aussi visiter les sites d'origine ;
00:04:30l'outil est d'ailleurs gratuit et ne nécessite ni compte ni clé API pour y connecter votre agent.
00:04:35Mais avant d'installer Inspo, il faut comprendre son fonctionnement interne. Lorsque vous
00:04:40donnez un prompt à votre agent, celui-ci envoie une description de ce que vous souhaitez créer à Inspo via un outil
00:04:46appelé « recommend ». Inspo cherche alors des correspondances parmi les pages capturées et analyse la disposition
00:04:51des résultats les plus proches. Il sélectionne la mise en page la plus fréquente parmi ces meilleurs
00:04:56résultats et renvoie jusqu'à cinq exemples qui l'utilisent. L'agent obtient ainsi plusieurs références suivant
00:05:01une structure similaire, qu'il compare avant de décider comment concevoir votre page. En plus de ces
00:05:06exemples, Inspo fournit des références de composants assortis et suggère une palette de couleurs. Et la
00:05:12réponse inclut jusqu'à trois captures d'écran. L'agent peut donc observer directement les pages et voir comment ces
00:05:17choix visuels s'articulent ensemble. Le tout est combiné et transmis à l'agent, qui l'utilise ensuite pour
00:05:22déterminer comment construire ce que vous demandez. Inspo propose des filtres de recherche par secteur d'activité et
00:05:27par type de mise en page, ainsi que des options pour choisir un thème clair ou sombre. Vous pouvez donc préciser
00:05:33la direction souhaitée dans votre prompt, et l'agent affinera les résultats
00:05:37grâce à ces filtres pour obtenir des références plus adaptées. Une fois qu'il a trouvé les bonnes références, il
00:05:43demande plus de détails sur ces pages et leurs fichiers design.md avant de commencer le développement. Inspo
00:05:49lui recommande également de n'en étudier que quelques-unes en détail. En effet, chaque recherche supplémentaire
00:05:54ajoute des résultats à la conversation, ce qui surcharge le modèle et peut l'hésiter quant au
00:06:00style à adopter. L'agent n'a donc plus besoin de chercher dès qu'il a suffisamment de références.
00:06:04Mais avant de l'installer, un mot sur notre sponsor, Manid.
00:06:09Tout projet concret finit par avoir besoin de données dont il ne dispose pas encore. Et pour les obtenir, il faut créer
00:06:13un compte sur une enième API et intégrer une nouvelle clé à la main. Manid est le routeur ouvert pour les outils d'agents. Une seule
00:06:19clé permet d'accéder à toutes les API, vous évitant toute cette configuration. On intègre sa compétence dans le code cloud, puis on demande exactement
00:06:25ce dont le projet a besoin, comme le volume de recherche d'un mot-clé ou les coordonnées d'un profil, et il trouve le bon
00:06:30point d'accès, lance l'appel et les données arrivent dans notre session en quelques secondes. Aucun serveur à monter,
00:06:36aucune configuration. Cette même clé couvre plus de 1 900 autres outils : scraping, recherche de contacts, données de recherche, génération
00:06:43vidéo, et bien plus. Stripe vient de racheter Open Router pour 7 milliards de dollars, et Manid applique
00:06:48ce même concept aux outils d'agents. Une clé pour chaque API. Il n'y a aucun abonnement non plus : vous payez à l'usage,
00:06:54le coût s'adapte donc à votre croissance et vous recevez des crédits gratuits dès votre inscription. Récupérez votre clé et faites votre
00:06:59premier appel dès aujourd'hui. Le lien est dans la description. Pour installer Inspo, il vous suffit de copier
00:07:04la commande d'installation disponible sur son site web, qui sera en lien dans la description, puis de
00:07:09la coller dans votre terminal. Lorsque vous lancez la commande, l'installeur détecte automatiquement les agents
00:07:14de codage déjà installés et vous demande si vous souhaitez ajouter Inspo à l'ensemble d'entre eux. Vous pouvez l'installer
00:07:19pour tous si vous le souhaitez. Mais si vous le voulez uniquement pour un agent spécifique, le chemin d'installation
00:07:24ne permet pas ce choix pour l'instant. Si vous tapez « non », cela annule purement et simplement l'installation.
00:07:29Pour l'installer uniquement sur un agent précis, vous devez exécuter la commande d'installation
00:07:34avec l'option client puis spécifier le nom de votre agent de codage. L'installation se fait au niveau utilisateur,
00:07:39ce qui signifie qu'Inspo est disponible dès que vous ouvrez votre agent dans n'importe quel dossier, et ne sera pas
00:07:44limité au projet dans lequel vous l'avez installé. Une fois l'installation terminée, il faut rouvrir
00:07:49l'agent que vous utilisez et exécuter la commande MCP. Vous verrez alors Inspo figurer à côté
00:07:54de vos autres serveurs MCP installés, avec ses 15 outils prêts à être utilisés par l'agent.
00:08:00Pour utiliser Inspo, il vous suffit de donner à votre agent un prompt décrivant le site à construire.
00:08:05Nous l'avons testé sur une page de destination de démonstration pour la mode. Dans notre prompt, nous avons demandé à l'agent de proposer quelques
00:08:11styles au choix avant de commencer le développement. Rien ne vous oblige à demander des alternatives, mais le faire
00:08:15au préalable vous permet d'intervenir avant que le site complet ne soit construit pour demander
00:08:20une orientation différente. Ainsi, lors de l'envoi du prompt, bien que nous n'ayons pas demandé explicitement l'utilisation
00:08:25d'Inspo, l'agent a fait appel au MCP Inspo connecté précédemment. Au lieu d'envoyer directement la requête
00:08:31fournie, l'agent commence par ajouter des mots-clés supplémentaires liés au style demandé.
00:08:36C'est très utile lorsque vous formulez un prompt peu descriptif sur le site souhaité,
00:08:40car cela permet de cibler précisément la recherche et d'aider le MCP à trouver des références
00:08:46références exactes correspondant à votre demande. Il étudie ensuite les références obtenues et
00:08:50compare leurs points communs, afin d'identifier les choix de design propres à ce style.
00:08:55Dans notre cas, l'agent a analysé environ 24 sites et s'est appuyé sur ces références pour concevoir la page.
00:09:01Pour notre site, l'agent nous a proposé trois orientations graphiques en les décrivant pour nous aider à choisir.
00:09:06Une fois l'orientation choisie, il a commencé la création. Et quand il a terminé,
00:09:11le résultat était bien différent de ce que génèrent habituellement les modèles seuls, même avec une compétence de design.
00:09:16La première section utilise des images au lieu d'afficher d'immenses textes sur toute la largeur, ce que font souvent les modèles.
00:09:23L'agent a utilisé des polices en gras et des teintes neutres, en parfait accord avec le thème demandé.
00:09:27Si vous avez déjà donné un site de référence à un agent, vous savez qu'il finit la plupart du temps par le copier exactement, au lieu de s'en inspirer.
00:09:37Nous voulions donc vérifier s'il avait reproduit la même erreur ou s'il s'était vraiment inspiré du style global des références.
00:09:43Pour cela, nous lui avons demandé quels sites il avait consultés, et il nous a partagé tous les liens utilisés.
00:09:49En examinant ces sites, ils étaient tous très différents les uns des autres, et notre page n'en copiait aucun à l'identique.
00:09:54Il a repris le style de la section principale d'un site, les boutons d'un autre, et la disposition des produits d'un troisième.
00:10:00L'agent a ainsi combiné des éléments de ces références pour créer un design inédit.
00:10:05L'agent a aussi analysé les versions mobiles pour comprendre comment ces sites agençaient leur contenu sur un écran plus petit.
00:10:12C'est pourquoi le rendu était également très réussi lorsque nous l'avons testé sur mobile.
00:10:16Mais bien que le design soit plus proche de nos attentes, la page restait statique et sans aucune animation.
00:10:22C'est pourtant ce qui finalise un site, et Inspo ne prend pas cela en charge.
00:10:26Pour y remédier, nous avons utilisé le serveur MCP UISkills.
00:10:29Ce MCP donne accès à l'agent à une bibliothèque de compétences en design créées par différents auteurs,
00:10:34ce qui vous permet de lui demander d'en trouver une adaptée au site sur lequel vous travaillez,
00:10:38et il parcourra sa bibliothèque pour sélectionner les compétences correspondant à votre requête.
00:10:42Nous avons d'ailleurs déjà présenté ce MCP dans notre vidéo précédente.
00:10:46Pour notre site, nous avons donc demandé à l'agent d'ajouter des animations grâce au MCP.
00:10:51À la suite de cette instruction, il a chargé la compétence d'animation d'Emil Kowalski et celle de Mengto pour le défilement.
00:10:57L'agent a ensuite intégré les animations, et leur synchronisation était parfaite.
00:11:01Nous avons aussi testé Inspo sur d'autres sites, et les résultats ont été très concluants la plupart du temps.
00:11:07Cependant, bien que cet outil ait bien conçu notre site, il est encore récent et présente quelques soucis.
00:11:12Pendant nos essais, il a récupéré de mauvaises références à deux reprises, alors que notre consigne précisait clairement le type de site souhaité.
00:11:19Les références renvoyées par Inspo provenaient d'autres catégories de sites sans aucun rapport.
00:11:24Lors d'un test pour un site d'abonnement au café, nous avons obtenu des références de sites de santé et d'entreprises.
00:11:30En relançant la recherche avec le filtre du secteur alimentaire sélectionné, nous avons enfin eu des références de sites de café.
00:11:36Il y a aussi quelques problèmes avec les captures d'écran fournies.
00:11:38Certaines d'entre elles ont une partie du design masquée par la fenêtre surgissante qui s'affiche à l'ouverture du site.
00:11:43Dans un test précédent, une capture présentait une bannière de confidentialité au milieu de la page, empêchant l'agent de voir le design derrière,
00:11:50et il a simplement improvisé cette partie de lui-même, ce qui évite précisément l'intérêt d'installer cet outil.
00:11:57C'est pourquoi, comme mentionné plus tôt, il faut d'abord demander des orientations graphiques, exactement comme nous l'avons fait lors de nos tests,
00:12:03afin de détecter s'il s'éloigne du bon chemin et de lui donner une nouvelle consigne pour corriger ces problèmes.
00:12:09Le système de design présenté ici, ainsi que d'autres ressources, sont disponibles sur AI Labs Pro, notre communauté.
00:12:16Si vous appréciez notre travail et souhaitez soutenir la chaîne, c'est le meilleur moyen de le faire.
00:12:20Le lien est dans la description.
00:12:22Voilà qui nous amène à la fin de cette vidéo.
00:12:24Si vous voulez soutenir la chaîne et nous aider à continuer de produire ce type de contenu, vous pouvez utiliser le bouton Super Merci ci-dessous.
00:12:30Comme toujours, merci d'avoir regardé et je vous dis à la prochaine.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video