Comment utiliser Inspo MCP : intégrer des références de design et des captures dans le développement UI avec Claude Code ou Codex

Demander à Claude Code ou Codex de « créer une landing page épurée, soignée et bien conçue » suffit généralement à obtenir une page fonctionnelle. Le plus difficile est que le résultat retombe souvent sur les mêmes codes : fond en dégradé, cartes aux coins arrondis et grand titre, sans reprendre la composition, le rythme ni la hiérarchie visuelle que vous souhaitiez réellement utiliser comme référence.

Inspo répond à ce problème précis : avant que l’agent n’écrive l’interface, il reçoit un ensemble de références de design issues de sites réels. Le site officiel recense actuellement 832 sites en production, 2 320 enregistrements de pages — chacun avec des captures desktop et mobile —, 68 composants de référence, ainsi que des informations extraites telles que les palettes, les polices, les espacements, les rayons d’angle, les largeurs de conteneur et la structure des pages. Ces données sont mises à disposition de clients comme Claude Code et Codex via MCP.

L’installation ne prouve toutefois pas que l’agent a vu les captures, et encore moins que la page finale les reflète. Un processus plus fiable consiste à :

1. Connecter Inspo MCP et vérifier que le client est réellement connecté.
2. Demander d’abord à l’agent de rechercher des références, sans le laisser coder immédiatement.
3. Vérifier quels enregistrements de pages et quelles URL d’images il a reçus, ainsi que s’il a réellement lu les images.
4. Transformer les références choisies en un « contrat de références » explicite.
5. Après l’implémentation, examiner le rendu réel, le comparer point par point, puis le corriger.

Nous utiliserons ci-dessous une tâche hypothétique : créer, pour un projet existant, une landing page de produit B2B destinée aux développeurs. Cet exemple illustre la méthode ; il ne signifie pas que cet article a exécuté ou testé votre projet.

Ce qu’Inspo MCP fournit réellement

Inspo n’est pas seulement un moteur de recherche de captures. D’après sa page MCP officielle et le dépôt du projet, un agent peut recevoir trois catégories de références.

1. Pages et captures

search_screens permet de chercher des pages réelles à partir d’une description en langage naturel, d’un style, d’un secteur, d’un type de page, d’une couleur, d’un mode clair ou sombre et d’une structure de page. Les résultats peuvent inclure :

• le titre de la page, son slug Inspo et l’URL du site d’origine ;
• les URL des captures desktop et mobile ;
• une miniature de la page ;
• les couleurs, les polices, la stack technique et les tags ;
• une analyse des caractéristiques générales et de la structure des sections.

Pour étudier un candidat précis, utilisez get_screen afin d’obtenir un enregistrement plus complet, plutôt que d’injecter de nombreux candidats dans le contexte en une seule fois.

2. Un système de design structuré

Chaque site indexé dispose d’un fichier DESIGN.md dérivé des informations de ses pages. get_design_system peut renvoyer la typographie, les couleurs sémantiques, l’échelle typographique, les espacements, les rayons, les variables CSS, les largeurs de conteneur et d’autres données.

Ces informations sont importantes, car « prends ce site comme référence » reste trop vague. En revanche, des consignes comme « utilise un hero en deux colonnes, limite le contenu dans un conteneur, donne au bouton principal une couleur d’accent très contrastée et conserve un espace marqué entre les sections » sont bien plus faciles à exécuter de manière cohérente.

3. Composants de référence et code

Inspo propose aussi des composants de référence pour la navigation, les hero sections, les tarifs, les pieds de page et d’autres éléments. L’agent peut d’abord utiliser find_reference_components pour trouver un composant adapté, puis appeler get_reference_jsx pour récupérer le JSX correspondant.

Cela ne signifie pas qu’il faut copier un site entier tel quel. Il est préférable de reprendre la composition du composant et sa hiérarchie d’information, puis de les adapter à la stack, à la marque, au contenu et aux interactions du projet actuel.

recommend est le meilleur point de départ. Donnez-lui un besoin formulé simplement : l’outil combine alors structure de page, sites candidats, composants de référence, palettes et suggestions de mise en page. Pour une première utilisation, il est généralement plus efficace de demander à l’agent d’appeler recommend, puis d’examiner en détail un ou deux candidats, plutôt que de rechercher immédiatement une douzaine de pages.

