Repolode
Enviar
marvkr

marvkr/better-design

Servidor MCP y registro de shadcn/ui que proporciona a los agentes de programación sistemas de diseño, orientación sobre UI/UX, iconos y reglas para revisar la accesibilidad.

Alternativa open source a:Figma

Ver en GitHubSitio web
Estrellas
556
Forks
34
Issues abiertos
1
Último commit
hace 11 días

¿Qué es?

Better Design es un servidor MCP que proporciona contexto de diseño a agentes de programación como Claude Code, Cursor, Codex y VS Code, que a menudo carecen de él. Ofrece herramientas para encontrar un sistema de diseño adecuado para un producto descrito, obtener sus tokens y el código de sus componentes, y consultar principios de UI y UX sobre jerarquía, espaciado, tipografía, formularios, navegación y gestión de errores.

El proyecto también ofrece iconos de una única biblioteca para mantener la coherencia visual, además de reglas de revisión de accesibilidad y diseño visual que un agente puede aplicar a sus propios resultados. Un comando de CLI ejecuta la misma revisión sobre el código de UI de un proyecto. La instalación se realiza con dos comandos npx que configuran una skill para el agente y conectan el servidor MCP con la configuración existente de las herramientas.

Además, cada sistema de diseño se publica como un registro de shadcn, para que se puedan añadir componentes individuales o un tema completo con el CLI de shadcn.

Funciones clave

  • 01Encuentra un sistema de diseño que se ajuste a la descripción de un producto.
  • 02Proporciona tokens de diseño y código de componentes listos para instalar.
  • 03Ofrece principios de UI y UX sobre composición, tipografía, formularios y navegación.
  • 04Proporciona iconos de una única biblioteca para mantener un estilo coherente.
  • 05Aplica reglas de revisión de accesibilidad y diseño visual al código de UI.

Casos de uso

  • Pedir a un agente de programación con IA que cree una página de configuración siguiendo un sistema de diseño coherente.
  • Añadir a un proyecto React componentes shadcn individuales de un tema con un estilo de marca elegido.
  • Revisar el código de UI generado para detectar problemas de accesibilidad antes de confirmar los cambios.
  • Mantener un estilo coherente en los iconos de una interfaz creada por un agente.

Inicio rápido

  1. 1

    Instala la habilidad del agente en tu proyecto

    npx skills add marvkr/better-design --skill better-design
  2. 2

    Conecta Better Design a tus herramientas de programación y reinicia el agente

    npx better-design
  3. 3

    Si algo no funciona, revisa la configuración

    npx better-design doctor

Antes de usarlo

  • Si no tienes una cuenta, la configuración crea una clave gratuita para ti, por lo que depende del servicio alojado en better-design.com.

En colecciones

Skills de diseño de interfaces para agentes de programaciónServidores MCP para Claude CodeHerramientas, skills y plugins para Claude CodeAsistentes y agentes de programación con IAServidores MCPFrameworks frontend y componentes de interfaz

Temas

#mcp#design-systems#shadcn-ui#tailwindcss#ui-components#design-tokens#ai-coding#accessibility#ai-design#claude-code

Preguntas frecuentes

¿Qué es better-design?
Servidor MCP y registro de shadcn/ui que proporciona a los agentes de programación sistemas de diseño, orientación sobre UI/UX, iconos y reglas para revisar la accesibilidad. Better Design es un servidor MCP que proporciona contexto de diseño a agentes de programación como Claude Code, Cursor, Codex y VS Code, que a menudo carecen de él. Ofrece herramientas para encontrar un sistema de diseño adecuado para un producto descrito, obtener sus tokens y el código de sus componentes, y consultar principios de UI y UX sobre jerarquía, espaciado, tipografía, formularios, navegación y gestión de errores.
¿better-design es gratuito? ¿Qué licencia tiene?
better-design es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿better-design sigue mantenido?
Mantenimiento activo. El último commit de better-design fue el 25 oct 2026.
¿Para qué puedo usar better-design?
Pedir a un agente de programación con IA que cree una página de configuración siguiendo un sistema de diseño coherente. Añadir a un proyecto React componentes shadcn individuales de un tema con un estilo de marca elegido. Revisar el código de UI generado para detectar problemas de accesibilidad antes de confirmar los cambios. Mantener un estilo coherente en los iconos de una interfaz creada por un agente.
¿Cómo se instala better-design?
Instala la habilidad del agente en tu proyecto: npx skills add marvkr/better-design --skill better-design Conecta Better Design a tus herramientas de programación y reinicia el agente: npx better-design Si algo no funciona, revisa la configuración: npx better-design doctor
¿Dónde consigo better-design?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/marvkr/better-design

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados