leonxlnx/taste-skill

Skill de Redesign

Como Funciona

Quando aplicada a um projeto existente, siga esta sequência:

1. Escaneie — Leia o código-fonte. Identifique o framework, o método de estilização (Tailwind, CSS puro, styled-components, etc.) e os padrões de design atuais.
2. Diagnostique — Execute a auditoria abaixo. Liste cada padrão genérico, ponto fraco e estado ausente encontrado.
3. Corrija — Aplique melhorias direcionadas trabalhando com a pilha existente. Não reescreva do zero. Melhore o que já existe.

Auditoria de Design

Tipografia

Verifique estes problemas e corrija-os:

• Fontes padrão do navegador ou Inter em todo lugar. Substitua por uma fonte com personalidade. Boas opções: Geist, Outfit, Cabinet Grotesk, Satoshi. Para projetos editoriais/criativos, combine um cabeçalho serifado com um corpo sem serifa.
• Títulos sem presença. Aumente o tamanho para textos de destaque, aperte o espaçamento entre letras, reduza a altura da linha. Os títulos devem parecer pesados e intencionais.
• Corpo do texto muito largo. Limite a largura do parágrafo a aproximadamente 65 caracteres. Aumente a altura da linha para legibilidade.
• Apenas pesos Regular (400) e Bold (700) usados. Introduza pesos Medium (500) e SemiBold (600) para uma hierarquia mais sutil.
• Números em fonte proporcional. Use uma fonte monoespaçada ou ative figuras tabulares (font-variant-numeric: tabular-nums) para interfaces com muitos dados.
• Ajustes de espaçamento entre letras ausentes. Use tracking negativo para títulos grandes e tracking positivo para letras maiúsculas ou rótulos.
• Subtítulos em letras maiúsculas por toda parte. Tente itálico minúsculo, frase com inicial maiúscula ou versaletes.
• Palavras órfãs. Palavras isoladas na última linha de um parágrafo. Corrija com text-wrap: balance ou text-wrap: pretty.

Cor e Superfícies

• Fundo puro #000000. Substitua por preto suave, carvão escuro ou escuro matizado (#0a0a0a, #121212, ou um azul marinho escuro).
• Cores de destaque supersaturadas. Mantenha a saturação abaixo de 80%. Dessature os destaques para que se misturem com os neutros, em vez de gritarem.
• Mais de uma cor de destaque. Escolha uma. Remova as outras. Consistência supera variedade.
• Mistura de cinzas quentes e frios. Mantenha-se em uma família de cinza. Tingir todos os cinzas com um matiz consistente (quente ou frio, não ambos).
• Estética de "gradiente de IA" roxo/azul. Esta é a impressão digital de design de IA mais comum. Substitua por bases neutras e um único destaque bem pensado.
• box-shadow genérico. Tingir as sombras para combinar com o matiz do fundo. Use sombras coloridas (por exemplo, sombra azul escura em um fundo azul) em vez de preto puro com baixa opacidade.
• Design plano com textura zero. Adicione ruído sutil, granulação ou micropadrões aos fundos. Vetores planos puros parecem estéreis.
• Gradientes perfeitamente uniformes. Quebre a uniformidade com gradientes radiais, sobreposições de ruído ou gradientes mesh em vez de desbotamentos lineares padrão de 45 graus.
• Direção de iluminação inconsistente. Audite todas as sombras para garantir que sugiram uma única fonte de luz consistente.
• Seções escuras aleatórias em uma página de modo claro (ou vice-versa). Uma única seção de fundo escuro quebrando uma página clara parece um acidente de copiar e colar. Comprometa-se com um modo escuro completo ou mantenha um tom de fundo consistente em toda a página. Se o contraste for necessário, use um tom ligeiramente mais escuro da mesma paleta — não um salto repentino para #111 no meio de uma página creme.
• Seções vazias e planas, sem profundidade visual. Seções que são apenas texto em um fundo simples parecem inacabadas. Adicione imagens de fundo de alta qualidade (desfocadas, sobrepostas ou mascaradas), padrões sutis ou gradientes ambiente. Use fontes de placeholder confiáveis como https://picsum.photos/seed/{nome}/1920/1080 quando ativos reais não estiverem disponíveis. Experimente imagens de fundo atrás de seções de herói, blocos de recursos ou CTAs — até mesmo uma foto de largura total sutil com baixa opacidade adiciona presença.

Layout