Distinguez la connexion au modèle d’Inspo MCP

Claude Code ou Codex a besoin d’une connexion fonctionnelle à un modèle pour analyser, modifier et raisonner sur le code. Inspo MCP fournit des ressources de design externes. Ce sont deux chaînes distinctes, avec des adresses, des modes d’authentification et des causes d’erreur différents.

Si vous utilisez déjà Claude Code ou Codex via BetterToken, commencez par configurer la connexion au modèle à l’aide de la documentation correspondante :

• Guide de connexion Claude Code
• Guide de connexion Codex

Configurez ensuite Inspo séparément. N’utilisez pas https://inspomcp.dev/api/mcp comme Base URL du modèle et ne transmettez pas votre API Key BetterToken à Inspo. L’endpoint hébergé d’Inspo ne nécessite actuellement ni compte ni API Key. BetterToken n’héberge pas Inspo, n’accorde pas de droits sur des ressources de design tierces et ne garantit pas que l’agent lira les images ou produira un type précis d’interface.

Avant la connexion, vérifiez simplement que :

• Claude Code ou Codex est installé et sait effectuer des tâches de programmation ordinaires ;
• le client peut accéder à l’endpoint hébergé d’Inspo ;
• Node.js et npx sont disponibles si vous comptez utiliser l’installateur ou le mode stdio local.

Connecter Inspo MCP

Inspo propose un installateur automatique, mais vous pouvez également utiliser les commandes MCP du client. Sur une machine équipée de plusieurs outils de programmation assistée par IA, commencez par --dry-run pour voir quels clients et fichiers de configuration seront modifiés.

Méthode 1 : utiliser l’installateur Inspo

Vérifier Claude Code sans écrire de configuration :

npx -y inspo-mcp install --dry-run --client claude-code

Installer après avoir vérifié le plan :

npx -y inspo-mcp install --client claude-code

Vérifier uniquement Codex :

npx -y inspo-mcp install --dry-run --client codex

Installer après avoir vérifié le plan :

npx -y inspo-mcp install --client codex

Si --client n’est pas indiqué, l’installateur détecte les installations existantes de Claude Code, Codex, Cursor, VS Code, Windsurf, Claude Desktop et Zed. La documentation officielle d’Inspo MCP précise qu’il affiche d’abord le plan et demande une confirmation ; --dry-run affiche le plan sans écrire de fichier, tandis que -y ignore la confirmation.

Méthode 2 : ajouter directement le MCP hébergé

L’endpoint hébergé recommandé par Inspo est :

https://inspomcp.dev/api/mcp

Le dépôt officiel décrit Inspo comme un service en lecture seule, mais il reste un MCP externe fourni par un tiers. Dans un environnement d’équipe, examinez le dépôt, le périmètre des données et la politique réseau avant de le connecter. La mention « lecture seule » ne dispense pas d’une vérification de confiance.

Selon la documentation officielle de Claude Code sur MCP, les services distants doivent être ajoutés via HTTP. Pour rendre Inspo disponible dans tous les projets locaux, exécutez :

claude mcp add --scope user --transport http inspo https://inspomcp.dev/api/mcp

Vérifiez ensuite :

claude mcp get inspo
claude mcp list

Vous pouvez également saisir ceci dans une session Claude Code :

/mcp

Le message Added indique uniquement que la configuration a été écrite. Pour connaître l’état réel, consultez claude mcp list : seul Connected confirme la connexion. Résolvez les états Failed to connect, Pending approval ou un service désactivé avant de poursuivre.

La documentation d’OpenAI sur MCP dans Codex indique que Codex prend en charge les services Streamable HTTP et STDIO. Ajoutez le MCP distant avec :

codex mcp add inspo --url https://inspomcp.dev/api/mcp

Affichez les services configurés :

codex mcp list

Dans l’interface interactive de Codex, vous pouvez aussi utiliser :

/mcp

La documentation actuelle d’OpenAI précise que Codex CLI, l’extension IDE et l’application de bureau ChatGPT partagent la configuration MCP lorsqu’ils s’exécutent sur le même hôte Codex. Après avoir ajouté ou modifié le service, redémarrez le client actuel ou ouvrez une nouvelle session, puis vérifiez qu’Inspo apparaît.

