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. | 181 848 | 1370 |
| 2 | n8n:ui-design | n8n-io/n8n | Concevoir et styliser des composants UI frontend selon les standards n8n. | 207 862 | 851 |
| 3 | 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 |
| 4 | web-component-design | wshobson/agents | Concevoir des composants UI réutilisables avec patterns de composition et styling modernes. | 40 986 | 587 |
| 5 | 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 |
| 6 | shadcn-ui | google-labs-code/stitch-skills | Intégrer, personnaliser et composer des composants shadcn/ui dans un projet React. | 8 539 | 65 |
| 7 | 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 |
| 8 | 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 |
| 9 | 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 |
| 10 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 2 082 | 19 |
| 11 | figma-code-connect | figma/mcp-server-guide | Générer des fichiers .figma.ts pour connecter des composants Figma à du code. | 2 082 | 19 |
| 12 | 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 | 19 |
| 13 | figma-shaders | figma/mcp-server-guide | Créer et mettre à jour des shaders Figma de type effet ou fill via MCP. | 2 082 | 19 |
| 14 | preline-theme-generator | htmlstreamofficial/preline | Générer, prévisualiser et valider des thèmes CSS personnalisés pour Preline. | 6 494 | 12 |
| 15 | baseline-ui | elophanto/elophanto | Imposer des contraintes strictes de qualité UI pour éviter les interfaces générées bâclées. | 106 | 0 |
| 16 | design-lab | elophanto/elophanto | Explorer visuellement des options de design via interview, variations et feedback itératif. | 106 | 0 |
| 17 | shadcn | elophanto/elophanto | Intégrer et configurer des composants UI shadcn/ui dans un projet Next.js. | 106 | 0 |
| 18 | frontend-design | mkurman/zorai | Créer des interfaces frontend production-ready visuellement distinctives et mémorables. | 324 | 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.