Configuration
Essayer un plugin
Le plugin Design est livré avec /design-handoff déjà structuré pour lire une description de flux et une bibliothèque de composants, et produire une version HTML câblée et cliquable. Si votre administrateur gère les plugins et qu'il n'est pas encore disponible, ignorez cette étape ; rien de ce qui suit n'en a besoin.
/design-handoffGenerate developer handoff specs from a design./ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.Connectez vos outils
Claude Cowork est plus puissant lorsqu'il fonctionne directement avec vos systèmes. Vous contrôlez les autorisations et les accès. En savoir plus sur l'accès aux outils(s’ouvre dans un nouvel onglet).
Accédez à Personnaliser → Connecteurs dans Cowork pour configurer.
Définissez votre dossier de travail
Faites glisser les fichiers que vous utiliserez (la description du flux ou la spécification, l'export de la bibliothèque de composants, vos tokens, du contenu d'exemple) dans un seul dossier sur votre machine, puis pointez Cowork vers celui-ci. Cowork y lit les fichiers et réécrit le prototype HTML dans un sous-dossier. Si vous prototypez régulièrement, créez un projet Cowork(s’ouvre dans un nouvel onglet) à partir de ce dossier afin que votre bibliothèque et vos conventions restent associées.
Le prompt
Copiez ceci dans Claude Cowork
Créez un prototype HTML cliquable du flux présent dans ce dossier en utilisant uniquement des composants de notre bibliothèque de système de design. Câblez la navigation, utilisez des données fictives réalistes, et écrivez-le dans prototype/index.html afin que je puisse naviguer en cliquant dans un navigateur.
Pourquoi cela fonctionne
Limitez-le à vos propres matériaux. Aucune interface inventée ; tout correspond à la bibliothèque réelle.
Décrivez ce que chaque interaction doit faire. Cliquer déplace réellement ; les utilisateurs testent un flux, pas des images.
Demandez du contenu d'exemple réaliste. Pas de lorem ipsum ; les écrans se lisent comme le produit.
Donnez-lui directement les fichiers source. Les tokens et le CSS sont intégrés au prototype sans modification.
Obtenir un meilleur brouillon
Ajoutez un exemple à reproduire. Déposez un exemple que vous aimez dans le dossier et Cowork reproduira votre structure et votre ton.
Demandez-lui de signaler les incertitudes. Ajoutez « signale tout ce dont tu n'es pas sûr » afin de savoir où regarder en premier lorsque vous examinez le brouillon.
Faites en sorte que Cowork travaille pour vous
Le /design-handoff du plugin est un point de départ générique. Une fois que l'étape 2 produit une version que vous présenteriez réellement à un participant, demandez à Cowork d'écrire votre propre version de la compétence. Ajoutez votre nomenclature de composants, vos jeux de données fictives, vos conventions d'interaction, et la page d'habillage dans laquelle vos prototypes s'inscrivent toujours. Quelques minutes de conversation suffisent, et la compétence fonctionne ensuite selon vos standards.
Transformez ce que nous avons fait dans cette tâche jusqu'à présent en une compétence, ou modifiez la compétence /design-handoff avec mes retours.
Rendez-le reproductible
Partagez-le sous forme d'artefact
Un prototype que vous devez envoyer par e-mail devient rapidement obsolète. Demandez à Cowork de le publier sous forme d'artefact, et chaque relecteur et participant au test dispose d'un seul lien — relancez la compétence (ou planifiez-la) pour l'actualiser.
Publiez ce prototype sous forme d'artefact. Ajoutez un petit tampon de version « v2, v3 » dans le coin.
Reconstruisez-le à chaque changement de spécification
La spécification évolue, le prototype doit suivre sans qu'on ait à le demander. Tapez /schedule dans le prompt, ou ouvrez Planifié dans la barre latérale de Cowork, et configurez la compétence personnalisée pour qu'elle se reconstruise chaque matin à partir de ce qui se trouve dans le dossier.
/schedule En semaine à 7h, vérifiez les changements dans Prototypes/Invite-Flow et relancez /design-handoff, en reconstruisant prototype/index.html et en incrémentant le tampon de version.
Chaque jour de semaine à 7h, vérifie le dossier du projet pour détecter des changements de spécification ou de bibliothèque, relance /design-handoff, et reconstruit le HTML cliquable avec un tampon de version incrémenté.
Partagez avec vos coéquipiers
Votre /design-handoff personnalisé porte désormais votre mappage de composants, vos jeux de données fictives et votre page d'habillage. Partagez-le afin que tout designer de l'équipe puisse passer de la spécification à une version cliquable de la même manière, et que les tests de concept cessent de dépendre de quelqu'un qui sait câbler des maquettes à la main.