stdio n’est qu’un transport alternatif

Si le client ne peut pas facilement se connecter à une URL distante, il peut lancer le service stdio via npx :

claude mcp add --scope user inspo -- npx -y inspo-mcp

codex mcp add inspo -- npx -y inspo-mcp

Vous pouvez aussi ajouter --local à la commande d’installation automatique. Ce mode récupère néanmoins toujours le catalogue Inspo depuis un CDN ; il ne s’agit donc ni d’un fonctionnement hors ligne ni d’un auto-hébergement complet.

Lors de la première utilisation, cherchez les références avant de demander du code

Une erreur fréquente consiste à fusionner « rechercher des références » et « implémenter la page » dans une seule phrase :

Utilise Inspo pour me créer une belle landing page.

L’agent choisit alors lui-même les références, décide ce qu’il doit en reprendre et commence immédiatement à coder. Si le résultat est mauvais, vous ne saurez pas si les résultats de recherche étaient inadaptés, si les captures ne sont jamais entrées dans le contexte ou si l’implémentation s’est éloignée des références.

Une première consigne plus sûre serait :

Ne modifie pas encore le code et ne commence pas à concevoir la page.

Utilise Inspo MCP pour trouver 4 références candidates pour une « landing page de produit B2B d’API d’IA destinée aux développeurs ».

Exigences :
- style visuel sobre et professionnel, sans grandes surfaces de dégradés colorés ;
- le hero doit exprimer clairement la valeur du produit et comporter un CTA principal ;
- il peut montrer l’interface du produit ou un flux d’appel, mais ne doit pas ressembler à un site corporate traditionnel ;
- examine les références desktop et mobile ;
- commence par recommend, puis utilise search_screens, get_screen ou get_design_system uniquement si nécessaire.

Pour chaque candidat, renvoie :
1. le titre de la page, son Inspo slug et son sourceUrl ;
2. les URL des captures desktop et mobile, si elles figurent dans le résultat de l’outil ;
3. la macrostructure, la palette principale et la typographie ;
4. 3 choix de design concrets qui méritent d’être repris ;
5. les éléments de marque, textes ou décorations qui ne doivent pas être copiés.

À la fin, recommande une seule référence principale et au maximum deux références secondaires, puis explique le rôle de chacune. N’écris pas encore de code.

Le but n’est pas d’obtenir davantage d’adjectifs, mais des identifiants de pages et des preuves traçables. Vous devez voir un slug précis, l’URL du site d’origine, les URL des captures et des données de design, plutôt qu’un simple résumé du type « moderne, épuré et professionnel ».

Comment vérifier que l’agent a réellement reçu les références

Vous pouvez diviser la vérification en quatre niveaux. La réussite d’un niveau ne prouve pas automatiquement le suivant.

Niveau	Preuve observable	Ce que cela prouve
MCP configuré	Claude Code affiche Connected, ou Inspo apparaît dans la liste MCP de Codex	Connected confirme la connexion de Claude Code ; une entrée dans Codex confirme la configuration, et un appel d’outil réussi doit confirmer l’accès au service
L’outil a renvoyé des données	La réponse contient un vrai slug, un sourceUrl, des couleurs, des polices, la structure de la page et les URL des captures	L’agent a appelé Inspo et reçu un enregistrement structuré
Les images ont été lues	L’agent ouvre les URL avec un outil capable de lire les images ou utilise une visionneuse disponible, puis décrit des détails visuels précis	L’agent ne s’est pas limité aux descriptions ou aux liens ; la présence de miniatures ne suffit pas à le prouver
La page reflète la référence	Le rendu réel présente une correspondance explicable avec la structure, la hiérarchie, le rythme et le responsive choisis	La référence a réellement influencé l’implémentation

Cette distinction est essentielle. Le format de réponse d’Inspo contient toujours du texte structuré et peut inclure les URL des images originales. Dans les parcours compatibles, il peut aussi insérer des miniatures sous forme de blocs d’image natifs dans le résultat de l’outil. Cependant, l’implémentation du format de réponse gère explicitement deux autres cas : si la récupération de l’image échoue, le bloc d’image peut être omis tandis que le texte et les URL restent présents ; une configuration privilégiant le texte peut également ne renvoyer que du texte.

