Claude Design vous permet de créer des designs, des prototypes interactifs, des one-pagers et d'autres travaux visuels en conversant avec Claude. Vous pouvez l'utiliser dans n'importe quelle conversation avec Claude, y compris dans Claude Code et l'onglet Artifacts, et toutes ses fonctionnalités sont incluses, notamment l'édition sur le canevas et l'importation de votre système de design. Pour créer des présentations, utilisez Claude Slides. Ce guide vous montre comment créer votre premier design, l'itérer et tirer le meilleur parti de l'outil.
Claude Design est disponible en bêta sur les plans Pro, Max, Team et Enterprise. Il n'est pas disponible sur le plan Free. Il est activé par défaut sur les plans Pro et Max, et vous pouvez le désactiver dans Paramètres > Capacités. Il est également activé par défaut sur les plans Team. Sur les plans Enterprise, il est désactivé par défaut jusqu'à ce qu'un propriétaire l'active dans Paramètres de l'organisation > Artifacts. L'expérience Claude Design autonome sur claude.ai/design continue de fonctionner et dispose de son propre paramètre séparé.
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.
Où vous pouvez utiliser Claude Design
Dans une conversation : Demandez à Claude un design, par exemple « Créez un one-pager à partir de cette proposition » ou « Créez une maquette du flux d'intégration dont nous venons de discuter. » Claude le crée à côté de votre conversation, et vous l'affinez là. Vous pouvez également sélectionner Sortie > Design dans la boîte de message.
Dans l'onglet Artifacts : Allez à l'onglet Artifacts et choisissez un modèle Design.
Dans Claude Code : Demandez à Claude de transformer votre idée en design, ou utilisez /design pour créer, modifier et synchroniser des designs, sur ordinateur ou dans le terminal.
Dans l'application Claude pour iOS et Android : Demandez un design dans n'importe quelle conversation et revenez plus tard pour voir le résultat, puis affichez-le en plein écran dans l'onglet Artifacts. Pour commencer à partir d'un modèle, modifier sur le canevas ou modifier les paramètres de partage, utilisez Claude sur le web ou sur ordinateur.
Sur claude.ai/design : L'expérience autonome continue de fonctionner, et vos projets existants restent où ils sont.
Comment fonctionne Claude Design
Claude Design associe une conversation à un canevas. Vous décrivez ce que vous voulez, et Claude génère un design fonctionnel sur le canevas à côté de la conversation. À 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 :
Commencez un design à partir d'une conversation, de l'onglet Artifacts ou de claude.ai/design.
Joignez ou importez le système de design avec lequel vous voulez que Claude construise.
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.
Affinez par le chat, modifiez directement sur le canevas ou laissez des commentaires en ligne.
Exportez ou partagez 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 transférer à Claude Code, qui continue à partir de votre travail existant au lieu de recommencer à partir d'une capture d'écran.
À partir de Claude Code, utilisez /design pour importer un design dans votre base de code, exporter votre code en tant que prototype en direct, ou laisser 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, vos polices et vos composants sont déjà en place.
Joignez ou importez votre système de design
Apportez un ou plusieurs systèmes de design à partir d'un référentiel 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 grandes équipes, la permission Claude Design Admin dans les rôles personnalisés permet à un administrateur d'approuver un système standard et de verrouiller les modifications, de sorte que le travail correspond toujours aux directives de votre entreprise.
Migrer votre système de design vers Artifacts
Le nouveau Claude Design intégré dispose d'une fonctionnalité Systèmes de design révisée, que vous pouvez gérer dans Paramètres > Systèmes de design.
Pour apporter un système de design existant, ouvrez l'onglet « Design » en bas de la barre latérale et cliquez sur « Migrer les systèmes de design d'équipe » dans la bannière. Chaque système de design devient un artifact que Claude peut utiliser dans n'importe quelle conversation, y compris dans Claude Code. Les systèmes migrés ne sont pas parfaits, donc chacun affiche une bannière : cliquez sur « Laisser Claude le nettoyer » et Claude nettoie le guide, les jetons et les composants.
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 « faire ressembler à 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 le travail de design de produit existant.
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 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 pour la région et la gamme 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. »
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 :
« Rendez le schéma de couleurs plus sombre et 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 choix de conception, de suggérer des améliorations ou d'examiner la conception pour l'accessibilité.
Utiliser des 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 remplissage de ce bouton. »
« Changez ceci en liste déroulante au lieu de boutons radio. »
« Utilisez la couleur de marque principale ici. »
« Rendez cette section repliable. »
Remarque : Si vos commentaires ne sont pas détectés, collez les commentaires directement dans le chat. C'est une solution de contournement connue pour un problème intermittent où les commentaires peuvent disparaître avant que Claude les lise.
Modifier directement sur le canevas
Utilisez les contrôles de mise en page enrichis pour des changements visuels et esthétiques rapides, en particulier 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 modifications structurelles, les nouvelles sections ou tout ce qui nécessite une explication ou un contexte. Modifiez directement pour les changements visuels et esthétiques rapides.
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 conception prête, vous pouvez la 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
Exporter vers Google Slides (disponible uniquement sur claude.ai/design)
Exporter en HTML autonome
Envoyer aux outils que vous utilisez déjà : Adobe Experience Manager, Adobe for Creativity, Adobe Journey Optimizer, Base44, Canva, Gamma, HubSpot, Hyperframes, Lovable, Miro, Netlify, Replit, v0, Vercel et Wix
Remise à Claude Code
Envoyer à l'agent de codage local
Envoyer à Claude Code Web
Les conceptions sont privées jusqu'à ce que vous les partagiez :
Plans Entreprise : Vous pouvez également partager avec toute personne de votre organisation qui dispose du lien. Les liens restent au sein de votre organisation à moins qu'un propriétaire n'active le partage externe dans les paramètres de l'organisation > Artefacts.
Plans Pro, Max et Team : Vous pouvez également partager avec toute personne qui dispose du lien. Ils ont besoin d'un compte Claude pour l'ouvrir.
Utilisation et tarification
Claude Design compte dans les mêmes limites d'utilisation que le reste de Claude. L'activité de conception provient du même pool que le reste de votre travail avec Claude, y compris Claude Code, 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 désormais dans les limites partagées de votre plan.
Conseils pour les meilleurs résultats
Importez un système de conception complet. Importez un système de conception complet qui inclut vos styles, polices et composants.
Commencez simple, puis ajoutez 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 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 conception. 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 disposition Carte. »
Pensez à la réactivité dès le début. Mentionnez si votre conception doit fonctionner sur mobile, tablette et bureau, ou sur un seul d'entre eux.
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 conception 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 conception, pas seulement comme un générateur.
Limitations connues
Claude Design est maintenant disponible en version 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 grandes référentiels de Claude Code pour éviter les ralentissements ou les problèmes de navigateur. Pour synchroniser un système de conception, utilisez /design-sync à partir de Claude Code.
Erreurs de chat : Si vous rencontrez une « erreur en amont du chat », essayez de démarrer un nouvel onglet de chat dans le même projet.
Mobile : Dans l'application Claude pour iOS et Android, vous pouvez demander une conception et la visualiser dans l'onglet Artefacts. La modification sur le canevas et la modification des paramètres de partage nécessitent Claude sur le web ou le bureau.
Édition multi-utilisateurs : Deux personnes ou plus modifiant un projet de conception en même temps est encore basique et peut ne pas fonctionner de manière fiable.
Importation du système de conception : L'importation du système de conception n'est aussi bonne que sa source. Une base de code désordonnée ou un fichier incomplet apparaîtra dans la sortie.
Historique des versions : Claude Design n'a pas encore d'historique des versions.