Guide de lecture localisé
figma-implement-designObjectif, utilisation et source
Traduit les maquettes Figma en code d'application prêt pour la production avec1:1Fidélité visuelle. À utiliser lors de l'implémentation de code d'interface utilisateur à partir de fichiers Figma, lorsque l'utilisateur mentionne « implémenter la conception », « générer du code », « implémenter un composant », fournit des URL Figma ou demande la création de composants conformes aux spécifications Figma. Pour les écritures sur le canevas Figma viause_figma, utiliserfigma-use.
Source récupérée:
- Dépôt source
- openai/skills
- SKILL.md
skills/.curated/figma-implement-design/SKILL.md- Étoiles du dépôt
- 28,420
- Mise à jour du dépôt
- 2026-10-29
- Catégories de capacités
- Conception
- Dernière collecte
Licence : Fichier de licence à vérifier
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Traduit les maquettes Figma en code d'application prêt pour la production avec1:1Fidélité visuelle. À utiliser lors de l'implémentation de code d'interface utilisateur à partir de fichiers Figma, lorsque l'utilisateur mentionne « implémenter la conception », « générer du code », « implémenter un composant », fournit des URL Figma ou demande la création de composants conformes aux spécifications Figma. Pour les écritures sur le canevas Figma viause_figma, utiliserfigma-use.
Comment fonctionne le flux de travail en amont
Flux de travail requis
Suivez ces étapes dans l'ordre. Ne sautez aucune étape.
passage en amont · L29 ↗Aperçu
Cette compétence offre un flux de travail structuré pour traduire les maquettes Figma en code prêt pour la production avec une précision au pixel près. Elle garantit une intégration cohérente avec le serveur Figma MCP, une utilisation correcte des jetons de conception, et1:1Parité visuelle avec les modèles.
passage en amont · L8 ↗Étape2: Récupérer le contexte de conception
Courirget_design_contextavec la clé de fichier extraite et l'ID du nœud. Ceci fournit les données structurées, notamment : les propriétés de mise en page (mise en page automatique, contraintes, dimensionnement), les valeurs de couleur et les jetons de conception.
get_design_context(fileKey=":fileKey", nodeId="1-2")Configuration requise
Prérequis
Le serveur Figma MCP doit être connecté et accessible. L'utilisateur doit fournir une URL Figma au format suivant :https://figma.com/design/:fileKey/:fileName?node-id=1-2
Limites et contrôles de qualité
Qualité du code
Évitez les valeurs codées en dur ; extrayez-les dans des constantes ou créez des jetons. Veillez à ce que les composants soient composables et réutilisables.
passage en amont · L156 ↗Commencez par un essai sans danger
- Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
- Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
- Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
- Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.
Pour en savoir plus, consultez la source.
- Aperçu
- Limites des compétences
- Prérequis
- Flux de travail requis
- Option A : Analyser l’URL de Figma
- Option B : Utiliser la sélection actuelle de l’application Figma Desktop (Figma Desktop MCP uniquement)
- Étape2: Récupérer le contexte de conception
- Étape3Capture de référence visuelle
- Étape4: Télécharger les ressources requises
- Étape5: Traduire selon les conventions du projet
- Étape6: Atteindre1:1Parité visuelle
- Étape7Valider par rapport à Figma
- Organisation des composants
- Intégration du système de conception
- Qualité du code
- Exemple1: Implémentation d'un composant bouton
- Exemple2: Création d'une mise en page de tableau de bord
- Commencez toujours par le contexte
- Validation incrémentale
- Écarts de documents
- Réutilisation plutôt que loisirs
- Système de conception d'abord
- Problème : le rendu Figma est tronqué.
- Problème : La conception ne correspond pas après la mise en œuvre
- Problème : Les ressources ne se chargent pas
- Problème : Les valeurs des jetons de conception diffèrent de celles de Figma
- Comprendre la mise en œuvre de la conception
- Ressources supplémentaires
Compétences connexes
Traduction et étendue
Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.
Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.
- Source épinglée
- Lire l'original ↗
- Source récupérée
- Commit source
49f948faa9258a0c61caceaf225e179651397431- Source SHA-256
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad