better-design

Better Design es un servidor MCP de diseño de código abierto y un registro de shadcn/ui destinado a proporcionar a los agentes de codificación de IA un contexto de diseño estructurado. Se describe que funciona con agentes y editores compatibles con MCP, incluyendo Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop y claude.ai. El proyecto combina un registro de sistemas de diseño, principios de UI, guía de iconos, comprobaciones de accesibilidad y reglas de revisión de diseño visual. El sistema tiene dos capas. La capa de Design Intelligence está siempre activa durante el trabajo de UI: cuando un agente construye una interfaz, puede cargar principios de diseño de producto y reglas de revisión pertinentes. La capa Scaffold es bajo demanda y vincula el nuevo trabajo de UI con un sistema de diseño; un usuario puede decir "use better-design" y el MCP resuelve el sistema adecuado. El README enumera las herramientas MCP: resolve-design-system, get-design-system-docs, get-ui-principle, get-review-rules, resolve-icon-library y search-icons. Estas cubren la coincidencia semántica de sistemas de diseño, la carga de tokens y código de componentes, guía enfocada en jerarquía, espaciado, tipografía, profundidad, movimiento y formularios, listas de verificación de WCAG y diseño visual, coincidencia de familias de iconos y búsqueda de iconos a través de Iconify. El registro contiene 31 sistemas de diseño de código abierto para shadcn/ui. Los temas nombrados incluyen 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 y TV Style. Cada sistema de diseño incluye una capa de tokens globals.css y anulaciones de componentes. Los componentes pueden instalarse en un proyecto de shadcn/ui a través de la CLI de shadcn utilizando la URL del registro, por ejemplo, el botón de Linear. La configuración puede ser local o remota. El README documenta la instalación de una habilidad de agente con npx skills add marvkr/better-design --skill better-design y la ejecución de npx better-design; el instalador detecta las herramientas de codificación y conecta el MCP sin reemplazar la configuración existente. También se documenta un endpoint MCP remoto alojado en better-design.com/api/mcp, utilizando una clave API de la configuración del sitio en un encabezado de Authorization. El README establece que no se requiere cuenta para la ruta de configuración local y proporciona un ejemplo de configuración de Claude Desktop para el MCP remoto. La estructura del repositorio incluye componentes para anulaciones de shadcn/ui por tema, entradas JSON del registro, scripts de construcción y seed, habilidades instalables y otras habilidades de agente. La guía de contribución indica que los nuevos sistemas de diseño requieren anulaciones de componentes TSX, entradas de registro correspondientes y una ejecución de seed. Se esperan matices de diseño como capas de sombra, estados de enfoque, grosor de borde, transiciones de hover y variaciones de radio específicas del contexto en el código del componente, no solo en las variables CSS. El proyecto tiene licencia MIT.