← Todos os materiais
// material · PINCELconferido em 09/10/2026

4 ferramentas pro teu app não ter cara de IA

Instala antes de começar o design do app. Os comandos com barra (/) tu usa dentro do Claude Code; os outros, no terminal, na pasta do projeto. Depois de instalar um MCP, reinicia o Claude Code.

Baixar em PDF
  1. 01 / 04

    shadcn MCP OFICIAL

    O MCP oficial do shadcn/ui (125 mil estrelas no GitHub, licença MIT). O Claude procura, mostra e instala componentes prontos e acessíveis direto no teu projeto, por conversa.

    Instalar (terminal, na pasta do projeto)
    npx shadcn@latest mcp init --client claude
pnpm dlx shadcn@latest mcp init --client claude   (se usa pnpm)
    Pedido pra testar (exemplo da documentação)
    "Add the button, dialog and card components to my project"

    Cuidado: Reinicia o Claude Code depois de instalar. Se não aparecer, o /mcp mostra se o servidor conectou.

    ui.shadcn.com/docs/mcpgithub.com/shadcn-ui/ui

  2. 02 / 04

    21st (antigo Magic MCP) OFICIAL

    Catálogo com mais de 12 mil componentes React prontos, templates e temas do shadcn. Tu pede e ele busca as opções sem tu sair do editor.

    Instalar como plugin (dentro do Claude Code)
    /plugin marketplace add 21st-dev/claude-code-plugin
/plugin install 21st@21st
    Ou só o MCP (terminal, na pasta do projeto)
    npx @21st-dev/cli init --client claude --write
    Pedido pra testar
    "Me traz um topo de página com tabela de preços do 21st"

    Cuidado: Precisa criar uma chave (API key) em 21st.dev/mcp. No plano grátis a busca é livre e a instalação tem limite de 2 por dia; instalar sem limite é pago (Builder, a partir de US$ 6 por mês no plano anual).

    21st.dev/mcp21st.dev/pricing

  3. 03 / 04

    Impeccable COMUNIDADE

    Caça os vícios de design de IA: gradiente roxo, animação quicando, espaçamento apertado. O detector tem 59 regras. O /impeccable audit aponta e o /impeccable polish faz o acabamento.

    Instalar (terminal, na pasta do projeto)
    npx impeccable install
    Ou como plugin (dentro do Claude Code)
    /plugin marketplace add pbakaus/impeccable
    Usar (dentro do Claude Code)
    /impeccable init
/impeccable audit
/impeccable polish

    Cuidado: O próprio README avisa: passar no detector é um bom sinal, mas não prova que o design ficou bom. Olha a tela no celular e no computador.

    github.com/pbakaus/impeccableimpeccable.style

  4. 04 / 04

    UI UX Pro Max COMUNIDADE

    Mais de 130 mil estrelas no GitHub. Antes da primeira tela, monta o design system do teu tipo de negócio: estilo, paleta, fonte e o que evitar (como o gradiente roxo e rosa de IA num app de banco). 192 paletas e 74 pares de fonte.

    Instalar (dentro do Claude Code)
    /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill
    Pedido pra testar
    "Monta o design system do meu app de agendamento para um estúdio de beleza antes de criar a primeira tela."

    Cuidado: Precisa do Python 3 instalado no computador.

    github.com/nextlevelbuilder/ui-ux-pro-max-skill

Prosperando com IA · em breve

Quer aprender a usar tudo isso do zero?

Entrar na lista