Claude Code design : donner du goût à vos interfaces

Si vous cherchez « claude code design », vous avez sûrement vu le problème : Claude Code connaît la syntaxe, pas le goût. Demandez-lui une landing page, il vous rend des bordures grises et des boutons violets. C’est pourtant sur ce premier écran que votre client juge tout le projet. La méthode tient en trois gestes : brancher un outil de design par MCP, lui donner le système de design d’un site qui a fait ses preuves, puis vérifier l’écran dans un navigateur avant de le montrer au client.

19:04

Pourquoi Claude Code rate le design

Le scénario est toujours le même. Vous demandez une interface propre, Claude Code vous sort une page sans hiérarchie visuelle, sans typographie pensée, sans espacement cohérent.

Vous relancez : « rends-le plus moderne ». Ça bouge un peu. Vous ajoutez le mode sombre, ça casse autre chose. Quinze allers-retours plus tard, la page reste bancale.

Un client m’a appelé, frustré, avec exactement ce problème. Il utilisait Opus, le meilleur modèle disponible. Le modèle n’y était pour rien : Claude Code code très bien, il n’a simplement pas de cerveau design. Sans consigne, il dessine la moyenne de ce qu’il a vu.

Il faut donc lui donner ce qui lui manque : des règles de typographie, des palettes, des principes d’espacement. Soit par un outil spécialisé qu’il appelle, soit par un fichier qu’il lit.

Brancher un outil de design à Claude Code par MCP

Dans la vidéo, j’utilise AIDesigner. Le principe ressemble à Lovable ou Bolt, mais l’outil ne fait que du design. Ses créateurs ont empaqueté les règles de typo, les palettes, l’espacement et les tendances actuelles, et Claude Code l’appelle par un serveur MCP (le pont entre Claude Code et un outil externe, détaillé dans l’article sur les serveurs MCP).

L’installation se fait dans le dossier du projet. La commande est dans la documentation MCP d’AIDesigner ↗ (nouvel onglet) ; aujourd’hui, c’est celle-ci :

npx -y @aidesigner/agent-skills init
claude

Elle écrit un .mcp.json dans le projet. Dans Claude Code, tapez /mcp, choisissez aidesigner, puis « Authenticate » : le navigateur s’ouvre, vous créez un compte. Au tournage, un compte neuf avait 5 crédits gratuits, un crédit valant à peu près une création ou une modification.

Un piège m’a eu pendant la démo : dans un nouveau dossier, oubliez la commande d’installation et le MCP n’est pas là. Un /mcp avant le premier prompt le confirme.

La phrase qui compte est à la fin du prompt. Elle dit à Claude Code de ne pas reprendre la main sur le design :

Utilise le MCP AIDesigner pour concevoir la landing page d’un SaaS de gestion
de projet pour les équipes tech. Design moderne et minimaliste, mode clair,
dans l’esprit de Linear : typographie nette, animations subtiles, hero avec
un visuel produit.
Laisse AIDesigner gérer le design. Fournis juste un prompt général.
La page peut être à la racine.

Sans ces deux dernières phrases, Claude Code détaille lui-même le design dans sa demande, et vous retombez sur son goût par défaut.

Les 4 démos : SaaS, restaurant, e-commerce et clone de Stripe

J’ai tout tourné en direct, sans retoucher une ligne. Chaque projet part d’un dossier vide.

1. La landing page d’un SaaS. Référence donnée : Linear. Environ 2 minutes pour générer le design, puis 4 à 5 minutes pour que Claude Code l’enregistre dans un fichier. Résultat : effets au survol, logos qui défilent, une section tarifs, des animations discrètes. Vous continuez ensuite dans Claude Code (« change ce bloc »), qui repasse par l’outil à chaque modification.

2. Le site vitrine d’un restaurant fusion asiatique. « Ambiance chaleureuse, typographie élégante, belle photo de plat dans le hero, navigation fluide vers le menu, les horaires et la réservation. » 2 minutes 30 de génération, 2 à 3 minutes d’enregistrement. Le rendu est bon, mais quelques images manquent.

3. La page d’accueil d’une boutique de cosmétiques naturels. « Design épuré, belles photos produit, navigation claire par catégorie, bannière de livraison gratuite en haut, mode clair. » Les polices sont bien choisies, l’animation du hero tient la comparaison avec une boutique Shopify soignée. Là aussi, une photo produit manque : sur un vrai projet, ce sont celles de votre client qui la remplacent.

4. Le clone de la page d’accueil de stripe.com. C’est le test le plus dur. Le résultat n’est pas la même page, mais il reprend les principes : les mouvements, les icônes animées, le bloc de code pour une plateforme d’API. Et c’est ce qu’il faut viser. Vous ne livrerez jamais un clone de Stripe ; vous partez de son idée de design pour construire le site de votre client.

