Utiliser Claude pour les prototypes et l'UX

Une idée de fonctionnalité est plus facile à juger lorsque les gens peuvent la parcourir en cliquant. Avec Claude Design, vous décrivez la fonctionnalité dans une conversation et Claude construit un prototype que votre équipe peut ouvrir et essayer. Si Claude dispose de votre système de design, il construit le prototype à partir de vos propres composants, comme les vrais boutons et formulaires de votre produit.

1. Démarrer un design

Vous pouvez démarrer un design depuis n'importe où vous travaillez avec Claude.

• Dans n'importe quelle conversation : demandez un prototype, une maquette ou un ensemble d'écrans, sur le web ou dans l'application de bureau.
• Depuis la barre latérale : ouvrez Artefacts, choisissez Design sous Créer quelque chose de nouveau, et décrivez ce que vous voulez dans la conversation qui s'ouvre.
• Dans Claude Code, à l'intérieur de votre dépôt : demandez de la même manière. Là, Claude peut aussi lire le code de votre produit, comme l'explique la section 3.

Le design s'ouvre à côté de la conversation sur un canevas que vous pouvez déplacer et zoomer. Chaque écran se trouve sur son propre plan de travail. Le design est enregistré sous Artefacts, et les autres personnes ne peuvent pas l'ouvrir tant que vous ne l'avez pas partagé.

2. Prototyper la fonctionnalité

Voici quelques types de prototypes que vous pouvez demander, avec des prompts à essayer.

Une nouvelle fonctionnalité

Décrivez l'écran, ses sections et leur comportement.

• « Conçois une nouvelle page de paramètres pour notre application SaaS avec des sections pour le compte, la facturation, les notifications et les intégrations. Inclus une navigation latérale et rends chaque section extensible. »
• « Prototype une expérience de recherche avec des filtres, des résultats à facettes, et un panneau de détail qui glisse depuis la droite lorsqu'on clique sur un résultat. Rends-le cliquable. »
• « Construis une interface de workflow d'approbation où les managers peuvent examiner, commenter et approuver ou rejeter des demandes soumises dans une file d'attente. »

Alternatives pour une revue de design

Demandez chaque approche sur son propre plan de travail. Vous et vos relecteurs pourrez ensuite les comparer côte à côte.

• « Montre-moi trois mises en page différentes pour une page de profil utilisateur : une basée sur des cartes, une avec une barre latérale gauche, et une avec une navigation par onglets en haut. Mets chacune sur son propre plan de travail. »
• « Crée deux versions de ce flux de paiement sur des plans de travail séparés, une sur une seule page et une en plusieurs étapes, pour que je puisse les comparer lors d'une revue de design. »

Un flux complet

Décrivez le parcours étape par étape.

« Cartographie le flux pour un utilisateur qui souhaite passer d'un forfait gratuit à un forfait payant. Commence par le tableau de bord où il voit l'invite de mise à niveau, puis la page de comparaison des forfaits, le formulaire de paiement, la confirmation, et le tableau de bord mis à jour avec les fonctionnalités premium débloquées. »

Outils internes et panneaux d'administration

Claude Design fonctionne bien pour les outils internes, comme les panneaux d'administration et les files de modération. Les gens peuvent parcourir le prototype en cliquant et voir si les étapes fonctionnent avant que les écrans ne soient peaufinés.

« Conçois un panneau d'administration pour gérer les comptes utilisateurs : un tableau consultable avec des filtres pour le type de forfait et le statut, et un tiroir de détail qui affiche l'historique du compte et permet de modifier les permissions. »

Claude peut ne pas disposer de tous les faits, comme vos tarifs réels. Il peut vous le demander, ou faire une hypothèse. Vérifiez toujours le travail de Claude et contrôlez les détails avant de partager le design. Pour en savoir plus sur l'évaluation des résultats de Claude, lisez Comment les gens vérifient le travail de Claude, notre rapport éducatif.

3. Construire avec vos propres composants

Claude peut construire un prototype avec vos vrais composants, les mêmes boutons et formulaires que votre produit utilise déjà. Le prototype correspond alors à ce que les ingénieurs vont construire. Sans vos composants, Claude dessine sa propre version qui ne fait que ressembler.

Vous pouvez obtenir un prototype qui correspond à votre produit de l'une de ces deux façons :

• Configurer un système de design (recommandé) : un système de design regroupe vos couleurs, votre typographie et vos composants en un seul endroit dans Claude. Une fois que votre organisation a défini un système par défaut, Claude l'utilise pour tout design que votre équipe démarre. Consultez Configurer un système de design dans Claude.
• Travailler depuis Claude Code dans le dépôt : demandez le design depuis une session Claude Code à l'intérieur de votre projet. Claude peut lire le code et reprendre les couleurs, la typographie et l'espacement que votre produit utilise déjà. Cela ne nécessite aucune configuration.

Quel que soit votre choix, ces habitudes aident :

