Redesign Skill

Como Funciona

Ao aplicar a um projeto existente, siga esta sequência:

1. Escanear — Leia a base de código. Identifique o framework, o método de estilização (Tailwind, CSS puro, styled-components, etc.) e os padrões de design atuais.
2. Diagnosticar — Execute a auditoria abaixo. Liste todos os padrões genéricos, pontos fracos e estados ausentes que encontrar.
3. Corrigir — Aplique atualizações direcionadas trabalhando com a pilha existente. Não reescreva do zero. Melhore o que está lá.

Auditoria de Design

Tipografia

Verifique estes problemas e corrija-os:

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

Cores e Superfícies

• Fundo #000000 puro. Substitua por preto off, carvão escuro ou escuro tingido (#0a0a0a, #121212, ou um azul marinho escuro).
• Cores de acento excessivamente saturadas. Mantenha a saturação abaixo de 80%. Dessature os acentos para que se misturem com os neutros em vez de gritarem.
• Mais de uma cor de acento. Escolha uma. Remova as outras. Consistência supera variedade.
• Mistura de cinzas quentes e frios. Mantenha-se em uma família de cinzas. Tingir todos os cinzas com um tom 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 acento considerado.
• box-shadow genérico. Tingir sombras para combinar com o tom 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 zero textura. Adicione ruído sutil, granulação ou micro-padrões aos fundos. Vetores puramente planos parecem estéreis.
• Gradientes perfeitamente uniformes. Quebre a uniformidade com gradientes radiais, sobreposições de ruído ou gradientes de malha em vez de fades 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 em modo claro (ou vice-versa). Uma única seção de fundo escuro quebrando uma página de outra forma clara parece um acidente de copiar e colar. Ou opte por um modo escuro completo ou mantenha um tom de fundo consistente. 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 (borradas, sobrepostas ou mascaradas), padrões sutis ou gradientes ambientes. Use fontes confiáveis de placeholders como https://picsum.photos/seed/{name}/1920/1080 quando os ativos reais não estiverem disponíveis. Experimente imagens de fundo atrás de seções principais, blocos de recursos ou CTAs — mesmo uma foto sutil em tela cheia com baixa opacidade adiciona presença.

Layout

• Tudo centralizado e simétrico. Quebre a simetria com margens deslocadas, proporções mistas ou títulos alinhados à esquerda sobre conteúdo centralizado.
• Três colunas de cartões iguais como linha de recursos. Este é o layout de IA mais genérico. Substitua por um zigue-zague de 2 colunas, grade assimétrica, rolagem horizontal ou layout de alvenaria.
• 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 Safari no iOS).
• Matemática complexa de porcentagem flexbox. Substitua por CSS Grid para estruturas de várias colunas confiáveis.
• Sem contêiner de largura máxima. Adicione uma restrição de contêiner (em torno de 1200-1440px) com margens automáticas para que o conteúdo não se estenda de ponta a ponta em telas largas.

…