better-design

Better Design est un serveur MCP de design open-source et un registre shadcn/ui visant à fournir aux agents de codage IA un contexte de design structuré. Il est conçu pour fonctionner avec des agents et des éditeurs compatibles MCP, notamment Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop et claude.ai. Le projet combine un registre de systèmes de design, des principes d'UI, des conseils sur les icônes, des vérifications d'accessibilité et des règles de révision du design visuel. Le système comporte deux couches. La couche Design Intelligence est toujours active lors du travail sur l'UI : lorsqu'un agent construit une interface, il peut charger les principes de design produit et les règles de révision pertinents. La couche Scaffold est disponible à la demande et associe le nouveau travail d'UI à un système de design ; un utilisateur peut dire « use better-design » et le MCP résout le système approprié. Le README liste les outils MCP : resolve-design-system, get-design-system-docs, get-ui-principle, get-review-rules, resolve-icon-library et search-icons. Ceux-ci couvrent l'appariement sémantique des systèmes de design, le chargement des jetons et du code des composants, des conseils ciblés sur la hiérarchie, l'espacement, la typographie, la profondeur, le mouvement et les formulaires, des listes de contrôle WCAG et de design visuel, l'appariement de familles d'icônes et la recherche d'icônes via Iconify. Le registre contient 31 systèmes de design open-source pour shadcn/ui. Les thèmes nommés incluent Linear, Linear Quality, Supabase, Vercel, Airbnb, Notion, Stripe, Apple, Figma, Light Marketplace, Precision Light, Minimal Light, Dark Orange, Vibrant Dark, Neutral Monochrome, Cinematic Dark, Editorial Dark, Corporate Fintech, Beam Custom, Beam Lib, Glassmorphic Dark, Inset Dark, Lumen Dark, Metal FX Gold, Metal FX Silver, Metal FX Chromatic, Midnight Glass, Monochrome Industrial, Pillow Light, Tactile Minimal et TV Style. Chaque système de design comprend une couche de jetons globals.css et des overrides de composants. Les composants peuvent être installés dans un projet shadcn/ui via la CLI shadcn en utilisant l'URL du registre, par exemple pour le bouton Linear. L'installation peut être locale ou distante. Le README documente l'installation d'une compétence d'agent avec npx skills add marvkr/better-design --skill better-design et l'exécution de npx better-design ; l'installateur détecte les outils de codage et connecte le MCP sans remplacer la configuration existante. Un point de terminaison MCP distant hébergé sur better-design.com/api/mcp est également documenté, utilisant une clé API provenant des paramètres du site dans un en-tête Authorization. Le README précise qu'aucun compte n'est requis pour le parcours d'installation locale et fournit un exemple de configuration Claude Desktop pour le MCP distant. La structure du dépôt comprend des composants pour les overrides shadcn/ui par thème, des entrées JSON de registre, des scripts de build et de seed, des compétences installables et d'autres compétences d'agent. Les directives de contribution indiquent que les nouveaux systèmes de design nécessitent des overrides de composants TSX, des entrées de registre correspondantes et l'exécution d'un seed. Les nuances de design telles que les couches d'ombre, les états de focus, l'épaisseur des bordures, les transitions au survol et les variations de rayon spécifiques au contexte sont attendues dans le code des composants, et pas seulement dans les variables CSS. Le projet est sous licence MIT.