Repolode
Enviar
marvkr

marvkr/better-design

Um servidor MCP e registry do shadcn/ui que fornece a agentes de programação sistemas de design, orientações de UI/UX, ícones e regras para revisar acessibilidade.

Alternativa open source a:Figma

Ver no GitHubSite
Estrelas
556
Forks
34
Issues abertas
1
Último commit
há 12 dias

O que é?

Better Design é um servidor MCP que fornece contexto de design a agentes de programação como Claude Code, Cursor, Codex e VS Code, que muitas vezes não têm esse contexto. Ele disponibiliza ferramentas para encontrar um sistema de design adequado a um produto descrito, obter os tokens e o código dos componentes desse sistema e consultar princípios de UI e UX sobre hierarquia, espaçamento, tipografia, formulários, navegação e tratamento de erros.

O projeto também oferece ícones de uma única biblioteca para manter a consistência visual, além de regras para revisar acessibilidade e design visual que um agente pode aplicar ao próprio resultado. Uma verificação pela linha de comando executa a mesma revisão no código de UI de um projeto. A instalação é feita com dois comandos npx, que configuram uma skill para o agente e conectam o servidor MCP à configuração existente das ferramentas.

Cada sistema de design também é publicado como um registry do shadcn, para que componentes individuais ou um tema completo possam ser adicionados com o shadcn CLI.

Recursos principais

  • 01Encontra um sistema de design compatível com a descrição de um produto.
  • 02Fornece tokens de design e código de componentes para instalação.
  • 03Apresenta princípios de UI e UX sobre layout, tipografia, formulários e navegação.
  • 04Disponibiliza ícones de uma única biblioteca para manter a consistência visual.
  • 05Aplica regras de revisão de acessibilidade e design visual ao código de UI.

Casos de uso

  • Fazer com que um agente de programação com IA crie uma página de configurações seguindo um sistema de design consistente.
  • Adicionar componentes individuais do shadcn, baseados em um tema com o estilo de uma marca escolhida, a um projeto React.
  • Verificar se o código de UI gerado tem problemas de acessibilidade antes de fazer o commit.
  • Manter a consistência do estilo dos ícones em uma interface criada por um agente.

Início rápido

  1. 1

    Instale a skill do agente no seu projeto

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

    Conecte o Better Design às suas ferramentas de programação e reinicie o agente

    npx better-design
  3. 3

    Se algo não funcionar, confira a configuração

    npx better-design doctor

Antes de usar

  • Se você não tiver uma conta, a configuração criará uma chave gratuita para você. Por isso, ela depende do serviço hospedado em better-design.com.

Em coleções

Skills de design de interface para agentes de programaçãoServidores MCP para Claude CodeFerramentas, skills e plugins para Claude CodeAssistentes e agentes de programação com IAServidores MCPFrameworks frontend e componentes de interface

Tópicos

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

Perguntas frequentes

O que é better-design?
Um servidor MCP e registry do shadcn/ui que fornece a agentes de programação sistemas de design, orientações de UI/UX, ícones e regras para revisar acessibilidade. Better Design é um servidor MCP que fornece contexto de design a agentes de programação como Claude Code, Cursor, Codex e VS Code, que muitas vezes não têm esse contexto. Ele disponibiliza ferramentas para encontrar um sistema de design adequado a um produto descrito, obter os tokens e o código dos componentes desse sistema e consultar princípios de UI e UX sobre hierarquia, espaçamento, tipografia, formulários, navegação e tratamento de erros.
better-design é gratuito? Qual é a licença?
better-design é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
better-design ainda é mantido?
Manutenção ativa. O último commit de better-design foi em 25 de out. de 2026.
Para que posso usar better-design?
Fazer com que um agente de programação com IA crie uma página de configurações seguindo um sistema de design consistente. Adicionar componentes individuais do shadcn, baseados em um tema com o estilo de uma marca escolhida, a um projeto React. Verificar se o código de UI gerado tem problemas de acessibilidade antes de fazer o commit. Manter a consistência do estilo dos ícones em uma interface criada por um agente.
Como instalar better-design?
Instale a skill do agente no seu projeto: npx skills add marvkr/better-design --skill better-design Conecte o Better Design às suas ferramentas de programação e reinicie o agente: npx better-design Se algo não funcionar, confira a configuração: npx better-design doctor
Onde consigo better-design?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/marvkr/better-design

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados