Figma

design-consultation est un skill de design-consultation qui transforme une idée produit encore approximative en direction design complète. Il crée une source de vérité DESIGN.md, des aperçus et des recommandations à l’échelle du système pour la typographie, les couleurs, l’espacement, la mise en page et les animations. Idéal pour les nouveaux produits et les interfaces qui ont besoin d’un point de départ cohérent.

ckm:design est une skill de design structurée pour orienter et produire logos, maquettes CIP, bannières, slides et icônes SVG. Elle inclut des références concrètes, des options basées sur CSV et des scripts Python pour des workflows reproductibles, au-delà de simples prompts génériques.

design-system-patterns aide les équipes à concevoir des bases d’interface évolutives grâce à une structure de tokens, une architecture de thèmes et des patterns d’API de composants réutilisables pour les design systems et les bibliothèques de composants.

figma-create-new-file crée un nouveau fichier Figma Design vierge ou un tableau FigJam dans les brouillons. Utilisez-le lorsque vous avez besoin d’un point de départ propre avant d’enchaîner avec des actions Figma plus poussées, y compris `use_figma`. Il prend en charge `design` ou `figjam`, le nommage facultatif du fichier, et peut résoudre l’accès au plan avec `whoami` si nécessaire.

figma-create-design-system-rules vous aide à générer des règles de Design System propres à un projet pour les workflows Figma vers code. Utilisez-le pour formaliser les conventions relatives aux composants, au nommage, aux tokens, aux emplacements de fichiers et à ce qu’il ne faut pas codifier en dur, afin que les agents de codage IA restent cohérents dans tout votre dépôt. Nécessite une connexion à un serveur Figma MCP.

figma-code-connect-components aide à faire correspondre des composants de design Figma avec les composants de code adéquats via Figma Code Connect. Utilisez-le pour aligner l’implémentation du design, faire correspondre variantes et props, et trouver le bon composant local avant de créer des correspondances. Idéal pour les flux de travail de connexion, de mise en correspondance ou de liaison au code, pas pour la rédaction sur canvas ni la génération de pages complètes.

Utilisez figma pour extraire le contexte design, les captures d’écran, les variables et les assets depuis le serveur MCP Figma, puis traduire les nœuds Figma en décisions d’UI prêtes à implémenter. Cette compétence figma est idéale si vous avez une URL Figma ou un ID de nœud et que vous avez besoin d’une utilisation précise de figma pour un travail design-to-code, la configuration ou le dépannage.

Le skill industrial-brutalist-ui pour la conception d’UI crée des interfaces mécaniques à forte densité, avec des grilles de style suisse, un contraste typographique extrême, des palettes utilitaires et une texture analogique. Utilisez ce guide industrial-brutalist-ui pour les tableaux de bord, les systèmes éditoriaux et les pages portfolio qui doivent adopter une esthétique de panneau de contrôle rigoureuse.

wwas est une skill de prompt pour la planification des exigences qui transforme des idées brutes en items de backlog Why-What-Acceptance. Utilisez la skill wwas pour cadrer le contexte métier, définir clairement le changement et rédiger des critères d’acceptation testables pour un travail prêt pour le sprint.

Utilisez la skill user-stories pour transformer des fonctionnalités en user stories prêtes pour le backlog, avec les 3 C, les critères INVEST, des liens vers le design et des critères d’acceptation testables. Idéal pour rédiger des user stories, découper des fonctionnalités en éléments de backlog et préparer des user-stories pour la planification des exigences avec un périmètre plus clair et moins d’hypothèses.

Utilisez le skill job-stories pour transformer des idées de fonctionnalités en job stories au format JTBD : « Quand [situation], je veux [motivation], afin de [résultat]. » C’est utile pour clarifier les éléments du backlog, appliquer job-stories à la planification des besoins et formuler des critères d’acceptation ancrés dans le contexte utilisateur.

La skill enhance-prompt transforme des idées d’interface floues en prompts plus clairs, prêts pour Stitch, avec une structure plus solide, un vocabulaire UI/UX plus précis et un contexte de design system. Utilisez ce guide enhance-prompt pour rendre vos prompts plus spécifiques, réduire l’approximation et obtenir des résultats plus cohérents pour la rédaction de prompts et la génération d’interface.

La skill design-md analyse les projets Stitch et transforme leurs écrans en une source de vérité sémantique DESIGN.md pour garantir la cohérence de la mise en page, du ton, des couleurs et du langage des composants. Utilisez design-md pour les Design Systems quand vous avez besoin d’indications exploitables pour de futures générations Stitch, et pas seulement d’un aperçu visuel.

