Testada em uma tarefa realComunidade, verificadaDesign e front-end

UI/UX Pro Max

Uma página de reserva, formulário ou tela de app conferidos contra regras claras de celular e acessibilidade antes de você publicar.

Veja o que ela criou

Instale UI/UX Pro Max grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

Nossa nota: 5/10
Funciona em: Claude Code, Codex+6 outras
Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Antigravity, OpenCode, Windsurf e mais de 60 ferramentas de IA que leem skills.
Precisa programar?: Não
Tempo até o resultado: 15 min
Criado por: Next Level Builder
Testada em: 19 de out. de 2026

Sem a skill — As duas primeiras telas são quase iguais, com o mesmo título e a mesma foto do ateliê; com a skill, as oficinas ficam sob uma barra de progresso de 4 etapas em vez de painéis numerados.

Com a skill — As duas primeiras telas são quase iguais, com o mesmo título e a mesma foto do ateliê; com a skill, as oficinas ficam sob uma barra de progresso de 4 etapas em vez de painéis numerados.

A resposta curta

UI/UX Pro Max é uma skill do Claude Code que dá ao Claude uma biblioteca local pesquisável de estilos de design, paletas de cores, pares de fontes e 119 regras de UX, mais um checklist para rodar antes da entrega. Serve para fundadores e pequenas equipes construindo fluxos de reserva, formulários e telas de app que precisam funcionar bem no celular e para todo mundo. Nosso veredito é 5/10: com o mesmo prompt, o Claude puro construiu uma página de reserva acessível quase idêntica, e a skill acrescentou principalmente um fluxo passo a passo no celular e um checklist mais rígido, enquanto o gerador de design system dela errou duas vezes.

Ideal para: Conferir um fluxo de reserva ou de checkout contra regras de acessibilidade e usabilidade no celular antes do lançamento.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale UI/UX Pro Max em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Quando vale a pena usar

Fluxo de reserva que funciona no celular

Você recebe reservas para aulas ou atendimentos e a maioria dos visitantes está no celular. No nosso teste, ela construiu um fluxo em 4 etapas com barra de progresso, uma barra fixa embaixo com sua escolha e o preço e uma data lotada marcada com texto, não só com cor.

Checagem de acessibilidade antes do lançamento

Seu formulário ou página está quase pronto e você quer que todos consigam usá-lo. Peça ao Claude para rodar o checklist da skill: contraste de texto de 4.5 para 1, áreas de toque de 44 pixels, foco visível, erros claros e um teste com texto a 200%.

Fontes e cores para um app

Você está começando uma tela de app ou dashboard e precisa de uma paleta e um par de fontes. A skill pesquisa sua biblioteca de 192 paletas e 74 pares de fontes por tipo de produto, o que funciona melhor para tipos de produto comuns.

Como ter um ótimo resultado

Instale (passos abaixo)
Use no Claude Code com Python 3 no seu computador. A ferramenta de busca usa só Python padrão, então não é preciso instalar mais nada.
Descreva o fluxo e os usuários
Diga o que as pessoas precisam fazer passo a passo, em qual dispositivo, e quaisquer limites reais, como datas ou horários esgotados. A skill começa anotando o tipo de produto, o público, as palavras de estilo e sua stack de tecnologia, e não vai chutar uma stack.
Confira o design system que ela escolhe
O Claude roda uma busca de design system, tenta de novo uma vez se o resultado não servir e te avisa se nada combinar. No nosso teste, as duas tentativas erraram (uma paleta de coworking, depois preto e branco), então ele escolheu estilo, paleta e fontes a partir de buscas separadas.
Deixe ela rodar o checklist
Depois de construir, o Claude passa pelo checklist pré-entrega da skill e, quando possível, tira capturas de tela em tamanhos de celular, paisagem e desktop, nos modos claro e escuro. No nosso teste, isso pegou uma área de toque de 36 pixels de largura e uma barra de resumo que quebrava em quatro linhas.
Conecte a reserva real
Preencha cada [placeholder], como horários de início e a política de cancelamento. O botão Confirm só simula uma reserva, então peça a quem cuida do seu site para conectá-lo ao seu sistema de reservas ou de e-mail.

Este é o prompt exato com que começamos o nosso teste:

O prompt que usamos

Desenhe e construa uma página de reserva de oficinas para a Clay & Co, um único arquivo HTML responsivo, out/index.html (CSS e JS dentro). Fluxo: escolher uma oficina, escolher uma das próximas datas, informar nome e e-mail, confirmar, ver uma confirmação. Próximas datas para todas as oficinas: qui 5 de nov, sáb 7 de nov, qui 12 de nov e sáb 14 de nov de 2026. O sáb 7 de nov está lotado. Precisa funcionar muito bem no celular e ser acessível.

