Configurer un système de design dans Claude

Un système de design enseigne votre marque à Claude. Une fois configuré et partagé avec votre organisation, les présentations, designs et prototypes que votre équipe crée avec Claude peuvent partir de vos couleurs, de votre typographie et de vos composants.

1. Qu'est-ce qu'un système de design

Un système de design regroupe les décisions de design d'une entreprise, consignées une fois, sous une forme que les personnes et les logiciels peuvent réutiliser. Dans Claude, il comporte les parties principales suivantes :

2. Ce qui change lorsque Claude dispose de votre système de design

Claude peut créer une bonne présentation ou un bon écran à partir d'un prompt sans aucune configuration. Mais il n'a pas vu votre marque, il utilise donc ses propres valeurs par défaut, et le résultat ne ressemble pas à votre entreprise.

Avec votre système de design, Claude utilise vos couleurs et votre typographie, ainsi que les composants réels de votre équipe si le système de design les inclut.

Claude utilise votre système de design lorsqu'il crée des présentations, des designs et des prototypes. Vos couleurs, styles typographiques et polices s'appliquent à tous, et les designs et prototypes peuvent également utiliser vos composants réels. Pour voir quel composant Claude a utilisé dans un design, sélectionnez cette partie du design. Son contour est d'une couleur différente, et la liste des calques affiche son nom.

3. Avant de commencer

• Les systèmes de design sont en bêta sur les forfaits Pro, Max, Team et Enterprise. Ils ne sont pas disponibles sur le forfait Free.
• Sur les forfaits Team et Enterprise, les propriétaires contrôlent le modèle Systèmes de design sous Paramètres de l'organisation > Artefacts. Sur Enterprise, il est désactivé par défaut. Si vous ne voyez pas Système de design aux endroits décrits ci-dessous, c'est le premier paramètre à vérifier.
• Toute personne ayant accès peut créer un système de design, l'utiliser et le partager avec des personnes spécifiques. Le partager avec l'ensemble de l'organisation, ou en faire le système par défaut, nécessite un propriétaire de votre organisation (section 7).
• Si votre équipe dispose déjà d'un système de design dans Claude Design autonome (claude.ai/design), vous pouvez le transférer au lieu de le reconstruire. Consultez Migrer depuis Claude Design autonome ci-dessous.

4. Créer un système de design

Démarrer un nouveau système

Vous pouvez démarrer un système de design depuis la zone de message dans n'importe quelle conversation, ou depuis les Paramètres.

Depuis la zone de message : ouvrez le menu +, choisissez Système de design, puis Nouveau système de design. Vous aurez deux choix :

• Avec Claude ouvre un système de design vide à côté d'une nouvelle conversation, où vous pouvez téléverser des fichiers de marque, extraire des données de vos outils connectés, ou décrire la marque.
• Avec Claude Code est destiné à un système de design qui existe déjà dans un dépôt de code. Claude Code lit les tokens et composants de votre dépôt.

Depuis les Paramètres : Paramètres > Systèmes de design répertorie les systèmes de design que vous pouvez utiliser et comporte un bouton Nouveau système de design.

Un système de design est lui-même un artefact. C'est une page que vous pouvez ouvrir, modifier et partager, et elle apparaît sur la page Artefacts avec le reste de votre travail.

Choisir une façon de le remplir

Un nouveau système de design s'ouvre sous forme de page vide avec la question Vous ne savez pas par où commencer ? et une carte pour chaque façon de le remplir. Choisissez une carte, et Claude démarre dans la conversation à côté de la page. Avec Téléverser des fichiers de marque, vous ajoutez d'abord vos fichiers, puis choisissez Créer un système de design.

Synchroniser depuis GitHub

Utilisez cette option lorsque vos couleurs, votre typographie et vos composants existent déjà dans le code. Claude demande quel dépôt lire et ce que vous souhaitez importer. Il lit le code, remplit la page, et est conçu pour laisser votre dépôt inchangé.

