83.3K+Baixar
Ir para o guia de uso
ui-ux-pro-maxpor nextlevelbuilder

UI UX Pro Max Skill.

Uma skill de Claude Code e Codex para design de UI: inteligência de design UI/UX para web, mobile e desktop: layout, cor, tipografia e regras de UX.

  • Web & UI
  • Código de UI
Baixar OpenDesignVer guia de uso
nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-ux-pro-max/SKILL.mdSKILL.md
--- name: ui-ux-pro-max description: UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, … --- ## When to Apply ## Rule Categories by Priority ## Running the search tool ## Workflow ## Query Contract ## If a search returns 0 results
Front matter e títulos de seção lidos do arquivo upstream em 14/09/2026 · 15.922 caracteres no total

01 O que faz

O que o skill ui-ux-pro-max Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

UI/UX Pro Max é um skill de inteligência de design pesquisável para interfaces web, mobile e desktop. Ele consulta 79 estilos (50 ativos), 192 paletas de produto com perfis de raciocínio, 74 combinações de fontes, 119 diretrizes de UX, 105 ícones, 17 presets de GSAP, 25 tipos de gráficos e 22 stacks de tecnologia. Use-o para projetar páginas, escolher cores e tipografia, revisar a UI quanto a acessibilidade e consistência, implementar navegação e animação, ou melhorar a usabilidade.

Ele detecta automaticamente a stack a partir de package.json, pubspec.yaml ou xcodeproj e gera um design system com persistência opcional para recuperação entre sessões. Três parâmetros de design (variância, movimento, densidade) ajustam o resultado. O skill oferece buscas específicas por domínio para UX, cor, tipografia, ícones, GSAP e orientações de implementação específicas da stack.

O que ele produz

  • Design system com padrão, estilo, cores, tipografia, efeitos e antipadrões em formato ASCII, markdown ou JSON
  • design-system/project-slug/pages/page-name.md para substituições específicas de página quando --page é informado
  • Resultados específicos por domínio (diretrizes de UX, paletas de cores, combinações de fontes, ícones, presets de GSAP, recomendações de gráficos, orientações de implementação de stack)
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Analisar Requisitos

    Extrair o tipo de produto (SaaS, e-commerce, dashboard), o público-alvo, palavras-chave de estilo (divertido, minimalista, modo escuro) e detectar a stack a partir de package.json, pubspec.yaml, xcodeproj ou app.json.

  2. 02
    Gerar Design System

    Execute search.py com --design-system para novas páginas ou projetos.

  3. 03
    Persistir como Master com Substituições

    Adicione --persist e --output-dir apontando para a raiz do projeto para gravar design-system/project-slug/MASTER.md. Substituições específicas de página vão em pages/page-name.md.

  4. 04
    Complementar com Buscas por Domínio

    Consulte um único domínio (ux, color, typography, icons, gsap, chart, landing, google-fonts) com 2 a 5 termos significativos e uma restrição.

  5. 05
    Diretrizes de Query Stack

    Use --stack com a stack detectada (react, nextjs, vue, swiftui, flutter etc.) para orientação específica de implementação.

  6. 06
    Verificar Regras de pré-entrega

    Antes de entregar a UI do app, leia references/pro-rules.md e percorra sua Pre-Delivery Checklist canônica, que cobre disciplina de ícones, feedback de interação, contraste em modo claro/escuro, layout de área segura e acessibilidade para UI de apps nativos/mobile.

02 Encontre o ideal para você

Quando Usar o ui-ux-pro-max Skill

Use o ui-ux-pro-max skill no Claude Code ou Codex quando o trabalho for UI design deste tipo. Adequação e limites abaixo são tirados do próprio arquivo do skill.

Boa Combinação

  • Projetar novas páginas ou criar e refatorar componentes de UI
  • Escolher cor, tipografia, espaçamento ou sistemas de layout
  • Revisar UI quanto a UX, acessibilidade ou consistência
  • Implementar navegação, animação ou comportamento responsivo
  • Melhorar a qualidade percebida e a usabilidade de uma interface