Tudo o que ela criou

Cada peça abaixo é um resultado real do nosso teste, aberta do jeito que você abriria.

Com a skill, no celular — Com a skill: uma etapa por vez com barra de progresso, preços em cada card de oficina e um resumo da reserva ao lado do fluxo; no celular, uma barra fixa embaixo traz Voltar e Continuar.

Sem a skill, no celular — Sem a skill: oficina, data e formulário de contato numa página só, com o sáb 7 de nov riscado como lotado e o total com o Confirm num painel lateral.

Como foi a sessão

A conversa do nosso teste, resumida. Cerca de 15 minutos do primeiro prompt até o resultado final.

Você: Desenhe e construa uma página de reserva de oficinas para a Clay & Co, um único arquivo HTML responsivo (CSS e JS dentro). Fluxo: escolher uma oficina, escolher uma das próximas datas, informar nome e e-mail, confirmar, ver uma confirmação. Próximas datas para todas as oficinas: qui 5 de nov, sáb 7 de nov, qui 12 de nov e sáb 14 de nov de 2026. O sáb 7 de nov está lotado. Precisa funcionar muito bem no celular e ser acessível. [Ficha de dados e 8 fotos da loja anexadas.]
AI: É uma pequena loja artesanal com um fluxo de reserva, usado principalmente no celular. Palavras de estilo: artesanal, acolhedor, calmo. A stack é HTML, CSS e JS simples, como você pediu.
AI: Nenhuma correspondência de produto. Ela sugeriu minimalismo suíço, uma paleta âmbar e "booking blue" de um perfil de coworking e fontes Amatic SC. Não combina.
AI: Essa correspondeu a um estúdio de fotografia: preto e branco, Plus Jakarta Sans. Também fora. A skill diz para parar depois de uma nova tentativa, então nenhum design system verificado foi encontrado e não vou salvá-lo.
AI: Escolhido: o estilo "Nature Distilled" para produtos artesanais, uma paleta terracota acolhedora sobre fundo aveia, Lora com Raleway. Regras de UX: um resumo de erros focável, erros inline, progresso por etapas com Voltar, opções indisponíveis marcadas com texto e não só com cor, foco movido a cada etapa.
AI: Corrigi 7 problemas: um botão oculto que ainda aparecia, um link de cabeçalho de 36px, marcadores de erro desalinhados, uma barra de resumo quebrando em 4 linhas, um vão de imagem nos cards do celular, rótulos de etapa ocultos no celular e uma foto de introdução que empurrava o fluxo para baixo da dobra.
AI: Pronto: out/index.html. O Confirm simula a solicitação, já que não há backend de reservas. Placeholders: horários de início, uma linha por oficina sobre o que se faz, política de pagamento e cancelamento, o que o ateliê envia depois da reserva. Uma vaga por reserva. Cerca de 15 minutos.

O que funcionou e onde deixou a desejar

O que funcionou

Um fluxo no celular mais organizado que o do Claude puro: uma etapa por vez com barra de progresso, uma barra fixa embaixo mostrando sua escolha e o preço ("Make a Mug, Thu, Nov 12, $80") e o Voltar do navegador retornando à etapa anterior.
O checklist pegou pequenos defeitos que o Claude puro não testou: um link de cabeçalho de 36px de largura, abaixo do tamanho de toque de 44px, um botão oculto que ainda aparecia e uma barra de resumo que quebrava em quatro linhas.
O sáb 7 de nov aparece como "Fully booked" com um ícone e borda tracejada, não só por cor, e as datas abertas dizem "Seats available" num verde conferido para contraste.
Ela foi honesta quando o próprio banco de dados errou: relatou os dois resultados de design system inadequados em vez de usá-los.

Onde deixou a desejar

A diferença é pequena: o Claude puro, com o mesmo prompt, construiu quase a mesma página (mesmo título escuro, mesma foto do ateliê, cards com fotos, resumo de erros, data lotada, modo escuro) em cerca de 12 minutos.
O recurso principal da skill, o gerador de design system, errou duas vezes para um ateliê de cerâmica, então o visual final foi escolhido à mão a partir de buscas separadas.
O assistente esconde as datas atrás de um toque em Continue, enquanto a versão do Claude puro mostra oficina, datas e formulário numa tela só; o card de avaliação mostra cinco estrelas cheias para uma nota 4.9.

Quer esse resultado no seu próprio trabalho?

Cadastre-se grátis e instale UI/UX Pro Max em cerca de um minuto. Um email libera os passos de instalação de todas as skills do site.

Prompts que funcionam

