Claude Code pour le design.

Ce qu’est réellement Claude Code

Claude Code est l’outil de code agentique d’Anthropic. Il lit votre base de code, modifie des fichiers, exécute des commandes et s’intègre à vos outils de développement — il planifie, écrit et vérifie le travail à partir de tâches en langage naturel, plutôt que de se contenter de compléter des lignes.

Il se décline sur plusieurs surfaces qui partagent toutes le même moteur : une CLI en terminal, des extensions IDE pour VS Code, Cursor et JetBrains, une application desktop avec revue visuelle des diffs, et une expérience web pour les tâches de longue durée. Vos fichiers CLAUDE.md, vos réglages et vos serveurs MCP s’appliquent à toutes.

• Fichier d’instructions: Claude Code lit un fichier CLAUDE.md à la racine de votre projet au début de chaque session — l’endroit naturel pour encoder vos conventions de design, vos tokens et vos checklists de revue.
• Skills: Les Agent Skills regroupent des instructions, scripts et ressources réutilisables que Claude charge à la demande, y compris la skill officielle Frontend Design d’Anthropic pour le goût.
• Plan et sous-agents: Il peut planifier avant d’agir et lancer des sous-agents qui travaillent en parallèle sur différentes parties d’une tâche, ce qui maintient la cohérence des grands refactors d’UI.

• Éditeur : Anthropic
• Identifiant : clé API Anthropic (BYOK, via la Console) ou abonnement Claude (Pro / Max)
• Surfaces : CLI en terminal, extensions VS Code / Cursor / JetBrains, application desktop, web

Pourquoi Claude Code est bon en design

Parmi les agents de code, Claude Code a une réputation de goût pour le travail en frontend. Quelques raisons l’expliquent.

• Des décisions précises, pas vagues: Claude Code a tendance à s’engager sur des choix concrets — valeurs hex exactes, échelles d’espacement, rampes typographiques et hiérarchie des composants — au lieu de rester évasif, ce qui distingue une vraie interface d’une maquette de remplissage.
• Un raisonnement conscient de la base de code: Avec un large contexte de travail, il refactorise l’UI à travers de nombreux fichiers à la fois, en réutilisant vos composants et tokens existants au lieu de réinventer des styles isolés.
• Une skill frontend officielle: Anthropic fournit une skill Frontend Design qui amène Claude à définir d’abord une direction de design et l’éloigne délibérément des polices système génériques et des dégradés violets prévisibles.

La leçon est la même que celle qu’Anthropic formule à propos de ses propres modèles : Claude n’a pas de goût par défaut — laissé à lui-même, il converge vers le centre statistique du web design (Inter, dégradés violets, ombres douces). Il produit de bons designs quand vous lui donnez des contraintes. Open Design empaquette précisément ces entrées, et c’est pourquoi les deux s’accordent (plus de détails ci-dessous).

Configurer Claude Code pour le design, à partir de zéro

Voici le parcours complet, d’une machine vierge à un Claude Code capable de construire et de vérifier des UI.

# 1. Install Claude Code (native install, recommended)
curl -fsSL https://claude.ai/install.sh | bash
# or: brew install --cask claude-code
# Windows PowerShell: irm https://claude.ai/install.ps1 | iex

# 2. Start it in your project and sign in on first run
cd your-project
claude            # sign in with your Claude subscription or API key

# 3. Generate project context
/init             # creates a CLAUDE.md for this project

# 4. Add the official Frontend Design skill
claude plugin install frontend-design@claude-plugins-official

# 5. Wire the Figma MCP server (optional, for design handoff)
claude plugin install figma@claude-plugins-official

• Encodez vos règles de design: Mettez vos tokens, primitives et conventions dans CLAUDE.md et orientez Claude vers eux, pour que les sorties correspondent à une marque au lieu de retomber sur un rendu générique.
• Ajoutez la vérification en navigateur: Branchez un MCP Playwright ou Chrome pour que Claude rende dans un vrai navigateur et contrôle ses sorties sur les différents breakpoints, au lieu de simplement confirmer que le build passe.

Le workflow CLAUDE.md et Skills

La boucle de design la plus efficace avec Claude Code consiste à lui donner de vraies références ainsi que votre contexte de design, puis à itérer jusqu’à ce que l’UI corresponde — avec CLAUDE.md et les Skills qui portent les contraintes pour ne pas avoir à les réexpliquer à chaque prompt.

