Les 3 niveaux du design d'IA... Seuls quelques-uns atteignent le niveau 2
AAI LABS
Computing/SoftwarePhotography/Art
Transcript
00:00:00Si vous suivez cette chaîne depuis un certain temps, vous savez probablement que nous avons couvert de nombreux
00:00:03flux de travail et outils de design. Nous les avons tous testés pendant des mois et nous avons enfin compris
00:00:08pourquoi le même modèle peut vous donner quelque chose qui a l'air complètement personnalisé ou quelque chose qui
00:00:13crie immédiatement l'intelligence artificielle. Tout se résume à trois niveaux. Le niveau un consiste à concevoir une seule page et
00:00:19il y a une chose que la plupart des gens ignorent, c'est la raison exacte pour laquelle leur résultat a l'air générique. Le niveau
00:00:23deux est celui où vous arrêtez de concevoir des pages pour concevoir des systèmes, et le flux de travail ici est
00:00:28complètement différent. Et le niveau trois est la façon dont nous testons les designs les uns contre les autres pour trouver la version
00:00:34qui fonctionne réellement, ce que nous utilisons désormais sur chaque vrai projet. Donc le niveau un consiste à
00:00:39créer un bon design pour une seule page. C'est le niveau que la plupart des gens enseignent parce que c'est le
00:00:44fondement de tout bon design. Nous avons parlé dans notre vidéo précédente de la façon dont les capacités de design d'Opus 4.7
00:00:50se sont tellement améliorées et qu'une grande partie des clichés d'IA que nous voyions a disparu. Auparavant, lorsque nous
00:00:55lui donnions une invite simple comme créer une page de destination, il prenait directement le
00:00:59thème violet et blanc et construisait tout autour. Ce modèle spécifique s'est amélioré. Mais
00:01:04comme tout autre modèle d'IA, celui-ci converge également vers des motifs sûrs. Et d'après tous nos tests et
00:01:09expérimentations, nous avons constaté qu'il revient par défaut à un style particulier à chaque fois. Donc maintenant, chaque fois que
00:01:15nous voyons ce style, c'est la preuve évidente que le site vient d'Opus 4.7 et ce n'est qu'une question de temps
00:01:21avant qu'il ne devienne le prochain cliché d'IA. Nous avons donc besoin d'autres moyens pour améliorer ce site web.
00:01:25Maintenant, ce niveau dépend principalement du prompting et de la façon dont nous spécifions l'application, car
00:01:30si vous structurez correctement votre invite, vous pouvez réussir l'application du premier coup. L'invite doit commencer
00:01:35par l'intention du site web que vous souhaitez créer, puis mentionner les éléments non négociables, comme les
00:01:39choses exactes que vous voulez dans l'application et l'apparence souhaitée des éléments de l'interface. Après cela, vous spécifiez le
00:01:44système de couleurs. Ici, nous utilisons OKLCH, qui est fondamentalement une mesure de la clarté, de la chromaticité et de la teinte.
00:01:49Utiliser OKLCH au lieu du RVB ou du HSL habituel est préférable car cela représente les couleurs de la manière dont
00:01:55l'œil humain les perçoit réellement, ce qui gère mieux la clarté et l'équilibre. Cela crée également
00:01:59des dégradés plus fluides, contrairement aux codes hexadécimaux qui peuvent en produire d'apparence inégale. Une fois que vous avez
00:02:04défini la palette de couleurs, vous devez également mentionner les flux de contraste. Le contraste est un facteur très important
00:02:08du design d'interface car il crée une hiérarchie qui guide vos yeux vers ce qui
00:02:13compte. Sans contraste explicite, le modèle traite chaque élément comme ayant une importance égale,
00:02:18ce qui rend difficile l'établissement d'une hiérarchie visuelle. Et pour s'assurer que le site web ne ressemble pas à
00:02:22un cliché d'IA, vous devez également contrôler la typographie dans l'invite, en définissant quelles polices sont bannies
00:02:27en raison de leur aspect cliché et lesquelles utiliser dans les différentes zones du design. Des polices comme Inter et Geist
00:02:33sont devenues des signes révélateurs de clichés d'IA parce que chaque agent les utilise par défaut, donc les mentionner
00:02:38explicitement force le modèle à chercher ailleurs. Ensuite, vous définissez la mise en page et le rythme du site web,
00:02:42mais vous devez d'abord comprendre la symétrie et l'asymétrie. Les mises en page symétriques ont des composants
00:02:47placés uniformément sur la grille avec un aspect équilibré, ce qui convient mieux aux designs professionnels et
00:02:51épurés. Mais pour un look plus artistique, optez pour l'asymétrie car cela vous laisse plus de marge
00:02:56pour expérimenter. C'est particulièrement utile lorsque vous devez utiliser l'espace négatif, ce qui permet au design
00:03:01de respirer. Le type de produit que vous construisez détermine ce qui convient le mieux. Définissez ensuite toutes les sections
00:03:06que vous voulez, les matériaux que vous utiliserez et la façon dont le site web doit réagir de manière adaptative. Et la partie la plus importante
00:03:11est de mentionner les anti-motifs. Ce sont les caractéristiques des clichés d'IA comme le simple CTA centré,
00:03:17les icônes Lucid et les dégradés au design glassmorphique. Une fois que vous aurez donné cette invite à Claude Code ou
00:03:22à l'agent que vous utilisez, il analysera votre application et passera en revue les détails d'implémentation. Ensuite, il
00:03:27construira l'application comme décrit dans l'invite, avec de l'asymétrie pour l'aspect artistique et une utilisation correcte de l'espace négatif.
00:03:34Le niveau 2 consiste donc à conserver le même design sur chaque page du site, car la plupart des applications générées par des agents
00:03:40s'effondrent dès que vous quittez la page d'accueil. Souvent, lors de la génération d'applications entières avec des agents, vous avez peut-être
00:03:45exactement rencontré cela. La page d'accueil est plutôt jolie, mais lorsque vous allez sur les autres pages,
00:03:50elles ne suivent pas le style de l'interface de manière aussi cohérente qu'elles le devraient. Le tableau de bord se retrouve avec des styles de boutons différents,
00:03:55un espacement différent, une typographie différente, presque comme si l'agent avait oublié qu'il construisait
00:04:00la même application. Les autres pages finissent par donner l'impression de ne même pas faire partie du même site, ce qui trahit
00:04:05le fait que le site a été généré par un agent. Parfois, le design tient sur les pages d'authentification, mais ensuite sur
00:04:10le tableau de bord, le style se brise complètement. Pour cela, vous devez créer deux des fichiers les plus importants,
00:04:15Claude.md et Design.md. Ces deux fichiers permettent de maintenir la cohérence du design sur l'ensemble du site.
00:04:21Dans Claude.md, comme nous l'avons répété à plusieurs reprises, vous mettez uniquement les informations de votre projet, pas le design.
00:04:27En effet, ce fichier reste chargé en permanence dans la session et le contenu du design y figurerait
00:04:32distrairait l'agent lorsqu'il travaille sur autre chose, mais cela reste le fichier clé car il conserve
00:04:37le contexte du projet qui informe un bon design. Pour le design proprement dit, nous avons besoin d'un fichier séparé
00:04:42qui mentionne tout ce qui concerne le système visuel, la mise en page, les couleurs, la typographie et tous
00:04:47les détails que nous avons couverts au niveau 1. Le fichier design.md doit être du genre à pouvoir être pris en main par n'importe quel agent
00:04:52pour comprendre immédiatement ce qu'est le système visuel. Et tout comme au niveau précédent, vous devez
00:04:57définir le système de couleurs en OKLCH ici aussi. Pour créer ces deux fichiers, nous avons fourni à Claude Code une invite détaillée
00:05:03précisant ce dont chaque fichier a besoin et il a généré les deux fichiers pour nous. Le fichier Claude.md est court, il contient
00:05:09uniquement les détails du projet. Le fichier design.md est plus long avec chaque détail, y compris les codes de couleur,
00:05:15les choix typographiques et tout le reste. Mais ce n'est pas la fin du fichier design.md. Nous devons continuer
00:05:20à l'affiner au fil du temps. Nous plaçons donc une ligne au début, demandant à l'agent d'ajouter toute nouvelle valeur de design
00:05:25qu'il trouve dans ce fichier. De cette façon, chaque session commence à partir d'une version plus raffinée du système de design
00:05:30que la précédente. Mais laisser simplement Claude créer le fichier design.md ne suffit pas,
00:05:35car ce qu'il génère ne respecte pas correctement les meilleures pratiques. Google a mis en open source son
00:05:40modèle pour le fichier design.md. Le modèle contient également des commandes pour vérifier par recoupement votre design.md
00:05:46par rapport à celui-ci et signaler les erreurs. Vous pouvez donc simplement inciter votre agent à itérer en utilisant ces commandes
00:05:51pour perfectionner le design.md. Et ce n'est toujours pas la fin du niveau 2. Pour générer des designs d'un niveau suffisant
00:05:56à ce stade, vous devez également les auditer par rapport aux principes de design existants. Pour cela, il existe
00:06:00de nombreuses compétences open source qui font exactement cela. Vous pouvez utiliser n'importe laquelle d'entre elles, mais nous utilisons celle de VersaLab,
00:06:06car au lieu de coder en dur tous les principes à l'intérieur de la compétence, elle pointe vers une source externe
00:06:11qu'ils maintiennent activement. Ainsi, les principes restent à jour avec les meilleures pratiques actuelles au lieu
00:06:16d'être figés sur ce qui était à la pointe de la technologie lorsque la compétence a été écrite pour la première fois. Vous installez cette compétence
00:06:21dans le projet, l'exécutez, et votre design ressort en bien meilleure forme qu'avant. Mais avant de
00:06:25continuer, écoutons un mot de notre sponsor. J'ai récemment commencé à utiliser ZillysCloud et laissez-moi vous dire
00:06:30pourquoi. La plupart des applications RAG fonctionnent bien avec une poignée de documents, mais dès que vous y intégrez de vraies données,
00:06:35elles commencent à s'effondrer parce que l'installation n'a tout simplement pas été conçue pour supporter ce genre de charge.
00:06:40Milvus est la base de données vectorielle open source la plus populaire sur GitHub avec plus de 44 000 étoiles,
00:06:46et elle est conçue pour gérer ce type de charge, mais l'hébergement autonome signifie gérer soi-même l'infrastructure.
00:06:51C'est là qu'intervient ZillysCloud, la version entièrement gérée dotée de la même API, jusqu'à
00:06:5610 fois plus rapide, que vous pouvez configurer en quelques minutes sans changer une seule ligne de code.
00:07:00Nous avons donc exécuté une requête de recherche sémantique sur ZillysCloud, et les résultats sont réellement pertinents car elle
00:07:05comprend le sens et pas seulement les mots-clés, et le temps de réponse est presque instantané même avec un grand
00:07:11jeu de données. Nous avons également exécuté une requête de recommandation à partir d'un article. Elle a trouvé les cinq plus similaires
00:07:16dans l'ensemble du jeu de données, classés par similarité en moins d'une seconde. Et le tableau de bord suit les performances de votre cluster,
00:07:21l'utilisation du stockage et les métriques de données, y compris les comptes de collection et d'entités en temps réel. Aucune carte de crédit
00:07:27requise, cliquez simplement sur le lien dans le commentaire épinglé et essayez ZillysCloud gratuitement.
00:07:31Le niveau trois consiste donc à tester le design de manière programmatique, de la même manière que les ingénieurs vérifient
00:07:36le code avec le TDD. Nous savons bien qu'on ne peut pas écrire visuellement des tests comme on le fait avec du code. Avec le code,
00:07:41il y a des entrées et des sorties claires pour tout. Le design n'a pas cela car il est plus subjectif
00:07:46et ne peut pas être quantifié comme le code, mais ce n'est pas parce qu'il est subjectif qu'on ne peut pas écrire
00:07:51de tests pour lui. La raison pour laquelle le TDD fonctionne pour le code est que le test fixe le comportement attendu,
00:07:57et l'implémentation doit satisfaire cette exigence. La même idée s'applique au design, simplement avec d'autres types
00:08:01d'exigences. Dans l'application que nous construisions, la première étape était la même qu'avant : créer les
00:08:05fichiers clod.md et design.md avant même de penser à l'implémentation. Les tests doivent toujours être
00:08:12écrits avant le code, de cette façon l'implémentation peut réellement être testée par rapport à eux. Si nous écrivons les tests
00:08:17après l'implémentation, l'agent se relève. Il écrit simplement des cas de test qui s'optimisent en fonction du
00:08:22code existant, parce que ce code est déjà dans son contexte. Écrire le test en premier force
00:08:27l'implémentation à s'adapter au test au lieu que le test ne s'adapte à l'implémentation. Nous utilisons donc les fichiers de design
00:08:32comme source de vérité pour les tests, car ces fichiers contiennent tous les anti-motifs que nous pouvons
00:08:37vérifier de manière programmatique. Chaque anti-motif du fichier design.md devient un cas de test. Chaque règle de couleur,
00:08:44chaque contrainte d'espacement, chaque choix typographique fait l'objet d'une vérification programmatique. Nous avons donné à Claude Code une
00:08:49invite détaillée pour rédiger les cas de test en spécifiant chaque section sur laquelle il doit se concentrer. Aussi, si vous
00:08:54appréciez notre contenu, pensez à cliquer sur le bouton J'aime car cela nous aide à créer plus de contenu de ce type
00:08:59et à toucher plus de monde. Avec votre invite, il écrira tous les cas de test pour le design
00:09:04de l'application. Il écrit plusieurs types de tests. Il y a les tests statiques, qui vérifient directement
00:09:09les anti-motifs que nous avons mentionnés dans l'invite. Ensuite, il y a les tests visuels, qui utilisent fondamentalement
00:09:14Playwright en arrière-plan et exécutent des tests de non-régression pour améliorer progressivement le site. Il va également
00:09:19écrire des cas de test pour d'autres composants et fonctions d'assistance comme scan et report. Maintenant, ces tests
00:09:24vérifient les anti-motifs statiques, mais les tests de design nécessitent autre chose. Pour cela, il y a
00:09:28un autre outil appelé Visly Test, qui est fondamentalement une CLI qui réalise du TDD pour l'interface utilisateur. La façon dont cela fonctionne
00:09:34est qu'il exécute un TDD local, où vous pouvez vérifier le design au fur et à mesure que le code change. Vous pouvez ainsi surveiller les
00:09:39diffs vous-même au lieu de vous fier à l'autosurveillance de l'agent. Vous obtenez également un meilleur diff avec
00:09:44des métadonnées et d'autres détails, ce qui accélère la révision. Sans ces métadonnées, vous comparez simplement deux
00:09:49captures d'écran côte à côte en espérant repérer la différence. Avec lui, Visly vous indique exactement quels
00:09:54pixels ont changé et de combien. Pour l'utiliser, installez d'abord la CLI en exécutant la commande d'installation de la
00:10:00documentation. Une fois configuré et initialisé, il est prêt à l'emploi. Ouvrez maintenant Claude Code et dites-lui d'utiliser
00:10:05le TDD et d'implémenter la partie de l'interface utilisateur de votre choix en utilisant la CLI Visly comme support de test. Lorsque
00:10:10vous exécutez la commande TDD de Visly, un serveur local démarre et surveille les modifications de captures d'écran. Pour envoyer les
00:10:16captures d'écran, Claude écrit essentiellement des tests distincts nommés Visly. Ces tests utilisent des mécanismes de
00:10:21capture d'écran Playwright pour pousser les images vers la visionneuse sur le serveur. De là, vous pouvez approuver ou refuser le
00:10:27design et afficher les diffs le comparant à la version précédente. Chaque diff rejeté devient un retour que
00:10:32l'agent utilise pour ajuster la passe suivante. Au fil de quelques itérations, le design converge vers ce que vous voulez réellement
00:10:37au lieu de ce que l'agent pense que vous voulez. Les invites utilisées ici peuvent être trouvées dans AI Labs Pro
00:10:43pour cette vidéo et pour toutes nos vidéos précédentes, d'où vous pouvez les télécharger et les utiliser pour vos propres
00:10:47projets. Si vous avez trouvé de la valeur dans ce que nous faisons et souhaitez soutenir la chaîne, c'est la meilleure façon de le faire. Les
00:10:52liens sont dans la description. Ceci nous amène à la fin de cette vidéo. Si vous souhaitez soutenir la chaîne
00:10:57et nous aider à continuer à faire des vidéos comme celle-ci, vous pouvez le faire en utilisant le bouton de remerciement ci-dessous. Comme
00:11:02toujours, merci d'avoir regardé et à la prochaine.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video