Transcript
00:00:00"L'IA n'a aucun goût et c'est votre faute."
00:00:03La raison pour laquelle vos résultats visuels sont si médiocres
00:00:05est parce que vos prompts sont si médiocres.
00:00:08Vous n'utilisez pas le type de terminologie,
00:00:10de langage et de nomenclature
00:00:11qu'un vrai designer utiliserait.
00:00:13Mais heureusement pour nous, j'ai trouvé une solution.
00:00:16Elle s'appelle Impeccable.
00:00:17Et c'est un dépôt GitHub open source
00:00:20qui, à toutes fins utiles, est une compétence unique
00:00:23que nous pouvons importer dans Cloud Code
00:00:25qui résout ce problème précis.
00:00:27Cela fournit à Cloud Code un langage de conception
00:00:29qui lui apprend à quoi ressemble réellement un bon design
00:00:32tout en lui indiquant quels types de mauvais designs éviter.
00:00:36Et aujourd'hui, je ne vais pas seulement vous montrer comment fonctionne la compétence,
00:00:39nous allons l'utiliser pour construire un tout nouveau site web
00:00:42et pour modifier l'un de mes sites web qui existe déjà.
00:00:45Donc, à la fin de cette vidéo, vous n'aurez plus d'excuse
00:00:48lorsqu'il s'agit de créer des designs front-end médiocres.
00:00:51Impeccable est donc un dépôt GitHub open source
00:00:54qui nous donne une compétence unique
00:00:55qui nous permet de créer des designs front-end
00:00:58qui ne sont pas nuls.
00:01:00C'est une compétence unique,
00:01:01mais c'est un peu sous-estimer la chose
00:01:03car cette compétence unique comprend 23 commandes différentes.
00:01:07Elle contient sept fichiers de référence spécifiques au domaine.
00:01:10Elle nous indique quels types d'anti-modèles éviter
00:01:13et elle nous permet même de modifier des éléments directement dans notre navigateur.
00:01:17C'est donc un outil très robuste.
00:01:20Ce n'est pas juste une compétence de design front-end
00:01:22qui s'étend sur quelques paragraphes
00:01:24à propos de ce que Cloud Code devrait faire.
00:01:26Mais cette complexité peut être un peu écrasante
00:01:28car il y a littéralement 23 commandes différentes
00:01:31qui effectuent un certain nombre de tâches différentes
00:01:34en ce qui concerne votre design.
00:01:35Maintenant, il les décompose toutes ici à l'intérieur du dépôt,
00:01:37mais la vérité, c'est que vous ne vous souviendrez jamais de toutes.
00:01:40Mais deux choses aident à ce niveau.
00:01:42Premièrement, évidemment, Cloud Code fera un assez bon travail
00:01:44pour déterminer celle que vous devriez utiliser.
00:01:46Mais deuxièmement, ils ont un site web complet
00:01:49qui nous montre aussi ce que fait chacune de ces 23 compétences.
00:01:53Le GitHub renvoie donc au site web,
00:01:54qui est impeccable.style.
00:01:56Et le truc cool, c'est que pour chaque compétence applicable,
00:01:59nous pouvons voir à quoi ressemble quelque chose avant,
00:02:02ce qui est Cloud Code pur,
00:02:03et à quoi ça ressemble après
00:02:05avoir utilisé cette commande impeccable spécifique.
00:02:07Donc, assez soigné.
00:02:09Impeccable a vraiment sept piliers de design,
00:02:12la typographie, la couleur, le design spatial, la réactivité,
00:02:15les interactions, le mouvement et la rédaction UX.
00:02:17Donc, il ne s'agit pas seulement de couleurs et de choses comme ça.
00:02:21C'est assez complet.
00:02:22Et juste ici, nous pouvons faire défiler
00:02:25toutes ces différentes commandes.
00:02:27Et comme je l'ai dit, voir à quoi elles ressemblent
00:02:29en utilisant la compétence et en ne l'utilisant pas.
00:02:31Donc, si vous vous dites, hé, que fait exactement ceci ?
00:02:34Est-ce que je peux le voir en action ?
00:02:35Eh bien, c'est l'endroit idéal pour le faire.
00:02:37Le site web inclut également une étude de cas
00:02:39montrant comment ils ont créé ce site web
00:02:40avec impeccable et une seule image.
00:02:42Et je trouve que ça a l'air plutôt cool.
00:02:43Et enfin, ils présentent ce mode live,
00:02:45avec lequel nous allons un peu jouer,
00:02:47qui est en alpha,
00:02:48et nous permet de modifier réellement notre site web
00:02:51via le navigateur, comme je l'ai dit plus tôt.
00:02:53Il possède également une extension Chrome et une CLI,
00:02:56mais pour être honnête,
00:02:56nous obtenons environ 99 % de la valeur grâce à la compétence.
00:02:59C'est donc sur cela que nous nous concentrerons aujourd'hui.
00:03:01Pour installer ce truc, c'est une seule ligne de code,
00:03:04et tout ce que vous avez à faire est de la copier,
00:03:06d'aller dans votre terminal et de la coller.
00:03:07Maintenant, en ce qui concerne l'utilisation d'impeccable,
00:03:09il y a vraiment deux voies à suivre.
00:03:11L'une est Greenfield,
00:03:12où nous construisons un site web à partir de zéro,
00:03:14et la deuxième est la modification d'un site existant.
00:03:17Aujourd'hui, nous ferons ces deux choses et plus encore,
00:03:20parce que je ne vais pas seulement vous montrer
00:03:22comment le construire à partir de zéro,
00:03:23je vous montrerai aussi à quoi ça ressemble
00:03:25quand nous construisons à partir de zéro avec une sorte d'image de référence
00:03:27avec un mood board, pour ainsi dire.
00:03:30Après avoir fait ça, nous irons sur mon site web actuel
00:03:33et nous verrons ce qu'impeccable pense de celui-ci
00:03:36et quel genre de travail bâclé nous pouvons améliorer sur mon propre travail.
00:03:41Enfin, nous jetterons un œil à impeccable live,
00:03:43qui est en alpha,
00:03:44et nous verrons à quel point ce truc est bon tel qu'il est aujourd'hui.
00:03:48Mais avant de plonger dans la construction réelle,
00:03:50un petit mot du sponsor préféré de tout le monde, moi-même.
00:03:54Le mois dernier, j'ai publié ma Cloud Code Masterclass,
00:03:56et c'est le meilleur moyen de passer de zéro à AI Dev,
00:03:59surtout si vous ne venez pas d'un milieu technique.
00:04:02Je mets à jour ce cours chaque semaine,
00:04:05c'est donc le meilleur endroit pour comprendre
00:04:07comment utiliser réellement cet outil incroyable.
00:04:10Nous nous concentrons sur des cas d'utilisation réels.
00:04:12Je viens tout juste de sortir tout mon
00:04:13plan de cours Cloud Code Agenic OS.
00:04:16Donc, si vous voulez mettre la main dessus,
00:04:18vous pouvez le trouver dans Chase AI Plus.
00:04:20Il y a un lien vers cela dans le commentaire épinglé.
00:04:23Alors, commençons,
00:04:24et nous allons lancer le bal avec le projet Greenfield.
00:04:27Nous allons donc construire un site web à partir de zéro.
00:04:29Encore une fois, il y a tellement de commandes,
00:04:31cela peut devenir un peu déroutant.
00:04:32Si vous commencez quelque chose à partir de zéro,
00:04:35je suggère de commencer avec impeccable craft,
00:04:39parce qu'il va inclure
00:04:41certaines de ces commandes subsidiaires comme impeccable teach.
00:04:44Maintenant, que signifient toutes ces choses ?
00:04:45Eh bien, impeccable craft signifie à peu près
00:04:48qu'il va passer par sa propre version du mode plan
00:04:50et poser des questions sur notre site web, notre produit,
00:04:53ce que nous essayons réellement de construire.
00:04:55Et dans ce processus, il va créer deux fichiers.
00:04:59Il va créer un product.markdown
00:05:01et un design.markdown.
00:05:02Maintenant, le design.md est à peu près la même chose
00:05:07que ce que nous avons vu dans Google Stitch.
00:05:09Vous vous souvenez de Google Stitch, n'est-ce pas ?
00:05:11L'outil de design gratuit de Google.
00:05:13Vous avez tout ce système de design,
00:05:14et vous avez ce fichier design.md,
00:05:16qui est ce fichier markdown très approfondi,
00:05:20disant à l'IA comment construire quelque chose.
00:05:21Toute cette construction design.md
00:05:24est en train de devenir une sorte de norme industrielle, pour ainsi dire.
00:05:27Vous voyez cela partout ces jours-ci.
00:05:29Et impeccable suit cette approche.
00:05:31Il va donc essentiellement nous interviewer
00:05:32et comprendre ce que nous construisons
00:05:34et à quoi nous voulons qu'il ressemble.
00:05:36Et une fois qu'il a mené l'interview,
00:05:37il va aller de l'avant et construire la page de destination pour nous.
00:05:39Donc, à l'intérieur de Cloud Code,
00:05:41je suis dans un nouveau répertoire appelé impeccable-test.
00:05:44La commande est impeccable-spacecraft.
00:05:47Et le prompt est : construisons une page de destination
00:05:49pour mon faux produit SaaS Lighthouse.
00:05:51C'est une plateforme d'analyse pour les fondateurs solo/petites équipes.
00:05:54Posez-moi toutes les questions que vous voulez.
00:05:56C'est à peu près le même prompt
00:05:58que j'ai donné à Huashu Design dans ma dernière vidéo.
00:06:01Si vous ne l'avez pas regardée, faites-le absolument,
00:06:03qui est essentiellement un clone de Cloud Design.
00:06:06Ce sera donc intéressant de voir
00:06:08comment impeccable se compare à ce système de design.
00:06:11Et si vous n'avez pas regardé cette vidéo,
00:06:13je la mettrai en lien ci-dessus.
00:06:14Il est donc revenu avec 13 questions.
00:06:16Les quatre premières concernent toutes le produit,
00:06:18comme qui est le client réel ?
00:06:19Comment décririez-vous Lighthouse ?
00:06:21Quel est l'état d'esprit du visiteur ?
00:06:22Et quel est le CTA principal ?
00:06:23Quel est le but réel de cette page de destination ?
00:06:25Les quelques questions suivantes concernent la voix et le look
00:06:28avant de passer à la portée.
00:06:29Est-ce qu'on fait juste le héros seulement ?
00:06:30Défilement complet, vraies captures d'écran ?
00:06:32Genre, avez-vous d'autres actifs pour moi ?
00:06:34Et ce que j'aime ici, c'est la profondeur des questions.
00:06:36C'est plus de questions que ce que Huashu Design nous a posées
00:06:40dans la dernière vidéo.
00:06:41Et c'est assez proche du nombre de questions
00:06:43que vous obtiendriez de quelque chose comme Claude Design.
00:06:44C'est très approfondi et j'aime voir ça.
00:06:46Donc, ce que je vais faire, c'est simplement y répondre.
00:06:49Je vais rester assez standard.
00:06:50Je n'aurai rien à faire de fou.
00:06:52Et nous allons demander un défilement complet.
00:06:53Voici donc ce qu'impeccable nous a donné lors de sa toute première tentative
00:06:56avec des conseils assez minimes.
00:06:57Tout ce que nous avons fait, c'est répondre à ses questions.
00:06:59Nous ne lui avons donné aucun type d'actif ou même d'exemple.
00:07:01Maintenant, tout de suite,
00:07:02je ne pense certainement pas à du travail bâclé dès le départ quand je vois ça,
00:07:05bien que vous commenciez à voir cette couleur crème
00:07:08et cette police avec empattement un peu partout dans ces
00:07:11designs front-end plus modernes, surtout des trucs comme Claude Design.
00:07:13J'aime bien ce tableau de bord qu'il a trouvé,
00:07:16j'aime vraiment ça.
00:07:18J'aime que je ne vois pas juste votre standard, vous savez,
00:07:20quatre boîtes bento que vous voyez dans absolument
00:07:23tous les sites web de design par IA.
00:07:25Cette partie a l'air plutôt bien.
00:07:26Nous avons la citation, la tarification complète,
00:07:30et puis genre, hé, allez-y et donnez-nous votre e-mail.
00:07:32Donc, pour un premier essai, c'est assez réussi.
00:07:35Mais ce que j'aime vraiment faire dernièrement,
00:07:37quand il s'agit de mes conceptions Web avec Claude code,
00:07:40c'est que je ne le laisse pas simplement me donner un résultat unique comme celui-ci.
00:07:44Alors, ce que je suis allé dire à Impeccable, alias Claude code, c'est
00:07:47que je ne veux pas juste une seule mise en page du site.
00:07:50Comme vous le voyez ici, c'était le premier essai qu'il m'a fourni.
00:07:52Je veux voir trois variantes différentes parmi lesquelles choisir.
00:07:56Et je veux qu'elles soient toutes assez distinctes.
00:07:59De plus, je veux pouvoir cliquer sur chacune d'elles
00:08:01et je veux toutes les voir côte à côte.
00:08:03Je veux donc voir des sortes de macro-mises en page
00:08:05avant que nous ne plongions vraiment dans les détails
00:08:08et que nous commencions à jouer avec les composants.
00:08:09Et c'est ce qu'Impeccable m'a donné.
00:08:11Nous avons donc celle de style éditorial que nous venons de regarder.
00:08:15Il en a créé une qu'il a appelée « drenched » juste ici.
00:08:17Un style vraiment différent, avec beaucoup plus de couleurs.
00:08:20Et ensuite, nous avions le style brutaliste.
00:08:22Voici donc un aperçu de la version « drenched »,
00:08:24vraiment beaucoup plus différente.
00:08:26Je dirais qu'il y a des points communs sur la forme,
00:08:29mais cela semble assez différent de la plupart des créations par IA.
00:08:34En parcourant le tout, vous savez, j'aime assez l'audace
00:08:39de ce site, même si je ne suis pas sûr des couleurs.
00:08:43Mais je dirais que j'aime bien ce style brutaliste.
00:08:44C'est très monochrome,
00:08:46mais j'aime la façon dont les chiffres sont disposés.
00:08:48J'aime la façon dont les blocs sont comme décalés.
00:08:52Les lignes ne sont pas totalement alignées.
00:08:54J'aime vraiment celle-ci.
00:08:56Je trouve que c'est très cool et très différent.
00:08:58Et donc, je pense que ce que nous allons faire, c'est opter
00:09:02pour celle-ci pour le moment.
00:09:04Et juste pour que vous sachiez, toute cette histoire de triple design
00:09:07et de tout voir d'un seul coup,
00:09:08ce n'est pas quelque chose d'inhérent à Impeccable.
00:09:12C'est quelque chose que je fais.
00:09:13C'est juste une seule instruction.
00:09:14Et je vous suggère fortement de faire cela, peu importe le genre
00:09:17de designs ou d'outils que vous utilisez.
00:09:19Je pense que c'est quelque chose que j'ai pris chez Stitch,
00:09:23parce que Google Stitch rend cela très facile
00:09:25de faire ce genre de choses où l'on peut voir
00:09:26toutes ces différentes variantes sur la même page
00:09:29et comparer les contrastes.
00:09:30Et pour moi personnellement, je dois voir ces éléments visuels
00:09:33pour avoir la moindre idée de là où je veux aller.
00:09:37Je vous suggère donc vivement de faire cela.
00:09:38Vous n'êtes pas obligés d'en faire trois.
00:09:39Vous pouvez en faire six, ou un million.
00:09:41Et aussi, lorsque vous demandez à Claude code
00:09:42de faire ce genre de choses, dites-lui simplement :
00:09:44« Je veux pouvoir voir les trois sur la même page. »
00:09:47« Je veux pouvoir les ouvrir en plein écran une par une. »
00:09:50Et vous pouvez aussi lui demander de vous donner un tas
00:09:53d'options macro différentes,
00:09:55et ensuite, vous pouvez simplement choisir parmi elles
00:09:57puis lui demander de créer celles-ci.
00:09:57Parce qu'évidemment, cela prend un peu de temps de générer tout ça.
00:09:59Alors maintenant que nous avons une page de destination qui nous plaît,
00:10:01il est temps de commencer à modifier certaines choses,
00:10:03ce qui est l'occasion d'utiliser le nouveau Impeccable Live.
00:10:06Donc tout ce que nous avons à faire, c'est de dire :
00:10:07« Hé, lançons Impeccable Live sur cette page Brutaliste. »
00:10:10Maintenant, une fois que vous avez lancé cette commande,
00:10:12Claude code vous indiquera que le mode Live est activé.
00:10:14Il devrait vous donner un lien vers l'hôte local
00:10:18sur lequel vous devez être, ou vous pouvez simplement rafraîchir votre navigateur.
00:10:20Et donc, à l'intérieur, vous pouvez maintenant voir,
00:10:22pendant que je fais défiler, que les éléments sont maintenant mis en surbrillance.
00:10:26Et en bas ici, nous avons aussi quelques éléments.
00:10:29Donc tout d'abord, nous avons design.md.
00:10:32Cela fait apparaître la barre latérale sur le côté droit.
00:10:35Et si j'appuie sur « raw », je peux voir tout ce qui a réellement été créé.
00:10:39Maintenant, si je clique sur un composant particulier
00:10:41comme ce texte principal, des options apparaissent.
00:10:45Tout d'abord, nous avons « free form », qui est :
00:10:47« Hé, je lui donne juste une instruction textuelle »,
00:10:50ou bien j'ai accès à pratiquement
00:10:52toutes ces différentes commandes Impeccable.
00:10:54Donc : plus audacieux, plus calme, distiller, polir, adapter.
00:10:56Ce sont toutes juste une partie de ces 23 commandes Impeccable
00:11:00dont nous parlions plus tôt.
00:11:02Alors disons que je choisis quelque chose comme « bolder » (plus audacieux).
00:11:04« Bolder » est essentiellement une instruction préconçue.
00:11:09Et si nous regardons ici dans la documentation d'Impeccable,
00:11:12ce que « bolder » va faire, c'est le rendre plus audacieux.
00:11:15Voici l'avant, voici l'après.
00:11:18Cela le rend juste un peu plus tape-à-l'œil.
00:11:21La définition exacte est qu'il pousse les designs sûrs
00:11:26vers plus d'impact sans sombrer dans le chaos,
00:11:28dit quand l'utiliser, comment ça marche et tout ça.
00:11:31Alors si nous appliquons « bolder » là-dessus, et pour être honnête,
00:11:32j'ai l'impression que c'est déjà assez audacieux.
00:11:34Je ne sais pas si c'est le meilleur choix.
00:11:35Je peux affiner cela davantage.
00:11:37Je peux donc combiner « bolder » avec n'importe quelle instruction.
00:11:40Disons que j'écris « ajouter de la couleur ».
00:11:43J'ai alors cette option ici qui dit
00:11:46fois trois, fois quatre, fois deux.
00:11:47C'est le nombre de variantes qu'il va me montrer.
00:11:50Et ensuite, on appuie sur « go ».
00:11:51Donc ceci est, d'une certaine manière, une micro-version
00:11:56de ce que nous faisions juste avant en termes de variantes,
00:11:58où je me dis : « Très bien, donne-moi cette chose ».
00:12:00« Modifions-la, montre-moi des variantes. »
00:12:03Maintenant, nous faisons cela à un micro-niveau
00:12:06et nous pouvons être encore plus précis
00:12:08en termes de ce que nous recherchons, n'est-ce pas ?
00:12:09Dans ce cas, nous faisons « bolder ».
00:12:10Nous aurions pu choisir n'importe laquelle de ces 12 options,
00:12:13et voici ce qu'il a trouvé.
00:12:14Alors oui, très audacieux par rapport aux autres options.
00:12:17Ceci est la variante un, la variante deux,
00:12:21un peu plus sobre,
00:12:22et ensuite la variante trois, assez sauvage, n'est-ce pas ?
00:12:25Aussi, cette capacité d'ajuster la variante.
00:12:27Donc, si je clique sur « tune » (ajuster),
00:12:30nous pouvons en quelque sorte changer le décalage.
00:12:31Par exemple, pour ce style « sauvage », à quoi voulez-vous qu'il ressemble ?
00:12:36À quoi voulez-vous que ressemblent les couleurs ?
00:12:39Alors, encore une fois, si nous repensons à ma dernière vidéo
00:12:42ou à Claude design, comme des ajustements,
00:12:44encore une fois, ce sont essentiellement des micro-ajustements
00:12:47et cela s'applique à toutes les variantes.
00:12:50Cacher la clé, montrer la clé, il y a beaucoup de choses à faire.
00:12:53Disons que nous voulons opter pour celle-ci.
00:12:54Si je veux choisir celle-ci, qu'est-ce que je fais ?
00:12:56J'ai juste à cliquer sur « accepter » et c'est maintenant appliqué.
00:13:00Maintenant, si vous cliquez sur « accepter » et que ça bugue comme ça,
00:13:02vérifiez simplement le Claude code,
00:13:03il est en train d'appliquer vos changements et de recharger.
00:13:06Et voilà à quoi cela ressemble avec les changements effectués.
00:13:09Maintenant, la seule chose dont je n'ai pas parlé, c'est « detect ».
00:13:10Si j'appuie sur « detect » ici, ce qu'il va chercher
00:13:13c'est essentiellement voir : « Y a-t-il du travail bâclé par l'IA ici ? »
00:13:17Est-ce qu'il détecte l'un de ces anti-modèles
00:13:19dont nous avons parlé plus tôt ?
00:13:20Maintenant, parce que cela a été créé entièrement avec Impeccable,
00:13:24je doute fortement qu'il trouve quoi que ce soit,
00:13:26et c'est pourquoi nous ne voyons rien apparaître.
00:13:28Mais nous verrons plus tard, quand nous jetterons un œil à mon propre site,
00:13:31si c'est le cas.
00:13:32Mais c'est à peu près comme ça que fonctionne le système Live.
00:13:34Et je pense que cette partie est vraiment cool et c'est ce qui le distingue,
00:13:37je pense, des autres outils et dépôts de design front-end
00:13:41que vous avez vus par le passé,
00:13:42surtout le fait que nous pouvons créer des variantes supplémentaires.
00:13:45Je suis très enthousiaste à l'idée de pouvoir voir
00:13:47toutes ces différentes variantes à la fois
00:13:49et de pouvoir les ajuster à ce micro, micro, micro niveau.
00:13:52Donc j'adore ça, mais encore une fois, c'est de l'alpha.
00:13:54Alors, vous savez, peut-être que vous rencontrerez des erreurs.
00:13:57Il y a quelques petites choses
00:13:59qui semblent être un peu rugueuses sur les bords,
00:14:01comme le rechargement que vous venez de voir, mais bon,
00:14:03je trouve que c'est super cool.
00:14:04Alors vérifiez absolument cela si vous utilisez Impeccable.
00:14:07Ne le laissez pas juste créer et en rester là.
00:14:09Allez dans « Live » et jouez avec ça.
00:14:11Maintenant, une fois que vous avez la page Web à un endroit qui vous plaît,
00:14:13il y a d'autres commandes que vous avez la possibilité d'exécuter.
00:14:16Nous pouvons exécuter quelque chose comme « polish »
00:14:18où il effectue un passage final sur le système de design.
00:14:20Nous pouvons faire quelque chose comme « harden »
00:14:22où il va jeter un œil aux cas extrêmes et aux erreurs
00:14:24et s'assurer que tout fonctionne.
00:14:25Comme je l'ai dit, c'est très, très sophistiqué
00:14:28et assez approfondi en termes de nombre de commandes que nous pouvons exécuter.
00:14:30Mais pour gagner du temps, ce que nous allons faire maintenant,
00:14:33c'est que je vais vous montrer comment construire à partir de zéro,
00:14:35mais cette fois-ci, nous allons utiliser
00:14:38essentiellement un tableau d'humeur ou une maquette
00:14:40du type de vision que nous voulons soumettre à Impeccable.
00:14:43Parce que je veux voir à quoi cela ressemble
00:14:45quand nous copions un peu leur étude de cas,
00:14:48parce que ce qu'ils ont fait, c'est qu'ils ont pris cette image,
00:14:50l'ont insérée dans Claude Code, l'ont mise dans Impeccable,
00:14:52et, tout va bien, ils ont créé ce site Web,
00:14:53et ils ont pu obtenir quelque chose
00:14:54qui avait l'air plutôt génial.
00:14:55Alors j'ai créé quelques images
00:14:58qui correspondent à l'esthétique utilisée par Impeccable dans leur étude de cas,
00:15:02mais nous utilisons Lighthouse à la place,
00:15:04pour que nous puissions au moins obtenir un test
00:15:07qui soit un peu une comparaison un pour un.
00:15:09J'aime assez celle-ci, donc je pense que nous allons choisir celle-là.
00:15:11Tout comme avant, j'exécute « impeccable craft » comme compétence.
00:15:15Il m'a ensuite posé une série de questions similaires à celles d'avant,
00:15:18et on m'a pratiquement dit de juste m'en tenir
00:15:21au type d'humeur et d'ambiance
00:15:22que vous avez tirés de l'image que je vous ai donnée.
00:15:24C'est donc ce qu'il a trouvé,
00:15:26et honnêtement, cela laisse un peu à désirer.
00:15:29Je pense que juste lui jeter ce genre de tableau d'humeur
00:15:33et lui dire : « Hé, créons un site Web à partir de ça »,
00:15:35il a eu des difficultés.
00:15:37Je pense qu'il a fait de son mieux.
00:15:38Genre, nous avons toujours le tableau de bord, il a les couleurs,
00:15:41mais ce n'est pas aussi bien que ce qu'ils ont créé,
00:15:43car je pense que comme je lui ai juste donné cet élément,
00:15:46et que je n'ai pas inclus d'éléments supplémentaires,
00:15:48il ne l'a pas vraiment découpé de la même manière
00:15:51qu'Impeccable l'a fait avec leur étude de cas,
00:15:52mais cela pourrait être un problème de prompt.
00:15:55Mais même avec ça, on peut voir la structure
00:15:57de quelque chose qui fonctionnerait ici.
00:15:59J'aime bien comment ils font le tableau de bord.
00:16:01Donc, certainement pas aussi impressionnant, je pense,
00:16:05que le résultat brut que nous avons obtenu au début,
00:16:09mais hé, je me suis dit que j'allais essayer.
00:16:11Maintenant, voyons ce que ça donne quand on modifie un site existant.
00:16:14On va donc utiliser mon site web, mon vrai site d'agence IA,
00:16:18et on va exécuter quelques commandes dessus.
00:16:21On va utiliser le document Impeccable
00:16:23pour qu'il puisse faire de l'ingénierie inverse sur un fichier design.md
00:16:26à partir du code, et ensuite on fera des choses comme lancer l'audit
00:16:29et faire une critique, et on refera la chose en direct
00:16:32sur mon site réel pour voir
00:16:36quel genre d'ajustements on peut faire.
00:16:37Pour référence, voici le site web de mon agence IA.
00:16:41J'ai une sorte de section hero standard.
00:16:43Je présente mes services, je parle de ma philosophie
00:16:47sur la façon dont nous effectuons l'implémentation de l'IA
00:16:49avant d'avoir une sorte d'appel à l'action,
00:16:51un endroit où les gens peuvent remplir leurs informations
00:16:54s'ils veulent travailler avec moi.
00:16:55J'ai quelques pages supplémentaires comme mon blog,
00:16:57mais on va juste s'en tenir à la page d'accueil pour le moment.
00:17:00Donc la première chose que j'ai faite, c'est que j'ai dit,
00:17:02exécutons le document Impeccable sur cette base de code
00:17:05et voyons ce qu'Impeccable a à dire sur mon site actuel.
00:17:08Donc il parcourt toute la base de code
00:17:11et il va créer un design.md pour ce que nous avons déjà,
00:17:16et c'est à partir de cette fondation
00:17:18que nous pouvons commencer à modifier des choses.
00:17:19Donc, après qu'Impeccable ait parcouru la base de code,
00:17:21il a écrit trois fichiers qui sont essentiellement
00:17:23un contexte stratégique de ce qui se passe.
00:17:26Il parle des victoires, de l'Étoile Polaire,
00:17:29mais il parle aussi de sept violations différentes qu'il a trouvées.
00:17:33Donc, la sphère bleue, il dit que les maquettes des fiches de service
00:17:37sont essentiellement un pack de cliparts,
00:17:40une grille de cartes intentionnelle.
00:17:43Il déteste le glassmorphism, donc il n'aime pas ça.
00:17:47Il dit qu'on a chargé une certaine police, mais qu'on ne l'a jamais utilisée,
00:17:50ainsi que d'autres choses.
00:17:53Donc il y avait certaines fonctionnalités
00:17:54qui sont essentiellement dans le code,
00:17:55mais qui n'apparaissent pas dans l'interface utilisateur réelle.
00:17:58Et ensuite un problème avec certaines couleurs.
00:18:02Il parle aussi du fossé stratégique
00:18:04du fait que je ne me mets pas, moi, la personne, Chase,
00:18:07très en avant sur le site lui-même, ce qui est juste.
00:18:10Maintenant, on peut obtenir une critique encore plus approfondie
00:18:12si on exécute la commande de critique.
00:18:15Et donc faisons-le maintenant.
00:18:16Donc je lui dis d'exécuter la commande de critique.
00:18:18Je n'ai même pas épelé "critique" correctement.
00:18:20Je lui dis d'exécuter la commande de critique sur la page d'accueil.
00:18:23Il a donc fait sa critique et son verdict était : c'est,
00:18:25oui, à la limite du travail bâclé par l'IA.
00:18:27Il m'a donné un score de santé du design sur 10 points différents
00:18:33et chacun était noté sur quatre
00:18:34et je n'ai pas dépassé trois sur aucun d'entre eux,
00:18:37mais je n'ai eu aucun un, donc c'est bien.
00:18:39Le total était de 25 sur 40, ce qui est considéré comme acceptable.
00:18:43Pour la charge cognitive, il me donne un cinq sur huit, un échec.
00:18:46Il dit que le mouvement de l'arrière-plan rivalise avec le contenu.
00:18:51Oui, je pense que c'est assez discret,
00:18:54mais je vois d'où ça vient.
00:18:56Deux CTA d'importance égale ici avec une priorité ambiguë.
00:19:00La section service a quatre schémas visuels différents
00:19:03avec quelques autres choses.
00:19:05Et son impression générale est que c'est une bonne base,
00:19:08mais que ça pourrait faire un peu mieux.
00:19:10Et ensuite à la fin, il décompose cela
00:19:11en trois points différents il y a une semaine.
00:19:14Donc honnêtement, j'aime cette critique.
00:19:16C'est très, très approfondi et nous donne beaucoup de matière
00:19:19et devient assez précis sur ce qu'il pense être faux.
00:19:22Maintenant, que je sois d'accord ou non avec certains points,
00:19:24je pense que c'est hors sujet,
00:19:26mais ça nous donne des choses auxquelles réfléchir.
00:19:29Vous savez, je ne vais pas simplement supposer aveuglément
00:19:31que tout ce qu'il me dit est correct,
00:19:32mais nous pouvons passer en revue ces points, ou si je voulais,
00:19:35je peux parcourir tout cela.
00:19:36Je me dis, très bien, changeons ceci et cela.
00:19:37Alors voyons ce qui se passe si nous faisons B
00:19:40et disons que nous voulons un peu jouer
00:19:42avec ce qu'il appelle une discipline de décoration
00:19:44et voir les changements qu'il effectue.
00:19:46Et après avoir vu les changements qu'il effectue,
00:19:48nous sauterons dans la session en direct,
00:19:51tout comme nous l'avons fait avec la première page d'accueil que nous avons construite
00:19:54et nous jouerons avec ça.
00:19:55Regardons donc certains des changements qu'il a effectués.
00:19:57Et les changements étaient très subtils.
00:19:59Donc on peut voir ici dans la section services,
00:20:03c'est la version mise à jour.
00:20:04Ils ont un peu atténué les couleurs et s'en sont tenus
00:20:07à juste ce genre d'orange terre cuite et blanc.
00:20:09Vous remarquerez qu'il n'y a plus de sorte de brume bleue
00:20:13en bas à gauche.
00:20:14Pour référence, voici la précédente
00:20:17où vous avez en quelque sorte ce bleu en bas à gauche
00:20:18et ensuite du bleu et ensuite du vert.
00:20:20Donc c'est limité à seulement deux couleurs, n'est-ce pas ?
00:20:23Le genre de blanc, enfin vraiment trois couleurs,
00:20:25je dirais comme blanc, gris, et ensuite l'orange.
00:20:28Vous pouvez aussi voir cela ici dans la section approche.
00:20:32Donc, alors que je survole les cartes, nous avons toujours cette lueur orange,
00:20:36mais sur l'original, il y avait de l'orange ici en bas.
00:20:41Il avait en quelque sorte la bordure de la carte en haut
00:20:43et il pense que c'est une sorte de truc type "AI slot".
00:20:47Et c'est tout pour les changements de la discipline de décoration.
00:20:51Donc assez subtil, il a d'autres choses
00:20:53qu'il veut essayer aussi.
00:20:54Ils ont à voir avec le genre de confiance et de conversion
00:20:56et potentiellement l'ajout de choses comme des photos de profil.
00:20:58Mais ce que nous allons faire maintenant
00:21:00c'est passer au mode en direct.
00:21:02Regardons donc le site web maintenant en mode en direct.
00:21:05Disons que je voulais un peu changer ces cartes
00:21:08et tout comme avant, que ferais-je ?
00:21:10Je peux faire du format libre ou je peux aller
00:21:13et choisir l'une de ces commandes préchargées.
00:21:17Alors essayons "delight" pour celui-ci.
00:21:19Et ensuite nous allons opter pour trois variantes.
00:21:22Et ce que fait "delight", c'est qu'il ajoute un peu de personnalité réelle
00:21:26à ce composant particulier.
00:21:27Voici un aperçu de certaines des variantes qu'il nous a données.
00:21:30Donc celle-ci est juste un peu plus grande,
00:21:32a en quelque sorte ce truc ici sur la droite.
00:21:35Il change le texte ici.
00:21:37Et il ajoute aussi ce petit truc.
00:21:40Et évidemment comme celles-ci, nous avons les réglages
00:21:43pour jouer avec aussi.
00:21:45C'est censé être un chiffre, c'est un peu décalé.
00:21:49Donc oui, pratiquement le même scénario
00:21:53que le premier site web que nous avons créé.
00:21:55Je pense que ce truc en direct pour Impeccable
00:21:57est en fait son outil le plus puissant de loin.
00:22:00Le fait que nous puissions faire ces micro-ajustements
00:22:02à partir d'une interface graphique
00:22:04plutôt que de devoir tout faire dans la ligne de commande.
00:22:06Donc je suis content de voir que c'est pratiquement
00:22:08la même configuration,
00:22:09même quand nous utilisons une base de code qui existe déjà.
00:22:12Donc dans l'ensemble, j'ai vraiment aimé Impeccable.
00:22:13Je pense que c'est à 100 % une compétence que vous devriez ajouter à votre stack
00:22:17et certainement tester lors de votre prochaine série
00:22:20de design front-end,
00:22:21que ce soit pour un site web que vous créez à partir de zéro
00:22:23ou pour quelque chose qui existe déjà.
00:22:26Et essayez à 100 % l'outil en direct.
00:22:29C'est quelque chose qu'ils viennent d'ajouter,
00:22:31je pense il y a environ une semaine.
00:22:32Et je pense que c'est un grand différenciateur
00:22:34par rapport à toutes ces autres choses.
00:22:35Je pense que lorsque vous combinez ces micro-ajustements
00:22:38avec les sortes de mises en page macro que je vous ai dit de faire
00:22:41via des prompts au début,
00:22:43je pense que vous avez un flux de travail vraiment puissant.
00:22:45Comme toujours, dites-moi ce que vous en avez pensé.
00:22:47Le lien vers ce dépôt sera dans la description.
00:22:49Il y a aussi le lien dans le commentaire épinglé vers Chase AI+
00:22:52si vous voulez mettre la main sur ma masterclass Cloud Code.
00:22:55Et à part ça, on se reverra.