lexuanthanhhy/MKT.LANDINGPAGE.SKILLS

UI/UX Pro Max - Inteligência de Design

Guia abrangente de design para aplicações web e mobile. Contém 67 estilos, 96 paletas de cores, 57 pares de fontes, 99 diretrizes de UX e 25 tipos de gráficos em 13 stacks de tecnologia. Banco de dados pesquisável com recomendações baseadas em prioridade.

Quando Aplicar

Consulte estas diretrizes quando:

• Projetar novos componentes ou páginas de UI
• Escolher paletas de cores e tipografia
• Revisar código em busca de problemas de UX
• Criar landing pages ou dashboards
• Implementar requisitos de acessibilidade

Categorias de Regras por Prioridade

Prioridade	Categoria	Impacto	Domínio
1	Acessibilidade	CRÍTICO	ux
2	Toque e Interação	CRÍTICO	ux
3	Performance	ALTO	ux
4	Layout e Responsividade	ALTO	ux
5	Tipografia e Cor	MÉDIO	typography, color
6	Animação	MÉDIO	ux
7	Seleção de Estilo	MÉDIO	style, product
8	Gráficos e Dados	BAIXO	chart

Referência Rápida

1. Acessibilidade (CRÍTICO)

• color-contrast - Proporção mínima de 4,5:1 para texto normal
• focus-states - Anéis de foco visíveis em elementos interativos
• alt-text - Texto alternativo descritivo para imagens significativas
• aria-labels - aria-label para botões apenas com ícone
• keyboard-nav - Ordem de tabulação corresponde à ordem visual
• form-labels - Usar label com atributo for

2. Toque e Interação (CRÍTICO)

• touch-target-size - Alvos de toque mínimo de 44x44px
• hover-vs-tap - Usar clique/toque para interações primárias
• loading-buttons - Desabilitar botão durante operações assíncronas
• error-feedback - Mensagens de erro claras perto do problema
• cursor-pointer - Adicionar cursor-pointer a elementos clicáveis

3. Performance (ALTO)

• image-optimization - Usar WebP, srcset, lazy loading
• reduced-motion - Verificar prefers-reduced-motion
• content-jumping - Reservar espaço para conteúdo assíncrono

4. Layout e Responsividade (ALTO)

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - Mínimo de 16px para texto do corpo no mobile
• horizontal-scroll - Garantir que o conteúdo caiba na largura da viewport
• z-index-management - Definir escala de z-index (10, 20, 30, 50)

5. Tipografia e Cor (MÉDIO)

• line-height - Usar 1,5-1,75 para texto do corpo
• line-length - Limitar a 65-75 caracteres por linha
• font-pairing - Combinar personalidades de fonte de título/corpo

6. Animação (MÉDIO)

• duration-timing - Usar 150-300ms para microinterações
• transform-performance - Usar transform/opacity, não width/height
• loading-states - Telas esqueleto ou spinners

7. Seleção de Estilo (MÉDIO)

• style-match - Combinar estilo ao tipo de produto
• consistency - Usar o mesmo estilo em todas as páginas
• no-emoji-icons - Usar ícones SVG, não emojis

8. Gráficos e Dados (BAIXO)

• chart-type - Combinar tipo de gráfico ao tipo de dado
• color-guidance - Usar paletas de cores acessíveis
• data-table - Fornecer alternativa de tabela para acessibilidade

Como Usar

Pesquise domínios específicos usando a ferramenta CLI abaixo.

---

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 SO 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 Este Skill

Quando o usuário solicitar trabalho de UI/UX (design, construir, criar, implementar, revisar, corrigir, melhorar), siga este workflow:

Etapa 1: Analisar Requisitos do Usuário

Extraia informações-chave da solicitação do usuário:

• Tipo de produto: SaaS, e-commerce, portfólio, dashboard, landing page, etc.
• Palavras-chave de estilo: minimalista, lúdico, profissional, elegante, modo escuro, etc.
• Indústria: saúde, fintech, jogos, educação, etc.
• Stack: React, Vue, Next.js, ou padrão para html-tailwind

Etapa 2: Gerar Sistema de Design (OBRIGATÓRIO)

Sempre comece com --design-system para obter recomendações abrangentes com justificativa:

python3 skills/ui-ux-pro-max/scripts/search.py "<tipo_produto> <indústria> <palavras-chave>" --design-system [-p "Nome do Projeto"]

Este comando:

1. Pesquisa 5 domínios em paralelo (product, style, color, landing, typography)
2. Aplica regras de raciocínio de ui-reasoning.csv para selecionar as melhores correspondências
3. Retorna sistema de design completo: padrão, estilo, cores, tipografia, efeitos
4. Inclui antipadrões a evitar

Exemplo:

python3 skills/ui-ux-pro-max/scripts/search.py "beleza spa bem-estar serviço" --design-system -p "Serenity Spa"

Etapa 2b: Persistir Sistema de Design (Padrão Mestre + Substituições)

Para salvar o sistema de design para recuperação hierárquica entre sessões, adicione --persist:

python3 skills/ui-ux-pro-max/scripts/search.py "<consulta>" --design-system --persist -p "Nome do Projeto"

Isso cria:

• design-system/MASTER.md — Fonte Global da Verdade com todas as regras de design
• design-system/pages/ — Pasta para substituições específicas de página

Com substituição específica de página:

python3 skills/ui-ux-pro-max/scripts/search.py "<consulta>" --design-system --persist -p "Nome do Projeto" --page "dashboard"

Isso também cria:

• design-system/pages/dashboard.md — Desvios específicos da página em relação ao Mestre

Como funciona a recuperação hierárquica:

