O que UX Pro Max - Inteligência de Design faz?
Base de dados pesquisável de estilos de UI, paletas de cores, pares de fontes, tipos de gráfico, recomendações de produtos, diretrizes de UX e melhores práticas específicas para cada stack.
Pré-requisitos
Verifique se o Python está instalado:
python3 --version || python --version
Se o Python não estiver instalado, instale-o de acordo com o sistema operacional do usuário:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
Como Usar Esta Skill
Quando o usuário solicitar trabalho de UI/UX (design, construir, criar, implementar, revisar, corrigir, melhorar), siga este fluxo de trabalho:
Passo 1: Analisar os Requisitos do Usuário
Extraia as principais informações da solicitação do usuário:
- Tipo de produto: SaaS, e-commerce, portfólio, dashboard, landing page, etc.
- Palavras-chave de estilo: minimalista, divertido, profissional, elegante, modo escuro, etc.
- Setor: saúde, fintech, jogos, educação, etc.
- Stack: React, Vue, Next.js, ou padrão para
html-tailwind
Passo 2: Pesquisar Domínios Relevantes
Use search.py várias vezes para coletar informações abrangentes. Pesquise até ter contexto suficiente.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --domínio <domínio> [-n <max_resultados>]
Ordem de pesquisa recomendada:
- Produto - Obter recomendações de estilo para o tipo de produto
- Estilo - Obter guia de estilo detalhado (cores, efeitos, frameworks)
- Tipografia - Obter pares de fontes com importações do Google Fonts
- Cor - Obter paleta de cores (Primária, Secundária, CTA, Fundo, Texto, Borda)
- Landing - Obter estrutura da página (se for landing page)
- Gráfico - Obter recomendações de gráficos (se for dashboard/analytics)
- UX - Obter melhores práticas e anti-padrões
- Stack - Obter diretrizes específicas para a stack (padrão: html-tailwind)
Passo 3: Diretrizes da Stack (Padrão: html-tailwind)
Se o usuário não especificar uma stack, use html-tailwind como padrão.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --stack html-tailwind
Stacks disponíveis: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
Referência de Pesquisa
Domínios Disponíveis
| Domínio | Uso | Exemplos de Palavras-chave |
|---|---|---|
product | Recomendações de tipo de produto | SaaS, e-commerce, portfólio, saúde, beleza, serviço |
style | Estilos de UI, cores, efeitos | glassmorphism, minimalismo, modo escuro, brutalismo |
typography | Pares de fontes, Google Fonts | elegante, divertido, profissional, moderno |
color | Paletas de cores por tipo de produto | saas, ecommerce, saúde, beleza, fintech, serviço |
landing | Estrutura de página, estratégias de CTA | hero, hero-centric, depoimento, preços, prova-social |
chart | Tipos de gráfico, recomendações de bibliotecas | tendência, comparação, linha do tempo, funil, pizza |
ux | Melhores práticas, anti-padrões | animação, acessibilidade, z-index, carregamento |
prompt | Prompts de IA, palavras-chave CSS | (nome do estilo) |
Stacks Disponíveis
| Stack | Foco |
|---|---|
html-tailwind | Utilidades Tailwind, responsivo, acessibilidade (PADRÃO) |
react | Estado, hooks, desempenho, padrões |
nextjs | SSR, roteamento, imagens, rotas de API |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, stores, SvelteKit |
swiftui | Views, Estado, Navegação, Animação |
react-native | Componentes, Navegação, Listas |
flutter | Widgets, Estado, Layout, Temas |
shadcn | Componentes shadcn/ui, temas, formulários, padrões |
Exemplo de Fluxo de Trabalho
Solicitação do usuário: "Criar landing page para serviço profissional de cuidados com a pele"
A IA deve:
# 1. Pesquisar tipo de produto
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beleza spa bem-estar serviço" --domínio product
# 2. Pesquisar estilo (com base no setor: beleza, elegante)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegante minimalista suave" --domínio style
# 3. Pesquisar tipografia
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegante luxo" --domínio typography
# 4. Pesquisar paleta de cores
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beleza spa bem-estar" --domínio color
# 5. Pesquisar estrutura de landing page
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric prova-social" --domínio landing
# 6. Pesquisar diretrizes de UX
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animação" --domínio ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "acessibilidade" --domínio ux
# 7. Pesquisar diretrizes da stack (padrão: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsivo" --stack html-tailwind
Em seguida: Sintetize todos os resultados da pesquisa e implemente o design.
Dicas para Melhores Resultados
- Seja específico com as palavras-chave - "dashboard SaaS para saúde" > "app"
- Pesquise várias vezes - Palavras-chave diferentes revelam insights diferentes
- Combine domínios - Estilo + Tipografia + Cor = Sistema de design completo
- Sempre verifique UX - Pesquise "animação", "z-index", "acessibilidade" para problemas comuns
- Use a flag de stack - Obtenha melhores práticas específicas para a implementação
- Itere - Se a primeira pesquisa não corresponder, tente palavras-chave diferentes
Regras Comuns para UI Profissional
Estes são problemas frequentemente negligenciados que fazem a UI parecer pouco profissional:
Ícones e Elementos Visuais
| Regra | Faça | Não Faça |
|---|---|---|
| Sem ícones de emoji | Use ícones SVG (Heroicons, Lucide, Simple Icons) | Use emojis como 🎨 🚀 ⚙️ como ícones de UI |
| Estados de hover estáveis | Use transições de cor/opacidade no hover | Use transformações de escala que deslocam o layout |
| Logotipos de marca corretos | Pesquise o SVG oficial do Simple Icons | Adivinhe ou use caminhos de logotipo incorretos |
| Tamanho de ícone consistente | Use viewBox fixo (24x24) com w-6 h-6 | Misture tamanhos de ícone diferentes aleatoriamente |
Interação e Cursor
| Regra | Faça | Não Faça |
|---|---|---|
| Cursor pointer | Adicione cursor-pointer a todos os cartões clicáveis/com hover | Deixe o cursor padrão em elementos interativos |
| Feedback de hover | Forneça feedback visual (cor, sombra, borda) | Nenhuma indicação de que o elemento é interativo |
| Transições suaves | Use transition-colors duration-200 | Mudanças instantâneas de estado ou muito lentas (>500ms) |
Contraste Modo Claro/Escuro
| Regra | Faça | Não Faça |
|---|---|---|
| Cartão glass modo claro | Use bg-white/80 ou opacidade mais alta | Use bg-white/10 (muito transparente) |
| Contraste de texto claro | Use #0F172A (slate-900) para texto | Use #94A3B8 (slate-400) para texto do corpo |
| Texto suave claro | Use #475569 (slate-600) no mínimo | Use gray-400 ou mais claro |
| Visibilidade da borda | Use border-gray-200 no modo claro | Use border-white/10 (invisível) |
Layout e Espaçamento
| Regra | Faça | Não Faça |
|---|---|---|
| Navbar flutuante | Adicione espaçamento top-4 left-4 right-4 | Cole a navbar em top-0 left-0 right-0 |
| Padding do conteúdo | Considere a altura da navbar fixa | Deixe o conteúdo escondido atrás de elementos fixos |
| Largura máxima consistente | Use o mesmo max-w-6xl ou max-w-7xl | Misture larguras de contêiner diferentes |
Checklist de Pré-Entrega
Antes de entregar o código de UI, verifique estes itens:
Qualidade Visual
- Nenhum emoji usado como ícone (use SVG)
- Todos os ícones de um conjunto consistente (Heroicons/Lucide)
- Logotipos de marca corretos (verificados no Simple Icons)
- Estados de hover não causam deslocamento de layout
- Use cores de tema diretamente (bg-primary) não wrapper var()
Interação
- Todos os elementos clicáveis têm
cursor-pointer - Estados de hover fornecem feedback visual claro
- Transições são suaves (150-300ms)
- Estados de foco visíveis para navegação por teclado
Modo Claro/Escuro
- Texto no modo claro tem contraste suficiente (4,5:1 mínimo)
- Elementos de vidro/transparentes visíveis no modo claro
- Bordas visíveis em ambos os modos
- Teste ambos os modos antes da entrega
Layout
- Elementos flutuantes têm espaçamento adequado das bordas
- Nenhum conteúdo escondido atrás de navbars fixas
- Responsivo em 320px, 768px, 1024px, 1440px
- Sem rolagem horizontal no mobile
Acessibilidade
- Todas as imagens têm texto alternativo
- Campos de formulário têm rótulos
- Cor não é o único indicador
-
prefers-reduced-motionrespeitado