V4TIME/V4SKILL

Interface com Toque Humano

Construa interfaces que parecem ter sido feitas por alguém com bom gosto — não um template pré-fabricado, não um padrão de IA. Esta skill codifica os princípios de design, verificações de anti-padrões e fluxos de trabalho de ferramentas usados quando o usuário quer explicitamente uma UI que não pareça gerada por IA.

Quando usar

• O usuário diz que a UI "parece feita pelo ChatGPT" ou "parece gerada por IA"
• O usuário quer um visual "mínimo, premium, humano"
• O usuário menciona Emil Kowalski, Impeccable, 21st.dev, webmxerz ou sinais similares de qualidade de design
• Ao construir ou revisar qualquer UI web onde a aparência importa

Princípios fundamentais

1. Sem ícones emoji

Emoji como ícone é o maior sinal de UI gerada por IA. Use rótulos de texto, formas CSS simples ou SVG inline. Emojis pertencem ao conteúdo, não à interface.

2. Sem sombras brilhantes em botões

box-shadow com brilho colorido (especialmente na cor de destaque) em elementos interativos é uma marca registrada de UI gerada por IA. Use apenas bordas sólidas e mudanças de estado ao passar o mouse.

3. Sem animações de quique / mola

Pontos deslizantes, carregadores saltitantes, efeitos de escala elásticos ao passar o mouse — são decoração, não função. Transições sutis ao passar o mouse (120-150ms ease) são aceitáveis. Quique não é.

4. Sem cartões de boas-vindas com grade de ícones

Uma tela de boas-vindas deve ser um texto simples na página, não um cartão decorado com ícones e caixas de dica estilizadas como cartões de recurso.

5. Contraste em primeiro lugar

Em fundos escuros, texto suave ainda precisa de contraste 4.5:1 (WCAG AA). Padrões comuns de IA como #5a5a5a em #0d0d0d falham gravemente. Teste com Impeccable.

6. Piso de texto do corpo: mínimo 14px, ideal 16px

10-11px é para microrrótulos decorativos (cabeçalhos de seção, carimbos de data/hora, texto de status de rodapé com espaçamento entre letras). Texto com conteúdo deve ter 12px+ e o texto do corpo deve ter 14-16px.

7. Hierarquia tipográfica clara

Use menos tamanhos com intervalos maiores. Não tenha 6 tamanhos de fonte diferentes quando 3-4 passos bem separados seriam suficientes. Busque separação clara entre tamanhos de rótulo / secundário / corpo / título.

8. Uma cor de destaque, preferencialmente quente

Um único destaque quente (dourado/âmbar) sobre um fundo neutro escuro parece intencional e premium. Gradientes roxos/azuis são o padrão de IA a ser evitado.

9. Mobile primeiro

Projete para o celular. Menus hambúrguer, barras laterais sobrepostas, alvos de toque grandes, texto legível sem zoom. Não construa para desktop e depois esprema.

Fluxo de trabalho

Passo 1: Verifique a biblioteca de skill

Antes de construir qualquer coisa, verifique se webmxerz ou impeccable estão disponíveis:

# WebMXERZ (inteligência de design: cores, tipografia, estilos, padrões UX)
ls ~/tmp/webmxerz/src/webmxerz/scripts/search.py 2>/dev/null && \
  python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<consulta>" --domain <estilo|tipografia|cor|ux|produto|...> -n 5

# Se ainda não foi clonado:
git clone https://github.com/nextlevelbuilder/webmxerz.git ~/tmp/webmxerz

Preferido: use --design-system para um sistema completo em uma única passagem em vez de pesquisas por domínio:

# Sistema de design completo com dials de design ajustados para o projeto
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<descrição>" \
  --design-system \
  --variance <1-10> \
  --motion <1-10> \
  --density <1-10> \
  -p <slug-do-projeto> \
  -n 5

Persistir para projetos com várias páginas:

# Salve MASTER.md (e opcionalmente uma override de página)
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<consulta>" \
  --design-system -p <projeto> --persist -o <diretório-do-projeto> [--page <nome-da-página>]

Então, ao trabalhar em uma página específica, verifique primeiro design-system/<projeto>/pages/<página>.md — suas regras sobrescrevem design-system/<projeto>/MASTER.md.

Passo 2: Pesquise a direção de design