Troque as partes entre colchetes pelos seus próprios dados. Não precisa citar a skill: peça o trabalho e sua ferramenta de IA usa a skill sozinha.

Página de reserva de oficina ou aula

Desenhe e construa uma página de reserva para [nome do negócio], um único arquivo HTML responsivo. Fluxo: escolher um(a) [aula / oficina / serviço], escolher uma das próximas datas, informar nome e e-mail, confirmar, ver uma confirmação. Próximas datas: [lista]. [Data] está lotada. Precisa funcionar muito bem no celular e ser acessível. Use só estes dados e marque o resto como [placeholder]: [cole os dados].

Revisão de acessibilidade de uma página

Revise esta página com base nas suas regras de acessibilidade e de toque: contraste, tamanho das áreas de toque, foco, rótulos de formulário e erros. Liste o que falha com a medida e depois corrija. Esta é a página: [cole o HTML ou o arquivo].

Paleta e fontes para um app

Sugira uma paleta de cores e um par de fontes para um app de [tipo de app, ex. meditação / fitness / faturamento] para [público]. Me diga se sua busca encontrou uma correspondência real ou se é uma orientação geral e depois construa a tela inicial.

Conserte um checkout ou formulário confuso

Meu formulário de [checkout / cadastro / contato] é confuso no celular. Refaça com etapas claras, rótulos visíveis, erros inline e um resumo do que a pessoa escolheu. Mantenha meus campos: [liste os campos]. Este é o formulário atual: [cole].

Dicas do nosso teste

Passe os limites reais da sua reserva: datas, horários esgotados, vagas por reserva. No nosso teste, isso a deixou marcar a data lotada com texto e um ícone, não só com cor.
Pergunte ao Claude se a busca de design system encontrou uma correspondência verificada. A skill o instrui a avisar quando uma busca erra, e no nosso teste as duas tentativas erraram para um ateliê de cerâmica.
Diga sua stack de tecnologia, ou diga "um único arquivo HTML". A skill se recusa a supor uma stack, e as orientações de stack dela cobrem 22 opções como React, Next.js, Vue e Flutter, mas não Shopify nem WordPress.
Peça para rodar o checklist com capturas de tela em tamanho de celular, paisagem, desktop e texto a 200%. Foi aí que ela achou defeitos reais no nosso teste.
Decida se você quer uma etapa por vez ou tudo numa página. A skill construiu um assistente de 4 etapas, enquanto o Claude puro manteve todas as etapas visíveis, o que exige menos toques num formulário curto.

O que você precisa: Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior. A ferramenta de busca desta skill precisa de Python 3, e uma instalação no Claude.ai não está documentada, então na prática ela roda no Claude Code..

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA

Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

$npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/ui-ux-pro-max -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: Uma CLI complementar (uipro) também pode instalá-la.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença (MIT) permite o uso. Depois, em 19 de outubro de 2026, instalamos, usamos na tarefa acima sem mudar a skill e anotamos o que aconteceu, inclusive o que deu errado.

Perguntas frequentes

Preciso programar para usar o UI/UX Pro Max?

Não. O Claude roda a ferramenta de busca e escreve o código. Você precisa, sim, julgar as sugestões de design dela, porque no nosso teste os resultados de design system não combinaram com o negócio.

De qual plano ou ferramentas ela precisa?

Skills no app do Claude funcionam em todos os planos, incluindo o Free, com Execução de código e criação de arquivos ativadas; o Claude Code exige Pro ou superior. A ferramenta de busca desta skill também precisa de Python 3 no seu computador, sem pacotes extras.

Ela funciona no Claude.ai ou só no Claude Code?

Ela é feita para o Claude Code, onde você a adiciona como plugin, e um instalador de linha de comando companheiro também pode configurá-la. Uma instalação no Claude.ai não está documentada, e o projeto avisa que o download completo é grande demais para o limite de envio de 200 arquivos do Claude.ai.

É melhor do que simplesmente pedir ao Claude?

Só um pouco, no nosso teste. Com o mesmo prompt de reserva, o Claude puro construiu quase a mesma página, com o mesmo título, cards com fotos, resumo de erros, data lotada e modo escuro. A skill transformou isso num fluxo de 4 etapas com uma barra fixa no celular, e o checklist dela pegou alguns pequenos defeitos, como uma área de toque pequena demais, mas o gerador de design system errou duas vezes.

Ela funciona com o meu construtor de sites ou framework?

Ela tem orientações específicas para 22 stacks de tecnologia, incluindo React, Next.js, Vue, Svelte, Astro, Laravel, SwiftUI, Flutter e HTML simples com Tailwind. Shopify e WordPress não estão na lista, então para eles você recebe só as regras gerais de UX e acessibilidade.