Le verdict honnête : trois créations à partir de rien de niveau professionnel, des images à remplacer à chaque fois, et un clone qui inspire sans copier au pixel près.

Copier le style d’un grand site avec un DESIGN.md

Si vous ne voulez pas d’outil à crédits, il existe une méthode gratuite. Un DESIGN.md est un fichier texte, en markdown, qui décrit le système de design d’un site : couleurs, polices, espacements, arrondis, composants, ce qu’il faut faire et ne pas faire. Le format vient de Google Stitch, et Claude Code le lit comme n’importe quel fichier du projet.

0:29

La méthode tient en quatre étapes :

1. Ouvrez Refero Styles ↗ (nouvel onglet), qui référence plus de 2 000 sites, d’OpenAI à ElevenLabs.
2. Faites défiler jusqu’à ce qu’un site vous arrête, et ouvrez-le.
3. Copiez son DESIGN.md et collez-le à la racine du projet.
4. Décrivez le site de votre client à Claude Code, en lui demandant de suivre ce fichier.

Claude récupère les couleurs, les polices, les espacements et les arrondis, et code la page du client dans ce style. Choisissez une référence proche du métier du client : le style d’un outil pour développeurs ne va pas à un cabinet d’avocats.

Les outils qui donnent du goût, et celui qui vérifie

Quatre outils reviennent dans mes projets d’interface. Les trois premiers agissent avant le code, le dernier après.

0:58

• Taste Skill : un skill open source qui donne à Claude des règles de typographie, d’espacement, de couleur et de mouvement, pour que l’interface arrête d’avoir l’air vibe codée. Il s’installe par npx skills add Leonxlnx/taste-skill.
• Awesome DESIGN.md : le dépôt GitHub de VoltAgent (plus de 120 000 étoiles) qui rassemble des DESIGN.md tirés de grandes marques, avec un aperçu clair et sombre de chacun. La même méthode que Refero Styles, en version dépôt.
• Le skill /design de Claude Mastery : il se comporte comme un directeur artistique. Il vous demande ce qu’on doit retenir du produit en 3 secondes, bannit ce qui fait IA par défaut et vous montre un aperçu avant la moindre ligne d’interface. Je le détaille dans l’article sur les skills de Claude Code.
• Playwright CLI : il donne à Claude un navigateur. Claude ouvre la page qu’il vient de construire, la capture et repère les bugs avant que votre client ne les voie. Il s’installe par npm install -g @playwright/cli, et consomme moins de contexte que le serveur MCP de Playwright.

Pour choisir parmi les autres, l’article sur les plugins de Claude Code donne la règle. Et si votre écran est un tableau de bord, une bibliothèque de composants change plus le rendu qu’un skill de style : c’est le sujet de l’article sur le dashboard Claude Code.

Claude Design : l’outil de maquettes d’Anthropic, et quand le préférer

Beaucoup de recherches sur « claude code design » tombent sur Claude Design, un autre produit : il vient d’Anthropic Labs, a été lancé le 17 avril 2026 avec Opus 4.7, et produit des maquettes, des prototypes, des diapositives et des one-pagers à partir d’une conversation.

Ce qu’il fait, d’après les pages d’Anthropic :

• Il lit votre code et vos fichiers de design pour construire un système de design, que chaque projet suivant reprend (couleurs, typographie, composants).
• Il exporte en PDF, PPTX, HTML autonome, vers Canva, ou en un paquet de passation que Claude Code reçoit en une seule instruction.
• Il vit désormais dans Claude : depuis septembre 2026, il marche dans n’importe quelle conversation, dans l’onglet Artifacts et dans Claude Code, où la commande /design crée, modifie et synchronise un design. La version autonome de claude.ai/design ferme le 14 décembre 2026 : déplacez vos systèmes de design avant.
• Il partage vos limites d’usage avec le reste de Claude, Claude Code compris, sur les plans payants.

Attention au nom : le /design d’Anthropic n’est pas le skill /design de Claude Mastery. Si vous avez installé les deux, vérifiez lequel répond.

Quand le préférer à Claude Code seul :

• Avant de coder, pour faire valider une direction au client : une maquette se commente et se partage par un lien, sans dépôt ni serveur.
• Quand le livrable n’est pas un site : une présentation de projet, un one-pager, un deck commercial.
• Quand le client a déjà une charte : le système de design tiré de ses fichiers évite de la redécrire à chaque écran.

Pour l’écran que le client utilisera vraiment, c’est Claude Code qui l’écrit, dans son dépôt, avec les données réelles. Le bon enchaînement : la direction validée dans Claude Design, puis la construction dans Claude Code, puis la vérification au navigateur.