• Les couleurs, styles typographiques, espacements, rayons d'angle, polices, logos et documents sont importés.
• Les composants sont à votre choix. Claude répertorie les composants qu'il a trouvés et demande lesquels inclure. Pour les importer, Claude doit exécuter le build de votre projet, il vous le demande donc d'abord.
• Indiquez à Claude quel dossier contient le code de l'interface, afin qu'il ait moins à lire que l'ensemble du dépôt.
• Vous pouvez synchroniser à nouveau plus tard. Les valeurs modifiées sont mises à jour, les nouvelles sont ajoutées, et vos notes d'utilisation, le texte de présentation, les polices et les ressources restent inchangés. Si le code ne définit plus un token, Claude le répertorie et demande avant de le supprimer.

Créer à partir de connecteurs

Utilisez cette option lorsque votre marque est conservée dans un outil de design, un lecteur partagé ou un wiki que vous avez connecté à Claude. Claude vérifie lesquels de vos connecteurs contiennent du travail de marque ou de design, vous indique ce qu'il a trouvé, et propose de créer à partir de cela.

Si vous n'avez rien de connecté, Claude pose quelques questions courtes sur votre marque et rédige une ébauche à partir de vos réponses.

Téléverser des fichiers de marque

Utilisez cette option lorsque votre marque est conservée dans des fichiers, tels que des logos, des polices, un PDF de directives, un fichier de tokens, ou quelques diapositives ou écrans finalisés. Claude lit les fichiers que vous ajoutez et en rédige une première ébauche du système de design.

• Les fichiers qui montrent votre marque en usage, comme des présentations finalisées et des captures d'écran de produit, donnent à Claude davantage de matière que le seul PDF de directives.
• La première ébauche est volontairement réduite. Claude demande ensuite si cela suffit ou s'il faut aller plus loin.
• Claude est conçu pour demander avant de remplir une valeur que vos fichiers ne montrent pas.

Migrer depuis Claude Design autonome

Si votre équipe a créé des systèmes de design dans Claude Design autonome (claude.ai/design), vous pouvez les importer dans Claude au lieu de les reconstruire. Tant qu'ils ne sont pas migrés, ils portent une étiquette Autonome dans Paramètres > Systèmes de design, et Claude ne peut pas les utiliser dans les conversations.

Une seule migration couvre l'ensemble de votre organisation, une seule personne la réalise donc pour tout le monde, et cette personne n'a pas besoin d'être propriétaire. Elle démarre depuis la page Artefacts. Les originaux ne changent pas.

Chaque système de design migré a une étape restante. Le propriétaire du système de design l'ouvre, sélectionne Terminer la migration et envoie la demande à Claude. Si un message indique que la demande a été copiée, collez-la dans une conversation avec Claude et envoyez-la. Claude réorganise alors les fichiers afin que vous puissiez prévisualiser chaque section et la modifier sur la page. En attendant, vous pouvez toujours demander à Claude d'apporter des modifications.

La version autonome ferme. Pour connaître la date, ce qui est partagé, et que faire lorsqu'un système de design ne peut pas être migré, consultez l'article du Centre d'aide sur la migration.

5. Parcourir la page et laisser des notes pour Claude

La page du système de design est l'endroit où votre équipe le révise et le modifie, et où vous laissez des notes d'utilisation qui indiquent à Claude comment l'utiliser.

La page

Vous pouvez modifier le texte de présentation, les valeurs des tokens, les notes, les polices et les ressources directement sur la page. Pour ajouter un thème ou modifier le code d'un composant, demandez à Claude dans la conversation à côté de la page.

Notes d'utilisation

Pendant que vous révisez votre système de design, vous pouvez laisser des notes d'utilisation pour Claude. Une note indique à Claude comment utiliser une couleur, un style typographique ou un composant, et quand ne pas le faire. Claude lit la note d'un composant avant de créer avec ce composant.

6. Comment Claude l'utilise lorsqu'il crée

Pour chaque demande, Claude lit d'abord la présentation, puis uniquement les parties de votre système de design dont la tâche a besoin.

Si votre organisation dispose d'un système de design par défaut, Claude l'utilise sans demander. Si elle dispose de systèmes de design mais d'aucun par défaut, Claude demande lequel utiliser.

