Des compétences de design incroyables avec Claude pour créer des sites web magnifiques
AAI LABS
컴퓨터/소프트웨어창업/스타트업AI/미래기술
스크립트
00:00:00Voici une erreur que commettent beaucoup de gens.
00:00:01Les modèles sont devenus bien meilleurs en design et on les voit s'améliorer chaque jour.
00:00:05Mais à un moment donné, tous ces superbes designs commencent à se ressembler.
00:00:08La vraie question est donc : qu'est-ce qui fait que votre design sort réellement du lot ?
00:00:12Cela dépend en grande partie des bons prompts et des bonnes instructions.
00:00:15C'est là que les compétences entrent en jeu, car celles qui fonctionnent vraiment peuvent désormais
00:00:19être regroupées dans un workflow réutilisable que l'on peut partager.
00:00:21Beaucoup de gens ont donc créé des compétences pour le design, et certaines des meilleures viennent
00:00:25directement des équipes qui se cachent derrière ces outils.
00:00:27Mais toutes les compétences ne se valent pas et beaucoup n'aident pas vraiment
00:00:31votre design.
00:00:32Pour situer le contexte, nous sommes une entreprise de logiciels et c'est notre chaîne AI Labs,
00:00:37où nous vous montrons comment optimiser vos processus avec l'IA, tout comme nous l'avons fait pour les nôtres.
00:00:41Avant d'aborder des compétences plus créatives, commençons par celle qui sert de base
00:00:46à de nombreuses autres compétences en design.
00:00:48La compétence de design front-end d'Anthropic est celle qui définit la direction artistique de votre site,
00:00:53et nous l'avons déjà utilisée dans notre vidéo précédente.
00:00:55Quand on génère assez de pages de destination avec l'IA, on commence à remarquer un schéma :
00:01:00les sites sont tous différents mais se ressemblent curieusement.
00:01:03C'est parce que le modèle a appris à partir d'une masse de données remplie des mêmes motifs.
00:01:07Alors dès qu'il doit faire un choix de design, il se tourne vers le plus courant.
00:01:11Le design dérive donc sans cesse vers les mêmes choix génériques et sûrs, peu importe le projet.
00:01:16réel.
00:01:17Et c'est précisément le problème que résout cette compétence.
00:01:19Elle échappe à ces choix de sécurité en forçant le modèle à s'engager sur une vraie direction artistique
00:01:24avant d'écrire quoi que ce soit.
00:01:25Au lieu de retomber sur le look classique et prévisible, il doit choisir une direction et s'y tenir.
00:01:30strictement.
00:01:30Elle pointe même du doigt le jargon ou la bouillie visuelle de l'IA directement dans son fichier skill.md,
00:01:36qui est en gros la feuille de route de la compétence, pour que le modèle arrête d'utiliser
00:01:41les polices surutilisées et les dégradés violets sur fond blanc.
00:01:42Et c'est bien plus important qu'il n'y paraît.
00:01:44Car quand la plupart des modèles créent une page de destination, ils cherchent simplement à être corrects.
00:01:48Mais cette compétence les pousse à s'engager pleinement dans une direction graphique.
00:01:52On l'utilise donc principalement pour des landing pages ou des portfolios où le design fait partie
00:01:56intégrante du produit, car cela donne au modèle un point de vue fort dès le départ.
00:02:00Pour la tester, nous lui avons demandé de créer une page de destination selon nos critères.
00:02:03Et elle a généré un site sans aucune des fioritures habituelles de l'IA, en s'en tenant à la direction
00:02:08choisie au lieu de retomber dans les paramètres par défaut.
00:02:11Dans le système de design d'AI Labs, nous avons deux compétences, chacune dédiée à une tâche précise.
00:02:15Il y a la compétence fonctionnelle qui construit l'interface utilisateur à utiliser, comme les tableaux de bord.
00:02:20Et il y en a une autre pour l'UI marketing.
00:02:22Dans la version marketing, le fichier skill.md utilise un prompt nommé “briser le standard”.
00:02:27C'est en fait la compétence de design front-end d'Anthropic.
00:02:29Juste un peu modifiée.
00:02:31Nous l'avons modifiée car l'originale était devenue un peu obsolète pour les nouveaux modèles.
00:02:35Opus 4.8 et Fable 5 sont tous deux sortis avec des guides montrant comment Claude a évolué
00:02:40et comment les instructions qu'on lui donne doivent s'adapter.
00:02:42Nous avons donc intégré une version de cela dans notre propre système de design.
00:02:45Comme nous l'avons déjà mentionné, la compétence de design d'Anthropic ne convient pas aux interfaces fonctionnelles.
00:02:50Dès qu'on crée de vrais produits, le problème change du tout au tout.
00:02:53On ne cherche plus seulement à faire quelque chose de joli.
00:02:55On essaie de concevoir un véritable produit
00:02:58doté de nombreux composants qui doivent tous se comporter correctement.
00:03:01C'est là qu'on passe des pages de destination à de véritables applications.
00:03:04Par exemple, sur AI Labs Pro, vous pouvez voir que la page d'accueil possède un design beaucoup plus artistique
00:03:09contrairement à la couche fonctionnelle de la communauté, qui paraît beaucoup plus sobre et classique,
00:03:14exactement comme n'importe quelle autre interface web avec laquelle vous avez l'habitude d'interagir.
00:03:18Et c'est là que ShadCN entre en jeu.
00:03:20Les modèles sont tout à fait capables de créer des tableaux de bord par eux-mêmes.
00:03:23Mais la plupart des composants couramment utilisés dans les tableaux de bord existent déjà,
00:03:27conçus selon des normes professionnelles par de vrais développeurs.
00:03:29Le modèle n'a donc pas besoin de générer des composants de zéro et de configurer ses propres animations.
00:03:34Il peut simplement piocher le composant déjà préconstruit dans le registre,
00:03:38qui est en gros une vaste bibliothèque de composants prêts à l'emploi.
00:03:41C'est tout l'intérêt de ShadCN.
00:03:43Au lieu que le modèle fabrique chaque composant à la main,
00:03:46il puise directement dans cette bibliothèque de pièces professionnelles pour les intégrer à votre application.
00:03:51Et c'est pourquoi le résultat ressemble à un vrai produit.
00:03:53Parce qu'on ne part pas d'un premier jet brouillon qu'on essaie de corriger au fil de l'eau.
00:03:57On démarre avec des éléments conçus pour être déployés.
00:03:59La configuration de ShadCN comporte deux parties qui fonctionnent ensemble.
00:04:02La première est la compétence.
00:04:03Considérez-la comme un livre de règles.
00:04:05ShadCN possède une manière spécifique et rigoureuse de construire les choses, et la compétence regroupe toutes ces règles.
00:04:10De plus, elle analyse la structure de votre propre projet.
00:04:12Ainsi, lorsque vous demandez au modèle de créer quelque chose,
00:04:15la compétence s'assure que le résultat respecte les règles de ShadCN tout en s'adaptant à votre projet.
00:04:20L'avantage est simple.
00:04:21Vous obtenez un code propre du premier coup au lieu de repasser sans cesse sur les mêmes erreurs.
00:04:26La deuxième partie est le MCP ShadCN.
00:04:29Il s'agit d'une connexion en direct avec le registre de ShadCN
00:04:32qui permet au modèle de parcourir et d'importer de vrais composants directement dans votre projet.
00:04:36Alors vous vous dites peut-être :
00:04:37pourquoi utiliser la compétence si le MCP existe déjà et fournit les composants nécessaires ?
00:04:41La réponse est que la compétence ne se charge qu'en cas de besoin,
00:04:44plutôt de rester en permanence dans la fenêtre de contexte comme le fait le MCP.
00:04:48La compétence ShadCN transmet à l'agent de code les règles,
00:04:50les structures et le contexte de votre projet.
00:04:53Ensemble, cela lui donne le discernement nécessaire pour utiliser les composants correctement.
00:04:56Pour une application classique, vous construisez les composants un par un et cette approche fonctionne bien.
00:05:00On pourrait donc s'attendre à ce que ce soit pareil pour un tableau de bord.
00:05:03Et c'est en partie le cas.
00:05:04Mais les tableaux de bord ont un problème fondamental différent des applications normales.
00:05:07Il s'agit moins de garder des composants cohérents que de savoir comment agencer toute l'information
00:05:12à l'écran.
00:05:12Cela implique de déterminer comment grouper les données et combien d'éléments afficher avant que l'écran ne soit surchargé.
00:05:17Il existe donc une compétence distincte appelée dashboard, conçue précisément pour cela.
00:05:21Créée non pas par ShadCN, mais par un autre développeur.
00:05:23Elle focalise le modèle entièrement sur cet agencement.
00:05:26Et comme elle raisonne d'abord sur cette disposition, le résultat ressemble vraiment
00:05:30à un outil d'analyse professionnel plutôt qu'à un fouillis.
00:05:33UIUX Pro Max fonctionne différemment de tout ce qu'on a vu jusqu'ici.
00:05:36La plupart des compétences donnent au modèle des principes de design en lui faisant confiance pour les appliquer.
00:05:40Mais celle-ci exécute d'abord un véritable moteur.
00:05:43Le problème qu'elle résout, c'est que même avec de bonnes orientations et de superbes composants,
00:05:47le modèle doit toujours décider quels choix esthétiques conviennent à votre produit.
00:05:51La plupart des compétences considèrent le design comme une notion générale de beauté.
00:05:54Tout finit donc par se ressembler, peu importe ce que vous construisez.
00:05:58Et c'est le fossé que comble cette compétence.
00:06:00Quand vous lui demandez de créer quelque chose, elle ne se jette pas directement dans le code.
00:06:03Elle lance d'abord un moteur.
00:06:04En arrière-plan, ce moteur effectue simultanément cinq recherches dans sa propre base de données open source
00:06:09hébergée sur GitHub.
00:06:11Il extrait les styles adaptés à votre produit parmi 161 catégories sectorielles.
00:06:15Et parmi ces choix, il sélectionne une palette de couleurs, une association de polices et une mise en page
00:06:20qui correspondent vraiment au secteur visé.
00:06:22Ensuite, il élimine tout ce qui ne conviendrait pas à ce type de produit et transmet au
00:06:26modèle un système de design sur mesure, qui correspond fondamentalement au livre de règles complet que le modèle suit pour
00:06:31créer le site web.
00:06:32Vous obtenez ainsi un site web vraiment solide, où chaque attribut de design correspond à votre idée de site.
00:06:37Au lieu que le modèle invente un design en espérant que ça fonctionne, il se base sur
00:06:41un design réellement réfléchi pour votre cas d'usage précis.
00:06:44Cette compétence est vraiment différente des autres.
00:06:46Les autres donnent au modèle un meilleur goût, tandis que celle-ci lui impose une décision avant de commencer,
00:06:50adaptée au type de produit que vous êtes en train de créer.
00:06:53Mais avant de continuer, un mot de notre sponsor, SciSpace.
00:06:56Si vous faites le moindre type de recherche, vous avez probablement utilisé ChatGPT pour cela.
00:07:00Le problème, c'est qu'il invente avec assurance des citations et des articles qui n'existent même pas,
00:07:04et vous ne vous en rendez généralement compte que lorsque cette fausse citation se trouve déjà dans votre document.
00:07:08SciSpace résout ce problème et s'intègre désormais directement dans ChatGPT.
00:07:12Pour le tester, j'ai ouvert SciSpace, je suis allé sur mon profil, et j'ai sélectionné l'application ChatGPT pour
00:07:17connecter SciSpace.
00:07:18J'ai demandé une revue de littérature, et ChatGPT a extrait des études pertinentes de la bibliothèque de SciSpace, qui compte plus de 280
00:07:24millions de vrais articles.
00:07:25Il les a également résumés et m'a fourni de vraies citations cliquables au lieu d'halluciner.
00:07:30Et chaque citation renvoie directement à la source.
00:07:33Vous pouvez ainsi ouvrir l'article et vérifier la ligne exacte vous-même en un clic.
00:07:37Lors de tests comparatifs, il a même trouvé plus d'articles pertinents que des outils comme Elicit et ConsenSys.
00:07:42Alors, si vous êtes étudiant ou chercheur, connectez l'application SciSpace dans ChatGPT en utilisant le premier lien
00:07:48dans la description et commencez à obtenir des recherches en lesquelles vous pouvez enfin avoir confiance.
00:07:52Jusqu'à présent, tout ce que nous avons ajouté donne un bel aspect au site lorsqu'il est statique.
00:07:56Mais une page statique ne suffit pas.
00:07:58Les animations sont en réalité importantes car elles améliorent l'expérience utilisateur et augmentent la durée
00:08:04pendant laquelle les gens restent sur le site web. Mais le problème, c'est que l'animation est le domaine où le code généré par IA s'effondre.
00:08:09Le vrai problème est que lorsque vous demandez à un modèle d'ajouter une animation, il fait presque toujours exactement
00:08:15la même chose : les éléments glissent à l'écran lorsque vous faites défiler la page. Cette unique transition au défilement est fondamentalement
00:08:20le seul mouvement qu'il connaît. Mais c'est aussi la même animation que sur la moitié des sites créés par IA,
00:08:25et c'est loin de ce que le vrai mouvement peut accomplir.
00:08:27C'est là qu'intervient la compétence GSAP. GSAP est la bibliothèque d'animation que beaucoup de sites professionnels
00:08:32utilisent déjà, et cette compétence vient directement de l'équipe qui la crée. Ainsi, au lieu que le
00:08:37modèle devine comment elle fonctionne, il travaille à partir des bons modèles, et cela couvre tout, des
00:08:42mouvements de base aux animations plus complexes qui se déclenchent lors du défilement d'une page. Cela gère également
00:08:47l'aspect des performances, c'est-à-dire la partie que la plupart des gens sous-estiment. Si les animations par IA semblent
00:08:52parfois saccadées, c'est en grande partie parce que le modèle déplace les éléments en modifiant leur taille ou leur position, et ces changements obligent le
00:08:57navigateur à reconstruire toute la page à chaque image. Par conséquent, la compétence oriente le modèle vers le
00:09:02type de mouvement que le navigateur peut gérer facilement, et cette seule habitude suffit à garder l'animation
00:09:07fluide. GSAP est à son meilleur sur les pages d'atterrissage et la narration basée sur le défilement, où tout se
00:09:12révèle comme une histoire, afin que les détails importants marquent le spectateur, et c'est ce qui transforme votre
00:09:16site web d'une page statique en une page dynamique. C'est pourquoi, dans le système de design d'AI Labs, nous avons explicitement
00:09:22mentionné dans la compétence UI marketing que chaque fois que des animations sont requises, elle doit utiliser la compétence GSAP
00:09:27pour implémenter ces animations sur les pages d'atterrissage. Ce groupe suivant de compétences n'est pas conçu pour des
00:09:33systèmes complets. Ce sont des préréglages de style que vous intégrez pour orienter le modèle vers un aspect visuel spécifique de votre choix.
00:09:38Il y a d'abord la compétence UI minimaliste. C'est le genre de design où, au lieu de surcharger
00:09:43la page, vous gardez les choses simples et épurées. C'est celle que l'on choisit pour les journaux ou les blogs où l'on souhaite que le
00:09:49contenu respire au lieu que tout se dispute l'attention. À l'opposé total, il y a
00:09:54la compétence UI brutaliste industrielle, qui adopte un style brut et lourd, anti-entreprise. Ensuite, il y a
00:09:59l'UI UX front-end, un outil polyvalent idéal pour des choix par défaut solides quand on ne veut rien d'extrême. C'est le
00:10:05choix sûr pour une page d'atterrissage de produit ou d'entreprise qui doit simplement paraître propre et professionnelle. Et enfin,
00:10:10il y a la compétence front-end UI haut de gamme qui donne aux sites l'apparence des pages de marques de mode de luxe.
00:10:16Vous ne devez donc pas empiler toutes ces compétences en même temps. Vous choisissez plutôt celle qui correspond à l'ambiance recherchée
00:10:21et vous la laissez guider le design. Ainsi, si vous avez déjà une direction en tête, ce sont les moyens les plus rapides
00:10:25de la transmettre directement au modèle. À ce stade, vous pouvez créer un site bien structuré,
00:10:30fluide et doté d'un véritable style. Mais les sites web de niveau professionnel nécessitent plus que de simples animations. Pour
00:10:36les applications professionnelles, il vous faut de véritables visuels d'images et de vidéos. Les modèles seuls se contentent généralement de récupérer des images
00:10:41d'archives sur Internet, et la plupart du temps, elles ne correspondent pas vraiment à vos besoins. Higgsfield est
00:10:46l'outil que nous utilisons pour éviter cela. Il intègre la génération d'images et de vidéos directement dans votre agent pour vous permettre de demander
00:10:51une image principale ou un clip d'arrière-plan là où vous travaillez, sans jamais quitter le terminal.
00:10:56Et Higgsfield n'est pas lié à un seul modèle. Il intègre la plupart des bons modèles d'images et de vidéos, ce qui vous évite d'être
00:11:01bloqué par les limites d'un seul outil et vous permet d'utiliser celui qui vous convient. Si vous faites de la vidéo,
00:11:06Cdance est celui qu'il vaut la peine d'utiliser, car c'est l'un des meilleurs modèles de génération vidéo du moment, vous garantissant
00:11:12de vrais visuels au lieu de texte statique ou de boîtes de substitution grises sur votre site web. Les compétences
00:11:17précédentes concernaient toutes le web. Nous allons maintenant aborder les compétences mobiles, où de nombreuses interfaces générées par IA s'effondrent
00:11:23discrètement pour une raison simple. Les modèles ont tendance à traiter un téléphone comme un petit site web, en reprenant les mêmes habitudes
00:11:29du web pour les réduire. Mais le mobile n'est pas un web plus petit. C'est un domaine à part entière avec ses propres règles. La façon
00:11:35dont les gens tiennent un téléphone, là où leur pouce peut réellement atteindre, la manière dont la navigation doit fonctionner, tout cela est différent
00:11:40et chaque plateforme possède son propre langage de design que le modèle ne respecte généralement pas correctement. Il existe
00:11:45plusieurs compétences pour optimiser également le développement mobile. La première est la conception d'UI d'applications mobiles, la couche
00:11:51de principes. Par défaut, le modèle traite les règles d'un bon design mobile de manière assez lâche, mais cette compétence
00:11:56les intègre directement. Cela couvre des aspects tels que la zone du pouce, qui maintient les boutons principaux là où votre
00:12:01pouce peut réellement aller, ainsi qu'un espacement cohérent et un ensemble de tailles de police limité et propre au lieu de 10
00:12:06tailles différentes. Et ce sont fondamentalement les mêmes règles qui se cachent derrière des applications populaires comme Airbnb, Duolingo,
00:12:11et Spotify. Le modèle finit donc par concevoir avec cette sensibilité au lieu de deviner. La deuxième est
00:12:16Material 3, qui est en gros la version mobile de ce que Shad CN a fait pour le web. Elle fournit au modèle
00:12:21le véritable système de design de Google, celui qui se cache derrière la plupart des applications Android et Pixel. Le langage de design de Google a une vraie
00:12:27personnalité. Il est audacieux et coloré, avec de grandes formes arrondies et des mouvements élastiques qui se situent à l'extrémité la plus
00:12:33expressive du design mobile. La compétence apporte tout le système de composants et de couleurs pour que vous lui donniez
00:12:38une couleur et qu'il construise un thème complet assorti. Il vérifie même dans quelle mesure votre application suit les recommandations de
00:12:43Google afin que l'application que vous créez corresponde exactement au système de design. Mais si vous développez de manière entièrement
00:12:48native sur iPhone, vous pouvez utiliser les compétences SwiftUI. Le design d'Apple se situe à l'opposé de celui de Google.
00:12:53Là où Material est audacieux et coloré, Apple est plus sobre et s'appuie sur cet aspect translucide et
00:12:58glaçuré qu'il appelle désormais verre liquide. La compétence extrait la documentation d'Apple directement
00:13:04d'Xcode sur votre Mac et la transmet au modèle comme ensemble de règles. Ainsi, le modèle ne devine pas ce qu'une application
00:13:09Apple doit inspirer, il travaille à partir des directives réelles d'Apple. Et au lieu de quelque chose qui
00:13:14ressemble vaguement à une application iPhone, vous en obtenez réellement une qui semble native. Et si vous développez pour
00:13:18iPhone et Android en même temps, il y a la compétence officielle Expo. Expo est un framework permettant
00:13:23de créer une seule application qui tourne à la fois sur Android et iOS. Vous ne construisez donc pas la même application deux fois. Cela couvre
00:13:29tout ce dont vous avez besoin pour une vraie application fonctionnant sur les deux plateformes, de la navigation et du style jusqu'aux fonctionnalités
00:13:34de la plateforme, le tout en un seul endroit. Ainsi, que vous cibliez une seule plateforme ou les deux à la fois, il existe une compétence
00:13:39qui connaît réellement le terrain. Désormais, toutes les compétences, les flux de travail et tout le reste que nous créons et
00:13:43vous présentons dans ces vidéos peuvent être retrouvés dans AI Labs Pro, qui est notre communauté. C'est là que vous
00:13:48obtiendrez les ressources, les packs de démarrage et plus encore, ainsi qu'un espace pour interagir avec une foule de passionnés partageant
00:13:53les mêmes idées, y compris notre équipe. Par conséquent, si ce que nous faisons vous a été utile et que vous souhaitez soutenir la chaîne,
00:13:58c'est le meilleur moyen de le faire. Le lien est dans la description. Ceci conclut notre
00:14:02vidéo. Si vous souhaitez soutenir la chaîne et nous aider à continuer à produire ce genre de vidéos, vous pouvez le faire en
00:14:07utilisant le bouton de super merci ci-dessous. Comme toujours, merci d'avoir regardé et à la prochaine.