Un système de design capture vos couleurs, typographie, composants et modèles de mise en page, afin que Claude les applique à chaque nouveau design et présentation. Claude les extrait des ressources que vous fournissez, comme les bases de code, les présentations ou d'autres références de design.
Les systèmes de design sont disponibles en bêta sur les plans Pro, Max, Team et Enterprise. Ils sont activés par défaut sur les plans Pro, Max et Team. Sur les plans Enterprise, ils sont désactivés jusqu'à ce qu'un propriétaire active Design systems dans Organization settings > Artifacts. Claude Design autonome sur claude.ai/design dispose de son propre paramètre distinct.
Ce guide s'adresse au designer ou au propriétaire de la marque qui configurera le système de design. Sur les plans Team et Enterprise, vous ne devez le faire qu'une seule fois, et le travail de chacun l'utilisera après cela.
Avant de commencer
Sur les plans Team et Enterprise, Design systems doit être activé pour votre organisation, et un propriétaire peut limiter qui peut publier ou définir la valeur par défaut.
Vous aurez besoin d'au moins l'une des ressources suivantes comme matériel source :
Une base de code avec votre système de design ou bibliothèque de composants
Une présentation ou un document qui reflète votre identité visuelle
Ressources de directives de marque (logos, palettes de couleurs, spécifications typographiques)
Créer un système de design
À partir d'une conversation
Demandez à Claude de créer un système de design à partir de vos applications connectées, fichiers téléchargés, fichiers Figma, présentations, logos et polices. Cela fonctionne mieux pour les systèmes de design de marque avec polices, couleurs et directives.
À partir de Claude Code
Si votre système de design existe déjà sous forme de composants React, exécutez /design-sync dans Claude Code. Il lit vos tokens et composants directement, et fonctionne mieux pour les systèmes de design de produit en code.
Importez un système de design depuis claude.ai/design
Ouvrez l'onglet « Design » en bas de la barre latérale.
Cliquez sur « Migrate team design systems » dans la bannière.
Chaque système de design devient un artefact que Claude peut utiliser dans n'importe quelle conversation, y compris dans Claude Code. Les systèmes de design migrés peuvent nécessiter un nettoyage, donc chacun affiche une bannière où vous pouvez cliquer sur « Let Claude clean it up », et Claude nettoie son guide, ses tokens et ses composants.
Gérez vos systèmes de design
Gérez vos systèmes de design dans Settings > Design systems. Sur les plans Enterprise, les administrateurs peuvent réserver la publication, la définition de la valeur par défaut de l'organisation et la suppression des systèmes de design pour des utilisateurs spécifiques. En savoir plus dans le Artifacts admin guide for Team and Enterprise plans.
Utiliser un système de design avec un clavier
Pour accéder au panneau d'artefacts et en sortir, consultez Use artifacts with a keyboard or screen reader. Cet article explique également ce que signifie le focus, ce qu'il faut faire sur un Mac ou dans Safari, et comment les raccourcis sont écrits.
Un système de design s'ouvre sous forme de liste de sections à côté de la section que vous lisez. Appuyer sur Entrée sur une section de la liste vous y fait entrer, Cmd+F6 (Ctrl+F6 sous Windows) bascule entre la liste et la section, et Cmd+Z (Ctrl+Z sous Windows) annule une modification lorsque vous n'êtes pas dans une zone de texte.
Remarque : Les aperçus de composants en direct dans un système de design ne peuvent pas être atteints avec Tab, ils ne peuvent donc pas être utilisés au clavier. Le nom et les notes de chaque composant peuvent être lus.
Configurez un système de design sur claude.ai/design
Ces étapes utilisent Claude Design autonome.
Créez ou basculez vers votre organisation
Ouvrez Claude Design.
Dans le coin inférieur gauche du sélecteur de projet, cliquez sur le nom de l'organisation actuelle.
Sélectionnez votre organisation ou créez-en une nouvelle.
Complétez le flux d'intégration vers lequel vous êtes redirigé.
Téléchargez vos ressources de marque et de produit
Pendant l'intégration ou après, à partir de vos paramètres d'organisation, téléchargez les ressources qui définissent votre marque et votre produit. Claude les analyse et extrait un système de design réutilisable.
Bases de code : Si votre système de design réside dans le code, comme une bibliothèque de composants React, liez ou téléchargez le référentiel. Claude lit les composants et les styles.
Prototypes : Captures d'écran, flux web et fichiers de design existants.
Présentations ou documents : Même un PowerPoint ou un PDF bien conçu qui reflète votre marque peut fonctionner. Claude extrait les couleurs, les modèles de mise en page et les choix typographiques.
Ressources individuelles : Logos, fichiers de palette de couleurs, spécimens typographiques.
Vous n'avez besoin que d'une seule source pour commencer, mais plus de sources donnent à Claude plus de matériel à utiliser.
Examinez le système de design généré
Après le téléchargement, Claude génère un système de design pour votre organisation. Cela inclut généralement :
Palette de couleurs : Couleurs primaires, secondaires et d'accent extraites de vos ressources.
Typographie : Familles de polices, tailles et poids.
Composants : Boutons, cartes, éléments de navigation et autres modèles d'interface utilisateur réutilisables.
Modèles de mise en page : Espacement, systèmes de grille et structures de page.
Pour le valider, créez un projet de test et vérifiez si la sortie correspond à votre marque. Essayez des invites comme :
« Créez une page d'accueil pour [votre produit]. »
« Concevez un tableau de bord affichant [les métriques pertinentes]. »
« Créez un document d'une page sur [un sujet que votre équipe présente couramment]. »
Mettez-le à la disposition de votre équipe
Lorsque vous êtes satisfait du système de design, activez le bouton bascule « Published ». Après la publication, les projets créés à partir de l'écran d'accueil de Claude Design dans votre organisation utilisent votre système de design au lieu de celui par défaut.
Mettez à jour votre système de design
Lorsque votre système de design change, vous pouvez le mettre à jour dans Claude Design. À partir de vos paramètres d'organisation Claude Design, cliquez sur le bouton « Open » à côté du système de design que vous souhaitez modifier. Cliquez sur le bouton « Remix » dans le coin supérieur droit pour ouvrir l'interface de chat sur le côté gauche de la fenêtre. À partir de là, vous pouvez travailler avec Claude pour modifier votre système de design.
Conseils pour de meilleurs résultats
Incluez des exemples réels, pas seulement des spécifications. Une page d'accueil ou un site marketing terminé en dit plus à Claude sur le ressenti de votre marque qu'une palette de couleurs seule.
Itérez. Si la première extraction ne capture pas bien votre marque, essayez de télécharger des ressources supplémentaires ou différentes.