Design Systems

Tokens, theming, component libraries, Storybook.

84 skills

# 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. 181 848 1370
2 accessibility-review anthropics/knowledge-work-plugins Auditer une page selon les critères WCAG 2.1 AA et prioriser les corrections. 30 059 970
3 design-critique anthropics/knowledge-work-plugins Auditer un design et fournir une critique structurée multi-dimensionnelle actionnables. 30 059 970
4 design-handoff anthropics/knowledge-work-plugins Générer une documentation de handoff design complète pour les développeurs. 30 059 970
5 design-system anthropics/knowledge-work-plugins Auditer, documenter et étendre un design system de manière structurée. 30 059 970
6 n8n:ui-design n8n-io/n8n Concevoir et styliser des composants UI frontend selon les standards n8n. 207 862 851
7 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 851
8 tailwind-design-system wshobson/agents Créer des design systems production-ready avec Tailwind CSS v4. 40 989 587
9 design-system-patterns wshobson/agents Architecturer des systèmes de design avec tokens, thèmes et composants scalables. 40 989 587
10 visual-design-foundations wshobson/agents Créer des systèmes visuels cohérents via typographie, couleurs et espacements accessibles. 40 989 587
11 web-component-design wshobson/agents Concevoir des composants UI réutilisables avec patterns de composition et styling modernes. 40 989 587
12 web-design-guidelines vercel-labs/agent-skills Auditer des fichiers web selon les Web Interface Guidelines officielles. 32 581 348
13 penpot-uiux-design github/awesome-copilot Concevoir des interfaces professionnelles dans Penpot via un serveur MCP dédié. 40 142 221
14 premium-frontend-ui github/awesome-copilot Architecturer des interfaces web premium avec animations, micro-interactions et identité visuelle forte. 40 142 221
15 anti-ui-slop github/awesome-copilot Concevoir des interfaces web ou iOS uniques, fonctionnelles et fidèles au produit. 40 142 221
16 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 221
17 expo-design-system expo/skills Centraliser tous les tokens visuels d'une app Expo dans un système de design cohérent. 2 907 175
18 figma-code-connect-components openai/skills Connecter des composants Figma à leurs équivalents code via Code Connect. 28 137 136
19 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. 28 137 136
20 figma-create-new-file openai/skills Créer un nouveau fichier Figma vierge dans les brouillons d'un utilisateur. 28 137 136
21 figma-generate-design openai/skills Créer ou mettre à jour des écrans Figma en réutilisant les composants du design system. 28 137 136
22 figma-generate-library openai/skills Construire des systèmes de design Figma professionnels en orchestrant des workflows multi-phases structurés. 28 137 136
23 figma-implement-design openai/skills Convertir des designs Figma en code production avec une précision pixel-perfect. 28 137 136
24 figma openai/skills Implémenter des designs Figma en code en traduisant fidèlement les composants visuels. 28 137 136
25 figma-use openai/skills Exécuter du JavaScript dans Figma via le Plugin API pour manipuler des fichiers. 28 137 136
26 baoyu-design jimliu/baoyu-design Créer des interfaces HTML en suivant une méthodologie design complète et multi-environnements. 4 405 116
27 design-md google-labs-code/stitch-skills Analyser un projet Stitch et synthétiser son langage visuel dans un fichier DESIGN.md. 8 539 65
28 enhance-prompt google-labs-code/stitch-skills Transformer des idées d'interface vagues en prompts optimisés pour Stitch. 8 539 65
29 shadcn-ui google-labs-code/stitch-skills Intégrer, personnaliser et composer des composants shadcn/ui dans un projet React. 8 539 65
30 taste-design google-labs-code/stitch-skills Générer un fichier DESIGN.md pour piloter des interfaces premium dans Google Stitch. 8 539 65
31 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 65
32 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 65
33 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 65
34 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 65
35 frontend-ui-dark-ts microsoft/skills Créer une interface React sombre avec animations, glassmorphisme et composants TypeScript prêts à l'emploi. 3 130 29
36 frontend-design-review microsoft/skills Auditer et concevoir des interfaces frontend de qualité production, élégantes et distinctives. 3 130 29
37 make-interfaces-feel-better crbnos/carbon Appliquer des micro-détails UI pour des interfaces plus soignées et naturelles. 2 741 23
38 ui crbnos/carbon Récupérer et exécuter dynamiquement des instructions de skill depuis un serveur MCP distant. 2 741 23
39 figma-code-connect figma/mcp-server-guide Générer des fichiers de mapping Figma-code pour connecter composants et snippets TypeScript. 2 082 19
40 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 19
41 figma-use-figjam figma/mcp-server-guide Créer, inspecter et organiser des éléments FigJam via l'API plugin Figma. 2 082 19
42 figma-use figma/mcp-server-guide Exécuter du JavaScript dans Figma via l'API Plugin pour manipuler des fichiers. 2 082 19
43 figma-use-slides figma/mcp-server-guide Créer et personnaliser des présentations Figma Slides via l'API Plugin MCP. 2 082 19
44 figma-use-motion figma/mcp-server-guide Animer des nœuds Figma avec keyframes, styles et timelines via l'API motion. 2 082 19
45 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 19
46 figma-shaders figma/mcp-server-guide Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. 2 082 19
47 figma-code-connect figma/mcp-server-guide Générer des fichiers .figma.ts pour connecter des composants Figma à du code. 2 082 19
48 figma-create-new-file figma/mcp-server-guide Créer un nouveau fichier Figma vierge dans les brouillons de l'utilisateur. 2 082 19
49 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 19
50 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 19

À 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.