• Tudo centralizado e simétrico. Quebre a simetria com margens deslocadas, proporções mistas ou cabeçalhos alinhados à esquerda sobre conteúdo centralizado.
• Três colunas de cartão iguais como linha de recursos. Este é o layout de IA mais genérico. Substitua por um layout zig-zag de 2 colunas, grade assimétrica, rolagem horizontal ou layout masonry.
• Usando height: 100vh para seções de tela cheia. Substitua por min-height: 100dvh para evitar saltos de layout em navegadores móveis (bug de viewport do iOS Safari).
• Matemática complexa de porcentagem com flexbox. Substitua por CSS Grid para estruturas de múltiplas colunas confiáveis.
• Sem contêiner de largura máxima. Adicione uma restrição de contêiner (cerca de 1200-1440px) com margens automáticas para que o conteúdo não se estique de ponta a ponta em telas largas.
• Cartões de altura igual forçados por flexbox. Permita alturas variáveis ou use masonry quando o conteúdo variar em comprimento.
• Raio de borda uniforme em tudo. Varie o raio: mais apertado em elementos internos, mais suave em contêineres.
• Sem sobreposição ou profundidade. Os elementos ficam planos um ao lado do outro. Use margens negativas para criar camadas e profundidade visual.
• Preenchimento vertical simétrico. O preenchimento superior e inferior são sempre idênticos. Ajuste opticamente — o preenchimento inferior geralmente precisa ser ligeiramente maior.
• Dashboard sempre tem uma barra lateral esquerda. Tente navegação superior, um menu de comando flutuante ou um painel recolhível.
• Espaço em branco ausente. Dobre o espaçamento. Deixe o design respirar. Layouts densos funcionam para painéis de dados, não para páginas de marketing.
• Botões não alinhados na parte inferior em grupos de cartões. Quando os cartões têm comprimentos de conteúdo diferentes, os CTAs acabam em alturas aleatórias. Fixe os botões na parte inferior de cada cartão para que formem uma linha horizontal limpa, independentemente do conteúdo acima.
• Listas de recursos começando em posições verticais diferentes. Em tabelas de preços ou cartões de comparação, a lista de recursos deve começar na mesma posição Y em todas as colunas. Use espaçamento consistente acima da lista ou blocos de título/preço com altura fixa.
• Ritmo vertical inconsistente em elementos lado a lado. Ao colocar cartões, colunas ou painéis próximos uns dos outros, alinhe os elementos compartilhados (títulos, descrições, preços, botões) em todos os itens. Linhas de base desalinhadas fazem o layout parecer quebrado.
• Alinhamento matemático que parece opticamente errado. Centralizar pela matemática nem sempre parece centralizado aos olhos. Ícones próximos ao texto, botões de reprodução em círculos ou texto em botões geralmente precisam de ajustes ópticos de 1-2px para parecerem certos.

Interatividade e Estados

• Sem estados de hover nos botões. Adicione deslocamento de fundo, leve escala ou translate no hover.
• Sem feedback de active/pressionado. Adicione um sutil scale(0.98) ou translateY(1px) ao pressionar para simular um clique físico.
• Transições instantâneas com duração zero. Adicione transições suaves (200-300ms) a todos os elementos interativos.
• Anel de foco ausente. Garanta indicadores de foco visíveis para navegação por teclado. Isso é um requisito de acessibilidade, não opcional.
• Sem estados de carregamento. Substitua spinners circulares genéricos por skeleton loaders que correspondam à forma do layout.
• Sem estados vazios. Um dashboard vazio que não mostra nada é uma oportunidade perdida. Crie uma visão composta de "primeiros passos".
• Sem estados de erro. Adicione mensagens de erro claras e inline para formulários. Não use window.alert().
• Links mortos. Botões que linkam para #. Ou link para destinos reais ou desabilite-os visualmente.
• Sem indicação de página atual na navegação. Estilize o link de navegação ativo de forma diferente para que os usuários saibam onde estão.
• Salto de rolagem. Cliques em âncoras saltam instantaneamente. Adicione scroll-behavior: smooth.
• Animações usando top, left, width, height. Mude para transform e opacity para animação suave e acelerada por GPU.

Conteúdo

• Nomes genéricos como "João Silva" ou "Maria Souza". Use nomes diversos e com som realista.
• Números redondos falsos como 99,99%, 50%, R$ 100,00. Use dados orgânicos e bagunçados: 47,2%, R$ 99,00, +55 (11) 91234-5678.
• Nomes de empresas placeholder como "Empresa ACME", "Nexus", "SmartFlow". Invente nomes de marca contextuais e verossímeis.
• Clichês de copywriting de IA. Nunca use