better-design

Better Design é um servidor MCP de design de código aberto e um registro shadcn/ui destinado a fornecer contexto de design estruturado para agentes de codificação de IA. Ele é descrito como compatível com agentes e editores MCP, incluindo Claude Code, Cursor, VS Code/GitHub Copilot, Claude Desktop e claude.ai. O projeto combina um registro de sistema de design, princípios de UI, orientação de ícones, verificações de acessibilidade e regras de revisão de design visual. O sistema possui duas camadas. A camada Design Intelligence permanece ativa durante o trabalho de UI: quando um agente constrói uma interface, ele pode carregar princípios de design de produto e regras de revisão relevantes. A camada Scaffold é sob demanda e associa novos trabalhos de UI a um sistema de design; um usuário pode dizer "use better-design" e o MCP resolve um sistema adequado. O README lista as ferramentas MCP: resolve-design-system, get-design-system-docs, get-ui-principle, get-review-rules, resolve-icon-library e search-icons. Estas abrangem a correspondência semântica de sistemas de design, carregamento de tokens e código de componentes, orientação focada em hierarquia, espaçamento, tipografia, profundidade, movimento e formulários, checklists de design visual e WCAG, correspondência de famílias de ícones e busca de ícones via Iconify. O registro contém 31 sistemas de design de código aberto para shadcn/ui. Os temas nomeados incluem 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 e TV Style. Cada sistema de design inclui uma camada de tokens globals.css e overrides de componentes. Os componentes podem ser instalados em um projeto shadcn/ui através da CLI do shadcn usando a URL do registro, como por exemplo o botão Linear. A configuração pode ser local ou remota. O README documenta a instalação de uma habilidade de agente com npx skills add marvkr/better-design --skill better-design e a execução de npx better-design; o instalador detecta ferramentas de codificação e conecta o MCP sem substituir a configuração existente. Um endpoint MCP remoto hospedado em better-design.com/api/mcp também é documentado, utilizando uma chave de API das configurações do site em um cabeçalho de Authorization. O README afirma que nenhuma conta é necessária para o caminho de configuração local e fornece um exemplo de configuração do Claude Desktop para MCP remoto. A estrutura do repositório inclui componentes para overrides de shadcn/ui por tema, entradas JSON de registro, scripts de build e seed, habilidades instaláveis e outras habilidades de agente. As orientações de contribuição dizem que novos sistemas de design requerem overrides de componentes TSX, entradas de registro correspondentes e a execução de um seed. Nuances de design, como camadas de sombra, estados de foco, espessura de borda, transições de hover e variações de raio específicas do contexto, são esperadas no código do componente, não apenas em variáveis CSS. O projeto é licenciado sob MIT.