Ainsi, le fait que l’agent fournisse une URL de capture ne prouve pas que le modèle a lu ses pixels. Envoyez une consigne de vérification comme celle-ci :

Commence par prouver que tu as reçu la référence principale. Ne commence pas à écrire du code.

Renvoie :
- les noms des outils Inspo réellement utilisés pendant cette session ;
- le slug, le sourceUrl, l’URL de la capture desktop et l’URL de la capture mobile de la référence principale ;
- 3 faits visuels concrets observés sur la capture desktop et 3 sur la capture mobile, par exemple la composition du hero, la position de la navigation, l’alignement du CTA, le recadrage de l’image, l’organisation des cartes ou le comportement de repli ;
- les conclusions tirées des captures et celles provenant uniquement des champs texte d’Inspo.

Si le client actuel n’a reçu que du texte ou des URL et n’a pas lu les pixels des images, écris explicitement « les pixels des images n’ont pas été lus ». Ne déduis pas de détails visuels à partir de la description.

Le bon résultat n’est pas une longue critique de design, mais une séparation nette entre les éléments réellement visibles dans l’image et les conclusions fournies par les données structurées.

Si l’agent ne fait que répéter la palette, les polices et la description northstar, demandez-lui d’ouvrir les URL des captures avec le navigateur ou l’outil de lecture d’images déjà disponible dans le client. Si le client et le modèle actuels acceptent les entrées visuelles, téléchargez les captures et joignez-les comme images. Si le modèle ou le chemin du fournisseur ne traite pas les images, joindre un fichier ne changera rien : utilisez Inspo pour analyser la structure, les couleurs et le texte, ou passez à une configuration compatible avec les images. Le fait que MCP puisse renvoyer des images ne signifie pas que toutes les combinaisons de clients et de modèles les traiteront.

Transformez les références en « contrat de références »

Une fois les candidats choisis, ne vous contentez pas de dire « reprends l’ambiance de la référence A ». Définissez le rôle de chaque référence et indiquez clairement ce qui ne doit pas être copié.

Demandez à l’agent de produire un contrat comme celui-ci :

À partir de la référence principale et des références secondaires déjà confirmées, prépare d’abord un « contrat de références ». Ne modifie pas encore le code.

Inclus :

1. Référence principale
- slug / sourceUrl :
- Responsable uniquement de : la structure générale de la page, la composition du hero, le rythme des sections

2. Référence secondaire A
- slug / sourceUrl :
- Responsable uniquement de : la hiérarchie typographique, la largeur du corps de texte, les espaces vides

3. Référence secondaire B (uniquement si elle est réellement nécessaire)
- slug / sourceUrl :
- Responsable uniquement de : un composant précis ou le comportement de réorganisation sur mobile

4. Le projet actuel doit conserver
- la stack technique, le routage et les conventions de composants existants
- les vrais textes du produit, les limites fonctionnelles et les couleurs de marque
- les interactions, les exigences d’accessibilité et les contraintes de performance existantes

5. Interdictions explicites
- ne pas copier le logo, le nom de marque, les illustrations, les photos ni les textes originaux du site source
- ne pas reproduire le site entier pixel par pixel
- ne pas inventer des fonctionnalités absentes du produit actuel pour se rapprocher de la référence

6. Critères d’acceptation
- dans un viewport desktop courant, le hero présente entièrement le titre, l’explication, le CTA et le visuel principal
- la hiérarchie de l’information suit la référence principale, mais le contenu appartient au produit actuel
- la version mobile applique une réorganisation explicite, et pas seulement une réduction de la mise en page desktop
- les espacements entre sections, la largeur du conteneur, la hiérarchie typographique et la priorité des boutons suivent des règles vérifiables

Ce contrat transforme l’inspiration en contraintes. La référence principale contrôle la structure globale ; les références secondaires résolvent des problèmes locaux. Ajouter des références ne garantit pas un meilleur résultat : si cinq sites pilotent simultanément les couleurs, la typographie, les cartes et le hero, la page finit souvent par redevenir un design IA générique sans priorité claire.

Laisser Claude Code ou Codex implémenter la page

Une fois les références et les critères d’acceptation confirmés, laissez l’agent examiner le dépôt et modifier le code. La consigne ci-dessous n’impose volontairement ni npm run dev, ni répertoire de framework, ni commande de test : ces éléments doivent être déterminés à partir du projet actuel, et non devinés.

