Itérer et affiner visuellement

Étape 1 : Passer en mode Code

En haut de l'app Claude Desktop, un toggle permet de passer de Chat à Code.

Étape 2 : Configurer l'environnement

Environnement : choisir « Local » pour travailler sur des fichiers sur ton ordinateur.

Dossier projet : sélectionner le dossier dans dev_projects.

Modèle : Sonnet est rapide et capable pour la plupart des tâches. Opus est plus puissant mais consomme plus de quota mensuel.

Mode de permissions : commence avec « Ask permissions » pour que Claude demande confirmation avant chaque modification.

Étape 3 : Donner les premières instructions

Crée une page portfolio avec trois sections : hero avec mon nom
et mon titre en 72px, grille de 6 projets en 2 colonnes avec
titre et description courte, footer avec liens LinkedIn et email.
Fond #F8F9FB, texte #1E1E1E, accent #295FEC.
Utilise Tailwind CSS via CDN. Responsive mobile en priorité.

Étape 4 : Utiliser la prévisualisation live

Cliquer directement sur les éléments : dans la fenêtre de prévisualisation, clique sur n'importe quel élément. Claude reçoit le contexte exact de l'élément sélectionné.

La vue diff : quand Claude modifie un fichier, un diff s'affiche : lignes ajoutées en vert, lignes supprimées en rouge.

C'est la configuration que j'utilise le plus au quotidien, et celle que je recommande aux designers qui veulent aller au-delà de l'exploration ponctuelle.

VSCode occupe la moitié gauche de l'écran avec les fichiers du projet, et Claude Code tourne dans une fenêtre de conversation séparée à droite. Les deux pointent sur le même dossier.

Prérequis : installer l'extension Claude Code dans VSCode

1. Dans VSCode, ouvre le panneau Extensions : Cmd+Shift+X
2. Cherche Claude Code
3. Sélectionne l'extension publiée par Anthropic et clique sur Installer

Mise en place

1. Ouvrir le projet dans VSCode : File > Open Folder
2. Ouvrir la fenêtre compagnon : cliquer sur l'icône Claude dans la barre latérale
3. Mettre les deux fenêtres côte à côte : 60 % VSCode / 40 % compagnon sur un écran large
4. Vérifier que Claude voit les fichiers : « Lis la structure du projet et résume ce qu'il contient. »

Travailler dans cette configuration

Donner des instructions précises :

Modifie le composant HeroSection.jsx :
- padding top et bottom à 80px
- titre en 48px, weight 800, couleur #1E1E1E
- sous-titre en 20px, couleur #6B7280
- espace entre titre et sous-titre : 16px

Copier-coller depuis l'éditeur : sélectionne un passage dans l'éditeur et colle-le dans le chat avec ton instruction.

Déléguer Git : « Sauvegarde les modifications avec le message "hero: refonte typographie" et pousse sur GitHub. »

Organisation de l'espace sur Mac : trois espaces Mission Control. Espace 1 : VSCode + compagnon. Espace 2 : navigateur avec la preview. Espace 3 : Figma.

Ouvrir le terminal intégré : Cmd+` (backtick)

Lancer Claude Code : claude

Prévisualiser le résultat :

• HTML statique : clic droit sur index.html > Open with Live Server
• Projet Next.js : npm run dev dans un second terminal, puis ouvre localhost:3000

Être aussi précis qu'une redline

Claude Code répond à la précision. « Améliore le rendu » ne donne rien. « Augmente le padding à 24px, passe le titre en 32px semibold, réduis l'espacement entre les cartes à 16px » donne à Claude exactement ce dont il a besoin.

Référencer les tokens existants

Utilise les CSS custom properties définies dans styles/tokens.css.
Ne crée pas de nouvelles valeurs de couleur ou d'espacement.

Montrer plutôt que décrire

Glisse une maquette Figma ou un screenshot directement dans la conversation. Claude voit les images et les utilise comme contexte visuel.

Construire par couches

Étape 1 : Crée la structure de la page avec le header et le footer.
Étape 2 : Ajoute la section hero.
Étape 3 : Ajoute la grille de projets.

Utiliser le mode Plan pour les tâches complexes

Explique comment tu structurerais ce projet avant d'écrire du code.
Liste les fichiers que tu vas créer et les dépendances nécessaires.

Revenir en arrière

Si Claude fait une modification que tu n'aimes pas, dis « annule le dernier changement » ou « reviens à l'état précédent ».

Claude Code couvre 60 à 80 % du chemin. Ce qui reste est de ta responsabilité.

Le code sera fonctionnel mais pas toujours parfait. L'espacement peut être légèrement décalé. Le comportement responsive peut demander des ajustements. C'est normal.

La qualité de tes inputs détermine la qualité des outputs. Une maquette propre avec des valeurs de tokens claires produit des résultats bien meilleurs qu'une description vague.

Tu apprends un nouveau workflow. La première session sera plus lente. La troisième sera fluide. Par la dixième, le rythme sera naturel.