Claude Code pour les designers : Configuration d’un designer professionnel

La designer avec qui j'ai travaillé le mois dernier a livré une refonte complète du système de design en trois jours. Elle n'est pas ingénieure. Elle ne connaît pas Bash. Elle n'avait jamais écrit d'expression régulière de sa vie. Elle avait Claude Code, un fichier CLAUDE.md et un goût prononcé pour reconnaître ses propres erreurs.

Voici la version de cet outil dont personne ne parle. Chaque article Claude Code est écrit par un ingénieur senior, pour des ingénieurs seniors. Il regorge de voies d'agents, de scripts de hooks et de paramètres obscurs. Les designers le lisent, pensent qu'il ne les concerne pas et ferment l'onglet.

Pourtant, il est fait pour vous. Plus encore que pour la plupart des ingénieurs, honnêtement. Car le véritable défi des designers n'est pas d'écrire du code. C'est de maintenir un système de conception à travers dix dépôts pendant que l'équipe ajoute sans cesse de nouvelles fonctionnalités. C'est précisément le problème que Claude Code résout en un clin d'œil.

Claude Code est un agent, pas un outil de saisie semi-automatique.

Claude Code n'est pas un clone de GitHub Copilot. Ce n'est pas une fenêtre de chat avec un thème de code. C'est un agent qui s'exécute en continu dans votre terminal, analyse l'intégralité de votre dépôt, modifie les fichiers, exécute les tests, ouvre les demandes de fusion et vous répond en cas de problème.

Le changement majeur : il n'attend plus que vous lui indiquiez la ligne à modifier. Vous lui donnez un objectif. Il détermine quels fichiers ouvrir, quoi modifier, s'il faut ajouter un nouveau composant ou en modifier un existant, et comment maintenir le reste du code fonctionnel pendant ce temps.

C'est ce qui change tout pour un concepteur. Vous n'avez plus besoin de pointer des lignes spécifiques. Vous commencez à décrire les résultats. Bien décrire les résultats est une discipline à part entière, abordée dans Ingénierie rapide pour les concepteurs. « Mettez à jour tous les composants Button pour utiliser le nouveau jeton d'anneau de focus, y compris l'ancienne variante désactivée, et assurez-vous que les scénarios Storybook fonctionnent toujours. » Voilà une phrase. C'est aussi une journée de travail de conception réduite à néant en quatre minutes.

Le travail d'un designer a toujours été une question de goût, pas de syntaxe. Claude Code fait du goût le produit final.

Installation en dix minutes

Vous avez besoin de trois choses : Node.js, un terminal et un compte Claude.

1. Ouvrez le Terminal (Mac : Cmd+Espace, tapez Terminal). Vous allez saisir deux commandes. L'installation est terminée.

2. Installez Node si ce n'est pas déjà fait. Rendez-vous sur nodejs.org, cliquez sur le téléchargement LTS et exécutez-le. Cette étape est une installation classique : un double-clic suffit. 3. Dans le terminal, collez : npm install -g @anthropic-ai/claude-code

3. Accédez à votre dépôt de design : cd ~/path/to/your/repo

4. Exécutez : claude

Au premier lancement, l’assistant vous guidera pour vous connecter. C’est terminé.

Le dépôt peut être de toute nature : un package de système de design, un site marketing Next.js, un Storybook, une exportation de jetons Figma, une configuration Tailwind, ou tout autre élément sur lequel vous travaillez. S’il s’agit d’un dossier contenant des fichiers, Claude Code peut le lire.

| Étape | Description | Durée |

|------|-------------------|----------|

| Installation de Node | Programme d’installation standard Mac/Windows | 2 min |

| Installation de Claude Code | Une commande npm | 1 min |

| Connexion | Redirection du navigateur | 1 min |

| Première session | claude dans n'importe quel dossier | Immédiat |

Rédigez CLAUDE.md comme un cahier des charges, pas comme un fichier README

CLAUDE.md est le premier fichier que Claude Code lit à chaque ouverture d'un dépôt. Les ingénieurs l'utilisent pour les commandes de compilation et les chemins de test. C'est bien. Mais cela représente 90 % de la valeur ajoutée.

Considérez CLAUDE.md comme un cahier des charges destiné à un nouveau designer. Style, règles de la marque, description du produit, pratiques à éviter, exemples de travail propre. Chaque phrase de CLAUDE.md est une phrase que vous n'aurez jamais à répéter dans les discussions.