Commence maintenant l’implémentation.

Examine d’abord la stack technique du dépôt actuel, les points d’entrée des pages, les variables de design, les composants réutilisables et les scripts disponibles. Modifie ensuite la page conformément au « contrat de références » confirmé.

Exigences d’implémentation :
- utilise le framework, le système de composants et les dépendances existants ; n’ajoute pas de nouveau framework UI sauf nécessité réelle ;
- conserve le contenu et les fonctionnalités réels du produit, et ne copie pas les ressources de marque ni les textes des sites de référence ;
- transforme les références en mise en page, variables CSS et composants propres à ce projet ;
- implémente délibérément les versions desktop et mobile ; ne laisse pas le mobile pour la fin en comptant sur une réduction automatique ;
- corrige d’abord la structure générale, la hiérarchie de l’information et les espacements, puis les détails décoratifs comme les ombres et les rayons ;
- ne remplace pas les composants existants du projet uniquement parce qu’Inspo fournit du JSX.

Avant de modifier les fichiers, explique brièvement :
1. quels fichiers tu comptes modifier ;
2. dans quel composant ou quelle règle de style chaque point de référence sera appliqué ;
3. quel contenu existant doit rester inchangé.

Une fois terminé :
- exécute le formatage, les vérifications de types ou les tests déjà présents dans le dépôt ;
- lance l’aperçu local disponible ;
- liste les fichiers réellement modifiés ;
- fournis une correspondance « point de référence → emplacement d’implémentation » ;
- n’évalue pas le résultat uniquement avec des expressions comme « plus moderne » ou « plus premium ».

Si le projet utilise déjà des design tokens, demandez à l’agent de modifier d’abord les tokens ou les variables sémantiques, plutôt que de disperser des couleurs et dimensions codées en dur dans plusieurs composants. La correction du rythme global de la page sera ainsi beaucoup plus simple lors de l’itération suivante.

L’évaluation finale doit reposer sur le rendu réel, pas sur le diff du code

Le fait qu’une page compile prouve seulement que le code fonctionne. Pour savoir si elle reflète les références, il faut observer la page réelle.

Les pages Inspo comportent généralement des captures desktop et mobile. Son Colophon officiel indique que l’archive utilise des largeurs de 1440 et 375 pixels. Il n’est pas nécessaire de reproduire exactement la hauteur, mais examiner votre implémentation à des largeurs proches facilite la comparaison de la structure générale et de la réorganisation mobile.

Si Claude Code ou Codex dispose déjà d’un navigateur, de Playwright ou d’un autre outil de capture, demandez à l’agent d’ouvrir la page locale. Sinon, ouvrez vous-même l’aperçu dans le navigateur, réalisez des captures desktop et mobile, puis transmettez-les à l’agent.

Demandez-lui de les examiner dans ce format :

Compare :
- les captures desktop et mobile confirmées de la référence principale ;
- les captures réelles de la page actuelle à des largeurs d’environ 1440px et 375px.

Ne redessine pas encore la page et ne modifie pas le code. Commence par produire un tableau des écarts :

| Point de contrôle | Preuve observable dans la référence | Implémentation actuelle | Écart | Modification recommandée |
| --- | --- | --- | --- | --- |
| Structure du hero |  |  |  |  |
| Hiérarchie du titre et du CTA |  |  |  |  |
| Conteneur et espaces vides |  |  |  |  |
| Hiérarchie typographique |  |  |  |  |
| Couleur et contraste |  |  |  |  |
| Organisation des composants |  |  |  |  |
| Réorganisation mobile |  |  |  |  |

Sélectionne ensuite uniquement les 3 écarts ayant le plus d’impact et corrige-les. Effectue un nouveau rendu et une nouvelle vérification après les modifications. N’introduis pas une nouvelle direction de design au cours de la même passe.

Un bon retour doit être observable et actionnable. Par exemple :

• Ne dites pas : « Le hero n’est pas encore assez premium. »
• Dites : « Dans la référence principale, le titre, le CTA et l’interface du produit sont tous visibles dans le premier viewport. La page actuelle contient trop d’espace vertical, ce qui place l’interface sous la ligne de flottaison. Réduis les espacements verticaux du hero, limite la largeur du titre et fais apparaître le visuel principal dans une hauteur desktop courante. »

