Design Systems

Tokens, theming, component libraries, Storybook.

14 skills

# Skill Source Description Maj
1 shopify-polaris-app-home shopify/shopify-ai-toolkit Générer du code UI Shopify Polaris App Home validé et documenté. 519 7j
2 expo-design-system expo/skills Centraliser tous les tokens visuels d'une app Expo dans un système de design cohérent. 2 466 13j
3 n8n:design-system n8n-io/n8n Guider la création et le style de composants UI frontend avec un design system cohérent. 202 551 19j
4 figma-code-connect figma/mcp-server-guide Générer des fichiers de mapping Figma-code pour connecter composants et snippets TypeScript. 1 923 27j
5 stitch::code-to-design google-labs-code/stitch-skills Convertir du code frontend existant en design Stitch itérable via extraction et upload. 8 191 28j
6 frontend-design anthropics/skills Créer des interfaces frontend mémorables, distinctives et production-ready avec une vision esthétique audacieuse. 171 907 2mo
7 shadcn-ui google-labs-code/stitch-skills Intégrer, personnaliser et composer des composants shadcn/ui dans un projet React. 8 191 3mo
8 preline-theme-generator htmlstreamofficial/preline Générer, prévisualiser et valider des thèmes CSS personnalisés pour Preline. 6 396 3mo
9 frontend-design mkurman/zorai Créer des interfaces frontend production-ready visuellement distinctives et mémorables. 320 3mo
10 baseline-ui elophanto/elophanto Imposer des contraintes strictes de qualité UI pour éviter les interfaces générées bâclées. 113 3mo
11 design-lab elophanto/elophanto Explorer visuellement des options de design via interview, variations et feedback itératif. 113 3mo
12 shadcn elophanto/elophanto Intégrer et configurer des composants UI shadcn/ui dans un projet Next.js. 113 3mo
13 frontend-ui-dark-ts microsoft/skills Créer une interface React sombre avec animations, glassmorphisme et composants TypeScript prêts à l'emploi. 2 958 4mo
14 web-component-design wshobson/agents Concevoir des composants UI réutilisables avec patterns de composition et styling modernes. 39 173 5mo

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