7. Le partager avec votre organisation

Au départ, vous seul pouvez utiliser un nouveau système de design. Vous pouvez le partager avec des personnes spécifiques, et un propriétaire de votre organisation peut le partager avec tout le monde et en faire le système par défaut.

Étape par étape

1. Essayez-le vous-même d'abord : votre système de design se trouve dans votre menu + > Système de design dès qu'il contient du contenu enregistré. Demandez une présentation ordinaire, sans rien dire sur la marque. Si la présentation ressemble à votre entreprise, le système de design fonctionne.
2. Partagez-le avec les personnes qui doivent le réviser : sélectionnez Partager en haut de la page du système de design et invitez-les. Il apparaît dans leur menu + > Système de design sous Partagé avec vous. Accordez un accès en modification à toute personne qui doit pouvoir le modifier.
3. Demandez à un propriétaire de votre organisation de le partager avec tout le monde : invitez-le d'abord depuis Partager et accordez-lui l'accès Propriétaire. Dans Partager, il définit ensuite l'audience sur Tout le monde chez [votre organisation] et confirme. Après cela, le système de design se trouve dans le menu de chaque coéquipier.
4. Faites-en le système par défaut, si vous en voulez un : une fois qu'il est partagé avec tout le monde, un propriétaire de votre organisation active Système de design par défaut dans Partager, ou choisit Définir par défaut à côté dans Paramètres > Systèmes de design. Il n'y a qu'un seul système par défaut par organisation, et en définir un nouveau remplace l'ancien.

Voir tous vos systèmes de design au même endroit

Paramètres > Systèmes de design répertorie vos propres systèmes de design, ceux partagés avec vous et ceux partagés avec votre organisation. Gérer les systèmes de design, au bas du menu + > Système de design, ouvre la même page.

• La colonne Utilisable par indique qui peut utiliser chacun, et le système par défaut porte une étiquette Par défaut.
• Les systèmes de design encore dans Claude Design autonome portent une étiquette Autonome.
• Vous pouvez ouvrir, partager, renommer ou supprimer les vôtres depuis le menu de la ligne.

Les propriétaires des organisations Team et Enterprise voient également tous les systèmes de design partagés avec l'organisation sous Paramètres de l'organisation > Artefacts, et peuvent y définir ou supprimer le système par défaut.

8. L'utiliser au quotidien

Ce que voient vos coéquipiers

Une fois qu'un système de design est partagé avec tout le monde, il se trouve dans le menu + > Système de design de chaque coéquipier. Une fois qu'il est le système par défaut, il est déjà sélectionné lorsqu'ils démarrent une présentation ou un design.

Le système par défaut ne remplace pas un système de design que vous avez déjà choisi sur le même appareil. Pour n'en utiliser aucun dans une conversation, décochez toutes les cases, et la puce sous la zone de message affiche Aucun système de design.

Le maintenir à jour

Vous pouvez mettre à jour votre système de design de plusieurs façons :

• Petites modifications : modifiez la page. Les valeurs, le texte de présentation et les notes s'enregistrent au fur et à mesure.
• Modifications plus importantes : demandez à Claude dans la conversation à côté de la page. C'est ainsi que vous ajoutez un thème ou modifiez un composant.
• Un système de design provenant du code : modifiez le code, puis synchronisez à nouveau depuis GitHub. Vos notes et modifications de page sont conservées.
• Présentations et designs que vous avez déjà créés : chacun conserve sa propre copie du système de design datant du moment où il a été créé. Demandez à Claude de la mettre à jour.

Dépannage

Ressources supplémentaires

• Créer des diapositives et des présentations avec Claude et Utiliser Claude pour les prototypes et l'UX montrent le système de design en action.
• Collaborer avec votre équipe dans les artefacts Claude pour partager et modifier des présentations et des designs.
• Consultez le Centre d'aide pour en savoir plus sur les systèmes de design dans Claude Design et sur la migration depuis Claude Design autonome. Les propriétaires peuvent trouver les paramètres de leur organisation dans le guide d'administration des Artefacts.