Claude Design vous permet de créer des designs, des prototypes interactifs, des présentations et bien plus en conversant avec Claude. Ce guide vous montre comment créer votre premier projet, itérer sur les designs et tirer le meilleur parti de l'outil.
Claude Design est maintenant disponible en bêta pour les plans Pro, Max, Team et Enterprise. Cette fonctionnalité est désactivée par défaut pour les plans Enterprise. Vous pouvez l'utiliser sur le web à claude.ai/design ou depuis la barre latérale de Claude Desktop.
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 a 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, les commentaires en ligne et directement sur le canevas jusqu'à ce que ce soit correct.
Le flux typique est :
Créer un projet.
Joindre ou importer le système de design avec lequel vous voulez que Claude construise.
Ajouter tout contexte pertinent (captures d'écran, une base de code).
Décrire ce que vous voulez construire.
Examiner ce que Claude génère sur le canevas.
Affiner par le chat, modifier directement sur le canevas ou laisser des commentaires en ligne.
Exporter ou partager quand vous êtes satisfait du résultat.
Passer entre Claude Design et Claude Code
Vous pouvez passer entre le travail dans Claude Design et Claude Code tout en gardant votre travail synchronisé. Utilisez /design-sync pour importer votre système de design, de sorte que tout ce que vous construisez dans Claude Design commence par vos composants existants. Quand un design est prêt à devenir un logiciel, vous pouvez le transmettre à Claude Code, qui continue à partir de votre travail existant au lieu de recommencer à partir d'une capture d'écran.
Si vous préférez commencer votre projet de design à partir de Claude Code, vous pouvez créer, modifier et synchroniser votre travail sans quitter votre terminal en utilisant /design. Importez un design dans votre base de code, exportez votre code en tant que prototype en direct, ou laissez Claude construire le tout du début à la fin.
Créer un nouveau projet
Quand 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.
Joindre ou importer votre système de design
Apportez un ou plusieurs systèmes de design à partir d'un dépôt GitHub, de fichiers de design, de téléchargements bruts ou de votre base de code locale en utilisant la commande /design-sync dans Claude Code. Claude construit avec vos composants de système de design réels, vérifie sa propre sortie par rapport à votre système de design et apporte des corrections avant que vous ne les voyiez.
Pour les équipes plus grandes, le rôle personnalisé Claude Design Admin permet à un administrateur d'approuver un système standard et de verrouiller les modifications, de sorte que le travail correspond toujours à vos directives d'entreprise.
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 voulez reproduire. Utile pour les demandes « faire que cela ressemble à ceci ».
Bases de code et fichiers de design existants : Liez un dépôt 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 le travail de design de produit existant.
Rédiger des invites efficaces
Vous n'avez pas besoin d'être un designer pour obtenir d'excellents résultats. Soyez précis sur ce que vous construisez, pour qui 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éer un tableau de bord montrant les revenus mensuels avec des filtres pour la région et la ligne de produits. »
« Concevoir un flux d'intégration d'application mobile avec 4 écrans qui guide les utilisateurs à travers nos fonctionnalités principales. »
« Créer une page d'accueil pour notre nouveau produit API avec une section héros, des exemples de code et une tarification. »
« Créer un formulaire pour collecter les commentaires des clients avec des questions conditionnelles basées sur la catégorie. »
« Concevoir un outil interne pour que notre équipe des opérations examine et approuve les soumissions de contenu. »
Affiner 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 :
« Rendre le schéma de couleurs plus sombre et plus minimaliste. »
« Réorganiser le tableau de bord pour que les métriques soient dans la ligne supérieure et le graphique soit en dessous. »
« Ajouter 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 :
« Augmenter le remplissage de ce bouton. »
« Changer ceci en liste déroulante au lieu de boutons radio. »
« Utiliser la couleur de marque principale ici. »
« Rendre 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.
Modifier directement sur le canevas
Utilisez les contrôles de mise en page enrichis pour des changements visuels et esthétiques rapides, spécifiquement pour faire glisser, redimensionner et aligner les éléments directement.
Quand utiliser le chat par rapport aux commentaires par rapport à la modification directe
Utilisez les commentaires pour les modifications ciblées au niveau des composants (« corriger ce bouton », « ajuster cet espacement »). Utilisez le chat pour les changements structurels, les nouvelles sections ou tout ce qui nécessite une explication ou un contexte. Modifier directement pour les changements visuels et esthétiques rapides.
Gérer les versions et les révisions
Si vous voulez explorer une direction différente sans perdre votre travail actuel, dites à Claude : « Enregistrer ce que nous avons et essayer une approche complètement différente. » Claude enregistrera votre projet actuel et confirmera où il est enregistré, de sorte que vous puissiez facilement référencer les itérations antérieures dans la conversation.
Exporter et partager
Une fois que votre design est prêt, vous pouvez le partager avec des collègues ou l'exporter pour l'utiliser ailleurs. Le format approprié dépend de votre cas d'utilisation—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 tant que PDF
Exporter en tant que PPTX
Envoyer à Canva
Exporter en tant que HTML autonome
Envoyer aux outils que vous utilisez déjà, y compris Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel et Wix, avec d'autres destinations à venir bientôt.
Remise à 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 et tarification
Claude Design compte vers les mêmes limites d'utilisation que le reste de Claude. L'activité de design provient du pool partagé que vous utilisez pour le chat, Claude Code et Cowork, il n'y a donc pas d'allocation Claude Design séparée à suivre. Les projets complexes avec de grandes bases de code ou de nombreuses itérations consomment plus d'utilisation.
Si vous atteignez vos limites d'utilisation, Claude Design n'est pas disponible jusqu'à ce que vos limites se réinitialisent. Si vous avez activé les crédits d'utilisation, vous pouvez continuer à travailler après avoir atteint vos limites incluses. En savoir plus sur le fonctionnement des limites d'utilisation et de longueur.
Remarque : Claude Design avait auparavant sa propre allocation hebdomadaire, séparée de vos autres limites d'utilisation. Toute l'activité Claude Design compte maintenant vers les limites partagées de votre plan.
Conseils pour les meilleurs résultats
Importer un système de design complet. Importez un système de design complet qui inclut vos styles, polices et composants.
Commencer simple, puis ajouter de la complexité. Commencez par la mise en page et le contenu principaux, puis ajoutez les interactions, les cas limites et le polissage. Claude répond bien aux demandes supplémentaires.
Soyez précis dans vos commentaires. « Cela ne semble pas correct » est difficile à agir. « Resserrer l'espacement entre les champs de formulaire à 8px » donne à Claude exactement ce dont il a besoin.
Référencer votre système de design. Si vous savez qu'un composant existe dans le système de votre marque, mentionnez-le par son nom : « Utiliser le composant Bouton principal » ou « Appliquer le modèle de mise en page Carte. »
Penser à la réactivité tôt. Mentionnez si votre design doit fonctionner sur mobile, tablette et bureau, ou seulement sur l'un de ceux-ci.
Demander 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.
Demander 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 maintenant disponible en bêta. Quelques points à connaître :
Persistance des commentaires : Les commentaires en ligne n'apparaissent occasionnellement pas sur la page, mais vous pouvez toujours les voir en ouvrant la vue des commentaires.
Grandes bases de code : Envisagez de lier très grands dépôts à partir de Claude Code pour éviter les ralentissements ou les problèmes de navigateur. Pour synchroniser un système de design, utilisez
/design-syncà partir de Claude Code. Concevez directement à partir de Claude Code en utilisant la compétence/design.Compétences de design dans Claude Code : Si vous ne voyez pas
/designou/design-syncdans Claude Code, essayez d'exécuter/updatepour obtenir la dernière version de ces compétences. Seules les nouvelles sessions dans Claude Code auront cette compétence.Erreurs de chat : Si vous rencontrez une erreur « chat upstream », essayez de démarrer un nouvel onglet de chat dans le même projet.
Disponibilité : Claude Design est disponible sur le web et le bureau uniquement.
Édition multi-personnes : Deux ou plusieurs personnes modifiant un projet de design en même temps est encore basique et peut ne pas fonctionner de manière fiable.
Importation du système de design : L'importation du système de design n'est aussi bonne que sa source. Une base de code désordonnée ou un fichier incomplet apparaîtra dans la sortie.