Le problème avec Fable 5.1, c’est qu’il ne sait pas ce qu’est un bon design
J’ai utilisé Fable 5.1 pour redesigner entièrement ma landing page, et voilà le résultat. Dans la hero section, on a un fond animé qui claque, et quand on scroll, on tombe sur des effets de défilement vraiment cool. Plus bas, la section témoignages montre des cartes qui bougent toutes seules, la section pricing fait apparaître les offres une par une, et le footer a des boutons avec un vrai feel premium. J’ai aussi refait ma landing page perso avec un robot qui suit le curseur de la souris.
Mais le vrai sujet, c’est pas juste de montrer un joli résultat. Le vrai problème avec les modèles qui deviennent plus forts et moins chers, comme Fable 5.1, c’est qu’ils n’ont aucun goût. Si tu demandes à un agent IA « redesign-moi une belle landing page », il va te sortir du AI slop. La question, c’est comment tu évites ça. Et c’est exactement ce qu’on va voir.
Décomposer la page en sections indépendantes
La première erreur que tout le monde fait, c’est de donner la page entière à l’IA d’un coup. Résultat : tu demandes un changement sur un élément, et l’IA te modifie trois autres trucs au passage. Tu ne peux plus revenir en arrière, tu ne contrôles plus rien.
Ce que je fais, c’est ouvrir plusieurs sessions de terminal dans VS Code (oui, je devrais probablement utiliser Warp ou un autre outil, mais bon). Chaque session se concentre sur une partie précise : la section login, les témoignages, le pricing. Une session par composant.
Pourquoi ça marche mieux ? Parce que tout est plus facile à gérer. Si un élément ne te plaît pas, tu le changes sans toucher au reste. Tu gardes le contrôle sur exactement ce que tu veux. Donc premier conseil : décompose ta page en composants. Chaque élément, chaque section, chaque bloc. La section témoignages d’un côté, la section pricing de l’autre. C’est le niveau de granularité qui te donne le pouvoir sur le résultat final.
Trouver l’inspiration sur 21st.dev
Une fois que tu as découpé ta page, il te faut des idées. Mon endroit préféré pour ça, c’est 21st.dev. J’ai même pris l’abonnement premium pour avoir accès aux prompts complets et au code complet.
Le site a une page d’accueil avec des catégories : hero sections, pricing, etc. Tu cliques sur une catégorie, et tu vois des dizaines de designs UI différents. Et le vrai avantage, c’est que tu peux littéralement cliquer sur un composant et copier le prompt. Le prompt est déjà optimisé pour Claude Codex ou ce que tu veux. Tu le copies, tu le colles dans Fable 5.1, et tu demandes un oneshot. L’IA construit le composant directement.
J’ai toute une liste de composants que j’ai curatés sur 21st.dev, des trucs que je trouve vraiment impressionnants. Il y a cet effet de scroll incroyable inspiré d’un design Mac Neo, une page de login que j’ai intégrée dans mes applis, et cette section pricing où les chiffres changent de façon animée. J’ai pris plein de sites, j’ai comparé, j’ai choisi ce qui marchait, et j’ai tout passé à Fable 5.1 en oneshot.
Le deuxième conseil, donc : utilise 21st.dev pour construire composant par composant. Tu ne réinventes pas la roue, tu t’appuies sur des designs qui fonctionnent déjà.
Remixer les composants pour créer quelque chose d’unique
Bon, admettons que tu aies ton composant redesigné, mais qu’il y ait encore des parties qui ne te plaisent pas tout à fait. Peut-être que tu aimes les onglets d’un design A, mais que tu préfères les cartes du design B. Ou que tu veux prendre la typographie d’un composant et les visuels d’un autre.
C’est là que le remix entre en jeu. Tu copies les deux prompts, et tu demandes à l’IA de les fusionner. Tu peux mixer les couleurs, les polices, les styles. Si tu prends le style de police du design A et que tu le combines avec les visuels du design B, tu obtiens un look complètement différent. Et c’est ce qui rend le résultat vraiment unique, vraiment à toi.
Troisième conseil : remixe différents composants et designs de 21st.dev. Ne te contente pas de copier un seul template, combine les éléments qui te parlent pour créer ta propre signature visuelle.
S’inspirer des mises en page sur Awwwards
Jusque-là, on a parlé de composants individuels. Mais si tu construis un site entièrement nouveau, tu as besoin d’inspiration pour la mise en page globale, pas juste pour des blocs isolés.
Pour ça, il y a Awwwards.com. Le site référence des tonnes de sites primés, et tu peux y trouver des idées sur les types d’animations, les sensations, les styles visuels que tu peux intégrer. Par exemple, tu tombes sur un site où la hero section a une animation, et quand tu scrolles, elle se réduit progressivement. Tu peux décrire ce comportement à Claude, et Claude peut le reproduire.
Tu peux aussi capturer un composant spécifique que tu repères sur un de ces sites, le passer à Claude, et lui demander de le reconstruire. Ou encore mieux : tu donnes la mise en page entière comme référence. Tu dis à l’IA : « Je veux ce genre de layout dans ma page, et rends-le encore meilleur. »
Quatrième conseil : utilise Awwwards.com (complètement gratuit) pour trouver l’inspiration sur la structure globale de ta page. C’est là que tu vas piquer des idées d’animations et de flow de navigation.
Auditer le résultat avec Impeccable
Tu as tes quatre conseils pour construire une UI propre avec Fable 5.1. Mais il reste une dernière étape avant de shipper : l’audit.
Il faut vérifier que l’application est vraiment bonne. Est-ce que c’est mobile-friendly ? Est-ce qu’il y a des éléments d’interface qui sont encore maladroits ? Pour ça, j’utilise un outil qui s’appelle Impeccable. Ce repo GitHub a dépassé les 60 000 étoiles, et il propose des skills vraiment utiles.
Le skill autoskll lance des contrôles de qualité technique : la réactivité, l’adaptation mobile. Un autre skill vérifie l’accessibilité : est-ce que des personnes aveugles ou avec des handicaps peuvent naviguer sur ton site ? Ton appli gère ça ou pas ? Impeccable te le dit et t’aide à corriger.
Il y a aussi un skill qui s’appelle Impeccable Polish, qui va polir les styles existants. Honnêtement, il y a énormément de choses que tu peux faire avec ça. Considère-le comme ton linter, ton outil de test. Avant de livrer quoi que ce soit, passe un audit complet. Est-ce que l’UI respecte les standards ? Est-ce que ce que l’IA a construit fonctionne vraiment ? C’est la dernière vérification avant de mettre en ligne.
Cinquième conseil : audite systématiquement ton UI avec Impeccable pour la réactivité, l’accessibilité et la finition visuelle.
Le vrai point dur des agents, c’est le vérificateur
Petite parenthèse, parce que c’est une question qu’on me pose tout le temps. Avec les agents qui écrivent tout le code, quel est le vrai point dur dans la boucle ? Honnêtement, une fois que tu fais tourner des agents sans supervision depuis un moment, tu te rends compte que ce n’est ni le modèle, ni le prompt. C’est la brique qui a le droit de dire à ton agent « non, c’est pas fini ». Le vérificateur.
C’est la partie que presque personne ne construit correctement. Pourquoi c’est important ? Parce que ton agent va lancer ses tests unitaires contre des mocks, voir du vert dans le terminal, et déclarer la tâche terminée, alors que l’appli live est cassée pour un vrai utilisateur. Un run vert sur la machine de l’agent ne prouve absolument rien.
L’outil que j’utilise pour ça est open source : la CLI Testbrite, sous licence Apache 2.0. L’installation se fait en trois commandes : npm install -g @testrite/testrite-cli, puis testbrite setup pour coller ta clé API, puis testbrite agent install codex pour que ton agent puisse l’appeler tout seul.
Le flux que je te conseille de tester en premier, c’est l’inscription, le checkout, et la confirmation que le compte est bien passé sur le plan payant. C’est le genre de flux sur lequel tes tests unitaires mentent tout le temps, parce que le paiement est mocké. Mon agent appelle Testbrite en milieu de build, et Testbrite exécute ce flux sur l’appli live comme un vrai utilisateur. Quand le webhook ne se déclenche pas et que le compte reste silencieusement sur le plan gratuit, Testbrite renvoie un bundle : l’étape qui a échoué, une capture d’écran de ce qui s’est vraiment affiché, la cause racine, et une suggestion de correctif. Mon agent lit ça, patch le code, et relance jusqu’à ce que ça passe. Je ne suis dans la boucle pour aucune de ces étapes.
Points clés à retenir
- Décompose ta page en sections indépendantes : une session par composant (témoignages, pricing, login) pour garder le contrôle et éviter que l’IA modifie tout n’importe comment.
- Utilise 21st.dev pour trouver des composants prêts à l’emploi : copie les prompts optimisés et fais du oneshot dans Fable 5.1 pour construire bloc par bloc.
- Remixe les designs pour créer quelque chose d’unique : combine les polices d’un composant avec les visuels d’un autre, mélange les styles pour obtenir un look qui t’appartient vraiment.
- Inspire-toi des mises en page sur Awwwards.com : repère des animations, des structures de page, et décris-les à Claude pour qu’il les reproduise ou les améliore.
- Audite tout avec Impeccable avant de shipper : vérifie la réactivité mobile, l’accessibilité et la finition visuelle. C’est ton filet de sécurité.
- Le vérificateur est la brique la plus sous-estimée : sans un outil qui teste l’appli live comme un vrai utilisateur, tes agents te diront que tout est vert alors que le flux de paiement est cassé.
Voilà, c’est comme ça que j’utilise Fable 5.1 pour redesigner des UI ou en créer de toutes neuves. Si tu veux retrouver la liste complète des composants 21st.dev que j’ai curatés, les prompts, et les skills Impeccable, tout est dispo dans ma communauté. Les liens sont dans la description.