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 stack 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 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 presença. Aumente o tamanho para 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 ative 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 caixa alta em todos os lugares. Tente itálico minúsculo, caixa de sentença 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 branco puro #000000. Substitua por preto off, carvão escuro ou escuro tingido (#0a0a0a, #121212, ou um azul marinho escuro).
• Cores de destaque excessivamente saturadas. 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 cinzas. Tinga todos os cinzas com uma tonalidade consistente (quente ou fria, 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 considerado.
• box-shadow genérico. Tinga sombras para combinar com a tonalidade 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 desvanecimentos 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 predominantemente clara parece um acidente de copiar e colar. Ou opte por 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 liso 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 cards 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 em 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.

…