Claude Design par Anthropic Labs vous permet de créer des designs, des prototypes interactifs, des présentations et bien plus en conversant avec Claude. Ce guide vous accompagne dans la création de votre premier projet, l'itération sur les designs et l'optimisation de l'utilisation de l'outil.
Claude Design par Anthropic Labs est désormais disponible en aperçu de recherche pour les plans Pro, Max, Team et Enterprise. Cette fonctionnalité est désactivée par défaut pour les plans Enterprise.
Ce guide suppose que le système de design de votre organisation a déjà été configuré, de sorte que tout ce que vous créez utilisera automatiquement les couleurs, la typographie et les modèles de composants de votre marque. Si vous êtes un responsable du design qui doit configurer ou modifier le système de design lui-même, consultez Configurer votre système de design dans Claude Design.
Comment fonctionne Claude Design
Claude Design comporte deux zones principales : une interface de chat à gauche et un canevas à droite. Vous décrivez ce que vous voulez dans le chat, et Claude génère un design fonctionnel sur le canevas. À partir de là, vous itérez—en affinant par la conversation et les commentaires en ligne jusqu'à ce que ce soit parfait.
Le flux typique est :
Créez un projet et ajoutez tout contexte pertinent (captures d'écran, une base de code).
Décrivez ce que vous voulez construire.
Examinez ce que Claude génère sur le canevas.
Itérez en utilisant les messages de chat et les commentaires en ligne.
Exportez ou partagez quand vous êtes satisfait du résultat.
Créer un nouveau projet
Lorsque vous créez un projet, il hérite automatiquement du système de design de votre organisation. Vous n'avez pas besoin de télécharger des ressources de marque ou de configurer quoi que ce soit—vos couleurs de marque, polices et composants sont déjà en place.
Ajouter du contexte à votre projet
Plus vous donnez de contexte à Claude, meilleur sera votre résultat. Vous pouvez joindre du matériel de référence à tout moment pendant un projet.
Captures d'écran, images ou ressources existantes : Téléchargez des captures d'écran de designs existants, de produits concurrents, de wireframes ou d'inspiration visuelle. Vous pouvez également joindre un deck de diapositives existant ou un document avec un style de design que vous souhaitez reproduire. Utile pour les demandes « rendre cela comme ceci ».
Bases de code et fichiers de design existants : Liez un référentiel de code pour que Claude comprenne vos composants existants, votre architecture et vos modèles de style. Cela rend les prototypes plus prêts pour la production dès le départ. L'importation prend également en charge plusieurs façons de télécharger les travaux de design de produit existants.
Rédiger des invites efficaces
Vous n'avez pas besoin d'être designer pour obtenir d'excellents résultats. Soyez précis sur ce que vous construisez, pour qui c'est, et ce qui compte le plus.
Une bonne invite inclut l'objectif (ce que vous construisez), la mise en page (comment les choses doivent être arrangées), le contenu (quelles informations afficher) et l'audience (qui l'utilisera). Claude posera également des questions de clarification s'il a besoin de plus d'informations.
Voici quelques exemples d'invites qui fonctionnent bien :
« Créez un tableau de bord montrant les revenus mensuels avec des filtres par région et ligne de produits. »
« Concevez un flux d'intégration d'application mobile avec 4 écrans qui guide les utilisateurs à travers nos fonctionnalités principales. »
« Créez une page d'accueil pour notre nouveau produit API avec une section héros, des exemples de code et une tarification. »
« Créez un formulaire pour collecter les commentaires des clients avec des questions conditionnelles basées sur la catégorie. »
« Concevez un outil interne pour que votre équipe des opérations examine et approuve les soumissions de contenu. »
Itérer sur votre design
La première génération est un point de départ. La vraie valeur vient de l'itération.
Utiliser le chat
Le chat est idéal pour les changements généraux qui affectent l'ensemble du design :
« Rendez la palette de couleurs plus sombre et plus minimaliste. »
« Réorganisez le tableau de bord pour que les métriques soient dans la première ligne et le graphique en dessous. »
« Ajoutez un panneau de paramètres sur le côté droit. »
« Montrez-moi 2–3 mises en page alternatives pour cette page. »
Vous pouvez également demander à Claude d'expliquer ses décisions de design, de suggérer des améliorations ou d'examiner le design pour l'accessibilité.
Utiliser les commentaires en ligne
Les commentaires en ligne vous permettent de cliquer directement sur une partie spécifique du canevas et de demander une modification ciblée. C'est plus rapide que de décrire l'emplacement dans le chat.
Exemples de bons commentaires en ligne :
« Augmentez l'espacement du rembourrage de ce bouton. »
« Changez ceci en liste déroulante au lieu de boutons radio. »
« Utilisez la couleur de marque principale ici. »
« Rendez cette section réductible. »
Remarque : Si vos commentaires ne sont pas détectés, collez les commentaires directement dans le chat à la place. C'est une solution de contournement connue pour un problème intermittent où les commentaires peuvent disparaître avant que Claude ne les lise.
Quand utiliser le chat par rapport aux commentaires
Utilisez les commentaires pour les modifications ciblées au niveau des composants (« corriger ce bouton », « ajuster cet espacement »). Utilisez le chat pour les modifications structurelles, les nouvelles sections, les changements esthétiques ou tout ce qui nécessite une explication ou un contexte.
Gérer les versions et les révisions
Si vous souhaitez explorer une direction différente sans perdre votre travail actuel, dites à Claude : « Sauvegardez ce que nous avons et essayez une approche complètement différente. » Claude sauvegarde votre projet actuel et confirme où il est sauvegardé, afin que vous puissiez facilement référencer les itérations antérieures dans la conversation.
Exporter et partager
Une fois votre design prêt, vous pouvez le partager avec vos collègues ou l'exporter pour l'utiliser ailleurs. Le format approprié dépend de votre cas d'usage—que vous obteniez des commentaires des parties prenantes, que vous remettiez à l'ingénierie ou que vous présentiez à un groupe.
Utilisez le bouton « Exporter » dans le coin supérieur droit lors de la visualisation de votre projet pour choisir parmi les formats d'exportation suivants.
Télécharger en tant que .zip
Exporter en PDF
Exporter en PPTX
Envoyer à Canva
Exporter en HTML autonome
Transférer à Claude Code
Envoyer à l'agent de codage local
Envoyer à Claude Code Web
Vous pouvez également partager des projets au sein de votre organisation en utilisant un lien partageable. Les options de partage incluent l'accès en lecture seule, commentaire et modification.
Utilisation de l'abonnement et tarification
Voir ici pour plus de détails : Utilisation de l'abonnement Claude Design et tarification.
Conseils pour les meilleurs résultats
Commencez simplement, puis ajoutez de la complexité. Commencez par la mise en page et le contenu principaux, puis ajoutez des interactions, des cas limites et du polissage. Claude répond bien aux demandes progressives.
Soyez précis dans vos commentaires. « Cela ne semble pas correct » est difficile à mettre en œuvre. « Resserrez l'espacement entre les champs de formulaire à 8 px » donne à Claude exactement ce dont il a besoin.
Référencez votre système de design. Si vous savez qu'un composant existe dans le système de votre marque, mentionnez-le par son nom : « Utilisez le composant Bouton principal » ou « Appliquez le modèle de mise en page Carte. »
Pensez à la réactivité dès le départ. Mentionnez si votre design doit fonctionner sur mobile, tablette et bureau, ou seulement sur l'un de ceux-ci.
Demandez des variations. Si vous n'êtes pas sûr d'une direction, demandez à Claude de vous montrer 2–3 options. Comparer les alternatives est beaucoup plus rapide que de deviner.
Demandez des commentaires à Claude. Claude peut examiner votre design pour l'accessibilité, les rapports de contraste, la hiérarchie de l'information et la convivialité générale. Traitez-le comme un collaborateur en design, pas seulement comme un générateur.
Limitations connues
Claude Design est disponible en tant qu'aperçu expérimental d'Anthropic Labs. Quelques points à connaître :
Persistance des commentaires : Les commentaires en ligne disparaissent occasionnellement avant que Claude ne les lise. Pour contourner ce problème, collez le texte du commentaire dans le chat.
Erreurs d'enregistrement en vue compacte : Le mode de mise en page compacte peut déclencher des erreurs d'enregistrement. Si cela se produit, passez à la vue complète et réessayez.
Grandes bases de code : La liaison de très grands référentiels peut causer des ralentissements ou des problèmes de navigateur. Liez des sous-répertoires spécifiques plutôt que des monorepos entiers.
Erreurs de chat : Si vous rencontrez une erreur « chat upstream error », essayez de démarrer un nouvel onglet de chat dans le même projet.