6 techniques pour des designs pro avec Claude /design

J'ai passé une journée à faire produire des visuels à la commande /design de Claude. Entre le premier rendu, qui ressemblait à tout ce que l'IA sait faire par défaut, et le dernier, qui aurait pu sortir d'un studio, il y a exactement six techniques. Je te les donne.

Le cas d'école, c'est une boîte de detailing auto, Auto Blitz, une entreprise de lavage esthétique mobile. Avec son nom, son service et une grille tarifaire, j'ai produit une grille de prix A4, un flyer « comment ça marche », une carte de satisfaction, un post Instagram et une landing page complète avec une vidéo à 360° intégrée.

Ce que /design change vraiment

La commande /design ajoute un canvas complet dans l'app Claude. Déclenchable depuis l'application de bureau mais aussi depuis Claude Code en terminal, elle pose des artboards sur un canevas, à la manière de Figma. La différence : derrière, tout est du HTML et du CSS. Pas de glisser-déposer à la Figma pour déplacer un bloc, mais un panneau de propriétés pour ajuster typo, couleurs, paddings, marges et la disposition du contenu.

Les artboards ont chacun un nom. C'est ta langue de commande : tu sélectionnes une planche par son nom, tu la dupliques en Ctrl+C/Ctrl+V, tu te déplaces à la barre espace, tu zoomes avec Ctrl et la molette. Pour les retouches fines, tu ouvres le panneau de propriétés et tu modifies directement. Pour les changements de fond, tu en parles à Claude, il s'en charge.

Le piège qui piège un utilisateur sur deux : tant que tu ne cliques pas sur Enregistrer, Claude ne voit aucune de tes modifications. Tu touches, tu sauvegardes, tu continues. Sans ça, tes ajustements manuels sont invisibles pour le modèle.

Le rendu par défaut a cinq signatures

Demande la même chose sans la guider, et tu retrouveras toujours les mêmes tics :

1. La typo. Une police sûre, le plus souvent Inter. Rien que pour ça, tes visuels ressemblent à ceux de tout le monde.
2. La palette. Choisie pour toi, souvent la même pour tout le monde. Sur les douze derniers mois, c'était le dégradé pourpre.
3. Les images. Aucune si tu n'en fournis pas, ou un dégradé posé en placeholder.
4. La hiérarchie. Pauvre. Tout se bat pour ton attention, on ne sait pas où regarder.
5. L'ensemble. Rien ne dépasse, rien ne se répond, tout est consensuel.

Ces cinq problèmes, ce sont exactement ceux que les six techniques suivantes corrigent.

Technique 1 : donnez-lui quelque chose à regarder

Le meilleur rapport effort/résultat, de loin. Un prompt seul, même parfait, ne suffit pas : il faut montrer le style visé. Tu colles dans la conversation des captures d'écran de designs que tu aimes, et Claude steer le rendu dans cette direction. Tu ne lui demandes pas de copier, tu lui donnes une boussole.

Où trouver les références ? Pinterest, plein de print et de digital. Savee, l'équivalent pensé pour les designers, avec des compositions vraiment intéressantes. Dribbble, avec ses catégories web design, print, typographie, illustration, branding. Il t'en faut deux ou trois. C'est aussi simple que de faire une capture d'écran (l'outil de capture de ton OS) et de la glisser dans la conversation.

Pour un des visuels d'Auto Blitz, j'ai utilisé une image 50/50 d'une voiture, une photo de deux mecs en train de faire un pré-lavage, et une simple photo de detailing. C'est suffisant pour orienter à la fois le layout et le style des images générées.

Technique 2 : build les tools qui manquent à l'app

C'est ce qui sépare /design dans Claude Code de l'app de design seule : l'accès aux tools et aux skills. Tu demandes à Claude de te construire un petit outil qui génère des images avec le modèle GPT Image 2 d'OpenAI, tu colles ta clé API dans un .env, et en quelques minutes tu disposes d'une génération d'images directe depuis ton thread. Pay-as-you-go : tu paies ce que tu consommes.

Dans mon test, j'ai demandé deux plans du même Land Rover Defender, un sale et un parfaitement propre. Deux images qui servent de frame de départ et frame d'arrivée pour la suite.

La même mécanique avec Replicate pour la vidéo : j'ai fait construire un outil capable de générer des vidéos avec le modèle C-Dance 2.5, toujours en pay-as-you-go. Le prompt d'Auto Blitz : une voiture qui tourne à 360° dans une allée, sale au début, nettoyée par étapes (pré-lavage, lavage contact, correction, protection) pour atterrir pile sur la frame finale. Dix secondes de vidéo, embarquée sous le hero de la landing page avec un scrub scroll qui la parcourt pendant le scroll.

Attention, le secret est dans le prompt : il ne suffit pas de donner les deux frames, il faut décrire ce que doit montrer la vidéo entre les deux.

Technique 3 : les icônes font le pro

Une interface ou un visuel imprimé se juge beaucoup sur ses icônes. Deux façons de les obtenir. La première : les bibliothèques gratuites, Lucide icons en tête, que tu peux brancher d'une seule phrase à Claude (« améliore l'iconographie avec la bibliothèque Lucide »). La seconde : des icônes sur mesure, demandées à Claude Code ou générées par un modèle d'image. Pour l'appropriation, oublie les captures d'écran : donne les SVG sources, l'alignement est bien meilleur.