1. Partez des références visuelles les plus claires dont vous disposez — et incluez plusieurs états (desktop et mobile, survol, vide, chargement), pas seulement un visuel héros.
2. Soyez précis dans le prompt ; des prompts vagues produisent une UI générique, même avec un agent puissant.
3. Gardez votre design system et vos conventions dans CLAUDE.md, et indiquez à Claude où se trouvent les tokens et les primitives canoniques.
4. Ajoutez la skill Frontend Design pour que Claude s’engage sur une véritable direction esthétique avant d’écrire du code.
5. Branchez la vérification en navigateur pour que Claude rende, redimensionne aux breakpoints et compare aux références — au lieu de simplement confirmer que ça build.

Déposez une image de référence dans la session et formulez le prompt avec des contraintes concrètes :

claude "Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse the design-system components and tokens described in CLAUDE.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser, verify it matches the references across
  breakpoints, and iterate until it does."

Faites tourner un serveur de dev en parallèle, gardez des prompts courts et ciblés, committez les bonnes itérations / annulez les mauvaises (en prévenant Claude quand vous revenez en arrière) pour que chaque passe parte d’une base propre. Utilisez le mode plan pour les refactors plus importants afin de pouvoir relire l’approche avant toute modification de fichier.

Claude Code + Figma : aller-retour design ↔ code

En février 2026, Anthropic et Figma ont livré une intégration bidirectionnelle de premier ordre via le serveur Figma MCP. Elle fonctionne dans les deux sens.

• Design → Code: Sélectionnez une frame dans Figma ou collez un lien dans Claude Code, récupérez le contexte de design et demandez-lui d’implémenter la maquette avec votre bibliothèque de composants existante. Code Connect garde les sorties alignées sur vos vrais composants.
• Code → Design: Construisez et prévisualisez une fonctionnalité dans le navigateur, puis dites « Send this to Figma » pour capturer l’UI en cours d’exécution sous forme de calques Figma éditables — écran entier ou élément sélectionné.

Installez-le une fois avec claude plugin install figma@claude-plugins-official (le MCP Dev Mode requiert un plan Figma payant). Le même Figma MCP est disponible pour Claude Code, Codex, Cursor et VS Code — exactement le genre de capacité portable et multi-agent qu’Open Design est conçu pour orchestrer.

Claude Code vs Codex vs Cursor pour le design

Il n’y a pas de vainqueur unique pour le travail de design — chaque agent a une force différente, et les équipes expérimentées les combinent. Un résumé équilibré :

Le verdict récurrent de la communauté est que le goût vient des humains : les trois retombent sur une esthétique générique sans skills, références et contraintes. C’est le vrai problème à résoudre — et il a la forme d’un outil de design, pas d’un modèle.

Les pièges, et comment éviter le rendu « AI slop »

Malgré la réputation de goût de Claude Code, la critique la plus fréquente à l’égard du design généré par IA est qu’il a l’air générique — polices Inter, dégradés violets sur blanc, ombres douces, coins arrondis surdimensionnés, une esthétique qui « crie qu’une IA a fait ça ». Anthropic elle-même attribue cela à une convergence distributionnelle : les choix sûrs dominent les données d’entraînement du web. Parmi les autres problèmes signalés : des mises en page mobiles cassées et des instructions qui fuient dans les textes de l’UI.

• Installez la skill Frontend Design: Elle force Claude à s’engager sur une vraie direction et évite explicitement les polices et dégradés surexploités par l’IA.
• Activez la vérification en navigateur: Faites en sorte que Claude rende et se contrôle lui-même sur les différents breakpoints pour que les mises en page ne cassent pas en silence sur mobile.
• Fournissez tokens et références: De vrais tokens de design et des captures de référence sont le plus grand levier sur la qualité des sorties.
• Encodez les règles dans CLAUDE.md: Mettez des règles de style comme « pas de hero cards, deux familles typographiques au maximum, hiérarchie qui met la marque d’abord » là où l’agent les lit à chaque exécution.

Remarquez que chaque parade revient à donner à l’agent un contexte de design organisé. Maintenir ce contexte à la main, projet par projet, est le labeur qu’Open Design supprime.

