danielhall/agent-skills

Site web vers fichier de design Figma

Transforme une application web en cours d'exécution en un fichier Figma qu'un designer peut réellement utiliser pour une refonte : contenu réel, icônes réelles, variables de couleur et d'espacement avec modes clair/sombre, styles de texte, composants réutilisables, et chaque page construite à partir d'instances de ces composants. Les captures d'écran ne sont jamais qu'une référence, jamais le livrable.

Cette compétence repose sur les propres compétences du plugin Figma. Chargez figma-use et figma-generate-design avant tout appel à use_figma, et figma-generate-library lors de la création de composants ou de variables.

Quand l'utiliser

• "Récupère mon site dans Figma pour que je puisse le redessiner"
• "Recrée ces pages dans Figma" / "pousse cette application vers Figma"
• Ajouter des cadres mobiles ou de nouvelles pages à un fichier Figma construit de cette façon

Étapes

1. Lire la source de vérité

• L'application en cours d'exécution et la feuille de style globale priment sur les documents de design. Les documents dérivent pendant une refonte ; dites-le si vous trouvez une incohérence.
• Collectez : les jetons de thème (clair et sombre), les polices et leurs graisses, la grille de mise en page (gouttières, rails, largeurs de colonnes), et les fichiers de composants derrière chaque section de page.
• Vérifiez que les polices existent dans Figma avec figma.listAvailableFontsAsync() avant d'écrire les styles. Ne retombez jamais sur Inter silencieusement.

2. Capturer des captures d'écran de référence avec Playwright, pas des captures de page

Utilisez scripts/ref-screenshots.mjs à chaque largeur cible (par exemple 1440 et 390). Il définit reducedMotion: "reduce", afin que les animations de défilement et d'entrée ne cachent pas le contenu.

Les captures de page generate_figma_design ne sont pas fiables pour ce travail : le contenu derrière les animations visibles lors de l'entrée est capturé vide, et les captures ouvertes dans des onglets de navigateur en arrière-plan restent souvent en attente indéfiniment. Si vous les utilisez quand même, ouvrez un onglet à la fois et supprimez la capture une fois qu'elle a servi de référence. Si vous injectez le script de capture dans l'application, retirez-le ensuite.

3. Exporter les données et icônes réelles de la base de code

Écrivez un script tsx jetable (en dehors du dépôt, ou supprimé ensuite) qui importe les modules de données de l'application et rend les composants d'icônes en chaînes SVG avec renderToStaticMarkup de react-dom/server. Ensuite :

• Remplacez currentColor par une couleur réelle, et donnez à chaque SVG une largeur/hauteur explicite. Les bibliothèques d'icônes émettent 1em, que Figma ne peut pas dimensionner.
• Dédupliquez les icônes par données de chemin. Les cartes de marque aliassent souvent plusieurs noms vers un seul logo.
• Récupérez le contenu CMS (titres, extraits, catégories) avec le client CMS plutôt que de le retaper.

4. Construire d'abord les fondations

Un appel chacun, retournant chaque identifiant créé :

1. Pages : Fondations, Composants, une page par point de rupture.
2. Collections de variables : couleurs de thème (modes Clair/Sombre), couleurs de catégorie ou de marque, jetons de mise en page (modes Desktop/Mobile). Définissez des scopes explicites et la syntaxe de code WEB.
3. Styles de texte pour chaque rôle typographique, plus des variantes mobiles des tailles d'affichage.
4. Un style d'effet pour toute ombre partagée.

5. Construire les composants, du plus petit au plus grand

Icônes, puis primitives (boutons, liens, tuiles, badges, chips), puis composites (en-tête, pied de page, héros, cartes). Exposez les propriétés TEXT, BOOLEAN et INSTANCE_SWAP afin que les pages puissent être remplies sans détachement. Donnez aux pièces responsives une variante Breakpoint plutôt que de surcharger les tailles sur les instances. Capturez une capture d'écran de chaque groupe une fois et corrigez ce qui ne va pas avant de passer à la suite.

6. Assembler les pages à partir d'instances

• Un appel use_figma par page, à des positions fixes sur le canevas, afin que les pages puissent être construites en parallèle.
• Reflétez la grille CSS avec un padding auto-layout (par exemple une gouttière et un rail), pas des positions absolues.
• Égalisez les hauteurs des cartes par ligne explicitement ; Figma n'étire pas les éléments frères comme le fait la grille CSS.
• Comparez la hauteur totale de chaque page et une capture d'écran avec la référence. Des hauteurs à quelques pour cent près signifient que l'espacement est correct.

7. Lier les composants au code

Code Connect ne fonctionne que sur les plans Organisation et Entreprise. Vérifiez whoami d'abord. Sur les autres plans, écrivez le chemin source, le nom du composant et le mappage des props dans la description de chaque composant et définissez documentationLinks vers le fichier sur GitHub. Le mode Développeur affiche les deux. N'ajoutez pas de fichiers .figma.ts à un dépôt qui ne peut pas les publier ; ils cassent tsc sans le package Code Connect.

8. Nettoyer

Supprimez les captures de référence, retirez les scripts injectés, arrêtez les serveurs de développement que vous avez démarrés, et confirmez que git status est propre.

Pièges

Lisez references/plugin-api-pitfalls.md avant d'écrire des scripts de composants ou de pages. Il répertorie les échecs qui coûtent le plus de temps, chacun avec son correctif : opacité des peintures liées, resize() verrouillant le dimensionnement auto-layout, les clés de propriétés étant réindexées, les références perdues sur les variantes clonées, la limite de taille par appel, et plus encore.

references/helpers.md contient les petites fonctions d'aide qui valent la peine d'être copiées en haut de chaque script de construction de page.