Commencer avec Claude Design

Claude Design vous permet de créer des designs, des prototypes interactifs, des one-pagers et d'autres travaux visuels en discutant avec Claude. C'est l'un des modèles à partir desquels vous pouvez démarrer un artefact, vous pouvez donc l'utiliser dans n'importe quelle conversation, dans Claude Code et depuis l'onglet Artifacts, avec édition sur le canevas et votre système de design inclus. Ce guide vous montre comment créer votre premier design, l'itérer et en tirer le meilleur parti. En savoir plus sur ce que sont les artefacts et comment les utiliser.

Ce guide suppose que le système de design de votre organisation a déjà été configuré, donc tout ce que vous créerez utilisera automatiquement les couleurs, la typographie et les modèles de composants de votre marque. Si vous êtes un responsable de design qui doit configurer ou modifier le système de design lui-même, consultez Configurer votre système de design dans Claude Design.

Créer un artefact avec Claude

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 :

Vous pouvez passer entre travailler dans Claude Design et Claude Code tout en gardant votre travail synchronisé. Utilisez /design-sync pour importer votre système de design, afin que tout ce que vous construisez dans Claude Design commence à partir de 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 de bout en bout.

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.

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 vrais composants de système de design, vérifie sa propre sortie par rapport à votre système de design et fait des corrections avant que vous les voyiez.

Sur les plans Enterprise, les administrateurs peuvent réserver la publication, définir la valeur par défaut et supprimer les systèmes de design pour des utilisateurs spécifiques. En savoir plus dans le guide d'administration des artefacts pour les plans Team et Enterprise.

Les systèmes de design que vous avez créés dans la version autonome sur claude.ai/design peuvent être transférés, afin que Claude puisse les utiliser dans n'importe quelle conversation, y compris dans Claude Code. Migrez-les avant la fermeture de la version autonome le 14 décembre 2026. En savoir plus dans Migrer de Claude Design autonome vers Claude.

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.

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 :

La première génération est un point de départ. La vraie valeur vient de l'itération.

Le chat est idéal pour les changements généraux qui affectent l'ensemble du design :

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é.

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 :

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.

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. Modifier directement pour les changements visuels et esthétiques rapides.

Pour accéder au panneau d'artefacts et en sortir, et pour commenter à partir de l'en-tête du panneau, consultez Utiliser les artefacts avec un clavier ou un lecteur d'écran. Cet article explique également ce que signifie la mise au point, ce qu'il faut faire sur un Mac ou dans Safari, et comment les tableaux affichent les touches.

Une conception est un canevas de plans de travail. Chaque plan de travail contient des calques, tels que du texte, des formes et des images, et un calque peut contenir d'autres calques à l'intérieur.

Appuyez sur F6 pour passer à la zone suivante et sur Maj+F6 pour passer à la zone précédente. Cmd+F6 (Ctrl+F6 sous Windows) fonctionne à la place de F6, avec ou sans Maj. Les zones sont la barre supérieure, le canevas et le panneau des propriétés. Lorsque quelque chose est sélectionné et que le panneau des propriétés est fermé, F6 s'arrête également à la barre d'outils qui flotte au-dessus de la sélection.

Appuyez sur Tab jusqu'à ce que vous atteigniez le titre d'un plan de travail. Son nom inclut sa position, comme le plan de travail 1 sur 7. À partir du titre, Espace sélectionne le plan de travail, et Entrée y entre, à ses calques. Une fois à l'intérieur :

Lorsque vous modifiez un calque de texte, appuyez sur Échap ou Tab lorsque vous avez terminé. Au fur et à mesure que vous vous déplacez, l'éditeur indique aux lecteurs d'écran ce qui est sélectionné et sa position, par exemple 1 sur 5.

Pour déplacer un plan de travail, sélectionnez-le (Espace sur son titre) et appuyez sur les touches fléchées. Il se déplace d'un pixel à la fois, ou de 10 avec Maj. À l'intérieur d'un plan de travail, les touches fléchées font autre chose : avec ou sans Maj, elles vous déplacent vers le calque suivant ou précédent et ne déplacent jamais le calque lui-même. Pour déplacer le calque sur lequel vous êtes, maintenez Option (Alt sous Windows) et appuyez sur une touche fléchée. Un calque librement placé se déplace d'un pixel, ou de 10 avec Maj. Un calque qui fait partie d'une ligne, d'une colonne ou d'une grille échange sa place avec son voisin : Haut ou Gauche le déplace plus tôt, et Bas ou Droite le déplace plus tard. L'éditeur envoie une brève confirmation du déplacement aux lecteurs d'écran.

Avec un plan de travail ou un calque sélectionné, appuyez sur Cmd+D (Ctrl+D sous Windows) pour le dupliquer, et Supprimer ou Retour arrière pour le supprimer. Appuyez sur Cmd+Z (Ctrl+Z sous Windows) pour annuler. L'éditeur envoie une brève confirmation de chacun de ces éléments aux lecteurs d'écran.

La barre d'outils qui flotte au-dessus d'une sélection n'est présente que lorsque le panneau des propriétés est fermé, et F6 la atteint. En elle, les touches fléchées se déplacent entre ses contrôles, Début et Fin se déplacent vers le premier et le dernier, et Échap revient au canevas avec votre sélection conservée. Vous pouvez également atteindre chaque contrôle avec Tab.

Cmd+\ (Ctrl+\ sous Windows) ouvre le panneau des propriétés et y déplace le focus. L'appuyer à nouveau ferme le panneau, et le focus revient au bouton « Propriétés » dans la barre supérieure. Les fenêtres contextuelles de couleur, de police et autres dans le panneau prennent le focus lorsqu'elles s'ouvrent, et Échap les ferme. Lorsque vous choisissez une couleur de texte, le sélecteur de couleur vous indique si son contraste par rapport à l'arrière-plan est bon ou mauvais.

Dans la liste des calques du panneau des propriétés : les touches fléchées Haut et Bas se déplacent entre les lignes, la touche fléchée Droite développe une ligne puis y entre, la touche fléchée Gauche la réduit puis en sort, Entrée ou Espace sélectionne ce calque sur le canevas, et Entrée à nouveau sur un calque de texte l'édite.

Si vous souhaitez explorer une direction différente sans perdre votre travail actuel, dites à Claude : « Sauvegarde ce que nous avons et essaie une approche complètement différente. » Claude sauvegarde votre projet actuel et confirme où il est enregistré, afin que vous puissiez facilement référencer les itérations antérieures dans la conversation.

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 consultation de votre projet pour choisir parmi les formats d'exportation suivants.

Les conceptions vous sont privées au départ. Pour en partager une, cliquez sur « Partager » et choisissez qui peut l'ouvrir et ce qu'il peut faire. Les personnes avec lesquelles vous partagez une conception peuvent la consulter, la commenter ou la modifier. En savoir plus sur le partage d'artefacts.

Claude Design compte dans les mêmes limites d'utilisation que le reste de Claude. L'activité de conception puise dans le 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'à la réinitialisation de vos limites. 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.

Quelques points à connaître :