design-handoffpar Anthropic

Design Handoff Skill.

Un skill Claude Code et Codex pour le travail de marque et de système de design : spécifications de transfert développeur à partir d'une maquette : mise en page, tokens, états de composant, points de rupture.

Marque et design systems
Spécification de transfert

Télécharger OpenDesign Voir le guide d'utilisation

anthropics/knowledge-work-plugins · design/skills/design-handoff/SKILL.mdSKILL.md

--- name: design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. --- ## Usage ## What to Include ## Principles ## Output ## Handoff Spec: [Feature/Screen Name] ## If Connectors Available

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 3 939 caractères au total

01 Ce qu'il fait

Ce que fait le skill design-handoff dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Génère une documentation de transmission au développeur à partir d'un design, destinée aux équipes dont le design est prêt pour l'ingénierie et nécessite une fiche de spécifications. Pointez-le vers une URL Figma, ou à défaut une description ou une capture d'écran, et il travaille sur les spécifications visuelles, les spécifications d'interaction, les spécifications de contenu, les cas particuliers et l'accessibilité.

Le résultat est un Handoff Spec en Markdown avec des sections pour l'aperçu, la mise en page, les tokens de design utilisés, les composants, les états et interactions, le comportement responsive, les cas limites, l'animation et le mouvement, et les notes d'accessibilité. Ses quatre principes énoncés sont de tout spécifier plutôt que de supposer, de référencer des tokens plutôt que des valeurs brutes, de montrer chaque état, et d'expliquer le pourquoi d'un comportement.

Ce qu'il produit

Un tableau de tokens de design listant chaque token, sa valeur et son usage.
Un tableau de composants indiquant la variante, les props et les notes de comportement particulier de chaque composant.
Un tableau d'animation et de mouvement recensant l'élément, le déclencheur, l'animation, la durée et l'easing.

Voir l'exemple de prompt ↗

Fonctionnement

01
Résoudre la Source du Design
Une URL Figma signifie que le design est extrait de Figma ; sans URL, le skill travaille à partir d'une description écrite ou d'une capture d'écran.
02
Spécifier les Visuels
Padding, marges et largeurs exacts, références aux tokens de design pour les couleurs, la typographie et l'espacement, points de rupture responsive, et variantes et états des composants.
03
Spécifier les Interactions
Comportements au clic et au tap, états de survol, prise en charge des gestes, et transitions consignées avec durée et easing.
04
Couvrir le Contenu et les Cas Limites
Limites de caractères, troncature, états vides, états de chargement et d'erreur, ainsi que contenu minimal et maximal, chaînes internationales plus longues, connexions lentes et données manquantes.
05
Ajouter des Détails d'Accessibilité
Ordre de focus, labels et rôles ARIA, interactions au clavier, et annonces pour lecteur d'écran.
06
Émettre la Spec dans le Modèle
Le résultat est rédigé sous forme de Handoff Spec en Markdown en suivant la structure de sections et de tableaux du fichier.

02 Trouvez celui qui vous convient

Quand utiliser le skill design-handoff

Utilisez le skill design-handoff dans Claude Code ou Codex lorsque le travail relève de la catégorie brand and design-system de ce type. Le périmètre et les limites ci-dessous sont tirés du fichier du skill lui-même.

Bon choix

Un design est terminé et prêt pour l'ingénierie, et l'équipe a besoin d'une fiche de spec couvrant la mise en page, les tokens, les props des composants, les états, les points de rupture, les cas limites et l'animation.
Un tracker de projet est connecté et vous souhaitez lier le handoff au ticket d'implémentation.

Connaître les limites

Les mesures exactes issues de Figma, les valeurs des tokens, les assets exportés et une fiche de spec complète ne sont obtenus que lorsqu'un outil de design est connecté.
La mise en place de sous-tâches pour chaque section de la spec dépend de la connexion d'un tracker de projet.

Quoi fournir

Une URL Figma ou une description de designC'est l'argument attendu par la commande, et c'est à partir de cela que la spec est générée.

03 Dans le skill

Règles que le Skill design-handoff Donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Tout Spécifier
Le premier principe est de ne rien supposer : si quelque chose n'est pas spécifié, le développeur devra deviner, donc le handoff doit le couvrir.
Référencer des tokens, pas des valeurs brutes
Les valeurs sont écrites sous forme de noms de tokens tels que spacing-md plutôt que sous forme de nombres en pixels.
Afficher tous les états
Chaque état doit apparaître : default, hover, active, disabled, loading, error et empty.
Décrire le pourquoi
La justification est incluse aux côtés du comportement afin que les développeurs puissent porter de bons jugements, par exemple en expliquant pourquoi un élément se replie sur mobile.
Demander explicitement les cas limites
Nommer des questions de limites, comme ce qui se passe avec 100 éléments, permet de spécifier ces conditions limites.
Indiquer la stack technique
Nommer la stack, par exemple React plus Tailwind, produit des notes d'implémentation pertinentes pour cette stack.
Partager le lien Figma
Le lien permet d'extraire des mesures exactes, des tokens et des informations de composants plutôt que de les déduire.

04 Mettez-le en pratique

Installer design-handoff dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter design-handoff à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

Formulaire générique de la CLI skills pour design/skills/design-handoff/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de brand et de design-system

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Generate a developer handoff spec for the [checkout confirmation screen] in [Figma URL]. I need exact padding and margins, design token references instead of raw values, all component states including loading and error, and the responsive behavior at each breakpoint. We use [React + Tailwind], and please spec the empty state and what happens with [very long product names].

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Le tableau des comportements responsives comporte une ligne remplie pour le mobile en dessous de 768px, et non un espace réservé vide.
Les cas limites précisent ce qu'il faut afficher en l'absence de données, ainsi que la troncature, le chargement et la gestion des erreurs.
Les notes d'accessibilité indiquent l'ordre de focus et les labels ARIA nécessaires.

Dans OpenDesign importez design-handoff depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branche main
Fichier du skill: design/skills/design-handoff/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 8f877b6
License: Apache-2.0 D'après LICENSE.
Étoiles du dépôt: 24 012 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt anthropics/knowledge-work-plugins, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ou d'un compteur d'utilisation pour design-handoff.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

UtilisationMontre l'invocation /design-handoff ainsi que les placeholders $ARGUMENTS et @$1.
Contenu à inclureListe les catégories à couvrir : specs visuelles, d'interaction, de contenu, de cas limites et d'accessibilité.
PrincipesQuatre règles : ne pas supposer, utiliser des tokens, montrer tous les états, décrire le pourquoi.
SortieFournit le modèle Markdown Handoff Spec avec ses titres et tableaux.
Si des connecteurs sont disponiblesÉléments conditionnels supplémentaires pour un outil de design connecté et un suivi de projet.
ConseilsTrois conseils : partager le lien Figma, mentionner les cas limites, préciser la stack technique.

Description du skill lui-même

« Générez des spécifications de handoff développeur à partir d'un design. À utiliser lorsqu'un design est prêt pour l'ingénierie et nécessite une fiche de spécifications couvrant la mise en page, les design tokens, les props de composants, les états d'interaction, les breakpoints responsive, les cas limites et les détails d'animation. »

Description du front-matter extraite de SKILL.md. Le fichier complet fait environ 3 939 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill design-handoff

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Qu'est-ce qui change si un outil de design est connecté ?

Il récupère les mesures exactes, les tokens et les specs de composants directement depuis Figma, et peut exporter des assets et générer une fiche de spécifications complète.

Design Handoff

Exécutez design-handoff sur une vraie tâche de marque et de design-system.

Téléchargez OpenDesign, importez design-handoff depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills