Design Systems
Tokens, theming, component libraries, Storybook.
| # | Skill | Source | Description | Maj | |
|---|---|---|---|---|---|
| 1 | figma-use-motion | figma/mcp-server-guide | Animer des nœuds Figma avec keyframes, styles et timelines via l'API motion. | 1 671 | 3j |
| 2 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 671 | 5j |
| 3 | figma-use-slides | figma/mcp-server-guide | Créer et personnaliser des présentations Figma Slides via l'API Plugin MCP. | 1 671 | 5j |
| 4 | material-theming | verygoodopensource/vgv-ai-flutter-plugin | Centraliser couleurs, typographie et composants Flutter via ThemeData Material 3. | 132 | 9j |
| 5 | ui-package | verygoodopensource/vgv-ai-flutter-plugin | Créer une bibliothèque de widgets Flutter réutilisables avec thèmes et API cohérente. | 132 | 9j |
| 6 | stitch::code-to-design | google-labs-code/stitch-skills | Convertir du code frontend existant en design Stitch itérable via extraction et upload. | 6 217 | 11j |
| 7 | stitch::manage-design-system | google-labs-code/stitch-skills | Créer et appliquer un système de design cohérent à un projet Stitch. | 6 217 | 11j |
| 8 | n8n:design-system | n8n-io/n8n | Guider la création et le style de composants UI frontend avec un design system cohérent. | 194 272 | 11j |
| 9 | refero-design | referodesign/refero_skill | Concevoir des interfaces en s'appuyant sur des références visuelles réelles et structurées. | 141 | 17j |
| 10 | figma-use | figma/mcp-server-guide | Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. | 1 671 | 17j |
| 11 | wix-design-system | wix/skills | Naviguer et interroger la documentation du design system Wix pour intégrer ses composants. | 18 | 17j |
| 12 | frontend-design | anthropics/skills | Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. | 155 892 | 18j |
| 13 | figma-use-figjam | figma/mcp-server-guide | Créer, inspecter et organiser des éléments FigJam via l'API plugin Figma. | 1 671 | 19j |
| 14 | applying-bitwarden-branding | bitwarden/ai-plugins | Appliquer rigoureusement la charte graphique Bitwarden : couleurs, typographie et logos. | 119 | 22j |
| 15 | evolving-design-system-components | bitwarden/ai-plugins | Gérer la création et modification de composants d'un Design System via gouvernance Figma/Confluence. | 119 | 22j |
| 16 | using-figma | bitwarden/ai-plugins | Lire et extraire données de design depuis Figma via le serveur MCP Dev Mode. | 119 | 22j |
| 17 | design-review | bitwarden/ai-plugins | Critiquer un design Bitwarden selon le cadre 30-60-90 et le Code of Conduct. | 119 | 22j |
| 18 | design-system-patterns | wshobson/agents | Architecturer des systèmes de design avec tokens, thèmes et composants scalables. | 37 258 | 1mo |
| 19 | tailwind-design-system | wshobson/agents | Créer des design systems production-ready avec Tailwind CSS v4. | 37 258 | 1mo |
| 20 | stitch::extract-design-md | google-labs-code/stitch-skills | Extraire un système de design complet depuis le code source frontend sans compilation. | 6 217 | 1mo |
| 21 | 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. | 6 217 | 1mo |
| 22 | design-md | google-labs-code/stitch-skills | Analyser un projet Stitch et synthétiser son langage visuel dans un fichier DESIGN.md. | 6 217 | 1mo |
| 23 | enhance-prompt | google-labs-code/stitch-skills | Transformer des idées d'interface vagues en prompts optimisés pour Stitch. | 6 217 | 1mo |
| 24 | shadcn-ui | google-labs-code/stitch-skills | Intégrer, personnaliser et composer des composants shadcn/ui dans un projet React. | 6 217 | 1mo |
| 25 | taste-design | google-labs-code/stitch-skills | Générer un fichier DESIGN.md pour piloter des interfaces premium dans Google Stitch. | 6 217 | 1mo |
| 26 | make-interfaces-feel-better | mkurman/zorai | Appliquer des principes de design pour polir interfaces, animations et typographie. | 315 | 1mo |
| 27 | vgv-material-theming | verygoodopensource/vgv-ai-flutter-plugin | Centraliser couleurs, typographie et composants Flutter via ThemeData Material 3. | 132 | 1mo |
| 28 | vgv-ui-package | verygoodopensource/vgv-ai-flutter-plugin | Créer une bibliothèque de widgets Flutter réutilisables avec theming, API et tests cohérents. | 132 | 1mo |
| 29 | frontend-design | mkurman/zorai | Créer des interfaces frontend production-ready visuellement distinctives et mémorables. | 315 | 1mo |
| 30 | web-design-guidelines | mkurman/zorai | Auditer des fichiers web selon les Web Interface Guidelines officielles. | 315 | 1mo |
| 31 | web-design-guidelines | elophanto/elophanto | Auditer des fichiers UI contre les directives officielles Vercel web interface. | 82 | 1mo |
| 32 | whimsy-design | elophanto/elophanto | Concevoir des micro-interactions ludiques et délicieuses pour enrichir l'expérience utilisateur. | 82 | 1mo |
| 33 | baseline-ui | elophanto/elophanto | Imposer des contraintes strictes de qualité UI pour éviter les interfaces générées bâclées. | 82 | 1mo |
| 34 | design-lab | elophanto/elophanto | Explorer visuellement des options de design via interview, variations et feedback itératif. | 82 | 1mo |
| 35 | plan-review-design | elophanto/elophanto | Auditer un plan UX selon six dimensions et le compléter avant validation ingénierie. | 82 | 1mo |
| 36 | shadcn | elophanto/elophanto | Intégrer et configurer des composants UI shadcn/ui dans un projet Next.js. | 82 | 1mo |
| 37 | ui-design | elophanto/elophanto | Créer des systèmes UI complets avec design tokens, composants accessibles et thèmes adaptatifs. | 82 | 1mo |
| 38 | ux-architecture | elophanto/elophanto | Créer des fondations CSS complètes avec système de thèmes, grilles et tokens de design. | 82 | 1mo |
| 39 | design-system-rules | n8n-io/n8n | Auditer le code frontend pour garantir l'usage correct des design tokens et composants. | 194 272 | 2mo |
| 40 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers de mapping Figma-code pour connecter composants et snippets TypeScript. | 1 671 | 2mo |
| 41 | premium-frontend-ui | github/awesome-copilot | Architecturer des interfaces web premium avec animations, micro-interactions et identité visuelle forte. | 35 830 | 2mo |
| 42 | figma-implement-design | figma/mcp-server-guide | Convertir des designs Figma en code production avec une précision pixel-perfect. | 1 671 | 2mo |
| 43 | frontend-ui-dark-ts | microsoft/skills | Créer une interface React sombre avec animations, glassmorphisme et composants TypeScript prêts à l'emploi. | 2 624 | 2mo |
| 44 | shopify-polaris-app-home | shopify/shopify-ai-toolkit | Construire des interfaces Shopify Admin avec les composants Polaris App Home. | 419 | 2mo |
| 45 | shopify-polaris-customer-account-extensions | shopify/shopify-ai-toolkit | Créer des extensions UI personnalisées pour les pages de compte client Shopify. | 419 | 2mo |
| 46 | mapbox-style-patterns | mapbox/mapbox-agent-skills | Configurer des styles de carte Mapbox optimisés selon le contexte applicatif. | 66 | 2mo |
| 47 | mapbox-cartography | mapbox/mapbox-agent-skills | Concevoir des cartes Mapbox belles et fonctionnelles grâce à des principes cartographiques experts. | 66 | 2mo |
| 48 | figma-code-connect-components | openai/skills | Connecter des composants Figma à leurs équivalents code via Code Connect. | 22 950 | 3mo |
| 49 | figma-create-design-system-rules | openai/skills | Générer des règles de système de design personnalisées pour guider les agents IA dans l'implémentation Figma. | 22 950 | 3mo |
| 50 | figma-create-new-file | openai/skills | Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. | 22 950 | 3mo |
À 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.