Claude Opus 5.5 et le MCP Mobbin, 600 000 références design pour créer le site d'une néobanque
10 minutes
.
September 30, 2026
Claude Opus 5.5 a livré en deux heures le site complet de Kova, une néobanque fictive, pour environ 54 $ de consommation API. La première version, construite sans aucune référence extérieure, tenait déjà. La seconde est passée par le MCP Mobbin. Claude y a d'abord étudié les sites et les apps de Revolut, Mercury, Ramp ou Wise pour rédiger un rapport de 17 chapitres. Il a ensuite refondu le site à partir de ses propres conclusions. La vidéo ci-dessous montre chaque étape. L'article reprend la méthode, le contenu des trois prompts, les coûts relevés et les limites du test, vus par une agence Webflow qui conçoit ce type de site pour ses clients.
Opus 5.5 progresse sur le code mais aucun benchmark ne juge une interface
Anthropic a publié Claude Opus 5.5 le 22 septembre 2026. Le modèle coûte 4 $ par million de tokens en entrée et 20 $ en sortie, contre 5 $ et 25 $ pour Opus 5, soit 20 % de moins au token. Anthropic annonce aussi une génération plus de 30 % plus rapide qu'Opus 5 et un niveau comparable à Claude Fable 5.1 sur la plupart des tâches. Sur Terminal-Bench 4.0, Opus 5.5 obtient 66,4 %, devant GPT-6 Astra à 57,9 % (annonce Anthropic).
Aucun de ces scores ne mesure la qualité d'un écran. Anthropic indique bien qu'Opus 5.5 a reçu les meilleures notes de tous les modèles testés sur le rendu graphique et la finition. Mais un modèle ne sait pas seul à quoi ressemble une bonne interface de néobanque. Sans consigne, il reproduit une moyenne de tout le web qu'il a lu. Pour en sortir, il lui faut des références précises et un contexte de marque, comme un designer qui ouvre ses dossiers d'inspiration avant de dessiner.
Mobbin ouvre à Claude plus de 600 000 écrans d'apps et de sites en ligne
Mobbin est une bibliothèque de références tirées de produits en ligne. On y trouve des écrans d'apps mobiles et web, des parcours complets comme une inscription ou un paiement et des sections de sites comme un héros ou une page tarifs. La plateforme revendique plus de 600 000 écrans. Un designer qui voulait documenter un parcours devait jusqu'ici l'enregistrer lui-même, écran par écran. Le MCP Mobbin permet à Claude de chercher ces références en langage naturel, avant de dessiner le moindre pixel.
Le serveur expose trois outils, search_screens pour les écrans, search_flows pour les parcours en plusieurs étapes et search_sections pour les sections de sites (documentation Mobbin). L'accès demande un abonnement Pro, Team ou Enterprise. Le plan Pro coûte 10 $ par mois en facturation annuelle, 15 $ par mois en facturation trimestrielle. On avait déjà documenté l'automatisation de Webflow par Claude via le MCP et les skills Claude appliqués au design d'une homepage. Ces deux usages donnaient à Claude un accès au CMS et un cadre de marque. Mobbin lui apporte les références visuelles qu'il ne pouvait pas consulter seul.
Connecter Mobbin à Claude Desktop
- Dans Claude Desktop, ouvrir Personnaliser puis Connecteurs.
- Rechercher Mobbin dans le catalogue et cliquer sur Connecter.
- Se connecter avec l'e-mail et le mot de passe du compte Mobbin pour autoriser l'accès.
L'onglet MCP du profil Mobbin liste les autres clients compatibles, dont Claude Code, Cursor et Codex. Un connecteur ajouté dans Claude Desktop est repris automatiquement par Claude Code, sans nouvelle configuration.
Sans Mobbin, la V1 tient déjà grâce aux assets et à la typographie fournis
Le premier prompt, lancé sur Opus 5.5 en effort « extra », demande le site complet de Kova en six pages. L'accueil doit montrer un aperçu de l'app et le solde du compte. La page cartes présente les offres et leurs avantages, que la page tarifs compare ensuite. La page sécurité détaille la protection des paiements et le support. Une page à propos et une page contact complètent l'ensemble. Le site est en anglais, avec un sélecteur de langue pour le français, l'espagnol et l'allemand, sans traduction à ce stade.
Générer les visuels avec un autre modèle
Les visuels viennent d'un dossier d'assets généré avec ChatGPT avant le test, à partir de néobanques comme Revolut. Photos en situation, objets 3D, cartes bancaires, halo lumineux... un registre visuel très présent chez les néobanques. Claude reste faible en génération d'images, là où ChatGPT est très à l'aise. On répartit donc le travail entre les modèles, chacun sur son point fort.
Imposer deux typographies
Le brief fixe PP Neue Montreal pour les titres, avec toutes ses graisses, et Inter Variable pour le texte courant. Deux polices imposées évitent à Claude de partir dans toutes les directions. Elles donnent aussi au site une signature dès la première version, sans aller-retour sur la charte.
La V1 en 35 minutes et 12,57 $
Claude a mis 35 minutes à générer la V1, pour un coût API estimé à 12,57 $. Le résultat est solide sans la moindre référence extérieure. L'accueil pose un bento qui reprend les objets 3D, avec une petite animation. Sur la page cartes, les prix changent quand on sélectionne une carte. Le comparatif demandé entre toutes les cartes est complet. Le formulaire de contact affiche ses messages d'erreur et le site passe sans accroc sur iPhone 16.
L'aperçu de l'app, lui, ressemble encore à une interface sortie de Claude Code ou de Lovable. Il lui manque la finesse d'une app bancaire aboutie, alors que Claude a choisi d'en faire l'argument central du site. La page à propos reste aussi en retrait. Cette V1 doit surtout sa qualité aux assets et à la typographie fournis dans le brief, qu'Opus 5.5 a exploités sans aucune référence extérieure.
Avec Mobbin, Claude rédige d'abord un rapport de product designer
Le deuxième prompt branche le MCP Mobbin et interdit de toucher au site. Il demande un rapport HTML sur les sites de néobanques et de fintechs les plus pertinents, leurs patterns et leur direction visuelle. Il ajoute une recherche de parcours d'apps bancaires mobiles, puisque Claude avait choisi de mettre l'app au cœur du site. Le prompt réclame enfin un plan de refonte complète et l'enregistrement du rapport dans un dossier « rapport ».
Le rapport compte 17 chapitres et 55 captures commentées, tirées de 27 marques. Claude y a relevé 34 sections de sites, 21 écrans d'apps bancaires iOS et 3 parcours d'ouverture de compte professionnel, chez Revolut, Mercury, Ramp, Slash, Wise, Monzo, Starling ou N26. Chaque capture renvoie vers sa fiche Mobbin. À ce stade, la session cumule 54 minutes et environ 22 $.
Un audit de la V1 sans complaisance
Le rapport compare ensuite Kova aux références, page par page. Il salue l'interactivité de la V1, rare chez les concurrents relevés, puis classe ses faiblesses par gravité. Chaque constat s'accompagne d'une correction et des références Mobbin qui la justifient.
La recommandation la plus nette porte sur l'identité. Claude propose une base claire à la manière de Mercury et un seul chapitre sombre pour les cartes et la sécurité. Le liseré de lumière bleue des objets 3D remplace l'arc planétaire comme signature de Kova.
La V2 applique le rapport jusqu'au parcours d'ouverture de compte
Le troisième prompt lance la refonte dans un dossier V2, sans modifier la V1. Il demande aussi à Claude de vérifier à la fin que la direction visuelle suit les patterns établis dans le rapport. La session complète atteint 2 heures pour un coût API estimé à 53,88 $. Ce total inclut quelques relances pour corriger des coquilles et reprendre des parties qui ne nous plaisaient pas.
L'application passe au premier plan
Le rapport notait que Kova vendait une app mobile sans la mettre en avant dès le premier écran, où le téléphone partageait la place avec deux cartes, deux notifications et l'arc lumineux. La V2 ne garde qu'un téléphone dans le héros, avec le solde et un champ e-mail pour ouvrir un compte. Ses bentos s'organisent autour des fonctions de l'app et un QR code permet de la télécharger. Faites glisser le curseur pour comparer les deux pages d'accueil.
V1 · sans MobbinV2 · avec Mobbin‹›
Sur demande, Claude a intégré des logos réels de marchands, des drapeaux par devise et des avatars recadrés dans les assets. Ces détails changent le rendu du design, à condition de les fournir ou de les réclamer dans le prompt. Le logo affiché pour OVHcloud n'est peut-être pas le bon. Chaque logo récupéré par Claude reste donc à vérifier avant publication.
Les pages cartes et sécurité gagnent en profondeur
La page cartes passe en mode sombre, avec une bascule entre cartes physiques et virtuelles. L'en-tête du comparatif reste fixé pendant le défilement. La page sécurité garde les objets 3D et la démo interactive des contrôles de carte, avec une illustration de support en bulles de conversation très répandue chez les néobanques. Les pages à propos et contact changent peu par rapport à la V1, y compris la page à propos que l'on jugeait en retrait.
Un parcours d'ouverture de compte en quatre étapes
La nouveauté la plus visible se trouve derrière le bouton « Open an account ». Claude a construit le parcours recommandé dans son rapport, sur le modèle des parcours de Monzo, Monese et Wise. On renseigne son e-mail professionnel et son entreprise, on coche ses besoins, on choisit un forfait avec le prix confirmé avant validation, puis on vérifie son identité avec un passeport simulé. Le parcours se termine sur l'écran « Your account is ready ». Le prototype n'envoie aucune donnée, mais le parcours se teste de bout en bout.
Les limites de ce test
Kova est une marque fictive. Le site n'a jamais reçu de visiteur. On ne peut donc rien dire de sa conversion. Les deux versions sont des pages HTML statiques, sans back-end ni CMS, loin d'un site en production. Les coûts affichés sont des estimations de consommation API relevées dans la session, pas une facture. Mobbin rappelle lui-même que ses exemples montrent comment les produits sont conçus, sans prouver qu'un pattern améliore la performance (documentation Mobbin). Qonto n'apparaît pas dans le catalogue interrogé par Claude. Les références du rapport restent donc surtout américaines et britanniques.
Un prototype généré par Claude reste à transformer en site
Pour un projet client, le site de Kova servirait à trancher la direction visuelle plus tôt, avec des références que le client peut ouvrir une à une. Il resterait ensuite à intégrer le site dans Webflow, avec un CMS que l'équipe du client sait modifier, puis à régler le SEO et le balisage lu par les LLMs. Les sites de la finance ajoutent une contrainte réglementaire sur chaque affirmation, que le rapport de Claude avait d'ailleurs relevée en réclamant des notes sourcées. Le suivi dans le temps pèse autant que la mise en ligne. Il relève d'un accompagnement growth, qui mesure le site et le fait évoluer chaque mois.
Faire cadrer le site de votre fintech ou de votre néobanque
Un site de fintech se juge sur la crédibilité de chaque écran et de chaque affirmation chiffrée. Trente minutes suffisent pour fixer sa direction visuelle et son périmètre avec notre équipe. Réserver un appel.
FAQ : Claude Opus 5.5 et le MCP Mobbin
Le MCP Mobbin est-il gratuit ?
Non. Le MCP Mobbin demande un abonnement Pro, Team ou Enterprise. Le plan Pro coûte 10 $ par mois en facturation annuelle, soit 120 $ par an, ou 15 $ par mois en facturation trimestrielle. Un compte gratuit permet seulement de parcourir une partie de la bibliothèque sur le site de Mobbin, sans connexion à Claude.
Quel abonnement Claude faut-il pour utiliser Opus 5.5 avec Mobbin ?
Opus 5.5 est disponible sur les plans Claude Pro, Max, Team et Enterprise, ainsi que via l'API. Le connecteur Mobbin s'ajoute depuis Claude Desktop ou la version web, dans Personnaliser puis Connecteurs. Sur les plans Team et Enterprise, un administrateur doit parfois autoriser le connecteur avant la première connexion.
Combien coûte la création d'un site avec Claude Opus 5.5 ?
Dans ce test, la session complète représente un coût API estimé à 53,88 $ sur deux heures, dont 12,57 $ pour la première version en 35 minutes. Ce montant n'inclut ni l'abonnement Mobbin, ni la génération des visuels avec ChatGPT, ni l'intégration dans un CMS pour une mise en production.
Claude Opus 5.5 peut-il générer les images d'un site ?
Pas au niveau attendu pour des photos en situation ou des objets 3D. Pour ceux de Kova, on a utilisé ChatGPT, nettement plus à l'aise en génération d'images. Claude a ensuite intégré ces visuels page par page, sans consigne sur leur emplacement. Il a aussi dessiné en SVG le logo de Kova, demandé en cours de session.
