Claude Design MCP recouvre trois réalités : un serveur intégré qui a renvoyé une erreur HTTP 404 dans Claude Code 2.1.181, la commande /design-sync et un serveur communautaire. Voici la configuration exacte pour Claude Code et Codex, avec la solution à chaque erreur signalée.
Une recherche sur Claude Design MCP vous mène à trois endroits différents à la fois. Le premier est un serveur intégré que Claude Code injecte de lui-même et qui a renvoyé une erreur 404 pour de nombreuses personnes en juin 2026. Le deuxième est la commande /design-sync, qui envoie votre bibliothèque de composants dans Claude Design. Le troisième est un serveur communautaire qui pilote le site de Claude Design depuis un terminal, et c’est le seul des trois qui se connecte aussi à Codex.
Les confondre est la raison pour laquelle la plupart des signalements « ne fonctionne pas » n’aboutissent nulle part : une solution pour l’un ne fait rien pour les autres. Cet article distingue les trois, présente les commandes exactes de configuration du serveur pour Claude Code et Codex, et passe en revue chaque message d’erreur que les utilisateurs ont réellement signalé, avec sa cause et la solution la plus rapide.
💡 En bref : l’erreur 404 du serveur intégré est un problème côté serveur que vous ne pouvez pas corriger en local,
/design-syncéchoue à cause de la connexion et des exigences du projet, et le serveur communautaire échoue à cause des sessions Chrome et des timeouts. Allez directement à la section qui correspond à votre erreur.
Claude Design est l’outil d’Anthropic pour créer des prototypes, des diapositives et des visuels marketing en discutant avec Claude. Il a été lancé le 17 avril 2026 dans le cadre d’Anthropic Labs, fonctionne avec Claude Opus 4.7 et est disponible avec les forfaits Pro, Max, Team et Enterprise. Pour les organisations Enterprise, il est désactivé par défaut, un administrateur doit donc l’activer. Une fois un design prêt, vous pouvez l’exporter sous forme de dossier, de PDF, de PPTX, de fichier HTML autonome, de fichier Canva, d’URL d’organisation, ou le transmettre à Claude Code.
« MCP » apparaît dans ce produit de trois manières distinctes, et chacune a son propre schéma de défaillance.
Claude Code 2.1.181 a commencé à injecter dans chaque session un serveur nommé claude_design. Il pointe vers https://api.anthropic.com/v1/design/mcp, et pour beaucoup de personnes, ce point de terminaison renvoyait une erreur 404. La commande /doctor l’a signalé, et /mcp affichait « Failed to reconnect to claude_design: HTTP 404 at https://api.anthropic.com/v1/design/mcp ».
Le serveur est injecté dynamiquement, il n’existe donc dans aucun fichier de configuration, et tenter de le supprimer aboutit à « Cannot remove MCP server from scope: dynamic ». Le signalement du ticket #69323 a été ouvert le 18 juin 2026, puis fermé comme doublon le 22 juin 2026, aux côtés de plusieurs autres quasi identiques, comme #69325.
Annoncée le 17 juin 2026, /design-sync s’exécute dans le terminal de Claude Code. Il récupère votre véritable système de design (composants React, jetons CSS, polices) pour que les prototypes partent de vos composants dans Claude Design, et il renvoie le code pour que vous puissiez continuer à modifier sur le canevas. /design-login autorise l’accès avec votre compte claude.ai. Vous seul pouvez le lancer : la compétence est marquée comme non invocable par le modèle, donc Claude ne peut pas la démarrer de lui-même.
claude-design-mcp est un serveur non officiel, sous licence MIT, qui pilote Claude Design depuis des CLI agentiques. Il expose environ 30 outils, dont create_design_system, generate, iterate, list_files, read_file, export et publish. Sous le capot, il automatise Chrome sur claude.ai, ce qui signifie qu’il s’appuie sur des points de terminaison internes non documentés et peut cesser de fonctionner à chaque modification du site. Le README précise clairement qu’il n’est ni affilié à Anthropic ni approuvé par elle.
| Élément | Où il s’exécute | Fonctionne dans Codex | Défaillance typique |
|---|---|---|---|
Intégré claude_design | Injecté par Claude Code | Non | HTTP 404 |
/design-sync | Commande slash de Claude Code | Non | Autorisation, 403 |
claude-design-mcp | Serveur stdio local plus Chrome | Oui | Session expirée, timeouts |
Dix minutes de vérification évitent un après-midi de débogage. La plupart des cas « MCP ne fonctionne pas » s’avèrent être un prérequis manquant, et non un serveur défectueux.
/design-sync nécessite un compte claude.ai direct. Une clé API, une configuration Bedrock ou Vertex ne suffit pas./design-sync avertit des imports de plusieurs heures et des coûts en tokens sur les gros dépôts./design-sync. Exécutez claude --version pour vérifier.dist/ publié, ou React avec Storybook. Vue, Angular et Svelte ne sont pas pris en charge. Lancez la commande depuis le dépôt du système de design, et non depuis l’application qui le consomme.💡 Si
/design-loginaffiche Unknown command, vérifiez d’abord votre version. Les builds antérieures à la v2.1.234 sont les premiers suspects.
Seul le serveur communautaire est à installer vous-même, cette configuration porte donc sur celui-là. Le serveur intégré et /design-sync ne nécessitent rien de plus que les prérequis ci-dessus.
git clone https://github.com/e-brokenc0de/claude-design-mcp.git
cd claude-design-mcp
pnpm install
pnpm exec playwright install chromium
pnpm run chrome:cdp
pnpm run build
Le script chrome:cdp lance Chrome avec un profil persistant stocké dans .auth/cdp-chrome. Connectez-vous une fois à claude.ai dans cette fenêtre, et la session restera active entre les appels d’outils.
claude mcp add --transport stdio --scope user claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
Le -- sépare les options de Claude de la commande qui démarre le serveur. Vous préférez un fichier partagé avec l’équipe ? Ajoutez la même entrée dans .mcp.json à la racine du projet :
{
"mcpServers": {
"claude-design": {
"command": "node",
"args": ["/absolute/path/to/claude-design-mcp/dist/server.js"]
}
}
}
| Portée | Qui la voit | Stockée dans |
|---|---|---|
local (par défaut) | Vous, dans ce projet | ~/.claude.json |
project | Tout le monde via le contrôle de version | .mcp.json |
user | Vous, dans tous les projets | ~/.claude.json |
claude mcp list
claude mcp get claude-design
Ouvrez ensuite /mcp dans une session. Un serveur fonctionnel s’affiche comme connecté, et demander à Claude de lister mes projets Claude Design doit renvoyer de vrais résultats. Les serveurs limités au projet demandent votre approbation la première fois ; si vous avez refusé par erreur, claude mcp reset-project-choices fait réapparaître la demande.
Codex lit les serveurs MCP depuis ~/.codex/config.toml, ou depuis un .codex/config.toml limité au projet, en utilisant une table [mcp_servers.<name>] par serveur. La documentation MCP de Codex répertorie toutes les options.
codex mcp add claude-design -- node /absolute/path/to/claude-design-mcp/dist/server.js
codex mcp list
Ou écrivez la table vous-même :
[mcp_servers.claude-design]
command = "node"
args = ["/absolute/path/to/claude-design-mcp/dist/server.js"]
startup_timeout_sec = 30
tool_timeout_sec = 300
Codex utilise par défaut 10 secondes pour le démarrage et 60 secondes par appel d’outil. Un outil qui pilote un site web peut facilement dépasser les deux, donc les augmenter est le premier réglage à faire. Dans l’interface terminal de Codex, /mcp affiche les serveurs actifs.
💡 Chemins Windows : en TOML, une barre oblique inverse démarre une séquence d’échappement dans des guillemets normaux. Écrivez
C:/Users/you/claude-design-mcp/dist/server.jsavec des barres obliques, ou placez le chemin entre guillemets simples.
Une précision honnête : le README communautaire ne montre que la configuration pour Claude Code et Cursor. L’entrée Codex ci-dessus applique le format documenté de Codex à la même commande de lancement ; vérifiez-la donc avec codex mcp list avant de vous y fier.
Le serveur claude_design intégré est injecté par Claude Code, /design-sync et /design-login sont des commandes de Claude Code, et le bouton de transmission envoie les lots de fichiers à Claude Code. Codex ne dispose d’aucune de ces fonctions. En revanche, il peut appeler les outils du serveur communautaire, comme read_file et export, ou simplement travailler à partir d’un dossier exporté ou d’un fichier HTML autonome, qui sont de simples fichiers sur le disque.
| Tâche | Claude Code | Codex |
|---|---|---|
| Ajouter un serveur stdio | claude mcp add name -- cmd | codex mcp add name -- cmd |
| Fichier de configuration | ~/.claude.json, .mcp.json | ~/.codex/config.toml, .codex/config.toml |
| Lister les serveurs | claude mcp list | codex mcp list |
| Panneau en session | /mcp | /mcp |
| Timeout de démarrage | MCP_TIMEOUT (ms) | startup_timeout_sec (par défaut 10) |
| Timeout d’outil | MCP_TOOL_TIMEOUT (ms) | tool_timeout_sec (par défaut 60) |
Repérez votre message dans le tableau, puis lisez la section correspondante.
| Ce que vous voyez | Cause probable | Première action |
|---|---|---|
HTTP 404 at .../v1/design/mcp | Point de terminaison intégré qui répond 404 | Mettre à jour, puis l’ignorer |
/design-login requires an interactive terminal | Session sans interface, web ou non interactive | Exécuter dans une session de terminal classique |
status code 403 lors de l’enregistrement de l’accès | Autorisation refusée | Revérifier le compte et la politique de l’organisation |
| Le serveur échoue ou les outils expirent | Timeout de démarrage ou d’outil trop bas | Augmenter les valeurs de timeout |
| Les outils renvoient des erreurs de connexion | Session Chrome expirée | Relancer pnpm run chrome:cdp |
Ce problème ne vient pas de vous. Le point de terminaison a répondu 404, le serveur est injecté plutôt que configuré, et le signalement précise que l’authentification n’était pas en cause. Il n’y a aucune entrée à supprimer ni aucun jeton à renouveler.
/doctor./mcp et regardez vos propres serveurs. Si seul claude_design est en rouge, considérez-le comme du bruit.claude mcp get <name> et comparez-la avec l’adresse indiquée dans la documentation du serveur.
Deux messages reviennent le plus souvent : « DesignSync needs design-system authorization, but /design-login requires an interactive terminal and is not available in this environment » et un simple Unknown command. Le premier signifie que vous êtes dans une session qui ne peut pas afficher de flux de connexion, comme la version web ou une exécution sans interface. Un signalement associé (#91063) indique qu’il n’existe pas encore de chemin non interactif, ce qui bloque les tâches CI.
/design-login dans un terminal Claude Code normal et interactif, puis /design-sync.
Une erreur 403 affiche « Couldn't record Design agent access ... Request failed with status code 403 ». Elle touche l’application macOS, Claude Code Web et le CLI Windows, et ces utilisateurs avaient déjà confirmé que leur accès au navigateur fonctionnait, il ne s’agissait donc pas d’un problème de forfait. Lorsque j’ai vérifié, le ticket #75024 était toujours ouvert, sans réponse d’un mainteneur. En attendant, vérifiez que votre organisation autorise Claude Design, connectez-vous avec un compte direct, puis réessayez.
Les timeouts relèvent du serveur communautaire. Dans Claude Code, augmentez les deux limites avant le lancement :
MCP_TIMEOUT=30000 MCP_TOOL_TIMEOUT=600000 claude
PowerShell n’accepte pas cette forme préfixée, donc définissez d’abord les variables :
$env:MCP_TIMEOUT = 30000; $env:MCP_TOOL_TIMEOUT = 600000; claude
Dans Codex, augmentez startup_timeout_sec et tool_timeout_sec dans la table TOML à la place.
Le serveur communautaire utilise le profil Chrome dans .auth/cdp-chrome. Si les outils commencent à renvoyer des erreurs de connexion ou des listes de projets vides, la session claude.ai a probablement expiré.
pnpm run chrome:cdp et reconnectez-vous à claude.ai.git pull, pnpm install et pnpm run build. Le serveur repose sur des points de terminaison internes, donc les correctifs arrivent dans le dépôt lorsque le site change.Claude Design fonctionne avec Claude Opus 4.7, et ce même modèle est disponible en tant que modèle de texte sur PicassoIA. C’est une bonne seconde paire d’yeux pour une erreur MCP que vous ne parvenez pas à lire d’un coup d’œil. Voici la marche à suivre :
/mcp dans Image. Si le petit texte devient illisible, augmentez Max Image Resolution (la valeur par défaut est de 0,5 mégapixel).Vous voulez des réponses plus rapides pour les erreurs simples ? Claude Sonnet 5 fonctionne de la même façon.
💡 Ne collez jamais de tokens actifs, de cookies ou de mots de passe dans une zone de discussion. Remplacez-les d’abord par des espaces réservés.
Les prototypes Claude Design remplis de blocs gris de remplacement paraissent inachevés, et les photos de banques d’images correspondent rarement à une marque. Générer les visuels depuis le même terminal où vous exécutez Claude Code ou Codex comble cet écart.
PicassoIA propose une API pour développeurs à https://api.picassoia.com/v1 ainsi qu’un connecteur MCP, de sorte qu’un agent peut demander des médias comme n’importe quel autre appel d’outil. Les tâches sont asynchrones : créez une prédiction, interrogez-la jusqu’à ce qu’elle se termine, puis récupérez le résultat. Chaque compte peut lancer jusqu’à 5 prédictions simultanées, partagées entre les tokens et les connexions MCP, et les connexions se gèrent sur picassoia.com/en/mcp/accounts une fois connecté. Consultez la page tarifs pour savoir ce que comprend votre forfait avant de construire dessus.
Trois modèles comptent pour le travail de design :
Sur le site, Seedream 5 Pro est une autre option de texte vers image pour les scènes photoréalistes.
Chaque solution ci-dessus aboutit au même constat : un flux de design fonctionnel a toujours besoin d’images. Ouvrez Picasso IA Image, décrivez une scène comme vous brieferiez un photographe, et regardez-la se générer. Changez l’objectif, la lumière et le lieu jusqu’à ce que le cadrage vous convienne, puis faites passer la meilleure version par Image Editor Pro pour les retouches finales, ou animez-la avec Picasso IA Video. Essayez trois prompts aujourd’hui, un pour une bannière d’accroche, un pour une photo de produit et un pour un portrait, et voyez à quel point votre prochain prototype prend forme plus vite.
Choisissez votre langue
