Anthropic sort son modèle Fable 5, se fait bannir en quelques jours, puis renaît de ses cendres tel un phénix[1]. Et avec lui, renaissent les spéculations sur son UI/UX spectaculaire et sa sorcellerie frontend. J'ai donc testé ses capacités de génération en un seul essai (one-shot) via Claude Design : j'ai soumis des prompts d'interfaces d'applications et de sites web courants, remixé des UI de référence de l'industrie, et analysé la qualité du code frontend pour évaluer sa place dans le workflow d'une équipe produit. Jugez-en par vous-même avec mes exemples d'UI conçus par Fable 5.
Alerte Spoiler : En matière d'UI/UX, face à Gemini 3.1 PRO et GPT 5.4, Fable 5 est le boss final.
Alternatives gratuites à Claude Design >
Du texte à l'UI avec Fable 5
App de méditation minimaliste (Mobile)
Prompt
"Conçois un écran d'application de méditation minimaliste pour mobile : une UI calme qui respire, avec des dégradés doux, un seul CTA principal pour démarrer une session, un sélecteur de durée de session et un suivi de série de jours (streak). Reste épuré, faible stimulation, beaucoup d'espace blanc."
Résultat du design
Temps requis : ~3 minutes
Lors de la rédaction du prompt, j'avais l'UI de l'application Calm en tête. Mais Fable 5 a poussé le minimalisme encore plus loin. Le brief est respecté presque à la lettre : dégradés doux, CTA avec cercle de respiration, sélecteur de durée, série en pied de page, tout y est. Le choix des couleurs et de la typographie colle parfaitement à l'expérience attendue. Il va même plus loin en ajoutant une légère animation. Je ne l'avais pas demandée, mais elle est bienvenue.
Parcourir & modifier l'UI de Calm App avec l'IA >
Dashboard SaaS maximaliste (Desktop)
Prompt
"Conçois un dashboard SaaS fintech dense pour desktop. Chargé mais organisé – navigation haute, barre latérale, cartes de KPI (revenus, comptes actifs, volume de transactions, attrition), un grand graphique de revenus/trésorerie, un tableau de transactions récentes et un panneau de notifications/alertes. Dense en données, widgets multiples, véritable densité d'outil d'entreprise."
Résultat du design
Temps requis : ~8 min
Cette fois-ci, Claude Design m'a posé quelques questions de clarification à la manière d'un Agent IA UI classique. Petite précision : Fable 5 a donc reçu un peu d'aide pour orienter ses choix créatifs.
Quant au résultat, il est vraiment dense et complet, ce qui explique probablement le temps de traitement. Le rendu fait très corporate mais est intelligemment structuré pour éviter tout encombrement. J'ai toutefois remarqué quelques badges (pills) qui mériteraient d'être redimensionnés pour s'aligner sur les cartes. De plus, il n'a pas traité chaque consigne séparément, mais les a plutôt synthétisées en un produit harmonieux, comme le ferait un bon designer.
Parcourir & modifier l'UI de l'app Fintech par Banani AI >
Flux d'onboarding multi-écrans
Prompt
"Conçois un flux d'onboarding multi-écrans pour une application de rencontre sur mobile. Inclus : écran d'accueil/proposition de valeur, téléchargement de photo, informations de base (nom, âge, localisation), sélection des intérêts/prompts, et un écran final 'prêt à swiper'. Un style audacieux, moderne et dynamique."
Résultat du design
Temps requis : ~5 min
Là encore, Claude Design a posé des questions créatives auxquelles j'ai répondu pour le compte de Fable 5, mais délibérément pour l'éloigner d'une UI trop proche de Tinder.
Le prototype multi-écrans est dynamique et truffé de micro-interactions fluides. Tous les écrans et composants demandés sont présents. Les couleurs, la typographie, les textes et le flux de navigation sont gérés comme par un pro. Si je devais lancer un MVP pour cette application, je me contenterais d'exploiter des outils d'analyse UX IA pour récolter des avis d'utilisateurs réels et demanderais à Fable 5 d'adapter le design en conséquence.
Pour chipoter un peu, jpense qu'un visuel plus accrocheur sur l'écran d'accueil et un logo au format vectoriel plutôt qu'une simple police stylisée auraient apporté une vraie touche créative supplémentaire.
Comment concevoir une UI avec l'IA >
De la capture d'écran à l'UI avec Fable 5
On utilise généralement une IA de capture vers UI pour modifier une interface existante qu'on apprécie. Mais comme ce cas d'usage consiste souvent à décliner ce design pour créer de nouveaux écrans, je voulais voir comment Fable 5 comprend, modifie et réinterprète l'ensemble. Pour cela, j'ai importé des captures d'écran de l'UI de Duolingo, puis je lui ai demandé d'ajouter un nouvel écran de fonctionnalité et de générer des images – le tout en deux étapes.
Prompt
“Étape 1 — Remplacement d'icône dans la barre de navigation :
Reproduis exactement le design system de cette capture d'écran de Duolingo. Remplace l'icône de navigation du classement/bouclier par une nouvelle icône de 'Culture' — un globe simple ou une carte postale, avec la même épaisseur de trait et le même style que les autres. Garde tout le reste inchangé.
Étape 2 — Écran de fonctionnalité :
Même design system. Conçois l'écran 'Cartes Culture' qui s'ouvre via cette icône — un flux de cartes à faire défiler, chacune contenant une photo réelle (rue, marché, café, monument) d'un pays parlant la langue cible, une courte description associée à un mot de vocabulaire, et un bouton 'Pratiquer ce mot'. Conserve le style de carte et les couleurs de Duolingo, mais mets la photo en valeur."
Résultat du design
Temps requis : ~12 min (en deux étapes)
Première chose flagrante : pas de vectoriel, pas d'images. C'est décevant. Cependant, Fable 5 a bien reproduit le wireframe de l'écran Duolingo pour l'harmoniser avec le reste de l'UI, a créé la structure de la nouvelle fonctionnalité et a choisi une couleur parfaitement intégrée à la charte graphique de Duo. J'ai donc demandé de corriger spécifiquement ces éléments manquants. Il a fallu environ 6 minutes de plus pour traiter la demande et intégrer des vecteurs et des images. Fait intéressant, il semble avoir récupéré ses images sur Wikimedia Commons plutôt que de les générer. Même si les vecteurs ne sont pas une réplique exacte de ceux de Duolingo, j'imagine que ces ressources d'interface doivent plutôt être fournies en amont.
(*Note : Au passage, c'est à ce moment précis que j'ai épuisé mes crédits quotidiens de Claude. Fable 5 est visiblement très gourmand.)
Figma Weave vaut-il le coup pour générer des assets UI ? >
Fidélité au Design System de Fable 5
En 2026, le Design MD est le nouveau cahier des charges. Pour vérifier la capacité de Fable 5 à concevoir une UI en respectant scrupuleusement ces specs, j'ai partagé le design MD de l'UI d'Airbnb en lui demandant de générer une application fictive baptisée ‘Deskbrb’ sur le même modèle.
Prompt
"En te basant sur le design system/guide de style Airbnb fourni, conçois l'UI mobile d'une application appelée DeskBrB. C'est une plateforme de type Airbnb pour réserver des postes de coworking et des salles de réunion à l'heure. 3 écrans : Accueil/flux de recherche (avec filtres et cartes d'annonces), Détail de l'annonce (photos, équipements, prix, disponibilités) et Profil de l'hôte (notes, avis, badges de vérification — alignés sur les codes de confiance d'Airbnb)."
Résultat du design
Temps requis : ~5:30 min
Ce test est intéressant, car l'IA s'est comportée ici davantage comme un PM rigoureux que comme un designer distrait. Les icônes, la typographie et les arrondis sont impeccables. Mais surtout, la mise en page et les éléments sont à ce point fidèles qu'on pourrait s'y méprendre et penser qu'il s'agit de l'UI d'Airbnb elle-même. Les limites de Fable 5 en génération/sourcing d'images se confirment, mais l'UI/UX globale reste fabuleuse.
Générateur de Design System IA gratuit >
Qualité du Code Frontend de Fable 5
La conception web avec Claude Fable 5 ne représente que la moitié de sa promesse d'IA pour le design produit, l'autre moitié étant la génération de code frontend. J'ai donc récupéré le code de deux des créations précédentes : l'application de méditation (HTML/CSS/JS standard) et DeskBrB (React moderne + Tailwind).
App de méditation : HTML/CSS/JS dans un fichier unique
Pas de framework, tout est en ligne. Du balisage sémantique (header, footer, main), des variables CSS pour le système de couleurs, la gestion des états aria-pressed sur le sélecteur, et le respect des préférences de mouvement réduit (prefers-reduced-motion) sur l'animation de respiration. On dirait du code produit par un développeur aguerri aux notions d'accessibilité.
App DeskBrB : React composantisé + Tailwind
C'est ici qu'on dépasse le simple export de code pour se retrouver face à un véritable dépôt de projet d'équipe. 18 fichiers. Une architecture en composants propres — Button, StarRating, ListingCard, PhotoCarousel — tous réutilisables et basés sur des props.
La configuration Tailwind intègre directement les tokens réels d'Airbnb (rouge Rausch, échelle d'ombres, teintes d'encre/nuances grisées) tirés du design MD. Le projet inclut même un fichier README détaillant le setup avec Vite et la gestion des licences. Et comme la police Cereal d'Airbnb est propriétaire, l'IA s'est rabattue sur Inter en l'indiquant clairement dans les commentaires. Propre.
Analyse du rendu
Sur ces deux exemples, la qualité du code frontend produit par Fable 5 reste exceptionnelle, peu importe la complexité ou la stack. On y trouve systématiquement des attributs d'accessibilité, une structure sémantique et une gestion rigoureuse des design tokens. La fidélité visuelle est elle aussi parfaitement préservée. On est très proche d'un livrable de développeur frontend, rivalisant avec les meilleures IA de Design-to-Code de 2026.
Essayer gratuitement l'IA Design-to-Code >
Fable 5 vs Gemini vs GPT sur le terrain de l'UI
En 2026, deux modèles d'IA dominaient le marché de l'UI/UX et du frontend : Gemini 3.1 PRO et GPT-5.4. Pour mesurer le niveau de Fable 5, je les ai confrontés en leur soumettant exactement le même prompt, de surcroît un cas d'usage complexe : concevoir l'interface mobile et desktop d'un même écran d'application fintech.
J'ai exécuté Fable 5 sur Claude Design, tandis que les modèles de Gemini & GPT tournaient sur Banani AI UI Designer.
Prompt (strictement identique, sans aucune image de référence)
"Conçois l'écran d'une application de banque mobile appelé 'My Card' — vue utilisateur. Affiche une carte de débit virtuelle, le solde, des actions rapides, des statistiques de dépenses et l'historique des transactions récentes. Complète avec des données et textes cohérents. Côté style graphique, opte pour un look sombre et affirmé, premium mais sobre. Utilise des surfaces dégradées et translucides (esprit glassmorphism) avec une typographie moderne et une seule couleur d'accentuation dominante."
Résultat du design (comparatif côte à côte)
Visualiser & modifier le design Gemini 3.1 PRO | Visualiser & modifier le design GPT 5.4
Tous trois m'ont posé des questions de clarification (bien que l'Agent IA UI de Banani ait nécessité moins d'accompagnement). Les visuels générés par Banani ont été produits en moins de 2 minutes (une minute par format), alors que Fable 5 sur Claude Design a mis près de 6 minutes pour le même exercice.
Concernant le rendu visuel, les trois modèles ont parfaitement compris le brief pour la version mobile. Curieusement, Fable 5 et GPT 5.4 ont tous deux misé sur une déclinaison de vert et noir, tandis que Gemini 3.1 PRO s'est orienté vers un duo violet-noir. Le choix des polices, des icônes et de la mise en page est globalement excellent chez les trois concurrents. Cependant, à mes yeux, l'effet de transparence de la carte de Fable 5 donne un aspect plus haut de gamme. Sa déclinaison desktop réussit à condenser beaucoup d'informations de manière aérée sur un seul écran. Les autres s'en sortent honorablement, mais GPT fait l'impasse sur la barre de navigation latérale et Gemini paraît légèrement encombré.
Un choix difficile tant les trois propositions sont de qualité, mais Fable 5 s'impose d'une courte tête.
Concevoir des UI gratuitement avec Gemini ou GPT >
Verdict : Fable 5 est-il performant pour l'UI/UX ?
Oui, Fable 5 joue clairement dans la cour des grands pour le web design. Sa compréhension des briefs, la qualité graphique de ses rendus et son code de sortie sont redoutables. Il est capable de concevoir des écrans statiques, d'intégrer des micro-animations et de générer des prototypes interactifs complets. Revers de la médaille : il s'avère gourmand en crédits et plutôt lent (particulièrement sur l'interface de Claude Design).
Si vous cherchez à combiner des UI générées par IA à un workflow design-to-code ultra-fluide, testez Banani gratuitement ! La plateforme prend en charge plusieurs modèles (les derniers Gemini + Claude), offre une intégration Figma poussée ainsi qu'un export HTML/CSS ou des connecteurs MCP en un clic.
FAQ sur Fable 5 pour le design UI/UX
Comment accéder à Fable 5 dans Claude Design ?
Une fois dans Claude Design, vous trouverez une liste déroulante des modèles au niveau du champ de saisie du prompt. Sélectionnez Fable 5 et définissez le niveau d'effort système souhaité (de minimal à maximal).
Comment récupérer le code frontend produit par Fable 5 dans Claude Design ?
Directement dans le chat, demandez simplement le code autonome associé au design généré par Fable 5 dans le langage de votre choix. Alternativement, cliquez sur Partager → Envoyer vers Claude Code en haut à droite pour exporter un livrable complet destiné aux développeurs.
Le code frontend produit par Fable 5 est-il propre ?
Oui, tout à fait. D'après mes différents tests de fichiers de code générés par Fable 5, j'ai obtenu du HTML/CSS/JS sémantique et accessible sur des petits projets, et du React + Tailwind structuré en composants et basé sur des tokens réutilisables sur des interfaces multi-écrans. C'est très proche d'un travail de pro.
Fable 5 peut-il générer des images pour illustrer l'UI ?
Pas de façon fiable. Durant mes tests de Fable 5 orientés UI dans Claude Design, et malgré plusieurs tentatives, l'outil n'a pas généré de nouvelles images mais a importé des photos réelles depuis Wikimedia Commons. En revanche, il s'en sort très bien pour créer des icônes vectorielles personnalisées via des prompts spécifiques.
