Implémenter un design Figma en code (Design → Code)

Utilisez cette skill pour transformer un design Figma en code dans une base de code cible. C'est la direction lecture-DEPUIS-Figma : extraire le contexte de design de Figma avec get_design_context, puis l'adapter à la pile réelle du projet. Pour la direction inverse — construire ou mettre à jour un design dans Figma à partir du code — utilisez figma-generate-design à la place.

Cette skill gère le workflow pour design-vers-code. Les mécaniques de paramètres (extraction de nodeId / fileKey / branchKey, parsing d'URL, options format/query, forme de réponse) se trouvent dans la description de l'outil get_design_context lui-même — suivez-les là-bas.

Direction et périmètre

• Vous DEVEZ utiliser cette skill pour design → code : implémenter, traduire ou porter un nœud Figma en code.
• Vous NE DEVEZ PAS utiliser cette skill pour écrire dans Figma.

Workflow

1. Appelez d'abord get_design_context

• Vous DEVEZ appeler get_design_context sur le nœud cible avant d'écrire du code. C'est votre outil principal — un seul appel retourne du code de référence, une capture d'écran et des indices contextuels.
• Vous NE DEVEZ PAS vous rabattre sur get_metadata ou get_screenshot en substitution. Utilisez-les uniquement pour vous orienter (par ex. sélectionner un nœud) ou pour valider, pas à la place de get_design_context.

2. Traitez la sortie comme une référence, pas comme du code final

• Le code retourné est React + Tailwind enrichi d'indices. Vous DEVEZ le traiter comme une RÉFÉRENCE, pas comme du code final à coller tel quel.
• Vous DEVEZ l'adapter au langage, au framework, à la bibliothèque de composants, au système de styling et aux conventions du projet cible. Alignez-vous sur le code environnant.

3. Réutilisez ce que le projet a déjà

• Avant d'écrire du nouveau code, vous DEVEZ vérifier le projet cible pour trouver des composants existants, des motifs de mise en page et des design tokens qui correspondent à l'intention du design.
• Vous DEVEZ réutiliser les composants et tokens existants du projet au lieu de générer de nouveaux équivalents de zéro.

4. Honorez les indices de réponse par priorité

Appliquez les indices dans cet ordre — les sources antérieures surpassent les suivantes :

1. Extraits Code Connect → utilisez directement le composant de la base de code mappée.
2. Liens de documentation de composants → suivez-les pour l'utilisation et les directives.
3. Annotations de design → suivez les notes ou contraintes du designer.
4. Design tokens (variables CSS) → mappez-les au système de tokens du projet.
5. Hex bruts / positionnement absolu → structure peu structurée ; appuyez-vous sur la capture d'écran pour l'intention.

Récupération d'erreur

• En cas d'erreur get_design_context, ARRÊTEZ et lisez le message avant de réessayer.
• Si l'URL du design n'a pas de node-id (URL contenant seulement le fichier), demandez à l'utilisateur une URL spécifique au nœud — vous NE DEVEZ PAS deviner ou passer un nodeId vide.
• En cas de timeout, réessayez avec un nœud ou une sélection plus petite.
• Vous NE DEVEZ PAS basculer silencieusement vers l'écriture manuelle de l'écran à partir de la capture d'écran seule quand get_design_context peut encore fournir du contexte.