Skills d’inspiration design : Mobbin, Refero

Demandez à un agent de code une page de tarifs « avec un peu d’inspiration », et il vous décrit le plus souvent des références de mémoire, ou il cherche sur le Web et revient avec un article de type palmarès. Les vraies ressources, ce sont des galeries et des registres que des gens tiennent à jour à la main : saaspo.com pour les pages SaaS, navbar.gallery pour les en-têtes, Mobbin pour les parcours mobiles, shadcn/ui pour le code. Les skills et les serveurs présentés ici aident un agent à s’y rendre. J’utilise design-inspiration-index, de molveau/skills, qui est gratuit : il indique la bonne source publique pour chaque besoin, sans compte et sans rien à configurer. Il ne contient lui-même aucune référence. Si vous concevez des parcours d’app chaque semaine et que vous payez déjà Mobbin ou Refero, leurs propres serveurs vous rendront plus de services, et les sections plus bas disent dans quels cas.

Les outils en lice

Outil	Auteur	Licence	Sa force	Ses limites
Les skills et le MCP de Mobbin	Mobbin	MIT	Chercher, depuis l’agent, de vrais écrans, parcours et sections d’apps et de sites, avec des skills qui formulent de meilleures requêtes	Pas gratuit : il faut un forfait Pro, Team ou Enterprise
Le MCP de Refero	Refero	Service hébergé, sans dépôt public	De vrais écrans de produits pour les modèles d’interface, et des parcours pour la logique des étapes	Pas gratuit : il faut un forfait Pro, Team ou Lifetime
Le MCP de shadcn	shadcn	MIT	Chercher et installer des composants de shadcn/ui et de tout registre inscrit dans components.json	Aucune référence visuelle : il renvoie du code à installer
Le MCP de 21st	21st.dev	Service hébergé ; l’ancien paquet Magic MCP est sous licence ISC	Chercher dans un grand catalogue de composants, de thèmes et de gabarits React, et générer des variantes	Le code n’est pas gratuit : la recherche l’est, mais récupérer du code ou générer est payant, et il faut une clé d’API
awesome-design-md	VoltAgent	MIT	Des fichiers DESIGN.md qui décrivent le système de design de marques connues	Ni écrans ni composants : c’est de la lecture
Un dossier de favoris	Vous	Sans objet	Des références que vous avez choisies vous-même, pour des raisons dont vous vous souvenez	L’agent ne peut rien en faire tant que vous ne les avez pas mises par écrit
design-inspiration-index	Molveau Studio	MIT	Diriger 26 besoins vers la bonne galerie ou le bon registre public, gratuitement	Aucune référence en propre : il ne peut pas fouiller une galerie à votre place

Chacun, sans parti pris

Les skills et le serveur MCP de Mobbin

Mobbin publie un serveur MCP hébergé officiel et un plugin qui l’accompagne de quatre skills : search, best-practices, redesign-screen et plain-writing. Le skill search apprend à l’agent à chercher par le sens (« un paywall avec un essai gratuit ») plutôt que par mots-clés, et à vérifier de quelle app vient un résultat avant de le citer. À la première utilisation, l’agent ouvre un navigateur pour que vous vous connectiez. Si vous concevez souvent des parcours d’app et que vous payez déjà Mobbin, installez son plugin : il fait bien plus que mon index, qui se contente de dire à l’agent que les parcours mobiles se trouvent là.

Le serveur MCP de Refero

Le serveur hébergé de Refero renvoie des écrans pour des modèles d’interface précis (structure, hiérarchie, textes, états) et des parcours pour la logique d’un cheminement (étapes, décisions, frictions, reprise après une erreur). Il fonctionne avec Claude Code, Cursor, Codex et les autres clients qui acceptent les serveurs MCP distants, et il exige un forfait payant. Si vous travaillez assez souvent sur des parcours comme l’accueil ou le paiement pour que l’abonnement se justifie, branchez-le. Pour un coup d’œil de temps en temps, il suffit de parcourir refero.design à la main.

Le serveur MCP de shadcn

Intégré à la CLI de shadcn, il permet à l’agent de parcourir, de chercher et d’installer des éléments du registre de shadcn/ui, de tout registre tiers qui suit la spécification des registres et de registres privés, tous configurés dans components.json. Quand vous vous demandez s’il existe déjà un composant pour ça, il vous répond avec du code prêt à installer. Il ne montre ni sites en ligne ni parcours. Si votre projet utilise shadcn/ui, configurez-le peu importe ce que vous choisissez d’autre : npx shadcn@latest mcp init --client claude.

Le MCP de 21st