Le modèle que je fournis à chaque designer que j'intègre :

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

Rédigez-le une seule fois par dépôt. Mettez-le à jour dès que vous découvrez de nouvelles erreurs commises par l'agent dans votre code. Les erreurs s'accumulent.

Les cinq flux de travail essentiels

La plupart des tutoriels Claude Code listent vingt fonctionnalités. Cinq d'entre elles concentrent 90 % de la valeur ajoutée d'un designer.

Maintenance du système de conception. « Trouvez tous les endroits où nous utilisons encore les anciennes valeurs d'espacement (8px, 16px, 24px) et remplacez-les par des jetons (--space-2, --space-4, --space-6). Mettez à jour les composants. Assurez la continuité des user stories. » Deux minutes. Historiquement, une semaine.

Refactorisation des composants. « Notre bouton compte désormais douze variantes. Auditez-les. Indiquez-moi lesquelles sont réellement utilisées et lesquelles sont obsolètes. Proposez ensuite une API consolidée et implémentez-la via un indicateur de fonctionnalité. » Vous examinez la proposition. Vous l'approuvez. Elle est déployée.

Figma-sur-la-page. Collez une capture d'écran Figma ou, mieux encore, connectez un ⟦MARQUE0⟧ ⟦MARQUE1⟧. Dites : « Construisez cette section principale en utilisant nos composants et jetons existants, pas de nouveaux. » Vous obtiendrez ainsi une pull request conforme au design après une ou deux sessions de retours.

Propagation des jetons. Brand met à jour une couleur. « Remplacez --color-accent dans tout le monorepo et exécutez la vérification typographique. » Ce n'est pas de la saisie, c'est du courage. Claude Code est d'un courage sans bornes et d'une humilité totale.

Revue visuelle. « Lancez le serveur de développement, prenez des captures d'écran de chaque page et indiquez-moi celles qui présentent des problèmes d'espacement ou de débordement par rapport à la dernière version déployée. » C'est magique si votre dépôt utilise Playwright ou un outil similaire. Il repère les erreurs qui échappent à votre œil.

| Workflow | Avant Claude Code | Avec Claude Code |

|----------|-------------------|------------------|

| Refonte du système de design | 2 à 5 jours, 1 designer + 1 ingénieur | 20 minutes, 1 designer |

| Audit et refactorisation des composants | 1 sprint | 1 après-midi |

| Figma vers la page | 1 à 3 jours | 1 à 3 heures |

| Propagation des jetons | Semaine, sujet aux erreurs | Minutes, fiable |

| Test de régression visuelle | Généralement jamais effectué | À chaque PR |

Fournissez le Figma, pas la capture d'écran

Si vous n'avez qu'un PNG, collez-le. Claude Code gère les images. L'espacement et certaines nuances typographiques seront imprécis, mais la structure sera conservée.

Si vous avez le Figma, connectez le serveur Figma MCP. L'installation prend cinq minutes et donne à Claude Code un accès direct en lecture à vos cadres Figma : identifiants, noms de calques, espacements, liens de jetons, toute la structure. La qualité du rendu s'améliore considérablement. Le modèle cesse de deviner.

Dans tous les cas, une règle : fournissez toujours votre système de conception existant, et non une page blanche. « Construisez ceci avec nos composants » est toujours préférable à « Construisez ceci ». Si vous laissez la page blanche, Claude Code inventera des composants que vous possédez déjà. C'est du travail inutile.

Les limites de Claude Code

Soyez honnête avec vous-même. C'est là que l'outil pêche actuellement.

Illustration de marque authentique. Tout ce qui requiert un style artistique spécifique, des personnages dessinés à la main ou des mascottes qui doivent représenter votre marque. Claude Code utilise des générateurs, il manque de goût. Vous devez toujours briefer Prismlight, Runesmith ou un illustrateur pour cela.

Goût subjectif en matière de mise en page. L'outil peut agencer une page correctement. Il ne peut pas vous dire qu'elle est émotionnellement ennuyeuse, ni que le personnage principal manque d'espace, ni qu'un choix de poids est inapproprié. Cela reste votre responsabilité.

Décisions produit basées sur les principes fondamentaux. L'outil peut implémenter tout ce que vous demandez, mais il ne peut pas vous dire si vous devriez le demander. Cela reste le travail du concepteur, qui est le véritable artisan de la rémunération.