Concevoir avec Claude Code dans Open Design

Open Design est la couche de design open source que le workflow ci-dessus ne cesse de réclamer. Il traite Claude Code comme un adaptateur de première partie et l’entoure d’une bibliothèque organisée de skills et de design systems, d’un pipeline de rendu structuré et d’une UI desktop locale — pour que le contexte de design qui rend Claude Code bon soit présent dès la première exécution, et non assemblé à la main à chaque fois.

1. Installez Open Design et sélectionnez Claude Code comme agent.
2. Authentifiez-vous avec votre clé API Anthropic (BYOK) ou votre abonnement Claude — les identifiants restent sur votre machine et ne transitent jamais par nos serveurs.
3. Choisissez un design system et une skill, puis générez des decks, des prototypes et des landing pages avec un goût cohérent.
4. Chaque artefact et fichier DESIGN.md vit dans votre propre dépôt, pas dans un cloud hébergé.

Le même agent Claude Code, la même clé — auxquels s’ajoute un véritable workflow de design open source, portable, autour de lui. C’est local-first et Apache-2.0, donc rien de votre travail ni de vos identifiants ne quitte votre machine.

Questions fréquentes

1. 01 Claude Code est-il bon pour le travail de design ? +

   Oui — il est largement considéré comme l’agent de code au meilleur goût en frontend, prenant des décisions précises et conscientes de la base de code sur les valeurs hex, l’espacement et les échelles typographiques. Avec la skill Frontend Design, un design system et de vraies images de référence dans le contexte, il produit une UI responsive de qualité production et peut la vérifier dans un navigateur. Sans ce contexte, il a tendance à retomber sur un rendu générique, et c’est l’écart que comble Open Design.

2. 02 Ai-je besoin d’un abonnement Claude pour concevoir avec Claude Code ? +

   Vous pouvez utiliser soit une clé API Anthropic (BYOK, via la Console), soit un abonnement Claude (Pro / Max). Dans les deux cas, Open Design ne fait jamais transiter vos identifiants — ils sont utilisés directement par votre agent sur votre machine.

3. 03 Claude Code ou Codex pour le design frontend ? +

   Les deux sont solides. Claude Code est reconnu pour ses décisions de design précises et conscientes de la base de code et pour son raisonnement frontend ; Codex offre une forte finition visuelle et excelle dans les builds délégués en sandbox. Beaucoup d’équipes utilisent les deux — Open Design vous laisse changer d’agent sans changer votre workflow de design.

4. 04 Comment connecter Claude Code à Figma ? +

   Installez le plugin Figma officiel avec claude plugin install figma@claude-plugins-official. Vous pouvez ensuite implémenter des frames Figma en code à partir du contexte de design, et renvoyer une UI en cours d’exécution vers des frames Figma éditables avec « Send this to Figma ». Le MCP Dev Mode requiert un plan Figma payant.

5. 05 Que sont les Skills et CLAUDE.md ? +

   CLAUDE.md est un fichier markdown à la racine de votre projet que Claude Code lit au début de chaque session — l’endroit où encoder vos conventions de design. Les Skills regroupent des instructions et ressources réutilisables que Claude charge à la demande, y compris la skill officielle Frontend Design d’Anthropic. Open Design fournit une bibliothèque organisée des deux pour vous éviter la configuration projet par projet.

6. 06 Comment éviter l’esthétique générique « AI slop » ? +

   Installez la skill Frontend Design, fournissez de vrais tokens de design et des captures de référence, encodez les règles de marque dans CLAUDE.md et activez la vérification en navigateur. Open Design les livre sous forme de bibliothèque organisée pour vous éviter la configuration projet par projet.

7. 07 Open Design est-il affilié à Anthropic ? +

   Non. Claude Code est un produit d’Anthropic ; Open Design est un projet open source indépendant qui le prend en charge comme adaptateur de première partie. Claude et Claude Code sont des marques d’Anthropic.

8. 08 Mes fichiers et identifiants sont-ils en sécurité ? +

   Oui — Open Design est local-first et Apache-2.0. Vos fichiers, artefacts et DESIGN.md restent dans votre propre dépôt, et vos identifiants Anthropic sont utilisés directement par votre agent, jamais routés via les serveurs d’Open Design.