4 façons incroyables de créer des sites web époustouflants avec Claude Fable 5
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Tout le monde a accès aux mêmes modèles d'IA, mais personne n'a construit de processus autour.
00:00:05Vous avez peut-être entendu dire que le modèle n'importe plus, c'est le “harness” qui compte.
00:00:09Les “harnesses” sont essentiellement les processus que vous construisez pour guider votre modèle d'IA.
00:00:13Mais voici ce qu'il faut comprendre.
00:00:14Les modèles évoluent constamment, donc le “harness” que vous avez construit il y a trois mois est déjà obsolète.
00:00:19Au moment de l'enregistrement, le meilleur modèle disponible est Fable 5, le modèle phare d'Anthropic,
00:00:24mais ne vous inquiétez pas, nous vous guiderons à travers différentes méthodes pour vous assurer
00:00:27que votre “harness” continue d'évoluer pour n'importe quel modèle.
00:00:30Anthropic possède en fait une compétence officielle pour la conception front-end,
00:00:34et la raison de son existence est un problème qu'ils ont eux-mêmes identifié.
00:00:37Ce qui se passe, c'est que le modèle dérive vers la version la plus sûre et la plus moyenne du design
00:00:42que vous avez demandé.
00:00:43Ils appellent cela “converger sur la distribution”, ce qui signifie essentiellement qu'il construit la chose
00:00:47qu'il a déjà vue mille fois auparavant.
00:00:49Avec la puissance annoncée de ces derniers modèles, vous pourriez penser que ce n'est plus
00:00:53un problème, mais ce n'est pas ce que j'ai constaté.
00:00:56Par exemple, dans ce prompt, nous lui avons simplement demandé de créer une page de destination pour un site de plantation.
00:01:01Pour le pousser dans la bonne direction, nous lui avons dit d'être aussi créatif que possible et de ne pas trop
00:01:06se concentrer sur le contenu lui-même.
00:01:07Nous lui avons également explicitement dit de ne charger aucune compétence car nous avons plusieurs compétences disponibles
00:01:13dans notre système et nous voulions nous assurer qu'il n'en tirait pas profit.
00:01:16Voici ce qu'il a fini par créer.
00:01:18Ce n'est pas un mauvais design, loin de là, mais ce n'est certainement pas le meilleur non plus.
00:01:22Par exemple, il y a des problèmes de contraste et quelques images ne se chargent pas correctement.
00:01:26Mais quand nous utilisons la compétence ici, les choses changent pas mal.
00:01:29Il n'y a rien de spécial dans la compétence.
00:01:31Il n'y a aucune référence ni aucune ressource externe.
00:01:34C'est littéralement juste un prompt.
00:01:35Rien qu'avec ça, il a produit un bien meilleur design.
00:01:37Le design était nettement plus soigné et esthétique.
00:01:41Il incluait des animations subtiles et beaucoup plus d'attention aux détails.
00:01:45Dans l'ensemble, le résultat était visiblement meilleur que ce que le modèle générerait normalement seul.
00:01:49Avec chaque nouveau modèle, ces entreprises d'IA publient de nouveaux guides de prompt pour ceux qui utilisent les API des modèles.
00:01:55Et en utilisant le guide de Fable 5, nous avons modifié la compétence de design.
00:01:58Vous pouvez simplement copier le prompt de design général et le guide de prompt.
00:02:02Collez-les tous deux dans Claude, dites-lui que vous avez le guide de prompt pour le modèle
00:02:06et demandez-lui de créer une version mise à jour basée sur cela.
00:02:09Il analyse le prompt et vous donne une version réécrite pour le nouveau modèle.
00:02:12Et vous pouvez vraiment voir que le nouveau site a l'air bien meilleur.
00:02:15Il est beaucoup mieux structuré et a transformé tous les éléments en cartes.
00:02:19Nous pensons qu'il a l'air beaucoup plus créatif que ce que Claude produit normalement à cause de petits détails
00:02:24comme la façon dont la section CTA a été transformée en carte postale avec un timbre dessus.
00:02:29Ce sont ces petits détails qui le rendent tellement plus créatif.
00:02:32Maintenant, il y a une autre raison pour laquelle ces entreprises publient des guides de prompt.
00:02:35Souvent, les modèles ont des problèmes comportementaux et les guides vous expliquent comment les résoudre.
00:02:39Lors de la sortie d'Opus 4.8, Anthropic a souligné que le modèle avait tendance à privilégier un style de design particulier.
00:02:45Leur solution consistait à demander au modèle plusieurs alternatives de design d'abord, puis à vous laisser choisir la direction à prendre.
00:02:51Mais avec la sortie de Fable 5, ce problème n'était plus mentionné dans ses guides de prompt.
00:02:56Et d'après ce que nous avons vu, le modèle retombe toujours sur ce même style.
00:02:59Cela n'arrive pas à chaque fois.
00:03:01Mais d'après nos tests, environ deux sites générés sur trois finissent toujours avec un style très similaire.
00:03:07Donc, ce n'était jamais vraiment résolu.
00:03:08C'est pourquoi il vaut la peine de consulter aussi les docs des modèles précédents.
00:03:11Vous y trouverez souvent des choses utiles qui ne sont tout simplement pas dans le dernier guide.
00:03:15Alors, en utilisant le guide de prompt d'Opus 4.8, nous sommes passés à une compétence de design différente
00:03:20qui nous demandait réellement quelle direction de design nous voulions.
00:03:23Basé sur cela, il a généré ce design.
00:03:25Ceci a l'air bien aussi.
00:03:26Mais honnêtement, une meilleure approche consiste à utiliser des fichiers design.md ici.
00:03:30Ces fichiers contiennent le langage de marque que vous déposez simplement sur votre page.
00:03:33Get design.md est une très bonne source où vous pouvez obtenir les fichiers de nombreuses marques.
00:03:38Mais même alors, utilisez-les après que le modèle a déjà généré la page de destination.
00:03:42Et c'est spécifiquement pour les pages de destination, car si vous regardez à l'intérieur des fichiers design.md,
00:03:47ils verrouillent tout, jusqu'à la police.
00:03:50Et comme vous l'avez vu dans les exemples, la police est une grande partie de ce qui rend ces sites tellement plus créatifs.
00:03:55Il y a deux niveaux lorsqu'il s'agit d'ajouter des animations.
00:03:58L'interface marketing et l'interface fonctionnelle.
00:04:00Utiliser la compétence de design sur une interface fonctionnelle comme des tableaux de bord les rendra magnifiques,
00:04:05mais les gens ne pourront pas vraiment les utiliser.
00:04:07Donc pour ajouter des animations, nous utilisons deux choses.
00:04:10Pour les pages marketing, cette compétence dit déjà au modèle d'ajouter des animations CSS,
00:04:15mais les animations GSAP sont bien meilleures.
00:04:17C'est là qu'intervient une autre étape du guide de prompt.
00:04:20L'effort est le levier principal qui contrôle le modèle maintenant.
00:04:22Pour des tâches simples, vous pouvez le garder de faible à moyen,
00:04:25mais pour des tâches comme ajouter des animations, utiliser X-High est une bien meilleure option,
00:04:30et vous donnera moins de tentatives à recommencer.
00:04:32Dans notre compétence d'interface marketing, il y a une règle qui spécifie quand GSAP doit être utilisé.
00:04:36Chaque fois que cette condition est déclenchée, elle charge automatiquement la compétence GSAP également.
00:04:41Nous avons en fait utilisé cette configuration sur la même page de destination montrée ici.
00:04:44Même avec cette planification limitée de notre part, il a fait un travail étonnamment bon.
00:04:48Il a réussi l'emplacement où l'animation de l'écran se joue à l'intérieur de la carte postale,
00:04:52et les saisons se succèdent les unes après les autres.
00:04:55C'est un bon exemple de la façon dont ces compétences spécialisées peuvent gérer automatiquement
00:04:59une grande partie des détails d'implémentation.
00:05:00Nous avons atteint ce système de compétences par beaucoup d'essais et d'erreurs.
00:05:03Et par là, je veux dire atteindre à plusieurs reprises les limites d'utilisation de 5 heures.
00:05:07Si vous voulez sauter tout cela, vous pouvez l'obtenir via notre Community AI Labs Pro.
00:05:11Le lien se trouve dans la description.
00:05:12Donc, comme nous l'avons déjà mentionné, il existe deux types d'interfaces.
00:05:15L'intégralité du flux de travail derrière l'interface fonctionnelle est complètement différente de celle de l'interface marketing.
00:05:20Par exemple, la planification est la première étape, et elle compte beaucoup.
00:05:23Nous n'allons pas approfondir cela dans cette vidéo, mais une fois votre plan prêt,
00:05:27vous pouvez le donner à Claude.
00:05:27Après cela, au lieu de lui faire construire l'application, vous devriez lui demander de créer les maquettes en HTML.
00:05:33Notre processus commence avec le design.md.
00:05:36Si vous avez déjà décidé quel design.md vous voulez utiliser, c'est super.
00:05:40Si vous n'en avez pas, ce n'est pas grave non plus.
00:05:42Vous pouvez continuer sans.
00:05:43Par exemple, si vous regardez notre communauté construite sur mesure,
00:05:45vous remarquerez immédiatement que le design à l'extérieur et celui à l'intérieur sont complètement
00:05:50différents.
00:05:51Dans notre cas, tout a été planifié en utilisant d'abord des maquettes HTML.
00:05:54Nous avons commencé par créer un design.md, qui était partiellement inspiré par Notion.
00:05:58En utilisant ce système de design, nous avons construit tous les écrans comme des maquettes avant d'écrire l'application réelle.
00:06:04Une fois ces maquettes finalisées et validées, nous les avons converties en cette application entièrement fonctionnelle.
00:06:09Maintenant, avant de passer à la partie la plus importante dans la conception d'interfaces fonctionnelles, écoutons
00:06:13un mot de notre sponsor.
00:06:14Beaucoup de personnes utilisant Claude Code ont récemment remarqué que leurs coûts montaient en flèche.
00:06:18Honnêtement, c'est pourquoi Kimi a attiré mon attention.
00:06:20Ils ont construit un modèle open-source qui est vraiment bon en codage à environ 1/8e du prix d'Opus.
00:06:26Leur dernier modèle, Kimi K2.6, vient d'atteindre la première place sur Sweebench Pro,
00:06:30essentiellement le benchmark de codage réel le plus difficile en ce moment.
00:06:33Ils n'ont pas juste sorti le modèle, ils ont construit des produits basés sur K2.6 qui sont vraiment utiles.
00:06:38Vous pouvez générer des sites Web prêts pour la production avec un bon design front-end,
00:06:41créer des présentations complètes à partir d'un seul prompt, et même gérer les bases de données et l'authentification nativement.
00:06:47Mais la fonctionnalité la plus folle est probablement Agent Swarm.
00:06:49Vous pouvez lancer 300 agents IA en parallèle sur une seule tâche.
00:06:53Au lieu qu'un seul agent gère lentement tout, vous obtenez une équipe entière d'IA travaillant simultanément.
00:06:58Et tout cela fonctionne sur un modèle open-source qui coûte bien moins cher que les alternatives
00:07:03fermées pour lesquelles les gens payaient.
00:07:05Donc, si vous utilisez Claude Code ou Cursor tous les jours et que votre facture API est devenue pénible
00:07:09dernièrement, Kimi vaut la peine d'être essayé.
00:07:11Si vous vous inscrivez via notre lien, vous obtiendrez également un bonus de quota supplémentaire de 10 % sur votre premier achat
00:07:16avant le 30 juin. Cliquez sur le lien dans la description et commencez à construire.
00:07:19Maintenant, il y a une autre partie très importante dans la conception d'interfaces fonctionnelles, c'est l'expérimentation.
00:07:24Au fil du temps, nous avons essayé beaucoup d'approches différentes pour résoudre ce problème.
00:07:28Initialement, nous utilisions des listes de tâches avec plusieurs agents travaillant en parallèle,
00:07:32où chaque agent générait une variation différente de l'interface.
00:07:35L'objectif était d'expérimenter avec plusieurs designs et de comprendre quelle approche fonctionnait réellement le mieux.
00:07:40Plus tard, nous avons commencé à utiliser des sous-agents pour ce flux de travail, mais cela n'a plus d'importance.
00:07:45Avec un million de jetons de contexte, vous pouvez le faire avec l'agent principal également.
00:07:48Nous avons aussi construit quelque chose en interne appelé la Gallery Viewer.
00:07:51Le but de la Gallery Viewer est simple.
00:07:53Lorsque vous générez plusieurs maquettes HTML, elles ne devraient pas se perdre parmi des dizaines de fichiers.
00:07:58Au lieu de cela, elles sont automatiquement ouvertes ensemble dans une seule vue, ce qui les rend faciles à comparer
00:08:03côte à côte. Par exemple, lors de la construction de la plateforme communautaire, nous ne savions pas initialement
00:08:08à quoi devrait ressembler un espace d'interaction communautaire. Nous savions que nous voulions une expérience communautaire,
00:08:12mais il y avait beaucoup de façons différentes dont les utilisateurs pouvaient interagir les uns avec les autres. Donc, plutôt que de nous engager
00:08:17sur un seul design, nous avons expérimenté en utilisant des maquettes HTML. Nous avons chargé l'agent de créer plusieurs
00:08:22interfaces de canaux communautaires sous forme de maquettes HTML, afin que nous puissions les comparer. L'agent créait alors plusieurs
00:08:28versions automatiquement et les ouvrait dans la Gallery Viewer. À partir de là, nous pouvions comparer chaque
00:08:33variation et décider quelle direction était la plus forte. Une chose que vous remarquerez dans cet exemple
00:08:37est que les designs ne semblent pas tous visuellement cohérents. Idéalement, ils devraient partager le même langage
00:08:42de design tout en explorant différentes approches d'interaction. La raison pour laquelle cela ne s'est pas produit ici
00:08:46est qu'aucun design.md n'a été fourni. Lorsqu'un design.md existe, le modèle l'utilise comme source de vérité pour
00:08:53les couleurs, l'espacement, la typographie, les composants et le style général. Donc, toutes les maquettes générées restent
00:08:59visuellement cohérentes tout en explorant différentes approches UX. Il y a aussi quelques détails mineurs
00:09:04qui peuvent faire une grande différence, comme l'ajout d'animations aux interfaces fonctionnelles. Nous avons documenté un ensemble de directives d'animation
00:09:10dans notre propre compétence et vous êtes invités à les copier si vous le souhaitez. Elles ont très bien fonctionné pour nous jusqu'à
00:09:15maintenant et nous les affinons continuellement. Une chose que je recommanderais vivement, cependant, est de ne pas en faire trop
00:09:20avec les animations dans la partie fonctionnelle de votre application. Des animations excessives peuvent paraître impressionnantes au
00:09:25début, mais elles rendent souvent les interfaces axées sur la productivité plus distrayantes. Une fois que vous avez
00:09:29finalisé le design, l'étape suivante est d'utiliser la compétence ShadCN. J'ai déjà connecté la compétence d'interface fonctionnelle
00:09:35à la compétence ShadCN, elle gère donc la majeure partie du flux de travail automatiquement. Auparavant, nous avions des flux
00:09:40de travail beaucoup plus élaborés. Nous générions un plan d'implémentation détaillé spécifiquement pour le
00:09:45MCP ShadCN et nous utilisions ce plan pour construire toute l'interface. Bien que cette approche ait fonctionné, elle
00:09:50ajoutait également beaucoup de complexité. Aujourd'hui, le flux de travail est nettement plus simple. Tout ce dont vous avez besoin est la
00:09:55maquette HTML finale et la compétence ShadCN. La raison pour laquelle cela fonctionne si bien est que la compétence ShadCN contient déjà
00:10:01une énorme quantité de contexte et de connaissances d'implémentation regroupées par les créateurs de ShadCN eux-mêmes.
00:10:06Grâce à cela, elle peut prendre une maquette HTML finalisée et la reproduire presque un-à-un en utilisant
00:10:11des composants ShadCN réels. Donc, à ce stade, vous n'avez pas besoin de vous soucier de créer des plans
00:10:16d'implémentation ou des flux de travail de conversion compliqués. Si vous aimez ces processus de design, abonnez-vous à la
00:10:21chaîne et cliquez aussi sur le bouton “hype”. Nous publions du contenu qui vous aide à apprendre de nouvelles façons d'optimiser
00:10:26différents processus dans différentes entreprises avec l'IA. Votre soutien ici signifierait beaucoup pour nous.
00:10:31Le guide vous demande également de rendre l'auto-vérification explicite pour ces modèles. Vous pouvez mettre un prompt dans
00:10:36le Claude.md qui demande à l'agent de vérifier sa sortie. Maintenant, au lieu d'utiliser l'agent principal,
00:10:41vous devriez utiliser un sous-agent capable de vérifier la sortie. Et pour la vérifier, vous avez besoin de quelque chose
00:10:46que vous pouvez comparer. Pour cela, pointez toujours le sous-agent vers votre design.md.
00:10:50Une autre chose mentionnée dans le guide est que les modèles fonctionnent mieux lorsqu'ils ont du contexte sur
00:10:55votre tâche. Pour le design, cela signifie avoir des connaissances sur ce qu'est réellement le produit.
00:10:59Maintenant, beaucoup de frameworks ont configuré un product.md séparé, mais à notre avis,
00:11:03lorsque vous configurez un Claude.md, il dispose d'un contexte suffisant pour que le modèle comprenne ce que votre
00:11:09projet concerne. Donc, ce que fait la compétence d'interface fonctionnelle, c'est que chaque fois qu'elle reçoit une nouvelle tâche,
00:11:13elle fait lire le Claude.md au modèle également. En plus de cela, elle contient aussi un dossier mox
00:11:18qui a tous les fichiers HTML afin que vous puissiez les référencer chaque fois que vous ajoutez de nouveaux éléments à votre
00:11:24application. En plus de cela, ce serait génial si vous aviez aussi le design.md. Ce sont les fichiers
00:11:28dont vous avez besoin dans votre projet. De nos jours, beaucoup d'applications SaaS peuvent être facilement clonées.
00:11:32Nous utilisons nous-mêmes des logiciels conçus sur mesure pour la gestion d'équipe. Nous avons construit notre propre version car
00:11:37nous n'avons pas à héberger beaucoup de personnes. Dans ce cas, vous n'avez pas vraiment besoin de le faire à partir de zéro.
00:11:42Vous devez juste vous assurer de cloner leur interface aussi parfaitement que possible. Avec les modèles plus récents,
00:11:46leur capacité à comprendre les images s'est tellement améliorée que le flux de travail ici devient vraiment facile.
00:11:51Dans le clonage, il existe deux modes différents. Le mode B est pour l'interface marketing. Pour cela,
00:11:56il existe un outil CLI très utile appelé single-file CLI. En l'utilisant, vous pouvez capturer tout sur une page,
00:12:01y compris le HTML, le CSS, et même les images utilisées sur ce site Web. Si le site contient plusieurs pages,
00:12:07vous pouvez aussi récupérer son fichier sitemap.xml, qui est essentiellement une carte du site. En utilisant ce sitemap,
00:12:13le modèle peut découvrir et récupérer les autres pages également. Le problème commence lorsque vous tombez sur des pages qui sont
00:12:19derrière une authentification. Par exemple, si vous vouliez cloner l'interface de Notion, vous ne pourriez pas simplement pointer l'
00:12:23outil vers le site Web de Notion. Lorsque vous fournissez l'URL de Notion, vous n'obtiendrez que la page de destination.
00:12:28Ce que vous voulez réellement, c'est l'interface de l'application derrière l'écran de connexion. Heureusement, les modèles
00:12:34sont devenus très bons pour comprendre les interfaces à partir d'images, donc dans ces situations, les captures d'écran sont la
00:12:40meilleure option. Vous devez capturer les différents états de l'interface très soigneusement. Disons que vous avez une
00:12:45page ouverte, vous voudrez des captures d'écran montrant ce qui se passe au survol et comment les différentes interactions affectent la mise en page.
00:12:50Prenons un autre exemple. Supposez que vous ouvrez une page où deux pages sont dans une seule colonne. Si vous ne fournissez que cela,
00:12:56le modèle ne saura pas que vous pouvez faire deux colonnes. Vous devez être extrêmement minutieux et fournir tout le
00:13:01contexte dont le modèle a besoin. Une fois que vous avez capturé les captures d'écran, ne collez pas les images directement dans le prompt. Au lieu de cela,
00:13:07faites-les glisser dans Claude. Cela donne au système l'accès aux chemins des images que le Mode A peut utiliser. Le Mode A
00:13:13rassemblera alors toutes ces captures d'écran, les placera dans le dossier clone et les utilisera comme matériel de référence.
00:13:19Ces captures d'écran deviennent efficacement la base du processus de clonage. À partir de là, vous pouvez générer une
00:13:25version HTML initiale de l'interface et ensuite passer à la construction de l'application finale.
00:13:29Cela nous amène à la fin de cette vidéo. Si vous souhaitez soutenir la chaîne et nous aider à continuer à faire des vidéos
00:13:35comme celle-ci, vous pouvez le faire en utilisant le bouton super thanks ci-dessous. Comme toujours, merci d'avoir
00:13:39regardé et je vous verrai dans la prochaine.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video