IA by DNACX

#7 no GitHub · Design e visual

Como usar o UI UX Pro Max no Claude Code

É uma skill que dá ao Claude conhecimento de design de interfaces. Quando você pede uma tela, ele monta um sistema de design com estilo, cores e fontes que combinam com o seu tipo de produto, escreve o código e confere erros comuns de design antes de entregar.

Para quem
Quem pede páginas, apps ou dashboards ao Claude Code e quer um visual mais cuidado do que o padrão, sem ser designer.
Estrelas (02/11/2026)
144.268, #7 no ranking
Licença
MIT
Repositório
nextlevelbuilder/ui-ux-pro-max-skill

Passo a passo

Antes de começar: Claude Code instalado; Python 3.x, usado pelo script de busca da skill.

  1. Confira se tem Python 3

    A skill usa um script em Python para buscar estilos, cores e fontes. Rode o comando no terminal. Se aparecer uma versão do Python 3, está pronto. Se não, instale o Python antes de seguir.

    Comando
    python3 --version

  2. Registre o repositório no Claude Code

    Dentro do Claude Code, digite o primeiro comando abaixo. Ele cadastra o repositório como uma fonte de plugins.

    Comando
    /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

  3. Instale a skill

    Ainda dentro do Claude Code, digite o segundo comando. Depois disso a skill fica disponível.

    Comando
    /plugin install ui-ux-pro-max@ui-ux-pro-max-skill

  4. Peça uma tela como você pediria normalmente

    Não precisa chamar a skill pelo nome. O README diz que ela ativa sozinha quando você pede trabalho de interface. Use o pedido do primeiro teste ou descreva o seu produto.

Primeiro teste

Numa sessão do Claude com a skill instalada, cole:

Primeiro teste
Build a landing page for my SaaS product

O README descreve a sequência: o Claude gera um sistema de design com o motor de raciocínio, escolhe estilos, cores e tipografia para o tipo de produto, implementa a interface e valida contra erros comuns de UI e UX antes de entregar. Sem dizer a tecnologia, o padrão é HTML com Tailwind.

Cuidados

  • Este guia segue o caminho de plugin do marketplace, que é específico do Claude Code e tem dois comandos. O README marca como "Recommended" a instalação pela CLI (npm install -g ui-ux-pro-max-cli, depois uipro init --ai claude dentro do projeto). As duas existem.
  • O README registra um problema conhecido: em versões anteriores à v2.5.1, a instalação pelo marketplace falhava com o erro "Zip file contains a symbolic link". A saída indicada é usar o instalador da CLI.
  • O README diz que os scripts em Python usam só a biblioteca padrão, não instalam nada e não fazem chamadas de rede. É uma afirmação do projeto.
  • A skill orienta o design. O README diz que os resultados da busca são orientação e não reescrevem o seu app sozinhos.
  • Existe uma versão Premium paga, com identidade de marca, logos e geração de imagens por IA. O que o README descreve neste repositório é a versão básica.
  • O repositório pertence ao grupo nextlevelbuilder. O README traz botões de doação e links para outros produtos do mesmo grupo.

Como desfazer

O README só traz a remoção para quem instalou pela CLI: rodar uipro uninstall na pasta do projeto (ou uipro uninstall --global para a instalação global). Para o plugin do marketplace, o README não explica a remoção.

O que o README não confirma

Esta página foi montada lendo o README. Estes pontos não estão escritos lá:

  • O README marca a instalação pela CLI como recomendada. Esta página usa o marketplace como caminho principal por ser específico do Claude Code, ter dois comandos e ser o primeiro indicado na solução de problemas para o Claude Code. É uma escolha editorial.
  • O README não diz se é preciso abrir uma sessão nova do Claude Code depois de instalar.
  • O README não diz o que acontece no Windows com o comando python3, nem qual comando usar se ele não existir.
  • O README não explica como desinstalar o plugin instalado pelo marketplace.
  • O README não informa custo de uso nem tempo de resposta.
  • As telas de antes e depois do README são exemplos da comunidade, sem teste oficial. A skill não foi testada.

Dúvidas

Preciso chamar a skill por um comando?

No Claude Code, não. O README diz que ela ativa sozinha quando você pede trabalho de UI e UX. A barra /ui-ux-pro-max é para o modo de comando de outros assistentes, listados como Kiro, Roo Code e KiloCode.

Prefiro o instalador recomendado pelo README. Como é?

Instale a CLI com npm install -g ui-ux-pro-max-cli, entre na pasta do seu projeto e rode uipro init --ai claude. O README também mostra uipro init --ai claude --global para instalar em ~/.claude/skills/ e valer para todos os projetos.

Dá para pedir um estilo específico?

Sim. O README tem um pedido de exemplo para aplicar um tema a um app existente, citando estilos como Minimalism & Swiss Style, e diz que dá para escolher qualquer estilo do catálogo ou uma direção visual sua.

A DNACX já usou o UI UX Pro Max?

Esta página foi montada a partir do README oficial. A DNACX não rodou cada passo, então confira a saída de cada comando e, se algo falhar, volte ao README do repositório.

Próxima da lista

← #6 Ponytail · #8 Graphify →

Ver as 15 skills

Por Diogo Kammers, da DNACX. Passo a passo montado a partir do README oficial de nextlevelbuilder/ui-ux-pro-max-skill, lido em . A DNACX não rodou cada passo desta página. A skill é de terceiros e a DNACX não a criou.