Aller au contenu
Chapitre 1 / 9

Comprendre Claude Code

Ce que c'est, en quoi ça diffère des autres outils IA, et pourquoi ça change concrètement quelque chose pour un designer.

C'est quoi

Claude Code est un agent de codage développé par Anthropic. Concrètement, il peut lire les fichiers d'un projet, écrire du code, exécuter des commandes, démarrer un serveur local pour prévisualiser une interface, et itérer sur les changements, tout ça depuis une conversation.

Tu lui décris ce que tu veux construire. Il écrit le code, le fait tourner, te montre le résultat. Tu lui dis ce qui ne va pas. Il corrige. Le cycle ressemble à ce que tu fais dans Figma entre deux versions d'un composant, sauf qu'en sortie tu obtiens quelque chose qui fonctionne dans un navigateur.

En quoi ça diffère des autres outils

Plusieurs outils proposent de « créer des applications avec de l'IA » : Lovable, Bolt, v0, Framer AI. Ce sont des interfaces simplifiées construites au-dessus de modèles d'IA. Ils sont rapides pour démarrer et pratiques pour une exploration initiale.

Claude Code fonctionne différemment. Il travaille directement sur les fichiers de ton projet, dans ton environnement de travail. Il lit ta structure de dossiers, comprend les conventions déjà en place, et peut intervenir sur n'importe quel fichier avec précision. Ce n'est pas une application qui génère du code dans une boîte noire : c'est un agent qui travaille à côté de toi, sur les mêmes fichiers.

Cette différence devient importante quand tu passes de l'exploration à la construction réelle : un projet démarré dans Claude Code est un projet standard que tu peux ouvrir dans VSCode, versionner sur GitHub, déployer sur Vercel, et passer à un développeur sans friction.

Lovable / Bolt / v0Claude Code
InterfaceApplication web dédiéeTerminal, VSCode, ou app Desktop Claude
Accès aux fichiersInterface propriétaireTes fichiers réels, dans ton dossier
Contrôle sur le codeLimitéTotal
ExportVers GitHub (selon l'outil)Déjà dans tes fichiers
PrérequisAucunClaude Pro/Max

Les trois modes d'utilisation

Les trois modes d'utilisation de Claude Code

Il n'y a pas une seule façon d'utiliser Claude Code. Selon ce que tu cherches à faire et les outils que tu maîtrises déjà, tu choisiras un mode différent.

L'app Desktop est la façon la plus rapide de démarrer. Même interface que Claude chat, pas de configuration. Tu passes en mode Code, tu pointes sur un dossier, et tu commences. Elle offre une prévisualisation live intégrée, un diff visuel des modifications, la possibilité de cliquer directement sur les éléments de l'interface pour donner un feedback, et le glisser-déposer de maquettes et de screenshots.

VSCode + fenêtre compagnon est la configuration la plus efficace au quotidien. VSCode occupe la moitié gauche de l'écran avec les fichiers du projet ouverts dans l'éditeur, et Claude Code tourne dans une fenêtre de conversation séparée à droite. Les deux fenêtres pointent sur le même dossier. Tu donnes tes instructions dans la conversation, Claude modifie les fichiers, et tu vois les changements apparaître instantanément dans l'éditeur VSCode sans quitter l'écran.

VSCode + terminal intégré est une variante où Claude Code tourne directement dans le terminal à l'intérieur de VSCode, sans fenêtre séparée. Tout reste dans une seule application. C'est utile si tu préfères travailler dans un environnement unifié ou si tu intègres Claude Code dans un workflow plus technique.

Pour la plupart des projets design, l'app Desktop ou VSCode couvrent l'essentiel. Le terminal devient pertinent quand le volume de travail augmente ou quand tu travailles dans un environnement d'équipe avec des conventions techniques précises.
À quoi ça ressemble en pratique
VSCode ouvert à gauche avec les fichiers du projet. La fenêtre compagnon Claude Code à droite dans VSCode. Tu écris : « modifie le composant hero, padding à 24px, titre en 32px weight 800 ». Claude modifie les fichiers. Le diff apparaît dans l'éditeur, lignes modifiées surlignées. Tu vérifies sur localhost:3000 dans le navigateur. Tu demandes à Claude de pousser sur GitHub. Le tout sans changer d'application, sans perdre le fil de la conversation.

Ce qu'on peut concrètement construire

Les cas d'usage qui ont le plus de valeur pour un designer :

Prototypes interactifs avec de vraies données. Les prototypes Figma gèrent bien les flux, mais pas la logique conditionnelle, les états de chargement, ni les vrais comportements de formulaire. Claude Code peut construire une version qui répond à des interactions réelles. La différence est perceptible lors d'une présentation client.

Prototypes de test utilisateur. Un prototype qui suit les clics, mesure le temps passé sur une tâche, ou modifie le contenu selon l'action de l'utilisateur. Figma ne peut pas faire ça. Claude Code peut le construire en une conversation.

Documentation de design system. Une page où chaque composant s'affiche avec son code réel, les variantes sont interactives, et tout utilise tes vrais tokens. Beaucoup plus utile qu'une page Figma statique.

Corrections UI directes. Un spacing incorrect, une couleur de bouton à corriger. Tu ouvres le projet dans Claude Code, tu cliques sur l'élément, tu indiques le changement. Claude génère une pull request propre que les développeurs peuvent réviser directement.

Sites et landing pages. Une page portfolio depuis tes designs Figma, une landing page client déployée en production, une page de présentation d'un side project.

Ce qu'il ne fait pas à ta place

Claude Code couvre 60 à 80 % du chemin. Le reste reste de ta responsabilité.

Il génère du code qui fonctionne, mais qui ne sera pas toujours structuré exactement comme un développeur senior l'aurait fait. Le comportement responsive peut nécessiter des ajustements. Les animations fines demandent de l'itération. Et les décisions de design, lui dire ce qui est juste visuellement et ce qui ne l'est pas, restent les tiennes.

L'outil amplifie ce que tu sais déjà faire. Plus tu es précis dans tes descriptions et ton feedback, meilleur est le résultat.

Victor Soussan

Lead Product Designer

J'accompagne les équipes design dans l'intégration de Claude Code : ateliers, sessions en binôme, mise en place de projets.