implement-design
✓Traduit les conceptions Figma en code prêt pour la production avec une fidélité visuelle 1:1. À utiliser lors de l'implémentation de l'interface utilisateur à partir de fichiers Figma, lorsque l'utilisateur mentionne "implémenter la conception", "générer du code", "implémenter un composant", "construire la conception Figma", fournit des URL Figma ou demande de créer des composants correspondant aux spécifications Figma. Nécessite une connexion au serveur Figma MCP.
Installation
SKILL.md
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
Traduit les conceptions Figma en code prêt pour la production avec une fidélité visuelle 1:1. À utiliser lors de l'implémentation de l'interface utilisateur à partir de fichiers Figma, lorsque l'utilisateur mentionne "implémenter la conception", "générer du code", "implémenter un composant", "construire la conception Figma", fournit des URL Figma ou demande de créer des composants correspondant aux spécifications Figma. Nécessite une connexion au serveur Figma MCP. Source : figma/mcp-server-guide.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/figma/mcp-server-guide --skill implement-design- Source
- figma/mcp-server-guide
- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que implement-design ?
Traduit les conceptions Figma en code prêt pour la production avec une fidélité visuelle 1:1. À utiliser lors de l'implémentation de l'interface utilisateur à partir de fichiers Figma, lorsque l'utilisateur mentionne "implémenter la conception", "générer du code", "implémenter un composant", "construire la conception Figma", fournit des URL Figma ou demande de créer des composants correspondant aux spécifications Figma. Nécessite une connexion au serveur Figma MCP. Source : figma/mcp-server-guide.
Comment installer implement-design ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/figma/mcp-server-guide --skill implement-design Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/figma/mcp-server-guide
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-01