Tout ce qui concerne un dépôt désorganisé. Si votre base de code n'a pas de système cohérent, pas de fichier CLAUDE.md, pas de convention de nommage, pas de jetons, Claude Code ne fera qu'empirer les choses. Vous devez d'abord nettoyer les fondations. C'est frustrant, mais c'est aussi la moindre des choses.

Pour plus d'analyses de flux de travail d'IA, consultez le reste de Brainy Papiers. Si vous souhaitez une installation correcte au sein de votre équipe de conception, contactez-nous via embauche Brainy et nous nous chargerons de la configuration ainsi que de votre premier workflow.

Checklist du designer débutant

Premier jour : voici la liste des étapes.

• Installez Claude Code (commande npm, une minute)

• Connectez-vous et vérifiez que la session fonctionne.

• Choisissez un dépôt. Un seul. Commencez par un projet simple.

• Rédigez le fichier CLAUDE.md en utilisant le modèle ci-dessus. Consacrez-y une heure.

• Choisissez l'un des cinq workflows. Suivez-le de bout en bout.

• Examinez attentivement les différences. Ne validez pas automatiquement. Vous êtes le directeur artistique.

• Expliquez à Claude où le problème s'est produit. Mettez à jour le fichier CLAUDE.md en y intégrant les enseignements tirés.

• Réalisez un autre workflow. Faites-le demain.

Une semaine de pratique et vous constaterez la différence. Un mois et vous ne voudrez plus revenir en arrière.

FAQ

Dois-je savoir coder pour utiliser Claude Code ?

Non. Il vous suffit de savoir ce que vous voulez, comment le décrire et comment interpréter correctement une comparaison pour déterminer si c'est correct ou incorrect. Si vous avez déjà donné des retours à un designer junior, vous possédez déjà cette compétence.

Claude Code est-il sûr sur un dépôt de production ?

Oui, si vous utilisez une branche dédiée. Ne l'exécutez jamais sur la branche principale. Créez une branche, laissez Claude Code y fonctionner, examinez la PR comme n'importe quelle autre, et fusionnez-la lorsqu'elle est validée. Git vous protège. Il en va de même de l'exigence que les PR passent des tests.

Claude Code vs Cursor vs v0 vs Lovable : quelle est la différence ?

Cursor est un éditeur complet intégrant Claude. v0 et Lovable génèrent des interfaces utilisateur à partir d'invites, mais ne sont pas installés durablement dans votre dépôt. Claude Code est un éditeur headless, compatible avec tous les dépôts et le plus performant pour les bases de code existantes. Pour les prototypes inédits, v0 ou Lovable sont plus rapides. Pour le développement de produits, Claude Code est la solution idéale.

Quel est le prix de Claude Code ?

Un abonnement Claude Max suffit et constitue le point de départ recommandé pour la plupart des designers. Les équipes plus importantes optent pour une tarification API. Dans tous les cas, son prix est abordable compte tenu du temps gagné sur les flux de travail mentionnés précédemment.

Dans quels cas ne faut-il jamais utiliser Claude Code ?

Pour l'illustration de marque, les analyses subjectives de préférences, la stratégie produit et tout ce qui nécessite de comprendre les besoins réels des utilisateurs en matière de fonctionnalités. Gardez le contrôle. Confiez les tâches répétitives à l'outil.

Vous n'êtes plus le junior

Pendant longtemps, les designers étaient ceux qui dessinaient la vision et la transmettaient aux ingénieurs qui se chargeaient du développement. Cela signifiait que les designers attendaient : la disponibilité pour les sprints, le travail en backend, ou que quelqu'un d'autre s'occupe de la saisie.

Cette époque est révolue.

Le junior n'est plus une personne, mais un modèle. Vous êtes le directeur artistique.

Rédigez CLAUDE.md comme un cahier des charges. Confiez le travail à l'agent. Examinez les différences comme vous le feriez pour une maquette junior, en vous basant sur des critères précis. Renvoyez le travail s'il y a un problème. Déployez-le s'il est correct.

La refonte du système de conception prend trois jours, pas trois sprints. Le site marketing est mis en ligne cette semaine, pas au trimestre prochain. La mise à jour du jeton se propage en quelques minutes, sans avoir à attendre des jours.

Intégrez-le. Rédigez le cahier des charges. Déployez le travail.