Prototype vers Figma

Ce qu'il fait

Cette compétence transforme un prototype de code fonctionnel (React, Tailwind, CSS) en un fichier Figma professionnel. Elle se concentre sur deux objectifs principaux : maintenir la parité visuelle avec le code source et assurer la lisibilité des interactions grâce aux annotations natives de Figma.

Quand l'utiliser

Utilisez cette compétence lorsqu'un prototype doit être examiné par des parties prenantes non techniques, converti en spécifications de conception ou transmis à une équipe de design. Elle est idéale pour décomposer un prototype fonctionnel en états et flux individuels.

Ce qui est inclus

• Flux de travail procédural : Un processus strict en 6 phases couvrant l'analyse du prototype, la cartographie du système de conception, la structuration des pages, la construction dans Figma, la création d'une vue d'ensemble du flux et la vérification finale.
• Règles strictes : Des directives pour empêcher l'utilisation d'outils de capture de navigateur, interdire la création de nouveaux composants maîtres et s'assurer que chaque élément est pris en compte.
• Système d'annotation : Des catégories spécifiques pour l'« Interaction » (bleu) et la « Dérive DS » (orange) pour signaler les composants manquants ou les transitions d'état.

Agents compatibles

Fonctionne avec tout agent supportant les clients MCP Figma, y compris Claude Code, Cursor, VS Code et Copilot CLI.