• Nommez les composants dans vos prompts : « utilise le composant ProductCard » ou « suis la même mise en page que la page des paramètres » indique à Claude lesquels utiliser.
• Orientez Claude vers le code de l'interface : dans un grand dépôt, indiquez à Claude quel package ou dossier contient les composants.
• Pour modifier un composant, demandez à Claude : vos vrais composants apparaissent sur le plan de travail exactement comme dans votre code.
• Actualisez après un changement de bibliothèque : un système de design synchronisé depuis votre code conserve une copie de vos composants depuis la dernière synchronisation. Resynchronisez-le après une version.

4. Affiner sur les plans de travail

Vous pouvez modifier un design vous-même, laisser un commentaire pour Claude, ou demander dans la conversation. Les modifications s'enregistrent au fur et à mesure, il n'y a donc pas de bouton Enregistrer.

• À la main : cliquez sur un élément pour le sélectionner, double-cliquez sur du texte pour le ressaisir, et faites glisser pour le déplacer. Utilisez la barre d'outils pour ajouter du texte, des notes, des formes et de nouveaux plans de travail. Propriétés affiche les paramètres de l'élément que vous avez sélectionné.
• Avec un commentaire : pour modifier un élément, activez les commentaires, cliquez sur l'élément, écrivez ce que vous voulez, et laissez Envoyer à Claude coché. Claude effectue la modification et répond dans le fil de commentaires.
• En demandant : pour un changement plus important, comme un nouvel état ou une autre alternative, demandez dans la conversation.

Par exemple : « Montre comment cette page gère l'état vide, l'état d'erreur et un état de chargement. Mets chacun sur son propre plan de travail à côté de l'actuel. »

5. L'examiner avec votre équipe

Avec Partager, vous choisissez qui peut ouvrir le design et s'il peut le consulter, le commenter ou le modifier. Les personnes que vous invitez ont besoin d'un compte Claude. Pour les options de chaque forfait, consultez Partager des artefacts dans le Centre d'aide.

Ce que chaque personne peut faire dépend de l'accès que vous lui accordez :

• Peut consulter : elle ouvre le design, clique sur n'importe quel élément pour lire sa taille, son espacement et ses couleurs, et exécute un plan de travail cliquable avec Lecture. Elle ne peut rien modifier.
• Peut commenter : la même chose, plus des commentaires sur les éléments qu'elle clique.
• Peut modifier : elle modifie le design elle-même et ajoute des notes sur le canevas. Les personnes de votre organisation qui peuvent modifier peuvent aussi envoyer un commentaire à Claude sous forme de demande.

Les personnes ayant un accès de modification peuvent travailler sur le canevas en même temps, et vous voyez les modifications des uns et des autres au fur et à mesure qu'elles se produisent.

Sur les forfaits Team et Enterprise, un propriétaire de votre organisation décide si vous pouvez partager en dehors de celle-ci. Pour quelqu'un qui ne peut pas ouvrir le lien, utilisez Exporter. Vous pouvez exporter :

• Un plan de travail en fichier PNG, PDF ou HTML (.zip)
• Le prototype entier sous forme d'une seule page web (HTML), depuis Partager > Exporter
• Chaque plan de travail dans un seul PDF

6. Continuer dans Claude Code

Claude Code peut ouvrir un prototype créé dans Claude Design. Un ingénieur peut alors construire à partir des plans de travail réels et des composants qu'ils contiennent, et non à partir d'une capture d'écran.

• Si vous avez conçu dans Claude Code : restez dans la même session et demandez à Claude de le construire. Pour y revenir plus tard, ouvrez le design depuis Artefacts et utilisez le bouton à côté de Partager pour rouvrir la session qui l'a créé.
• Si vous avez conçu ailleurs : donnez à l'ingénieur un accès de modification au design. Dans Claude Code, à l'intérieur du dépôt, il colle le lien du design et demande à Claude de l'implémenter.

Avant de commencer la construction

Quelques étapes facilitent la construction à partir du design :

• Nommez clairement les plans de travail et les composants : Claude Code lit ces noms dans le design.
• Notez les décisions au fur et à mesure que vous les prenez : si vous avez choisi des onglets plutôt qu'une barre latérale, expliquez pourquoi dans une note sur le plan de travail, où Claude Code peut la lire.
• Demandez d'abord les états vide, d'erreur et de chargement : demandez aussi comment l'écran se comporte avec très peu de données et avec beaucoup plus que prévu.

7. Un exemple, de l'idée à l'implémentation

1. Un chef de produit décrit la fonctionnalité dans une conversation. Il s'agit d'un centre de notifications avec filtrage et actions groupées.
2. Claude construit un premier prototype à partir du système de design de l'organisation, et un designer l'affine sur les plans de travail.
3. Le chef de produit partage le design pour une revue asynchrone, et l'équipe exécute le prototype et commente.
4. Un ingénieur ouvre le design dans Claude Code et demande à Claude de l'implémenter.

Si quelque chose semble anormal

Ressources supplémentaires

• Créer des diapositives et des présentations avec Claude pour les présentations.
• Configurer un système de design dans Claude pour que les designs utilisent vos composants et votre typographie.
• Collaborer avec votre équipe dans les artefacts Claude pour savoir comment les designs sont partagés et modifiés avec votre équipe.
• Visitez le Centre d'aide pour plus d'assistance et de dépannage.