1. Ao construir uma página específica (ex.: "Checkout"), primeiro verifique design-system/pages/checkout.md
2. Se o arquivo da página existir, suas regras substituem o arquivo Mestre
3. Se não, use exclusivamente design-system/MASTER.md

Etapa 3: Complementar com Pesquisas Detalhadas (conforme necessário)

Após obter o sistema de design, use pesquisas de domínio para obter detalhes adicionais:

python3 skills/ui-ux-pro-max/scripts/search.py "<palavra-chave>" --domain <domínio> [-n <max_resultados>]

Quando usar pesquisas detalhadas:

Necessidade	Domínio	Exemplo
Mais opções de estilo	style	--domain style "glassmorphism escuro"
Recomendações de gráfico	chart	--domain chart "dashboard em tempo real"
Melhores práticas de UX	ux	--domain ux "animação acessibilidade"
Fontes alternativas	typography	--domain typography "elegante luxo"
Estrutura de landing	landing	--domain landing "hero prova-social"

Etapa 4: Diretrizes do Stack (Padrão: html-tailwind)

Obtenha melhores práticas específicas de implementação. Se o usuário não especificar um stack, use o padrão html-tailwind.

python3 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, jetpack-compose

---

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, brutalism
typography	Pares de fontes, Google Fonts	elegante, lúdico, 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-centrado, depoimento, preços, prova-social
chart	Tipos de gráfico, recomendações de biblioteca	tendência, comparação, linha do tempo, funil, pizza
ux	Melhores práticas, antipadrões	animação, acessibilidade, z-index, carregamento
react	Performance React/Next.js	waterfall, bundle, suspense, memo, rerender, cache
web	Diretrizes de interface web	aria, foco, teclado, semântica, virtualizar
prompt	Prompts de IA, palavras-chave CSS	(nome do estilo)

Stacks Disponíveis

Stack	Foco
html-tailwind	Utilitários Tailwind, responsivo, a11y (PADRÃO)
react	Estado, hooks, performance, 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
jetpack-compose	Composáveis, Modificadores, Hoisting de Estado, Recomposition

---

Exemplo de Workflow

Solicitação do usuário: "Criar landing page para serviço de cuidados com a pele profissional"

Etapa 1: Analisar Requisitos

• Tipo de produto: Serviço de Beleza/Spa
• Palavras-chave de estilo: elegante, profissional, suave
• Indústria: Beleza/Bem-estar
• Stack: html-tailwind (padrão)

Etapa 2: Gerar Sistema de Design (OBRIGATÓRIO)

python3 skills/ui-ux-pro-max/scripts/search.py "beleza spa bem-estar serviço elegante" --design-system -p "Serenity Spa"

Saída: Sistema de design completo com padrão, estilo, cores, tipografia, efeitos e antipadrões.

Etapa 3: Complementar com Pesquisas Detalhadas (conforme necessário)

# Obter diretrizes de UX para animação e acessibilidade
python3 skills/ui-ux-pro-max/scripts/search.py "animação acessibilidade" --domain ux

# Obter opções de tipografia alternativas, se necessário
python3 skills/ui-ux-pro-max/scripts/search.py "elegante luxo serifa" --domain typography

Etapa 4: Diretrizes do Stack

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsivo formulário" --stack html-tailwind

Em seguida: Sintetize o sistema de design + pesquisas detalhadas e implemente o design.

---

Formatos de Saída

A flag --design-system suporta dois formatos de saída:

# Caixa ASCII (padrão) - melhor para exibição no terminal
python3 skills/ui-ux-pro-max/scripts/search.py "fintech cripto" --design-system

# Markdown - melhor para documentação
python3 skills/ui-ux-pro-max/scripts/search.py "fintech cripto" --design-system -f markdown

---

Dicas para Melhores Resultados

1. Seja específico com palavras-chave - "dashboard SaaS saúde" > "app"
2. Pesquise várias vezes - Palavras-chave diferentes revelam insights diferentes
3. Combine domínios - Estilo + Tipografia + Cor = Sistema de design completo
4. Sempre verifique UX - Pesquise "animação", "z-index", "acessibilidade" para problemas comuns
5. Use a flag de stack - Obtenha melhores práticas específicas de implementação
6. 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 não 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 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 diferentes tamanhos de ícone aleatoriamente

Interação e Cursor

Regra	Faça	Não Faça
Cursor pointer	Adicione cursor-pointer a todos os cards clicáveis/interativos	Deixe o cursor padrão em elementos interativos
Feedback hover	Forneça feedback visual (cor, sombra, borda)	Sem 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
Card glass modo claro	Use bg-white/80 ou opacidade maior	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 a top-0 left-0 right-0
Padding do conteúdo	Considere a altura da navbar fixa	Deixe o conteúdo esconder atrás de elementos fixos
max-width consistente	Use o mesmo max-w-6xl ou max-w-7xl	Misture diferentes larguras de container

---

Checklist Pré-Entrega

Antes de entregar o código de UI, verifique estes itens:

Qualidade Visual

• Nenhum emoji usado como ícone (use SVG em vez disso)
• Todos os ícones de um conjunto consistente (Heroicons/Lucide)
• Logotipos de marca estão corretos (verificados no Simple Icons)
• Estados de hover não causam deslocamento de layout
• Use cores do 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 (mínimo 4,5:1)
• Elementos glass/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 375px, 768px, 1024px, 1440px
• Sem scroll horizontal no mobile

Acessibilidade

• Todas as imagens têm texto alternativo
• Inputs de formulário têm labels
• Cor não é o único indicador
• prefers-reduced-motion respeitado