implement-design

Traduit les designs Figma en code prêt pour la production avec une fidélité visuelle pixel-perfect. Nécessite une connexion au serveur MCP Figma et une URL Figma avec clé de fichier et ID de nœud pour extraire le contexte de design, les captures d'écran et les assets. Workflow structuré en sept étapes : analyser l'URL, récupérer le contexte de design, capturer la référence visuelle, télécharger les assets, traduire selon les conventions du projet, atteindre une parité 1:1, et valider par rapport à Figma. Privilégie la réutilisation du système de design plutôt que la duplication ; mappe les tokens Figma au design du projet...

npx skills add https://github.com/figma/mcp-server-guide --skill implement-design

Télécharger ZIP GitHub

Plus de skills de figma

video-interaction-mapper

Cette compétence doit être utilisée lorsque l'utilisateur demande d'analyser un enregistrement d'écran d'interface utilisateur et de mapper les états d'interaction dans Figma. Déclencheur pour des demandes telles que "mettre la vidéo…

figma-code-connect

Crée et maintient les fichiers de modèle Figma Code Connect qui associent les composants Figma à des extraits de code. À utiliser lorsque l'utilisateur mentionne Code Connect, composant Figma…

create-design-system-rules

Règles personnalisées de système de design pour une implémentation cohérente de Figma vers le code dans votre projet. Génère des conventions spécifiques au projet pour l'organisation des composants, le style, les jetons de design et la gestion des ressources, qui guident les agents IA pour produire un code cohérent. Prend en charge trois formats de fichiers de règles : CLAUDE.md pour Claude Code, AGENTS.md pour Codex CLI, et .cursor/rules/figma-design-system.mdc pour Cursor. Nécessite une connexion au serveur MCP Figma et une analyse du codebase pour découvrir les modèles existants avant les règles...

figma-implement-motion

Traduit les mouvements et animations Figma en code d'application prêt pour la production. À utiliser lors de l'implémentation d'animations/mouvements à partir d'un design Figma — l'utilisateur mentionne…

Traduction SwiftUI ↔ Figma. À utiliser chaque fois que l'utilisateur mentionne Swift, SwiftUI, iOS, iPhone ou iPad — dans les DEUX sens — pour traduire un design Figma en…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Cette compétence aide les agents à utiliser l'outil MCP use_figma de Figma dans le contexte des diapositives. Peut être utilisée conjointement avec figma-use qui fournit un contexte fondamental pour utiliser le…

figma-use-figjam

Cette compétence aide les agents à utiliser l'outil MCP use_figma de Figma dans le contexte FigJam. Peut être utilisée conjointement avec figma-use qui fournit le contexte fondamental pour utiliser le…