Design Systems
Tokens, theming, component libraries, Storybook.
| # | Skill | Source | Description | Maj | |
|---|---|---|---|---|---|
| 1 | figma-code-workflows | figma/mcp-server-guide | Importer un projet web dans Figma en tant que calque de code ou design modifiable. | 2 082 | 3j |
| 2 | figma-spec | figma/mcp-server-guide | Créer, lire et éditer des specs Figma embarquées via des APIs dédiées. | 2 082 | 3j |
| 3 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 2 082 | 4j |
| 4 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 2 082 | 4j |
| 5 | figma-use | figma/mcp-server-guide | Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. | 2 082 | 4j |
| 6 | figma-use-motion | figma/mcp-server-guide | Animer des nœuds Figma avec keyframes, styles et timelines via l'API motion. | 2 082 | 4j |
| 7 | material-theming | verygoodopensource/vgv-ai-flutter-plugin | Centraliser couleurs, typographie et composants Flutter via ThemeData Material 3. | 172 | 12j |
| 8 | ui-package | verygoodopensource/vgv-ai-flutter-plugin | Créer une bibliothèque de widgets Flutter réutilisables avec theming, API et tests cohérents. | 172 | 12j |
| 9 | expo-design-system | expo/skills | Centraliser tous les tokens visuels d'une app Expo dans un système de design cohérent. | 2 907 | 15j |
| 10 | figma-create-new-file | figma/mcp-server-guide | Créer un nouveau fichier Figma vierge dans les brouillons de l'utilisateur. | 2 082 | 16j |
| 11 | figma-use | figma/mcp-server-guide | Créer, modifier et assembler des nœuds Figma via le Plugin API JavaScript. | 2 082 | 16j |
| 12 | n8n:agent-design-language | n8n-io/n8n | Concevoir et implémenter des interfaces pour la fonctionnalité agents selon les règles visuelles établies. | 207 862 | 24j |
| 13 | macos-golden-gate-design | github/awesome-copilot | Concevoir des interfaces macOS 27 natives en supprimant les faux conteneurs et en appliquant les bons matériaux… | 40 142 | 27j |
| 14 | figma-design-to-code | figma/mcp-server-guide | Convertir un design Figma en code adapté à la stack et aux conventions du projet cible. | 2 082 | 1mo |
| 15 | figma-generate-library | figma/mcp-server-guide | Construire des design systems Figma professionnels en orchestrant des workflows multi-phases structurés. | 2 082 | 1mo |
| 16 | figma-generative-plugins | figma/mcp-server-guide | Créer et mettre à jour des plugins Figma génératifs via des appels d'outils structurés. | 2 082 | 1mo |
| 17 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 2 082 | 1mo |
| 18 | figma-use-figjam | figma/mcp-server-guide | Manipuler des fichiers FigJam via l'API Figma Plugin dans un agent IA. | 2 082 | 1mo |
| 19 | figma-use-slides | figma/mcp-server-guide | Manipuler des fichiers Figma Slides via l'API plugin MCP avec règles spécifiques. | 2 082 | 1mo |
| 20 | mapbox-style-patterns | mapbox/mapbox-agent-skills | Configurer des styles de carte Mapbox optimisés selon le contexte applicatif. | 82 | 1mo |
| 21 | n8n:ui-design | n8n-io/n8n | Concevoir et styliser des composants UI frontend selon les standards n8n. | 207 862 | 1mo |
| 22 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers .figma.ts pour connecter des composants Figma à du code. | 2 082 | 1mo |
| 23 | figma-generate-diagram | figma/mcp-server-guide | Générer des diagrammes Mermaid.js éditables dans FigJam avec contraintes et routage par type. | 2 082 | 1mo |
| 24 | figma-use-motion | figma/mcp-server-guide | Gérer les animations, keyframes et styles de motion dans Figma via l'API Plugin. | 2 082 | 1mo |
| 25 | frontend-design | anthropics/skills | Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. | 181 848 | 1mo |
| 26 | figma-use-figjam | figma/mcp-server-guide | Créer, inspecter et organiser des éléments FigJam via l'API plugin Figma. | 2 082 | 1mo |
| 27 | figma-generative-plugins | figma/mcp-server-guide | Créer et mettre à jour des plugins Figma génératifs via des appels d'outils dédiés. | 2 082 | 1mo |
| 28 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 2 082 | 1mo |
| 29 | rp-facelift | wix/skills | Appliquer un lifting UI/UX optionnel post-clonage en préservant l'identité visuelle. | 34 | 1mo |
| 30 | anti-ui-slop | github/awesome-copilot | Concevoir des interfaces web ou iOS uniques, fonctionnelles et fidèles au produit. | 40 142 | 1mo |
| 31 | wix-design-system | wix/skills | Naviguer et interroger la documentation du design system Wix pour intégrer ses composants. | 34 | 2mo |
| 32 | refero-design | referodesign/refero_skill | Rechercher des références UI réelles pour ancrer chaque décision de design produit. | 315 | 2mo |
| 33 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers de mapping Figma-code pour connecter composants et snippets TypeScript. | 2 082 | 2mo |
| 34 | stitch::code-to-design | google-labs-code/stitch-skills | Convertir du code frontend existant en design Stitch itérable via extraction et upload. | 8 539 | 2mo |
| 35 | figma-use-slides | figma/mcp-server-guide | Créer et personnaliser des présentations Figma Slides via l'API Plugin MCP. | 2 082 | 3mo |
| 36 | ui | crbnos/carbon | Récupérer et exécuter dynamiquement des instructions de skill depuis un serveur MCP distant. | 2 741 | 3mo |
| 37 | baoyu-design | jimliu/baoyu-design | Créer des interfaces HTML en suivant une méthodologie design complète et multi-environnements. | 4 405 | 3mo |
| 38 | make-interfaces-feel-better | crbnos/carbon | Appliquer des micro-détails UI pour des interfaces plus soignées et naturelles. | 2 741 | 3mo |
| 39 | stitch::manage-design-system | google-labs-code/stitch-skills | Créer et appliquer un système de design cohérent à un projet Stitch. | 8 539 | 4mo |
| 40 | ui-ux-pro-max | shobcoder/shob | Concevoir des interfaces UI/UX optimisées selon le type de produit, l'industrie et les standards d'accessibilité. | 578 | 4mo |
| 41 | applying-bitwarden-branding | bitwarden/ai-plugins | Appliquer rigoureusement la charte graphique Bitwarden : couleurs, typographie et logos. | 158 | 4mo |
| 42 | evolving-design-system-components | bitwarden/ai-plugins | Gérer la création et modification de composants d'un Design System via gouvernance Figma/Confluence. | 158 | 4mo |
| 43 | using-figma | bitwarden/ai-plugins | Lire et extraire données de design depuis Figma via le serveur MCP Dev Mode. | 158 | 4mo |
| 44 | design-review | bitwarden/ai-plugins | Critiquer un design Bitwarden selon le cadre 30-60-90 et le Code of Conduct. | 158 | 4mo |
| 45 | design-system-patterns | wshobson/agents | Architecturer des systèmes de design avec tokens, thèmes et composants scalables. | 40 989 | 4mo |
| 46 | tailwind-design-system | wshobson/agents | Créer des design systems production-ready avec Tailwind CSS v4. | 40 989 | 4mo |
| 47 | stitch::extract-design-md | google-labs-code/stitch-skills | Extraire un système de design complet depuis le code source frontend sans compilation. | 8 539 | 5mo |
| 48 | stitch::generate-design | google-labs-code/stitch-skills | Générer des écrans UI à partir de texte, d'images ou de maquettes via Stitch MCP. | 8 539 | 5mo |
| 49 | design-md | google-labs-code/stitch-skills | Analyser un projet Stitch et synthétiser son langage visuel dans un fichier DESIGN.md. | 8 539 | 5mo |
| 50 | enhance-prompt | google-labs-code/stitch-skills | Transformer des idées d'interface vagues en prompts optimisés pour Stitch. | 8 539 | 5mo |
À propos de cette sélection
L'outillage autour des design systems a longtemps ressemblé à un chantier sans plan directeur : des tokens éparpillés dans trois fichiers, des composants documentés nulle part, un Storybook que personne ne maintient vraiment. La situation a évolué. Les skills design systems rassemblés ici couvrent des besoins concrets : générer et valider des tokens sémantiques à partir d'un fichier Figma, ou auditer automatiquement une bibliothèque de composants pour repérer les incohérences visuelles avant qu'elles partent en prod. L'écosystème reste hétérogène côté implémentation, mais plusieurs orgs majeures comme Figma ou Shopify poussent des conventions qui commencent à faire référence. Ces skills s'adressent surtout aux devs frontend qui basculent vers une logique de système plutôt que de page.