Conheça os Limites

  • Lógica de backend pura, design de API ou banco de dados
  • Trabalho de performance não visual, infraestrutura ou DevOps
  • Scripts não visuais, a menos que a tarefa altere a aparência, a sensação, o movimento ou a interação de algo

O Que Fornecer

  • Tipo de produto e públicoSaaS, e-commerce, portfólio, dashboard, entretenimento, ferramenta ou produtividade, além da faixa etária e do contexto de uso (deslocamento, lazer, trabalho)
  • Palavras-chave de estiloDivertido, vibrante, minimalista, modo escuro, com foco em conteúdo, imersivo ou outros adjetivos que descrevam a direção visual desejada
  • Nome do projeto para persistênciaPasse -p "Project Name" para --design-system para nomear o subdiretório do design system e o arquivo MASTER.md
  • Controles de design (opcional)Três controles deslizantes de 1 a 10: --variance (centrado a ousado/assimétrico), --motion (sutil a coreografia complexa), --density (espaçoso a denso/escala de espaçamento de dashboard)

03 Dentro da skill

Regras que a Skill ui-ux-pro-max Fornece ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. Acessibilidade em Primeiro Lugar

    Prioridade 1 (CRÍTICA). Garanta contraste de 4.5:1, texto alternativo, navegação por teclado e aria-labels. Nunca remova anéis de foco nem use botões apenas com ícone sem rótulos.

  2. Áreas de Toque com Mínimo de 44×44px

    Prioridade 2 (CRÍTICA). Toque e interação devem ter tamanho mínimo de 44×44px, espaçamento de 8px ou mais e feedback de carregamento. Evite depender apenas de hover e mudanças de estado instantâneas (0ms).

  3. Tentar Novamente uma Vez em Resultados Vazios

    Se a busca retornar 0 resultados, tente novamente uma vez com uma query mais restrita ou domínio/stack explícito.

  4. Usar o Modo de Busca Mais Restrito

    Escolha --design-system para um novo projeto ou página, um --domain explícito para uma questão específica ou bug de componente, --stack para uma stack de implementação conhecida.

  5. Nunca Presuma uma Stack

    Detecte a stack a partir de package.json, pubspec.yaml, xcodeproj, Package.swift, composer.json ou app.json. Se nada puder ser detectado e a orientação de stack for relevante, pergunte ao usuário.

  6. Invoque a Busca pelo Caminho Completo

    Sempre execute python "${CLAUDE_PLUGIN_ROOT}/.claude/skills/ui-ux-pro-max/scripts/search.py" com o caminho completo, não relativo.

  7. Não Sobrescreva o Master Sem Autorização

    Se design-system/project-slug/MASTER.md existir, --persist pula a escrita e o deixa intocado, a menos que --force seja passado.

  8. Consulte o Resultado Semântico Antes da Stack

    Para bugs de layout de texto e componentes compactos, busque primeiro o resultado semântico de UX (equilíbrio de linhas em títulos órfãos, quebra de rótulos em badges/chips), depois a stack detectada para a implementação.

04 Coloque em prática

Instale ui-ux-pro-max no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione ui-ux-pro-max ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Forma genérica da CLI skills para .claude/skills/ui-ux-pro-max/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê ao Skill uma Primeira Tarefa de Design de UI

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt
Design a dashboard page for a SaaS analytics product targeting data teams. The interface should feel modern and minimal with good dark mode support. Use the detected Next.js stack for implementation guidance. Persist the design system so the team can reference it across sessions.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Verifique o domínio retornado, a identidade do melhor resultado e a adequação ao produto e à plataforma do usuário antes de aplicar os resultados da busca
  • Tente novamente uma vez com uma reescrita mais restrita ou domínio/stack explícito quando o resultado estiver vazio ou fora do tópico.
  • Leia um MASTER.md existente antes de decidir se --force é justificado para regerá-lo
  • Para trabalho de acessibilidade, consulte um resultado observável por vez usando termos explícitos de resultado de acessibilidade e verifique se o resultado corresponde à interação específica ou ao critério WCAG