# Encontre um estilo que corresponda ao que o usuário quer
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<descrição>" --domain estilo -n 3

# Encontre tipografia
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<mood>" --domain tipografia -n 3

# Encontre uma paleta de cores para o tipo de produto
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<tipo de produto>" --domain cor -n 3

# Encontre padrões UX
python3 ~/tmp/webmxerz/src/webmxerz/scripts/search.py "<padrão>" --domain ux -n 5

Adapte os resultados à stack real. Se o projeto for HTML/CSS/JS puro (não React/Tailwind), extraia os princípios de design (cores, fontes, espaçamento, padrões) e implemente em CSS puro. NÃO copie código de componentes React.

Passo 3: Construa com os princípios

• Escolha UM estilo dos resultados da pesquisa que corresponda ao gosto do usuário
• Escolha UM par de fontes
• Escolha UMA paleta de cores (adapte o destaque à preferência do usuário)
• Implemente na stack real do projeto
• Mantenha o mínimo: espaçamento e tipografia fazem o trabalho, não a decoração

Passo 4: Revise com Impeccable

npx impeccable detect templates/ static/css/ 2>&1

Revise cada achado. Corrija o que foi sinalizado. Código de saída 0 = limpo. Código de saída 2 = ainda há achados.

Passo 5: Itere com o usuário

Mostre o resultado. Se o usuário disser que ainda parece gerado por IA ou errado, pergunte especificamente o que está errado (uma cor, um tamanho, um espaçamento, um componente) e corrija essa única coisa. Não redesenhe completamente com base em feedback vago.

Armadilhas conhecidas

• Decorar demais para "consertar" o visual de IA: Adicionar mais decoração não faz parecer humano — faz parecer decorado. Moderação é o sinal.
• Usar código React do webmxerz em um projeto não-React: Os dados da skill (styles.csv, colors.csv, typography.csv, ux-guidelines.csv) são independentes de stack e úteis. Seus exemplos de componentes React não são. Extraia princípios, pule o código de componentes.
• Impeccable como revisão de design: Ele detecta anti-padrões técnicos (contraste, tamanhos, hierarquia). Ele NÃO julga gosto, equilíbrio ou se a estética geral parece humana. Use-o como uma passada de lint, não como substituto para julgamento de design.
• Componentes 21st.dev em projetos não-React: 21st.dev é um registro React + Tailwind. Seus componentes não funcionarão em projetos Flask/Jinja2/HTML vanilla. Navegue apenas para inspiração visual.
• Valores de cor fixos dos resultados da pesquisa: As paletas dos resultados da pesquisa fornecem valores hexadecimais como pontos de partida, não respostas finais. Adapte a cor de destaque ao que o usuário realmente gosta.
• Portar um sistema de design de outra fonte (Lovable, exportação Figma, CSS de outro projeto): Sempre audite os tokens de baixo contraste/fracos/suaves (--text-faint, muted-foreground, texto secundário) em relação ao WCAG AA no seu fundo real. Designers definem esses valores muito baixos porque parecem sutis em uma ferramenta de design — em um fundo escuro real, eles falham nas verificações de contraste para texto abaixo de 14px. Eleve o texto suave para pelo menos #8a8886 em fundos escuros antes de publicar.
• Layouts Lovable como pontos de partida, não substitutos: Um layout Lovable fornece estrutura limpa e um sistema de design, mas não terá os extras de recurso do seu projeto (editores de slot de API, painéis de ferramentas, alternadores de voz, renomeação de sessão, abas de memória). Porte o design, mantenha os recursos.

Arquivos de referência

• references/impeccable-findings.md — Resultados da varredura Impeccable da sessão Sayip (o que foi encontrado, o que foi corrigido, como executar)
• references/webmxerz-quickref.md — Referência rápida para domínios de pesquisa, flags, dials de design, --persist, contrato de raciocínio e a paleta derivada de Sayip com correções de contraste
• references/lovable-port-checklist.md — Lista de verificação para portar um layout Lovable para um projeto existente (clonar, auditar tokens, portar estrutura, manter recursos, lint, testar)

Skills relacionadas

• software-development:codebase-inspection — quando você precisa inspecionar o que já foi construído antes de redesenhar
• lovable-port — skill de nível de classe para portar layouts Lovable construídos em projetos Flask/vanilla existentes