figma-generate-design
Ce skill fait partie du repository figma/mcp-server-guide, qui documente l'utilisation du Figma MCP server pour intégrer Figma dans les workflows d'agents AI. Il s'agit d'un skill actif et complet — non d'un squelette — destiné à guider Claude ou tout agent compatible dans la construction ou la mise à jour de vues Figma composées à partir d'un design system publié.
Rôle et périmètre
figma-generate-design est le skill privilégié dès qu'un utilisateur souhaite traduire une page, une vue ou un layout multi-sections (modal, drawer, sidebar, panel, landing page…) en éléments natifs Figma. Son principe central : exploiter le design system déjà publié dans le fichier Figma — composants, variables de couleur/espacement, text styles et effect styles — plutôt que de dessiner des primitives avec des valeurs codées en dur.
Il doit toujours être utilisé conjointement avec le skill figma-use, qui fournit les règles critiques communes à tous les scripts use_figma (gestion des couleurs, chargement des polices, etc.).
Workflow principal
Le skill impose un ordre strict en six étapes : comprendre le livrable et identifier les sections de la vue ; collecter les clés de composants (via les fichiers Code Connect, les écrans existants, puis search_design_system en dernier recours), les variables de design system et les styles ; créer un frame conteneur avec des sections placeholder ; construire chaque section une par une en important les composants et en liant les variables ; valider visuellement après chaque section ; et enfin gérer les mises à jour d'écrans existants de façon ciblée.
Pour les applications web contenant des images, le skill prescrit un workflow parallèle : lancer generate_figma_design (capture pixel-perfect) en même temps que la construction par composants, puis transférer les imageHash capturés vers les frames use_figma avant de supprimer la capture.
Utilisation
Ce skill est conçu pour être chargé par un agent (Claude Code, Cursor, VS Code en mode Agent) lorsqu'une requête utilisateur correspond à des déclencheurs comme « write to Figma », « build a landing page in Figma » ou « update the Figma screen to match code ». Il référence des documents complémentaires (component-patterns.md, variable-patterns.md, gotchas.md, etc.) hébergés dans le dossier figma-use/references du même repository, et délimite clairement ses frontières avec les autres skills du projet (figma-implement-design, figma-code-connect, figma-generate-library).