Anciennement Magic MCP, il relie l’agent au catalogue de composants, de thèmes et de gabarits React de 21st.dev. La recherche est gratuite et renvoie des métadonnées. Récupérer le code d’un composant ou générer une nouvelle interface est payant, et il vous faut une clé d’API de 21st.dev. Il convient à un projet qui achète déjà des composants ou qui veut des variantes générées comme point de départ. Considérez ce qu’il renvoie comme un brouillon, et adaptez-le aux variables de design du projet.

awesome-design-md, de VoltAgent

Un dépôt de fichiers DESIGN.md qui décrivent chacun le système de design d’une marque connue, prévus pour être déposés dans un projet afin qu’un agent construise une interface du même style. Mon index y envoie l’agent pour en lire deux ou trois avant que vous définissiez votre propre langage visuel. En copier un tel quel vous donne un clone de cette marque : lisez-les pour leur structure, et prenez les décisions vous-même.

Un dossier de favoris

Les galeries sont la vraie ressource, et un dossier de liens accumulés au fil des ans nourrit souvent mieux le goût que n’importe quel index, le mien compris. Le hic, c’est que votre agent ne peut pas le lire. Si vous en avez un, notez les dix meilleurs liens dans le DESIGN.md du projet ou dans un fichier de références, avec une ligne qui explique pourquoi chacun s’y trouve, et l’agent pourra s’en servir.

Ce que l’index ajoute

• Un tableau d’aiguillage. 26 besoins, chacun avec sa source : une barre de navigation mène à navbar.gallery, un bloc d’appel à l’action ou d’infolettre à cta.gallery, une page de tarifs SaaS à saaspo.com, une idée d’animation à 60fps.design et à designspells.com, un changement d’image de marque à rebrand.gallery, des parcours mobiles à Mobbin.
• Le détail de chaque site. 18 galeries ont leur propre fiche, avec l’accès, le format, les filtres et un conseil pour trouver ce qu’on cherche, vérifiés pour la dernière fois le 1er novembre 2026. Saaspo, par exemple, se filtre par type de page et par secteur.
• Les sources de code dans la même carte. shadcn/ui et des registres gratuits comme blocks.so, kibo-ui.com et tailark.com côtoient les galeries, avec une règle : partir de ce que le projet utilise déjà, et adapter tout ce qu’on importe à ses variables de design et à ses règles d’accessibilité.
• Un aide-mémoire sur l’accès. Quels sites sont gratuits, lesquels sont en partie payants, lesquels demandent une connexion, et lesquels (saaspo.com, component.gallery, landing.love, designspells.com) bloquent les requêtes automatisées tout en s’ouvrant normalement dans un navigateur, pour que l’agent ne déclare pas en panne un site qui fonctionne.
• Des gens à étudier. Un court tableau d’ingénieurs design dont les sites et le travail open source valent qu’on s’y attarde, dont Emil Kowalski, Rauno Freiberg et Paco Coursey.
• Aucun compte, aucune configuration. C’est un fichier Markdown. Mobbin et Refero y figurent comme serveurs MCP facultatifs, qui ne valent la peine d’être branchés que si vous vous en servez souvent.
• Des limites assumées. C’est un index, pas une autorité en design. Il ne contient aucune capture d’écran et ne fait aucune recherche. Une fois vos références trouvées, le skill ui construit l’écran et anti-slop le vérifie.

Installer

Le skill seul, avec la CLI skills :

npx skills add molveau/skills -s design-inspiration-index

Le lot Design :

npx skills add molveau/skills -s anti-slop -s ui -s ux -s motion -s design-grill -s design-inspiration-index

Dans Claude Code, les onze skills dans un seul plugin :

/plugin marketplace add molveau/skills
/plugin install molveau-skills@molveau

Tous les skills et tous les lots sont sur la page des skills, et le code source est sur github.com/molveau/skills. À lire aussi : les sites que j’utilise pour les composants et l’inspiration, les skills d’interface, les skills anti-slop.

Liste de vérification

• Le besoin est nommé (barre de navigation, page de tarifs, parcours d’accueil) avant d’ouvrir la moindre galerie.
• Les références viennent d’une vraie galerie ou d’un vrai produit, jamais de la mémoire de l’agent.
• Un serveur MCP payant n’est branché que si vous vous en servez assez souvent pour justifier l’abonnement.
• Le code tiré d’un registre est adapté aux variables de design et aux règles d’accessibilité du projet.
• Le brief garde deux ou trois références, chacune avec ce qu’on veut en retenir.
• Le résultat échoue toujours au test de substitution d’anti-slop avec le nom d’un concurrent.