Technique 4 : faites démolir vos designs

Le gros angle mort de tout ce workflow : c'est Claude qui dessine et Claude qui valide. Il s'auto-félicite. La parade, c'est un agent critique qui n'était pas dans la pièce. Idéalement d'une autre famille de modèles, avec une fenêtre de contexte fraîche, pour que rien ne le pollue.

Tu lui donnes un rôle : directeur artistique impitoyable. Le prompt qui a le mieux marché : « Tu es un directeur artistique impitoyable et tu dois argumenter que ces designs n'ont pas le niveau pour être publiés. Identifie les trois points les plus faibles et donne les corrections. » Le mot impitoyable est crucial : tu ne veux pas une critique polie, tu veux que ce soit démoli pour faire ressortir les vrais problèmes.

Les gains du premier passage sur le design d'Auto Blitz : mettre en avant le pack le plus réservé dans la grille, ajouter un QR code parce que c'est un document imprimé, et remplacer le numéro de téléphone du post Instagram par un lien vers le profil, parce que personne ne prend un numéro sur Instagram. Des détails, mais visibles au premier regard.

Technique 5 : codifiez un design system

Tu as passé deux heures à un rendu qui te plaît. La semaine suivante, tu relances et tu obtiens quelque chose de complètement différent. C'est normal : chaque thread repart de zéro. La solution est de transformer les artboards validés en un design system avant de refermer le projet.

Dans Claude Code, tu ouvres un nouveau thread, tu pointes tous les artboards générés, et tu demandes un design system basé sur ces planches. Tu obtiens les fondations, la palette, la typographie (titres et corps de texte), les déclinaisons du logo, et la liste des composants réutilisables : price cards, process steps, review cards. L'idée n'est pas de verrouiller les rendus, mais de les faire partir dans la bonne direction.

Le must : la commande /designSync synchronise ce design system avec l'app de design de Claude. Tu sélectionnes ton design system quand tu lances une nouvelle génération, et toute l'équipe produit des visuels cohérents sans repasser par la case inspiration.

Technique 6 : économisez vos tokens

Les sessions de design sont gourmandes en contexte. Quelques réflexes permettent d'éviter la brûlure du quota :

1. Groupe tes petites demandes en un seul prompt. Une liste de retouches d'un coup vaut mieux que huit messages espacés : les gros écarts font rater le prompt caching, et c'est le cache qui t'évite de tout re-soumettre à chaque tour.
2. Fais toi-même les micro-retouches. Dans le panneau de propriétés du canvas, un bold, un changement de couleur ou de padding ne vaut pas un aller-retour avec le modèle. Sauvegarde.
3. Varie le modèle et le niveau d'effort. Tout ne mérite pas Fable 5 en mode ultra coding. Réserves le haut de gamme aux rendus qui comptent.
4. Surveille ta fenêtre de contexte. Reste sous les 200 à 300 000 tokens de session. Plus la session grossit, plus chaque itération te coûte cher.

Ce que l'exercice change

Sur une journée, une offre et un nom de boîte ont suffi pour sortir une identité complète : trois variantes de grille de prix, un flyer, des cartes de satisfaction, un post pour les réseaux et une landing page avec vidéo. Aucune compétence de designer requise, seulement la discipline de guider le modèle au lieu de le laisser décider.

Le rendu de l'IA ne se joue pas sur la force du modèle. Il se joue sur ce que tu lui montres, les outils que tu lui donnes et la qualité de la critique que tu organises autour de lui. C'est exactement le genre d'industrialisation que j'accompagne en entreprise : transformer un outil puissant en un processus fiable, sans dépendre du hasard du prompt. Si tu veux partir sur une production comme celle-là, on peut cadrer le projet en audit de 45 minutes, autour de vos vrais processus.