Meilleurs skills pour Designer UI/UX
En tant que designer UI/UX, votre mission est de créer des expériences intuitives et centrées sur l'utilisateur. Mais pour cela, il ne suffit pas de maîtriser Figma ou Sketch : vous devez aussi dialoguer efficacement avec les développeurs et aligner votre vision avec la logique métier. Les compétences IA présentées ici vous aident à franchir ce pas. Par exemple, le Domain-Driven Design (DDD) vous permet de comprendre le domaine métier pour concevoir des interfaces qui reflètent les vrais besoins des utilisateurs, pas seulement des écrans jolis. La Définition of Done (DoD) appliquée à la plateforme devient votre alliée pour formaliser quand une fonctionnalité est prête, évitant les allers-retours interminables avec l'équipe technique. Quant aux sessions multi-échanges de NClaude Chat, elles peuvent structurer vos feedbacks sans noyer le contexte. Attention toutefois : ne tombez pas dans le piège de vouloir tout modéliser avec le DDD dès le premier sprint ; commencez par un atelier découverte. L'IA ne remplace pas votre jugement créatif, mais elle vous offre des garde-fous et des raccourcis pour passer de la maquette au code éprouvé. Explorez ces compétences et choisissez celles qui transforment votre workflow.
24 skills sélectionnés
Design Craft : Créer des expériences attachantes
Developpement
Se concentre sur les détails émotionnels et esthétiques qui transforment des applications fonctionnelles en expériences agréables. Couvre les motifs d'états vides qui accueillent les utilisateurs, les états de chargement qui réduisent le temps d'attente perçu et les micro-interactions qui offrent un retour visuel soigné. Aide les développeurs à franchir le fossé entre des interfaces visuellement soignées et des produits réellement appréciés.
Directives UI pour Datagrok
Developpement
Règles et bonnes pratiques pour créer des composants UI Datagrok en TypeScript : onglets paresseux, grilles, layouts, dialogues et menus contextuels.
Générateur de guide de marque personnelle
Contenu
Accompagne l'utilisateur dans la création d'un document de directives de marque personnelle via des questions structurées et des directions stylistiques.
Convertir Figma en tokens Lumos
Developpement
Construire une page ou remplir Lumos pour les variables Astro à partir d'un fichier Figma, même désordonné, en respectant les règles de conversion et en signalant les incohérences.
Conception d'interfaces frontend
Developpement
Créez des interfaces frontend distinctives et de qualité production, avec un souci du détail esthétique et des choix créatifs audacieux.
Corriger un problème d'intégration du design system
Developpement
Corriger une constatation spécifique d'intégration de design system dans un écran ou composant Figma, incluant composants manquants, overrides locaux et tokens non liés.
Animations de confiance et fiabilité
Developpement
Directives pour créer des animations UI prévisibles et crédibles qui inspirent confiance via un mouvement contrôlé et une cohérence temporelle.
Synchroniser les tokens Figma en local
Developpement
Extrait les tokens de design et définitions de composants depuis un fichier Figma via le serveur MCP Figma et les enregistre en JSON local pour hp-gen.
Figma API - Extraction de données de design
Developpement
Extrait les données des fichiers de conception Figma via l'API REST. Récupère la structure du fichier, les propriétés des nœuds et les informations de style comme les couleurs, la typographie et les effets. Utile pour automatiser l'extraction des jetons de design ou inspecter les détails des composants sans ouvrir manuellement le fichier.
Intégration Figma
Developpement
Cette compétence permet de lire des fichiers Figma, d'exporter des images et de gérer les commentaires. Utile pour récupérer des designs, exporter des assets ou interagir avec des composants Figma depuis un environnement en ligne de commande.
Analyseur de designs Figma
Developpement
Analyse les maquettes Figma pour évaluer leur conformité avec les conventions de code Nexus. Vérifie la parité design-code, la cohérence des tokens sémantiques, et la nomenclature des propriétés. Utile avant d'implémenter un composant à partir d'un design Figma.
Intégration Figma
Developpement
Intégration complète de Figma pour implémenter des designs en code prêt pour la production, connecter des composants via Code Connect et générer des règles de système de design.
Brainstorming d'idées en designs
Developpement
Guide l'utilisateur par un dialogue collaboratif pour transformer une idée en design et spécifications approuvés avant toute implémentation, avec liste de contrôle et révision.
Meilleures pratiques Jetpack Compose
Developpement
Meilleures pratiques pour le développement UI avec Jetpack Compose : élévation d'état, optimisations de performance, thèmes et aperçus.
Amélioration de l'expérience CLI avec des invites interactives
Developpement
Améliorez l'expérience utilisateur de vos CLI Node.js avec @clack/prompts pour les flux interactifs, update-notifier pour les vérifications de version et une aide améliorée pour Commander.js.
Découverte et Validation de Conception
Developpement
Ce skill guide un workflow de développement centré sur la découverte : avant de créer des worktrees pour des fonctionnalités non triviales, il pose des questions pour clarifier les exigences, propose des approches avec leurs compromis, valide la conception par incréments et génère un plan d’exécution incluant des commandes de vérification. Idéal quand les spécifications sont floues, le code touche plusieurs fichiers ou nécessite une refactorisation significative.
Système de design INOV8 Orthopedics
Contenu
Applique la charte INOV8 Orthopedics : jetons de couleur et typographie, composants et règles de marque strictes pour toute page, slide ou UI de production.
Système de design : guide de style
Developpement
Référence du système de design pour écrire l'UI : couleurs, typographie, espacements, composants et thèmes clair/sombre. Appliquez les tokens, ne les inventez pas.
Audit d'accessibilité UI
Developpement
Auditez les composants et pages StyleSeed pour les problèmes WCAG 2.2 AA, puis appliquez des correctifs d'accessibilité sûrs concernant les cibles tactiles, le focus, le contraste, les libellés et le mouvement réduit.
Capture de page web en Figma
Developpement
Capture une page web en direct sous forme de design Figma en utilisant Playwright et un MCP de design Figma configuré. Il gère à la fois les sites externes (en contournant la CSP) et les serveurs locaux (en injectant un script de capture), puis interroge l'état d'avancement. Utile pour transformer rapidement n'importe quelle page en direct en un cadre Figma pour une revue de design.
Panneau UI Unity avec animations DOTween
Developpement
Modèle pour implémenter des panneaux UI avec cycle show/hide et animations DOTween, incluant singleton, configuration dans l'inspecteur et réaction aux événements de jeu.
Conception Figma
Developpement
Interagit avec des fichiers Figma via le navigateur en utilisant l'API Plugin Figma. Permet de créer des formes, modifier des propriétés et extraire des informations depuis un fichier de design. Utile pour automatiser des tâches de design ou récupérer des données de maquettes.
Système d'espacement Figma
Developpement
Créez un système complet de tokens d'espacement et de layout pour un design system Figma, incluant grille et conventions.
Conception Web
Developpement
Skill de conception visuelle Web. Flux en deux phases : d'abord un document DESIGN.md validé, puis génération de code UI/UX, visuel, animation et responsive.
Comment choisir
- Comment ces skills sont-ils sélectionnés ?
- Un algorithme les choisit parmi les skills publiés qui répondent aux critères de cette page, comme la catégorie, les tags ou les outils compatibles. Il les classe d'après le score qualité donné par un modèle de langage. Sur les pages de classement, il tient compte en plus des étoiles GitHub et de la note de sécurité. Personne ne les relit un par un.
- Que signifient les notes de sécurité ?
- Un modèle de langage lit le fichier SKILL.md, sans l'exécuter, et lui attribue une note. Sûr signifie qu'il n'y voit pas de risque d'exécution notable. Prudence, que le skill se sert d'outils puissants comme bash, docker ou le réseau pour un usage légitime. Risqué, qu'il demande des actions destructrices, l'envoi de secrets ou l'exécution de code masqué : un skill noté Risqué n'est jamais publié. Cette note ne remplace pas votre propre lecture du fichier.
- Comment installer un skill ?
- Ouvrez la page d'un skill et suivez ses instructions d'installation pour votre outil — Claude Code, Cursor ou Copilot. Chaque skill détaille les étapes exactes pour le lancer en quelques minutes.