Design Systems
Tokens, theming, component libraries, Storybook.
| # | Skill | Source | Description | ||
|---|---|---|---|---|---|
| 1 | n8n:ui-design | n8n-io/n8n | Concevoir et styliser des composants UI frontend selon les standards n8n. | 204 304 | |
| 2 | frontend-design | anthropics/skills | Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. | 176 307 | |
| 3 | design-system-patterns | wshobson/agents | Architecturer des systèmes de design avec tokens, thèmes et composants scalables. | 39 652 | |
| 4 | tailwind-design-system | wshobson/agents | Créer des design systems production-ready avec Tailwind CSS v4. | 39 652 | |
| 5 | visual-design-foundations | wshobson/agents | Créer des systèmes visuels cohérents via typographie, couleurs et espacements accessibles. | 39 652 | |
| 6 | web-component-design | wshobson/agents | Concevoir des composants UI réutilisables avec patterns de composition et styling modernes. | 39 652 | |
| 7 | anti-ui-slop | github/awesome-copilot | Concevoir des interfaces web ou iOS uniques, fonctionnelles et fidèles au produit. | 39 002 | |
| 8 | penpot-uiux-design | github/awesome-copilot | Concevoir des interfaces professionnelles dans Penpot via un serveur MCP dédié. | 39 002 | |
| 9 | premium-frontend-ui | github/awesome-copilot | Architecturer des interfaces web premium avec animations, micro-interactions et identité visuelle forte. | 39 002 | |
| 10 | web-design-guidelines | vercel-labs/agent-skills | Auditer des fichiers web selon les Web Interface Guidelines officielles. | 31 193 | |
| 11 | figma | openai/skills | Implémenter des designs Figma en code en traduisant fidèlement les composants visuels. | 27 186 | |
| 12 | figma-code-connect-components | openai/skills | Connecter des composants Figma à leurs équivalents code via Code Connect. | 27 186 | |
| 13 | 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. | 27 186 | |
| 14 | figma-create-new-file | openai/skills | Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. | 27 186 | |
| 15 | figma-generate-design | openai/skills | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 27 186 | |
| 16 | figma-generate-library | openai/skills | Construire des systèmes de design Figma professionnels en orchestrant des workflows multi-phases structurés. | 27 186 | |
| 17 | figma-implement-design | openai/skills | Convertir des designs Figma en code production avec une précision pixel-perfect. | 27 186 | |
| 18 | figma-use | openai/skills | Exécuter du JavaScript dans Figma via le Plugin API pour manipuler des fichiers. | 27 186 | |
| 19 | accessibility-review | anthropics/knowledge-work-plugins | Auditer une page selon les critères WCAG 2.1 AA et prioriser les corrections. | 24 016 | |
| 20 | design-critique | anthropics/knowledge-work-plugins | Auditer un design et fournir une critique structurée multi-dimensionnelle actionnables. | 24 016 | |
| 21 | design-handoff | anthropics/knowledge-work-plugins | Générer une documentation de handoff design complète pour les développeurs. | 24 016 | |
| 22 | design-system | anthropics/knowledge-work-plugins | Auditer, documenter et étendre un design system de manière structurée. | 24 016 | |
| 23 | design-md | google-labs-code/stitch-skills | Analyser un projet Stitch et synthétiser son langage visuel dans un fichier DESIGN.md. | 8 309 | |
| 24 | enhance-prompt | google-labs-code/stitch-skills | Transformer des idées d'interface vagues en prompts optimisés pour Stitch. | 8 309 | |
| 25 | shadcn-ui | google-labs-code/stitch-skills | Intégrer, personnaliser et composer des composants shadcn/ui dans un projet React. | 8 309 | |
| 26 | stitch::code-to-design | google-labs-code/stitch-skills | Convertir du code frontend existant en design Stitch itérable via extraction et upload. | 8 309 | |
| 27 | stitch::extract-design-md | google-labs-code/stitch-skills | Extraire un système de design complet depuis le code source frontend sans compilation. | 8 309 | |
| 28 | 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 309 | |
| 29 | stitch::manage-design-system | google-labs-code/stitch-skills | Créer et appliquer un système de design cohérent à un projet Stitch. | 8 309 | |
| 30 | taste-design | google-labs-code/stitch-skills | Générer un fichier DESIGN.md pour piloter des interfaces premium dans Google Stitch. | 8 309 | |
| 31 | preline-theme-generator | htmlstreamofficial/preline | Générer, prévisualiser et valider des thèmes CSS personnalisés pour Preline. | 6 421 | |
| 32 | baoyu-design | jimliu/baoyu-design | Créer des interfaces HTML en suivant une méthodologie design complète et multi-environnements. | 4 026 | |
| 33 | frontend-design-review | microsoft/skills | Auditer et concevoir des interfaces frontend de qualité production, élégantes et distinctives. | 3 017 | |
| 34 | frontend-ui-dark-ts | microsoft/skills | Créer une interface React sombre avec animations, glassmorphisme et composants TypeScript prêts à l'emploi. | 3 017 | |
| 35 | expo-design-system | expo/skills | Centraliser tous les tokens visuels d'une app Expo dans un système de design cohérent. | 2 530 | |
| 36 | make-interfaces-feel-better | crbnos/carbon | Appliquer des micro-détails UI pour des interfaces plus soignées et naturelles. | 2 406 | |
| 37 | ui | crbnos/carbon | Récupérer et exécuter dynamiquement des instructions de skill depuis un serveur MCP distant. | 2 406 | |
| 38 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers de mapping Figma-code pour connecter composants et snippets TypeScript. | 1 990 | |
| 39 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers .figma.ts pour connecter des composants Figma à du code. | 1 990 | |
| 40 | figma-create-new-file | figma/mcp-server-guide | Créer un nouveau fichier Figma vierge dans les brouillons de l'utilisateur. | 1 990 | |
| 41 | figma-design-to-code | figma/mcp-server-guide | Convertir un design Figma en code adapté à la stack et aux conventions du projet cible. | 1 990 | |
| 42 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 990 | |
| 43 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 990 | |
| 44 | figma-generate-diagram | figma/mcp-server-guide | Générer des diagrammes Mermaid.js éditables dans FigJam avec contraintes et routage par type. | 1 990 | |
| 45 | figma-generate-library | figma/mcp-server-guide | Construire des design systems Figma professionnels en orchestrant des workflows multi-phases structurés. | 1 990 | |
| 46 | 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. | 1 990 | |
| 47 | 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. | 1 990 | |
| 48 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 1 990 | |
| 49 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 1 990 | |
| 50 | figma-use | figma/mcp-server-guide | Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. | 1 990 |
À 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.