figma-generate-design

figma-generate-design

Ce skill fait partie du catalogue officiel de skills Codex maintenu par OpenAI (openai/skills). Il est classé parmi les skills curated, c'est-à-dire validés et recommandés pour un usage en production via Codex.

Rôle du skill

figma-generate-design guide un agent IA pour créer ou mettre à jour des écrans Figma complets à partir de code source ou d'une description textuelle. Son principe central : plutôt que de dessiner des primitives avec des valeurs codées en dur (hex, pixels fixes), l'agent doit découvrir et réutiliser le design system publié du fichier Figma cible — composants, variables de couleur/espacement, styles de texte et d'effets.

Le skill s'active typiquement sur des formulations comme « write to Figma », « push page to Figma », « build a landing page in Figma » ou « update the Figma screen to match code ». Il est conçu pour fonctionner en complément du skill figma-use, qui doit obligatoirement être chargé avant tout appel use_figma.

Workflow structuré en étapes

Le SKILL.md détaille un workflow en six étapes séquentielles :

1. Comprendre l'écran à construire (lire le code source, identifier les sections).
2. Découvrir le design system — composants via search_design_system ou inspection d'écrans existants, variables via importVariableByKeyAsync, styles via importStyleByKeyAsync.
3. Créer le frame wrapper en premier, dans un appel use_figma dédié, avant d'y ajouter quoi que ce soit.
4. Construire chaque section une par une, directement à l'intérieur du wrapper, en important les instances de composants et en appliquant les tokens du design system.
5. Valider visuellement après chaque section avec get_screenshot, en vérifiant textes tronqués, chevauchements et variantes incorrectes.
6. Mettre à jour un écran existant de manière chirurgicale plutôt que de tout reconstruire.

Périmètre et liens avec les autres skills

Ce skill couvre uniquement la génération d'écrans Figma (nouveaux ou mis à jour). Pour générer du code à partir d'un design Figma, il faut basculer sur figma-implement-design. Pour créer de nouveaux composants réutilisables, figma-use est plus adapté. Le skill référence également plusieurs documents internes (component-patterns.md, variable-patterns.md, gotchas.md) hébergés dans le dossier figma-use/references du même repo.

Pour l'installer dans Codex, il suffit d'utiliser le $skill-installer avec le nom figma-generate-design, comme indiqué dans le README du repo parent.