스크립트
00:00:00Il existe de nombreuses compétences qui vous permettent de concevoir de superbes sites web avec l'IA, et chacune
00:00:04d'elles est différente, mais toutes ne fonctionnent pas. Certaines ont un flux de travail intensif qui semble impressionnant
00:00:09et, au final, elles génèrent toujours un site qui ressemble à tous les autres. Seules quelques-unes
00:00:13d'entre elles tiennent vraiment leurs promesses. Vous vous demandez peut-être pourquoi vous auriez besoin de ces compétences
00:00:17puisque les modèles sont déjà assez puissants et qu'ils conçoivent très bien maintenant. Mais peu importe la puissance
00:00:22d'un modèle, chacun suit son propre schéma lorsqu'il conçoit et ce schéma est facile
00:00:26à repérer. C'est pourquoi vous avez besoin de quelque chose pour les détourner de ce schéma et faire en sorte que votre
00:00:30site web se démarque réellement. Ces compétences sont développées par des personnes qui ont une vaste expérience en design
00:00:36et elles ont repackagé le flux de travail qu'elles ont testé et qui a fonctionné pour elles sous une forme réutilisable afin
00:00:41que vous puissiez l'utiliser aussi. Si vous êtes nouveau ici, bienvenue. Nous sommes une entreprise de logiciels et voici AI Labs, et dans
00:00:46cette vidéo, nous allons passer en revue les compétences que nous avons testées et qui nous ont réellement donné des résultats. Et une chose
00:00:51qu'il est bon de savoir avant de commencer, c'est que vous n'avez pas besoin d'ajouter des compétences à Claude design directement. Celles
00:00:55que vous ajoutez dans votre configuration de Claude sont les mêmes que vous pouvez utiliser dans Claude design. Il vous suffit donc d'ajouter la compétence
00:01:00depuis les paramètres de Claude. Et même si nous utilisons ces compétences dans Claude design, elles fonctionneraient avec Claude
00:01:05Code, Codex ou tout autre agent que vous utilisez et donneraient le même résultat. La première dont nous allons parler
00:01:10concerne les compétences d'Emil Kowalski. Dans cet ensemble, il n'y a pas une mais neuf compétences et chacune
00:01:15modifie une partie différente du design. Ce sont les compétences que nous utilisons nous-mêmes lorsque nous travaillons sur
00:01:20des designs, que ce soit avec Claude code ou dans Claude design. Il y a beaucoup de compétences là-dedans,
00:01:25chacune ciblant un domaine de design différent. Parmi elles, il y a Apple design, qui contient tous les
00:01:30principes de design qu'Apple utilise dans ses propres produits et les rend disponibles pour une utilisation sur d'autres sites web.
00:01:35Il y a aussi une compétence de vocabulaire d'animation, qui transforme essentiellement votre description d'animation vaine
00:01:40en mots exacts qu'un modèle peut comprendre. Vous pouvez ajouter autant de compétences que vous le souhaitez, mais il y en a deux
00:01:45que nous utilisons le plus en raison de leur impact sur l'amélioration des capacités de Claude design.
00:01:50L'une d'elles est la compétence d'ingénierie du design d'e-mail, qui contient des instructions sur la façon de construire de superbes
00:01:55composants d'interface utilisateur et d'y ajouter des animations, ce qui en fait la meilleure compétence pour commencer votre design.
00:02:00L'autre que nous utilisons est animate, qui contient un flux de travail complet pour ajouter des animations à un
00:02:05site web déjà construit, avec un processus détaillé étape par étape. Pour les utiliser, vous devez les ajouter à Claude
00:02:10et une fois ajoutées, vous pouvez les utiliser à l'intérieur de Claude design. À partir de là, vous tapez slash et le nom de la compétence
00:02:15et dans le message, vous lui dites quel site vous voulez. Comme nous n'avions pas encore construit le design, nous avons utilisé
00:02:20d'abord la compétence d'ingénierie du design d'Emil. Ensuite, elle importe la compétence, mais avant de construire quoi que ce soit, elle vous pose
00:02:25des questions sur l'application, de la même manière que Claude design le fait tout seul. Lorsque vous y répondez, elle construit le
00:02:30design. La première version que Claude design réalise a l'air minimale avec un style monotone, mais les animations qui
00:02:35en sont ressorties n'avaient pas l'air aussi soignées et étaient désynchronisées par moments. C'est donc là que la compétence animate
00:02:40intervient, car elle affine réellement les animations sur des sites web déjà construits. Cette compétence comprend comment
00:02:46le site fonctionne et détermine ce qui a besoin de mouvement et ce qui n'en a pas. Une fois que Claude a fini d'apporter
00:02:51les modifications, les animations du site étaient grandement améliorées. Le mouvement était synchronisé avec le défilement et l'ensemble
00:02:56semblait plus intentionnel par rapport à ce que nous avions avant. Vous pensez peut-être que ce n'est pas si
00:03:01différent de ce que Claude produit normalement, mais c'est parce qu'il s'agissait d'une page de destination. Bien qu'elle ait
00:03:06amélioré les animations vraiment petites et subtiles ici, le style d'animation principal qui rend bien sur les pages de destination
00:03:11est celui des animations basées sur le défilement, et nous avons abordé de nombreuses compétences à ce sujet dans des vidéos
00:03:16précédentes. Mais là où la compétence fonctionne vraiment bien, c'est dans les petits éléments du côté fonctionnel
00:03:21des applications. Par exemple, nous travaillions sur un site pour un restaurant et nous avons utilisé la compétence animate pour y ajouter
00:03:26des animations, et elle a ajouté de minuscules animations qui ont amélioré la sensation d'utilisation du site, comme l'ajout d'une animation
00:03:32lorsque nous soumettons le formulaire et des graphiques qui apparaissent au survol. Tous ces détails réunis ont rendu le
00:03:37site beaucoup plus interactif et ont amélioré l'expérience d'utilisation. Et vous pouvez ajouter autant
00:03:42de compétences d'Emil que vous voulez, car elles constitueront toutes un ajout significatif à votre boîte à outils
00:03:47de design. La prochaine dont nous allons parler est la compétence de jardin de Conard Lee, qui est également une
00:03:52collection plutôt qu'une seule compétence. Elle contient cinq compétences qui couvrent des domaines tels que la présentation
00:03:57vidéo et les images, mais la plus importante d'entre elles est la compétence d'ingénieur en design web,
00:04:02et ce parce qu'elle contient réellement des instructions sur la façon de concevoir comme un ingénieur en design de premier plan.
00:04:07Cette compétence se concentre uniquement sur la beauté visuelle, pas sur la fonctionnalité. La façon dont cette
00:04:12compétence fonctionne est qu'elle prend vos besoins et les examine avec vous jusqu'à ce qu'elle sache exactement ce que
00:04:17vous voulez, puis elle cherche de vrais designs sur lesquels s'appuyer. Son principe est qu'un bon design ne part jamais
00:04:22de zéro, tout comme chaque design existant est inspiré par quelque chose qui l'a précédé. Elle
00:04:27s'appuie également sur les designs qui ont fonctionné par le passé. Cette compétence contient également un ensemble de
00:04:32références couvrant de multiples domaines liés au design. Elles expliquent comment juger un design, les erreurs de design courantes
00:04:38et des recettes de style pour des sites bien connus comme Apple et Linear, afin qu'elle puisse observer le fonctionnement réel de ces sites
00:04:44pendant qu'elle construit le vôtre. Ainsi, une fois que vous l'avez ajoutée dans Claude Design, vous pouvez l'utiliser en lui donnant une consigne
00:04:49décrivant ce que vous voulez construire. Le site que nous en avons tiré était bien plus intéressant que ce que Claude Design
00:04:55produit de lui-même. Il était plus approfondi et meilleur du point de vue du design que la version que Claude Design aurait faite seul.
00:05:01Et si vous avez déjà un design et exécutez ensuite la compétence, elle parcourt ce design et l'évalue dans différents domaines.
00:05:08Vous pouvez continuer à affiner le design et à l'exécuter encore et encore jusqu'à ce qu'il obtienne un score parfait et corresponde
00:05:13au design que vous souhaitez vraiment. Mais avant d'explorer d'autres compétences, ce serait formidable si vous vous abonniez à la chaîne
00:05:18et cliquiez sur le bouton de mention J'aime. Ce petit geste de soutien nous aide énormément.
00:05:22La prochaine compétence dont nous allons parler est la compétence de design IA par Elia Design, et cette fois il s'agit d'une seule compétence conçue pour les pages de destination.
00:05:30Tout ce qu'elle fait tient dans un seul fichier et son rôle est de prendre votre idée pour la transformer en un système visuel, c'est-à-dire l'ensemble des règles
00:05:37que tout sur la page va ensuite suivre, incluant les couleurs, la typographie et l'espacement.
00:05:41Cette compétence est un système complet et spécialisé pour concevoir des pages de destination qui en valent vraiment la peine.
00:05:46L'idée sous-jacente est qu'une page de destination n'est pas une page d'accueil. Une page d'accueil essaie de servir beaucoup de personnes différentes à la fois.
00:05:53Mais une page de destination a un seul objectif : amener les gens à passer à l'action.
00:05:57Les modèles ont tendance à générer des pages d'accueil fonctionnelles, mais ils ne sont pas spécialisés dans la conception de pages de destination comme le fait cette compétence.
00:06:03Elle structure donc la page autour de cette unique action que vous souhaitez que le visiteur de votre site réalise, afin d'attirer l'attention sur cette action en structurant votre site autour d'elle.
00:06:12Elle maintient également un style visuel cohérent et aborde d'autres aspects du design web que la plupart des modèles négligent, notamment s'assurer que le site web est facilement trouvable par la recherche.
00:06:22Ainsi, une fois que vous l'avez installée dans les compétences de Claude, vous l'exécutez avec une consigne chaque fois que vous voulez un design.
00:06:27Elle vous pose également des questions en premier et, une fois que vous y avez répondu, elle commence la conception.
00:06:31Le site qu'elle a créé donnait l'impression d'appartenir à une vraie marque et correspondait exactement à l'ambiance que nous recherchions.
00:06:36Et la façon dont chaque élément était structuré augmentait considérablement la probabilité que quiconque arrive sur le site effectue un achat.
00:06:43Mais d'abord, un mot de notre sponsor.
00:06:45Make. Vous connaissez déjà Make pour l'automatisation visuelle, mais ils viennent de lancer Maya.
00:06:49C'est un collègue IA qui vit directement à l'intérieur du constructeur Make.
00:06:52La plupart des constructeurs d'IA vous tendent une boîte noire et vous espérez juste que ça marche.
00:06:56Maya est différente. Vous lui dites ce que vous voulez en anglais simple et elle le construit juste sous vos yeux.
00:07:00Nous avons donc essayé. Nous avons demandé à Maya d'envoyer à notre équipe un résumé sur Slack chaque fois qu'un nouveau prospect arrive dans Salesforce, et cela est allé directement sur le canevas.
00:07:07Maya a réfléchi à la demande, choisi les bons outils, cartographié chaque module et assemblé toute l'automatisation sur le canevas pendant que nous regardions.
00:07:15Vous voyez chaque décision pour pouvoir intervenir et ajuster quoi que ce soit, à tout moment.
00:07:19En chemin, vous n'obtenez pas seulement une automatisation, vous apprenez comment Make fonctionne réellement.
00:07:23C'est gratuit à l'essai en version bêta en ce moment. Le lien est dans la description.
00:07:26Les prochaines compétences dont nous allons parler sont de Meng To.
00:07:29Il est en fait un designer qui est dans l'industrie depuis longtemps et qui est connu pour ses designs de narration immersive basés sur le défilement.
00:07:36Et il a pris tout ce qu'il a découvert et l'a regroupé dans un système de compétences de design pour que vous puissiez l'utiliser aussi.
00:07:41Cela contient beaucoup de compétences couvrant différents domaines.
00:07:44Elles visent toutes à générer des designs de haute qualité qui racontent véritablement une histoire au lieu de se contenter d'être visuellement beaux.
00:07:51L'une d'elles est la conversion de vidéo en super prompt, qui fonctionne en prenant un enregistrement d'écran ou une visite guidée d'un site web et en utilisant des outils sur votre machine pour transformer cet enregistrement en une consigne pour votre agent.
00:08:01Mais la compétence dont nous voulons vraiment parler est celle des sites de qualité Awards.
00:08:05Awards est le site qui organise des compétitions pour un design époustouflant et les sites qui y gagnent sont reconnus comme étant les mieux conçus du web.
00:08:12Cette compétence liste concrètement les principes et les détails de design que contiennent les sites de niveau Awards.
00:08:17Et c'est important parce que Claude ne construit pas un design de ce niveau de lui-même.
00:08:21La compétence intègre donc ces principes dans le processus et oriente la direction du design.
00:08:25Et ce qui les distingue, c'est qu'en plus des principes, l'ensemble comporte les techniques réelles et les effets spécifiques qui donnent à un site un aspect haut de gamme, ce que le modèle ne produira pas seul.
00:08:35Une fois que vous avez ajouté la compétence awards, vous lui donnez une consigne décrivant le site que vous voulez.
00:08:40Et le résultat est un site structuré et conçu de la même manière que les sites gagnants.
00:08:45Il y a un arrière-plan animé subtil, mais ce qui ressort vraiment, c'est le défilement.
00:08:49Il utilise cette approche narrative basée sur le défilement, tout comme les sites web mis en avant sur Awwwards.
00:08:54Le jeu de compétences suivant est créé par Jakub Krehel.
00:08:57Et contrairement aux autres, où une seule compétence gère tout le site en même temps, celle-ci divise le tout pour que chaque zone ait sa propre compétence.
00:09:05Tous les éléments du design, y compris la typographie, les couleurs, l'accessibilité et plus encore, ont chacun une compétence distincte au lieu d'une seule.
00:09:13Vous pouvez ajouter n'importe laquelle de ces compétences à Claude Design, mais celle que nous utilisons est la compétence d'évaluation.
00:09:18Nous l'utilisons car elle examine en profondeur tous les aspects du design afin que nous puissions itérer selon le score obtenu.
00:09:24Cette compétence d'évaluation fonctionne mieux si vous la connectez à GitHub car elle vérifie l'apparence du design avant et après vos modifications.
00:09:31Si un élément fonctionnait avant votre dernier changement et ne fonctionne plus, elle le signale et vous indique la modification responsable.
00:09:40Elle examine des éléments tels que les animations, l'accessibilité et le rendu sur différentes tailles d'écran, puis liste tout ce qu'elle trouve pour que vous puissiez corriger.
00:09:48Nous utilisons également une compétence de meilleure mise en page, car c'est là que Claude Design rencontre des difficultés.
00:09:52Celle-ci gère l'espacement, le positionnement et l'alignement des éléments dans tout le design de manière approfondie.
00:09:58Par exemple, elle a détecté qu'une date sur la page avait besoin de plus d'espace et a même indiqué le nombre de pixels supplémentaires requis.
00:10:04Il vous suffit donc de lui demander de corriger toutes ses alertes.
00:10:06Cela ne changera pas radicalement l'apparence du site, mais garantira sa conformité avec les principes de design réellement utilisés par les professionnels.
00:10:14La compétence suivante sur la liste est Tastemaker.
00:10:16Son objectif principal est d'éviter les choix génériques par défaut des modèles, et ce qui la distingue, c'est sa méthode.
00:10:22Elle travaille directement à partir des pixels d'une vraie référence, sans rien perdre en traduisant d'abord un style en mots.
00:10:28Lorsque vous fournissez une image de référence au modèle, il la convertit généralement en résumé textuel qu'il utilise ensuite.
00:10:34Mais cette compétence utilise des scripts pour extraire les détails précis du design et les enregistre dans un format structuré exploitable par les agents.
00:10:42Cela préserve les détails de design qui se perdraient autrement dans le résumé textuel.
00:10:46Elle s'appuie d'abord sur des scripts pour gérer de nombreuses tâches sans que l'agent ait à le faire lui-même.
00:10:52Par exemple, elle les pousse dans différentes directions et teste des variations.
00:10:55Les décisions prises s'appliquent à l'ensemble du projet plutôt de s'arrêter à un seul écran.
00:10:59Cette compétence insuffle véritablement du goût aux modèles pour qu'ils évitent les schémas génériques habituels.
00:11:05Une fois ajoutée, vous l'exécutez de la même manière avec une commande oblique et un prompt.
00:11:09Nous lui avons fourni le site souhaité ainsi que les exigences de style précédentes pour la laisser travailler.
00:11:14Le résultat est un site vraiment impressionnant, sans style générique, qui correspond parfaitement à l'aspect et à l'ambiance demandés.
00:11:22Le dernier ensemble est une autre collection populaire, et ce qui les distingue, c'est qu'ils reposent sur des recherches concrètes,
00:11:28sur les lois reconnues qu'utilisent les designers, avec une compétence distincte pour chacune.
00:11:33Certaines compétences couvrent les raisons pour lesquelles les gens quittent un site web en cours de route et la façon dont le comportement se manifeste.
00:11:39Et vous n'êtes pas obligé de tout installer.
00:11:41Vous installez simplement les compétences qui correspondent à votre méthode de travail.
00:11:44Pour notre configuration, nous en avons ajouté deux.
00:11:45La première est la critique d'écran, qui analyse un écran sous de nombreux angles différents,
00:11:50puis vous indique ce qui ne va pas en s'appuyant sur de véritables directives pour évaluer la qualité du design.
00:11:56La seconde concerne les lois de perception, qui contiennent des instructions sur la façon dont l'œil humain perçoit et comprend le design.
00:12:03Une fois votre design obtenu, vous lancez l'évaluation et obtenez les défauts concernant ce qui attire l'œil en premier,
00:12:09la typographie et l'espacement, listés clairement pour que vous puissiez les corriger.
00:12:12Une fois les lois de perception appliquées au site, l'ensemble paraît beaucoup plus raffiné.
00:12:17C'étaient là les compétences disponibles sur GitHub que vous pouvez tous utiliser.
00:12:20Mais nous utilisons d'autres compétences que nous avons créées et affinées nous-mêmes lors du développement de produits.
00:12:26Si vous souhaitez y accéder, vous pouvez rejoindre notre communauté AI Labs Pro.
00:12:31Il s'agit de compétences que nous avons développées nous-mêmes et d'autres issues de l'open source.
00:12:36Si vous avez apprécié notre travail et souhaitez soutenir la chaîne, c'est la meilleure façon de le faire.
00:12:41Le lien est dans la description.
00:12:42Ceci conclut cette vidéo.
00:12:44Si vous souhaitez soutenir la chaîne et nous aider à continuer à créer ce type de contenu, vous pouvez utiliser le bouton Super thanks ci-dessous.
00:12:50Comme toujours, merci d'avoir visionné et à bientôt pour la prochaine vidéo.