Mestre do Claude
Todas as skills
v2.15.0·16 downloads

UI/UX Pro Max

Um consultor de design dentro do Claude: 79 estilos, 192 paletas, 74 pares de fontes e 119 regras de usabilidade. Seu site para de ter cara de feito por IA.

designuiuxfrontenddesign-systemtailwindreactlanding-page
UI/UX Pro Max

O que faz

Já pediu um site pro Claude e ele saiu com cara de "feito por IA", aquele roxo genérico com fonte sem graça? Essa skill resolve isso. Ela coloca dentro do seu computador um consultor de design: um banco de dados com 79 estilos visuais, 192 paletas de cores, 74 combinações de fontes, 119 regras de usabilidade e 25 tipos de gráfico.

Antes de montar qualquer tela, o Claude consulta esse banco e escolhe estilo, cores e fontes que combinam com o seu tipo de negócio. Uma clínica de estética ganha tons suaves e acolhedores. Um painel financeiro ganha cores sóbrias e gráficos claros. Nada de chute.

É a skill de design mais popular do GitHub: mais de 135 mil estrelas (as "curtidas" do GitHub, o Google Drive dos programadores).

Quando usar

Criar uma landing page ou site do zero: você diz o que é o negócio e o Claude monta um "kit de design" completo antes de escrever o código: estrutura da página, estilo, cores, fontes e efeitos.

Revisar uma tela que já existe: ele confere contraste de cor, tamanho de botão no celular, fontes, carregamento e acessibilidade (se pessoas com dificuldade de visão conseguem usar), e aponta o que está errado.

Painéis e gráficos: escolhe o tipo de gráfico certo pro dado que você quer mostrar.

Qualquer tecnologia: funciona com sites simples em HTML, React, Next.js, Vue, apps de celular (Flutter, React Native, SwiftUI) e mais 15 tecnologias.

Como instalar

1. Instale o Python 3 em python.org (é o programa que roda a busca no banco de dados). Não precisa instalar mais nada.

2. Baixe o ZIP e descompacte dentro de ~/.claude/skills/ (no Windows: C:\Users\SEU-USUARIO\.claude\skills\).

3. Abra o Claude Code e peça em português:

cria uma landing page pra minha clínica de estética usando a skill ui-ux-pro-max

O Claude roda a busca sozinho, mostra o kit de design que escolheu e só então começa a montar a página.

O que vem no pacote

Banco de dados de design: estilos (glassmorphism, minimalismo, brutalismo e outros), paletas por tipo de negócio, pares de fontes do Google Fonts, regras de usabilidade, ícones e animações.

Regras de prioridade: acessibilidade e toque no celular vêm primeiro, depois desempenho, estilo, layout, fontes e cores, animação, formulários, navegação e gráficos.

Checklist antes de entregar: a skill faz o Claude conferir a tela contra uma lista de verificação antes de dizer que terminou.

O que mudamos

Testamos a skill aqui antes de subir: a busca roda no computador, sem internet e sem criar arquivos. Fizemos só um ajuste: o original foi feito pra ser instalado como plugin, e os comandos apontavam pra uma pasta que não existe quando você só descompacta o ZIP. Trocamos pelo caminho da sua pasta de skills, então funciona direto. Também tiramos os testes automáticos, que não são usados no dia a dia.

Se preferir a instalação oficial, que traz junto as outras skills do pacote (marca, apresentações, banners e mais), digite no Claude Code:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Crédito

Criada por Next Level Builder (github.com/nextlevelbuilder/ui-ux-pro-max-skill), licença MIT, versão 2.15.0. Site oficial: uupm.cc.