diagram-generator aide à créer et modifier des diagrammes draw.io, Mermaid et Excalidraw à partir d’entrées structurées. Il prend en charge les organigrammes, diagrammes de séquence, diagrammes de classes, diagrammes ER, cartes mentales, schémas d’architecture et topologies réseau, et peut lire des fichiers .drawio, .mmd et Excalidraw existants pour simplifier les mises à jour.

figma-use est le skill à installer avant chaque appel à use_figma afin que le JavaScript s’exécute en toute sécurité dans le contexte d’un fichier Figma. Il prend en charge les tâches d’implémentation de design, comme la création et la modification de nœuds, le raccordement des variables et des styles, la construction de composants et de variantes, ainsi que l’inspection programmatique de la structure du fichier. Le repo comprend des conseils d’utilisation, des pièges à éviter et des patterns pour réduire les erreurs courantes d’automatisation dans Figma.

Utilisez le skill network pour créer des schémas de topologie réseau PlantUML avec des icônes d’équipements mxGraph, une mise en page automatique, le regroupement par zones et une sémantique claire des liaisons. Il convient aux schémas LAN, WAN, d’entreprise, de centre de données, sans fil, de sécurité et spécifiques à un fournisseur, avec des exemples d’usage réseau et des conseils pour choisir network plutôt que uml ou cloud.

Le skill infographic transforme du contenu structuré en mises en page infographiques soignées grâce au DSL `infographic`. Utilisez-le pour des cartes KPI, des chronologies, des roadmaps, des parcours étape par étape, des comparaisons A vs B, des SWOT, des entonnoirs, des organigrammes et des graphiques simples. C’est un très bon choix pour l’infographie de UI Design et les synthèses de style présentation avec 4 à 8 éléments. En revanche, il n’est pas adapté à l’analyse de données complexes ni aux schémas techniques.

logo-generator vous aide à créer des logos SVG professionnels et des visuels de présentation soignés pour des produits, des marques et des concepts. Il combine des conseils sur les patterns de design, plus de 6 variantes de logo, l’export SVG vers PNG et la génération de fonds de mise en scène. Utilisez le skill logo-generator quand vous avez besoin d’un guide rapide et structuré pour le branding, avec des livrables modifiables et des aperçus prêts à présenter.

figma-designer analyse des fichiers Figma ou des captures d’écran via Figma MCP afin d’extraire les spécifications visuelles, les design tokens, les composants et un handoff PRD exploitable par les équipes de design UI.

stitch-design-taste est un skill Google Stitch pour la mise en œuvre de design systems. Il génère un fichier DESIGN.md clair et exploitable par un agent, avec des consignes pour créer une interface premium et non générique : typographie soignée, palette calibrée, mises en page asymétriques, règles de motion et motifs interdits. À privilégier si vous voulez un guide stitch-design-taste réutilisable plutôt qu’un prompt ponctuel.

Le skill hand-drawn-diagrams transforme des prompts en langage naturel en diagrammes Excalidraw dessinés à la main, schémas de flux, explications visuelles, wireframes et maquettes de pages. Il valide la sortie et peut renvoyer une URL d’édition ainsi que des images exportables. Idéal pour diagrammer rapidement quand vous voulez un rendu esquissé, pas un visuel vectoriel léché.

figma-implement-design transforme des designs Figma en code d’application prêt pour la production, avec une fidélité visuelle quasi parfaite en 1:1. Utilisez-la pour implémenter du code UI à partir de fichiers Figma, reproduire un composant ou un écran précis, ou suivre un guide figma-implement-design pour l’implémentation de design. Elle ne sert pas à modifier les nœuds du canvas Figma.

figma-generate-library vous aide à créer ou mettre à jour un design system Figma à partir d’une base de code, avec un workflow structuré pour les tokens, les bibliothèques de composants, la documentation et le thème clair/sombre. Utilisez le skill figma-generate-library lorsque vous cherchez un guide عملي pour les Design Systems, et non un simple mockup ponctuel. Il complète figma-use pour les appels à l’API du Plugin.

figma-generate-design aide à transformer des pages codées, des modales, des panneaux coulissants, des barres latérales, des panneaux et d’autres vues à sections multiples en Figma à partir du système de design publié. Il repère les composants, variables, styles et ressources de bibliothèque via Code Connect et des sources associées, puis assemble l’écran section par section pour la Design Implementation au lieu de tout redessiner manuellement. Utilisez le guide figma-generate-design lorsque vous avez besoin d’une fidélité élevée au code et aux tokens.