No OpenDesign ui-ux-pro-max já está incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
nextlevelbuilder
Repository
github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Arquivo da skill
.claude/skills/ui-ux-pro-max/SKILL.md Checksum de conteúdo registrado na verificação; commit 7f69fed
License
MIT De LICENSE.
Estrelas do repositório
127.450 Snapshot do GitHub capturado em 2026-09-14 para todo o repositório nextlevelbuilder/ui-ux-pro-max-skill, que contém 7 skills neste catálogo. Não é uma classificação ou contagem de uso para ui-ux-pro-max.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Quando AplicarUse para estrutura de UI, design visual, interação, qualidade de UX. Não use para backend, API, infraestrutura.
  2. Categorias de Regras por Prioridade10 categorias, de Acessibilidade (CRÍTICA) a Gráficos (BAIXA), com verificações-chave e antipadrões
  3. Executando a ferramenta de buscaInvoque o search.py pelo caminho completo a partir do diretório do skill. Requer Python 3.x, sem dependências externas.
  4. Contrato de ConsultaEscolha o menor modo de busca. Uma intenção dominante, 2-5 termos, verifique domínio/adequação, tente novamente uma vez se estiver vazio.
  5. Passo 1: Analisar os Requisitos do UsuárioExtraia o tipo de produto, público, palavras-chave de estilo e detecte a stack a partir de package.json ou equivalente.
  6. Passo 2: Gerar Sistema de DesignUse --design-system para novas páginas/projetos. Agrega correspondências de produto/estilo/cor/landing/tipografia.
  7. Passo 2b: Persistir Sistema de DesignAdicione --persist e --output-dir para gravar o MASTER.md. Master existente é ignorado, a menos que --force seja autorizado.
  8. Passo 2c: Controles de DesignSliders opcionais de 1 a 10 para variância, movimento e densidade para ajustar a saída de --design-system.
  9. Passo 3: Complementar com Buscas DetalhadasConsulte os domínios produto, estilo, cor, tipografia, google-fonts, gráfico, ux, landing, ícones, gsap, react, web.
  10. Etapa 4: Diretrizes de StackUse --stack com a stack detectada para orientação específica de implementação. 22 stacks disponíveis.
  11. Se uma busca retornar 0 resultadosTente novamente uma vez com uma consulta mais restrita. Se ainda estiver vazia, recorra à tabela de prioridades e informe o usuário.
  12. Dicas para Melhores ResultadosUma intenção, de 2 a 5 termos por consulta. Tente novamente uma vez. Use --design-system para novos casos, --domain para casos focados.
A Descrição da Própria Skill
"Inteligência de design UI/UX para web, mobile e desktop. Esta skill deve ser usada ao projetar, construir, revisar ou corrigir interfaces, incluindo páginas, componentes, sistemas de design, acessibilidade, interação, layout responsivo, tipografia, cor, gráficos e implementação de UI específica de stack. Dados locais pesquisáveis: 79 estilos pesquisáveis (50 ativos), 192 paletas de produto e perfis de raciocínio, 74 pares de fontes, 119 diretrizes de UX, 105 ícones, 17 presets GSAP, 25 tipos de gráficos e 22 stacks."

Descrição do front-matter do SKILL.md. O arquivo completo tem aproximadamente 15.922 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill ui-ux-pro-max

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O que a skill precisa para funcionar?

O script de busca requer Python 3.x, sem dependências externas. Ele deve ser chamado pelo caminho completo a partir do diretório da skill, usando python, python3 ou py -3. O README contém instruções de instalação caso o Python esteja ausente.

Como faço para substituir o design system em uma página específica?

Passe --page "page-name" ao persistir para criar design-system/project-slug/pages/page-name.md. Ao construir essa página, o agente lê primeiro o MASTER.md e depois verifica se pages/page-name.md existe. Se existir, suas regras têm prioridade sobre o Master. Caso contrário, as regras do Master são usadas exclusivamente.

UI UX Pro Max

Execute ui-ux-pro-max em uma Tarefa Real de Design de UI.

A skill ui-ux-pro-max já vem dentro do OpenDesign. Baixe o aplicativo, selecione a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max