Design Systems
Tokens, theming, component libraries, Storybook.
| # | Skill | Source | Description | Δ | |
|---|---|---|---|---|---|
| 1 | frontend-design | anthropics/skills | Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. | 133 586 | 16 |
| 2 | penpot-uiux-design | github/awesome-copilot | Concevoir des interfaces professionnelles dans Penpot via un serveur MCP dédié. | 32 879 | 8 |
| 3 | premium-frontend-ui | github/awesome-copilot | Architecturer des interfaces web premium avec animations, micro-interactions et identité visuelle forte. | 32 879 | 8 |
| 4 | web-design-reviewer | github/awesome-copilot | Inspecter visuellement un site web et corriger ses problèmes de design au niveau du code. | 32 879 | 8 |
| 5 | design-system-rules | n8n-io/n8n | Auditer le code frontend pour garantir l'usage correct des design tokens et composants. | 187 719 | 5 |
| 6 | n8n:design-system | n8n-io/n8n | Guider la création et le style de composants UI frontend avec un design system cohérent. | 187 719 | 5 |
| 7 | web-design-guidelines | vercel-labs/agent-skills | Auditer des fichiers web selon les Web Interface Guidelines officielles. | 26 518 | 4 |
| 8 | figma-code-connect-components | openai/skills | Connecter des composants Figma à leurs équivalents code via Code Connect. | 19 025 | 2 |
| 9 | 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. | 19 025 | 2 |
| 10 | figma-create-new-file | openai/skills | Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. | 19 025 | 2 |
| 11 | figma-generate-design | openai/skills | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 19 025 | 2 |
| 12 | figma-generate-library | openai/skills | Construire des systèmes de design Figma professionnels en orchestrant des workflows multi-phases structurés. | 19 025 | 2 |
| 13 | figma-implement-design | openai/skills | Convertir des designs Figma en code production avec une précision pixel-perfect. | 19 025 | 2 |
| 14 | figma | openai/skills | Implémenter des designs Figma en code en traduisant fidèlement les composants visuels. | 19 025 | 2 |
| 15 | figma-use | openai/skills | Exécuter du JavaScript dans Figma via le Plugin API pour manipuler des fichiers. | 19 025 | 2 |
| 16 | design-md | google-labs-code/stitch-skills | Analyser un projet Stitch et synthétiser son langage visuel dans un fichier DESIGN.md. | 5 390 | 2 |
| 17 | enhance-prompt | google-labs-code/stitch-skills | Transformer des idées d'interface vagues en prompts optimisés pour Stitch. | 5 390 | 2 |
| 18 | shadcn-ui | google-labs-code/stitch-skills | Intégrer, personnaliser et composer des composants shadcn/ui dans un projet React. | 5 390 | 2 |
| 19 | stitch-design | google-labs-code/stitch-skills | Générer et affiner des interfaces UI professionnelles via le serveur Stitch MCP. | 5 390 | 2 |
| 20 | taste-design | google-labs-code/stitch-skills | Générer un fichier DESIGN.md pour piloter des interfaces premium dans Google Stitch. | 5 390 | 2 |
| 21 | accessibility-review | anthropics/knowledge-work-plugins | Auditer une page selon les critères WCAG 2.1 AA et prioriser les corrections. | 12 101 | 2 |
| 22 | design-critique | anthropics/knowledge-work-plugins | Auditer un design et fournir une critique structurée multi-dimensionnelle actionnables. | 12 101 | 2 |
| 23 | design-handoff | anthropics/knowledge-work-plugins | Générer une documentation de handoff design complète pour les développeurs. | 12 101 | 2 |
| 24 | design-system | anthropics/knowledge-work-plugins | Auditer, documenter et étendre un design system de manière structurée. | 12 101 | 2 |
| 25 | tailwind-design-system | wshobson/agents | Créer des design systems production-ready avec Tailwind CSS v4. | 35 316 | 2 |
| 26 | design-system-patterns | wshobson/agents | Architecturer des systèmes de design avec tokens, thèmes et composants scalables. | 35 316 | 2 |
| 27 | visual-design-foundations | wshobson/agents | Créer des systèmes visuels cohérents via typographie, couleurs et espacements accessibles. | 35 316 | 2 |
| 28 | web-component-design | wshobson/agents | Concevoir des composants UI réutilisables avec patterns de composition et styling modernes. | 35 316 | 2 |
| 29 | brand-landingpage | wshobson/agents | Concevoir une landing page branded clé en main via interview, génération et itération visuelle. | 35 316 | 2 |
| 30 | frontend-ui-dark-ts | microsoft/skills | Créer une interface React sombre avec animations, glassmorphisme et composants TypeScript prêts à l'emploi. | 2 301 | 1 |
| 31 | wiki-vitepress | microsoft/skills | Packager des pages wiki Markdown en site VitePress sombre avec diagrammes Mermaid interactifs. | 2 301 | 1 |
| 32 | frontend-design-review | microsoft/skills | Auditer et concevoir des interfaces frontend de qualité production, élégantes et distinctives. | 2 301 | 1 |
| 33 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers de mapping Figma-code pour connecter composants et snippets TypeScript. | 1 411 | 0 |
| 34 | figma-create-design-system-rules | figma/mcp-server-guide | Générer des règles de système de design personnalisées pour guider les agents IA dans l'implémentation Figma. | 1 411 | 0 |
| 35 | frontend-design | factory-ai/factory-plugins | Concevoir des interfaces frontend élégantes avec vision créative et contraintes systémiques. | 72 | 0 |
| 36 | figma-generate-design | figma/mcp-server-guide | Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. | 1 411 | 0 |
| 37 | figma-implement-design | figma/mcp-server-guide | Convertir des designs Figma en code production avec une précision pixel-perfect. | 1 411 | 0 |
| 38 | figma-use-figjam | figma/mcp-server-guide | Créer, inspecter et organiser des éléments FigJam via l'API plugin Figma. | 1 411 | 0 |
| 39 | figma-use | figma/mcp-server-guide | Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. | 1 411 | 0 |
| 40 | mapbox-cartography | mapbox/mapbox-agent-skills | Concevoir des cartes Mapbox belles et fonctionnelles grâce à des principes cartographiques experts. | 53 | 0 |
| 41 | mapbox-style-patterns | mapbox/mapbox-agent-skills | Configurer des styles de carte Mapbox optimisés selon le contexte applicatif. | 53 | 0 |
| 42 | shopify-liquid | shopify/shopify-ai-toolkit | Développer des composants Liquid pour thèmes Shopify : sections, blocs et snippets. | 312 | 0 |
| 43 | shopify-polaris-app-home | shopify/shopify-ai-toolkit | Construire des interfaces Shopify Admin avec les composants Polaris App Home. | 312 | 0 |
| 44 | shopify-polaris-customer-account-extensions | shopify/shopify-ai-toolkit | Créer des extensions UI personnalisées pour les pages de compte client Shopify. | 312 | 0 |
| 45 | shopify-liquid | shopify/agent-skills | Développer des composants Liquid pour thèmes Shopify : sections, blocs et snippets. | 31 | 0 |
| 46 | creating-streamlit-themes | streamlit/agent-skills | Configurer des thèmes Streamlit personnalisés avec couleurs, typographies et styles avancés. | 187 | 0 |
| 47 | webflow-code-component:component-audit | webflow/webflow-skills | Auditer des composants React pour optimiser leur compatibilité et flexibilité dans Webflow Designer. | 66 | 0 |
| 48 | wix-design-system | wix/skills | Naviguer et interroger la documentation du design system Wix pour intégrer ses composants. | 11 | 0 |
| 49 | baseline-ui | elophanto/elophanto | Imposer des contraintes strictes de qualité UI pour éviter les interfaces générées bâclées. | 59 | 0 |
| 50 | design-lab | elophanto/elophanto | Explorer visuellement des options de design via interview, variations et feedback itératif. | 59 | 0 |
À 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.