Claude a une nouvelle fonctionnalité appelée Design.
Claude Design est un aperçu de recherche lancé par Anthropic le 17 avril, faisant partie de la gamme de produits Anthropic Labs, fonctionnant sur leur modèle de vision le plus puissant actuel, Opus 4.7. Il est conçu pour créer des maquettes visuelles avec Claude — prototypes web, présentations, pitch decks, pages d’atterrissage, one-pagers, etc. Il peut lire votre dépôt de code et vos fichiers de design existants, appliquer votre système de design au résultat, afin que le style corresponde à vos projets existants.
Le meilleur, c’est le résultat final : en plus d’exporter en PDF/PPTX/HTML ou d’envoyer vers Canva, il peut aussi tout empaqueter dans un bundle de transfert et le passer à Claude Code en local pour continuer à modifier le code du projet.
Dès sa sortie, cela a fait chuter l’action de Figma — clôture en baisse de 6,89 %.
Petite présentation de Figma : une entreprise qui fabrique des outils de design collaboratif en ligne, concurrente d’Adobe et Canva. Des dizaines de millions de designers dans le monde l’utilisent pour créer des designs. En fait, il existait déjà un MCP qui permettait d’utiliser l’IA pour contrôler Figma, mais comme mon sens esthétique est trop basique et que mon esprit est vide, je n’ai jamais utilisé ce produit.
Pourquoi j’en avais vraiment besoin
Vous vous souvenez du plugin Obsidian que j’ai créé pour publier du contenu sur les comptes WeChat Officiels ?
Jusqu’à présent, tous canaux confondus, j’ai vendu exactement 0 exemplaires. Quelle joie (TAT).
Bien sûr, c’est possible — et je ne me vante pas — que cela ait un rapport avec mon goût basique pour le design.
Regardez à quoi ressemblait l’interface de mon plugin original :
Deux rangées de barres d’outils, 9 boutons entassés sur une seule rangée. Format, compte, nom de compte prédéfini, configuration du compte, achat et activation, guide d’utilisation, rafraîchir le rendu, copier le HTML, coller dans le compte WeChat Officiel, publier un brouillon… tout est empilé à l’endroit le plus visible.
Toutes les fonctionnalités sont là, mais c’est épuisant rien qu’à regarder.
En dessous, il y a une invite super longue : « Cliquez sur le bouton ci-dessous pour sélectionner une image depuis votre ordinateur ; laissez vide pour utiliser une couverture de remplacement ; si une couverture par défaut est définie, utilisez la couverture par défaut. » Un ami a vu ça et a dit : « C’est pour qui ? Une description de champ de base de données ? »
Alors quand j’ai vu que Claude Design sortait, je l’ai essayé tout de suite. Voyons comment il se comporte réellement.
Comment l’utiliser
D’abord, ouvrez la version web de Claude, cliquez sur Design à gauche pour entrer. En haut, il y a une zone de saisie appelée « Nouveau prototype », il suffit de remplir le nom du projet.
Vous pouvez choisir Wireframe (basse fidélité) ou High fidelity (haute fidélité avec les éléments de marque). J’ai choisi basse fidélité car au début ce ne sont que des concepts approximatifs, pas besoin de haute fidélité. En fait, après avoir terminé, il mettra automatiquement à niveau pour vous.
Ensuite, indiquez-lui le chemin du dossier du programme, et envoyez-lui une capture d’écran de la page que vous voulez modifier.
Il va d’abord vous poser quelques questions : quoi changer, quoi garder, quelle est l’action principale, quelle est l’action secondaire. J’ai avoué honnêtement — je voulais surtout mettre en avant « Publier le brouillon » et « Changer de compte », le reste peut être réduit.
Après avoir posé les questions, il a commencé à travailler tout seul.
Il a proposé 4 options
Peu après, il m’a remis une page de comparaison wireframes.html.
La première chose était une comparaison — il listait les « péchés » de mon interface actuelle un par un en texte rouge :
- « Deux rangées de barres qui compriment l’aperçu »
- « 9 boutons »
- « Mélange chinois/anglais + descriptions de symboles confuses »
Cette fonctionnalité m’a vraiment surpris. Je pensais qu’il allait juste m’aider à modifier des choses, mais il a en fait vu le contenu et a souligné les problèmes. Cela ressemblait à un vrai designer communiquant en face à face, pas à une IA froide.
Puis sont venues les 4 options :
- Option A : Une seule rangée minimale, bouton principal « Publier le brouillon » + capsule de compte, le reste en icônes + menu
⋯ - Option B : Fil d’Ariane en carte + tiroir, conserver l’entrée pour modifier les métadonnées
- Option C : Rail latéral (comme VSCode), barre supérieure avec seulement le titre
- Option D : Carte de publication flottante en bas à droite, action principale la plus visible
La plus intéressante était l’option D. Il a dessiné un post-it avec « Règles de design courantes » et « Ordre recommandé » :
A → Le plus économique en espace, faible coût d’apprentissage D → Visuellement le plus joli, action principale la plus satisfaisante C → Amical pour les utilisateurs avancés (bibliothèque d’icônes) B → Sûr, conserve la modification des métadonnées
Ce n’est pas juste « voici quelques options », c’est « voici quelques options + vous dire à qui chacune s’adresse ». Je crée des plugins depuis longtemps, et personne ne m’a jamais sérieusement dit « où ce bouton devrait aller ».
Vous pouvez continuer à itérer
Après avoir choisi une direction, vous pouvez continuer à communiquer. À gauche se trouve une boîte de discussion, à droite cliquez sur Edit pour sélectionner directement des éléments et les modifier (mais les réglages là-bas étaient trop professionnels, je n’y comprenais rien, donc j’ai passé). Cliquez sur Draw pour dessiner des cercles et des flèches sur l’aperçu et lui dire « je veux déplacer ceci ici » :
Je pense que la fonctionnalité Draw est incroyable. J’ai dessiné une flèche très grossière d’un bouton vers le bas à droite, et il a compris — probablement lié à la grande amélioration de la reconnaissance visuelle d’Opus 4.7 (comme mentionné plus tôt, il a augmenté la précision de la reconnaissance d’image à 3,75 mégapixels).
De la barre d’outils à la mise en page
Après avoir modifié la barre de menu, je lui ai demandé de créer plusieurs styles de mise en page d’article — après tout, le travail principal de mon plugin est de formater le Markdown en quelque chose de publiable sur les comptes WeChat Officiels.
Il a ouvert une nouvelle page avec le titre « Formater le Markdown en un article WeChat digne d’être lu ». En haut à droite, il y a un bouton Tweaks qui, lorsqu’on clique, permet d’ajuster la taille de police, le poids, la couleur, l’interlignage, etc., comme dans Figma :
Notez qu’il s’agit d’une page véritablement cliquable et commutable, pas d’une fausse. Cette interaction est bien meilleure que de le faire dans Claude Code sur le terminal. Avec Claude Code, vous devez attendre qu’il termine pour voir l’effet, puis lui demander de modifier. Ici, vous avez un aperçu en temps réel.
Après avoir finalisé, cliquez sur Export en haut à droite. Plusieurs options s’offrent à vous : télécharger PPT, exporter PDF, exporter HTML autonome, ou — la dernière — « Handoff to Claude Code », qui envoie l’intégralité du fichier de design à Claude Code en local pour continuer le codage.
C’est la meilleure partie de toute la chaîne.
Après avoir conçu sur le web, il génère une commande pour vous. Copiez-la et collez-la dans le terminal, et Claude Code local prend le relais :
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
Ensuite, il commence à lire le package de design, à regarder le code actuel, à comprendre quels fichiers modifier, et finalement modifie directement tout le code source de mon plugin. La page de design a fourni option-b-hifi.html (j’ai finalement choisi la version haute fidélité de l’option B), et Claude Code lit les couleurs, les tailles de police, les espacements à partir du fichier de design et les applique à mon code React.
Je n’ai pas écrit une seule ligne de code pendant tout le processus.
Le résultat final
En tout cas, je trouve que ça a l’air bien mieux que mon original. Même si un vrai designer aurait peut-être fait encore mieux, pour un plugin personnel, c’est largement suffisant (comparé à mon design original).
Titre + métadonnées réduits en une seule rangée, le compte devient une capsule (avec un point vert actif), l’action principale est juste un seul bouton violet « Publier le brouillon » à droite, tout le reste est caché dans le menu ⋯.
Il s’avère que mon tas de « fonctionnalités » ne manquait pas de sens du design — c’est que personne ne m’a aidé à faire des compromis.
Ajouter un bouton est facile, mais en retirer un de l’interface est contre-intuitif pour un développeur — on pense toujours « et si quelqu’un en a besoin ? ». Mais un designer prendra cette décision pour vous : « Mettez ceci dans un menu secondaire, les utilisateurs ne cliqueront plus dessus après la première fois. »
Cette fois, Claude Design a pris cette décision pour moi.
Le coût
C’est gourmand en ressources
Dans les abonnements Claude, Design a son propre quota (je dois dire que les quotas séparés de Claude commencent à s’accumuler).
Faire cet ensemble — 4 comparaisons d’options + 5 thèmes d’article + implémentation haute fidélité — a consommé 36 % de mon quota quotidien. J’ai un compte 5x Max ; pour un compte Pro, cela aurait épuisé tout le quota de la journée.
Un ami a un compte Pro. Hier soir, il a utilisé Design pour faire un PPT de 30 pages et son quota quotidien a été complètement épuisé.
Des bugs occasionnels
Parfois, en cours de travail, vous pouvez rencontrer une situation : vous envoyez un message, et il répond par <empty>. Vous renvoyez, encore <empty> :
La solution est de rafraîchir la page et de lui dire « continuez s’il vous plaît », et généralement il reprend. Mais vous perdez un peu de contexte. Si vous êtes en pleine itération de design critique, n’oubliez pas de prendre des captures d’écran de temps en temps comme sauvegarde, pour ne pas avoir à tout recommencer si ça casse à la dernière étape.
Réflexions finales
Mon plugin Obsidian au design basique ressemble enfin à un vrai produit.
Mais pour être honnête, quand je me suis assis devant mon ordinateur et que j’ai cliqué sur « Publier le brouillon », je n’étais pas complètement excité. Je suis très conscient d’une chose — si quelqu’un comme moi, sans formation en design, peut faire une interface correcte en deux heures, alors ceux qui gagnent leur vie avec du « correct » vont passer quelques années difficiles.
Avant, je craignais que l’IA fasse perdre aux écrivains un interlocuteur avec du goût littéraire. Cette fois, c’est l’inverse — les designers sont sur le point de perdre la partie la plus épaisse du marché : le niveau débutant à intermédiaire.
Chaque fois que l’IA fait un pas en avant, certains applaudissent, et d’autres s’en vont discrètement. Cette fois, je suis celui qui applaudit, mais j’entends ce soupir derrière moi.
J’ai récemment passé beaucoup de temps et d’argent sur l’IA, inquiet qu’un jour elle me remplace, mais jusqu’à présent je n’ai pas trouvé de solution. Elle m’aide dans mon travail quotidien, mais aucun changement fondamental. Le plus important, c’est que je n’ai pas gagné d’argent avec.
Si vous avez aussi un petit produit, un plugin ou un site web qui prend la poussière comme le mien — allez essayer Claude Design.
Il ne vous apportera peut-être pas votre première vente, mais au moins il le rendra plus présentable. Et cela, en soi, est une énorme amélioration.