Autre exemple :

• Ne dites pas : « La version mobile ne ressemble pas assez à la référence. »
• Dites : « Sur mobile, la référence affiche d’abord le titre et le CTA, puis une carte produit sur une seule colonne. L’implémentation actuelle conserve les deux colonnes du desktop, ce qui comprime le texte et l’image. Passe à une seule colonne sur mobile et conserve le CTA avant le visuel principal. »

Corriger à chaque passe quelques écarts à fort impact permet généralement de converger plus vite que de demander sans cesse « rends-la plus jolie ».

Problèmes fréquents

La commande de configuration a réussi, mais l’agent ne trouve pas Inspo

Vérifiez l’état du client avant de réinstaller quoi que ce soit.

Claude Code :

claude mcp get inspo
claude mcp list

Codex :

codex mcp list

Vérifiez que l’endpoint ne contient aucun caractère supplémentaire, puis redémarrez le client. Si Claude Code utilise un .mcp.json au niveau du projet, il peut également être nécessaire d’approuver le service dans un espace de travail de confiance.

MCP est connecté, mais l’agent n’appelle jamais Inspo

Séparez la recherche de références de l’écriture du code. Exigez explicitement : « appelle d’abord Inspo, renvoie le slug, le sourceUrl et les URL des captures, et ne modifie pas le code tant que les références ne sont pas confirmées ». Vérifiez également dans /mcp que le service est activé.

L’agent renvoie une description de page, mais aucune image n’apparaît

L’appel n’a peut-être renvoyé que du texte, la récupération de la miniature a pu échouer, le client n’affiche peut-être pas les blocs d’images MCP, ou le chemin du modèle ne traite pas les images. Vérifiez si les URL des captures desktop et mobile sont toujours présentes, puis demandez à l’agent d’indiquer clairement s’il a lu les pixels. Si le client et le modèle actuels acceptent les entrées visuelles, ouvrez les URL avec un outil de navigation ou joignez les captures. Avec un modèle limité au texte, utilisez les données structurées ou passez à une configuration capable de traiter les images.

La page ressemble toujours à un template générique

La solution n’est généralement pas de chercher dix références supplémentaires, mais de resserrer la consigne : une référence principale contrôle la macrostructure, une référence secondaire contrôle la typographie et les espaces, et au maximum une autre contrôle un composant précis. Consignez ces rôles dans le contrat et exigez une correspondance entre chaque point de référence et son emplacement dans le code.

Le contexte devient trop volumineux et l’agent mélange les références

Utilisez recommend pour obtenir des candidats, puis appelez get_screen ou get_design_system uniquement pour les un ou deux candidats retenus. Ne chargez pas simultanément de nombreux enregistrements complets et sources de composants. N’appelez get_reference_jsx que lorsqu’un composant précis est nécessaire.

Le site d’origine ne correspond plus à la capture Inspo

Inspo conserve les informations de la page au moment de la capture, alors que le site d’origine peut être remanié par la suite. Comparez avec la capture et l’enregistrement Inspo sélectionnés. sourceUrl sert à retracer la source ; il ne faut pas supposer que le site restera toujours visuellement identique à l’archive.

L’objectif n’est pas seulement « d’installer un MCP », mais de construire une chaîne de preuves

La valeur d’Inspo MCP ne réside pas dans sa capacité à décider automatiquement ce qu’est un bon design. Il transforme « je veux cette ambiance » en pages, captures, données de design et composants de référence traçables.

Une passe fiable de développement UI doit laisser quatre catégories de preuves :

1. le client confirme qu’Inspo est connecté ;
2. l’agent renvoie des pages et des ressources de design précises ;
3. vous pouvez confirmer qu’il a lu les captures, ou il indique honnêtement qu’il n’a reçu que du texte ;
4. le rendu final permet d’expliquer, point par point, quelles règles de structure, de hiérarchie et de responsive viennent des références.

En séparant la recherche, la confirmation, l’implémentation et la vérification, Claude Code ou Codex ne se contente plus de « fabriquer une jolie page au feeling ». Il travaille dans un contexte de design que vous pouvez examiner, corriger et réutiliser.