redesigned-portfolio

Skill de Redesign

Como Funciona

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

1. Escanear — Leia o codebase. Identifique o framework, método de estilização (Tailwind, CSS puro, styled-components, etc.) e os padrões de design atuais.
2. Diagnosticar — Percorra a auditoria abaixo. Liste cada padrão genérico, ponto fraco e estado ausente que encontrar.
3. Corrigir — Aplique melhorias direcionadas trabalhando com a stack existente. Não reescreva do zero. Melhore o que já 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 header serifado com um corpo sem serifa.
• Títulos sem presença. Aumente o tamanho do texto de exibição, ajuste o espaçamento entre letras, reduza a altura da linha. Os 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 Bold (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 com muitos dados.
• Ajustes de espaçamento de letras ausentes. Use tracking negativo para títulos grandes, tracking positivo para versaletes ou rótulos.
• Subtítulos em maiúsculas em todos os lugares. Tente itálico minúsculo, sentença em caixa baixa ou versaletes como alternativa.
• Palavras órfãs. Palavras isoladas na última linha. Corrija com text-wrap: balance ou text-wrap: pretty.

Cores e Superfícies

• Fundo #000000 puro. 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 gritar.
• Mais de uma cor de destaque. Escolha uma. Remova as outras. Consistência supera variedade.
• Mistura de cinzas quentes e frios. Mantenha uma família de cinza. Tingir todos os cinzas com um tom consistente (quente ou frio, não ambos).
• Gradiente roxo/azul "AI" estético. Esta é a impressão digital de design de IA mais comum. Substitua por bases neutras e um único destaque considerado.
• box-shadow genérico. Tingir sombras para combinar com o tom do fundo. Use sombras coloridas (ex: 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 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 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. Ou adote um modo escuro completo ou mantenha um tom de fundo consistente em toda a página. Se precisar de contraste, 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 (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 — mesmo uma foto sutil em largura total com baixa opacidade adiciona presença.

Layout

• Tudo centralizado e simétrico. Quebre a simetria com margens deslocadas, proporções de aspecto mistas ou cabeçalhos alinhados à esquerda sobre conteúdo centralizado.
• Três colunas iguais de cards como linha de recursos. Este é o layout de IA mais genérico. Substitua por um zigue-zague de 2 colunas, grade assimétrica, scroll 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 Safari iOS).
• Matemática complexa de percentual 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.
• Cards de altura igual forçados por flexbox. Permita alturas variáveis ou use masonry quando o conteúdo variar em comprimento.
• border-radius uniforme em tudo. Varie o raio: mais apertado em elementos internos, mais suave em contêineres.
• Sem sobreposição ou profundidade. Elementos ficam planos um ao lado do outro. Use margens negativas para criar camadas e profundidade visual.
• Padding vertical simétrico. O padding superior e inferior são sempre idênticos. Ajuste opticamente — o padding 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 dashboards de dados, não para páginas de marketing.
• Botões não alinhados na parte inferior em grupos de cards. Quando os cards têm comprimentos de conteúdo diferentes, os CTAs acabam em alturas aleatórias. Fixe os botões na parte inferior de cada card 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 cards 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 de altura fixa.
• Ritmo vertical inconsistente em elementos lado a lado. Ao colocar cards, colunas ou painéis próximos uns dos outros, alinhe 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 a texto, botões de reprodução em círculos ou texto em botões geralmente precisam de 1-2px de ajustes ópticos para parecerem corretos.

Interatividade e Estados

• Sem estados de hover em botões. Adicione mudança de fundo, escala leve ou translate no hover.
• Sem feedback ativo/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 loaders de esqueleto que correspondam à forma do layout.
• Sem estados vazios. Um dashboard vazio não mostrando nada é uma oportunidade perdida. Projete 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 da 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 scroll. Cliques em âncoras saltam instantaneamente. Adicione scroll-behavior: smooth.
• Animações usando top, left, width, height. Mude para transform e opacity para animações suaves e aceleradas por GPU.

Conteúdo

• Nomes genéricos como "John Doe" ou "Jane Smith". Use nomes diversos e com som realista.
• Números redondos falsos como 99.99%, 50%, $100.00. Use dados orgânicos e bagunçados: 47.2%, $99.00, +1 (312) 847-1928.
• Nomes de empresas placeholder como "Acme Corp", "Nexus", "SmartFlow". Invente nomes de marca contextuais e críveis.
• Chavões de copywriting de IA. Nunca use "Elevar", "Contínuo", "Liberar", "Next-Gen", "Game-changer", "Aprofundar", "Tapeçaria" ou "No mundo de...". Escreva linguagem simples e específica.
• Pontos de exclamação em mensagens de sucesso. Remova-os. Seja confiante, não barulhento.
• Mensagens de erro "Oops!". Seja direto: "Falha na conexão. Tente novamente."
• Voz passiva. Use voz ativa: "Não foi possível salvar suas alterações" em vez de "Erros foram cometidos."
• Datas de posts de blog idênticas. Randomize as datas para parecerem reais.
• Mesma imagem de avatar para vários usuários. Use ativos únicos para cada pessoa distinta.
• Lorem Ipsum. Nunca use texto placeholder em latim. Escreva um rascunho real de copy.
• Title Case Em Todos Os Cabeçalhos. Use sentença em caixa baixa.

Padrões de Componentes

• Aparência genérica de card (borda + sombra + fundo branco). Remova a borda, ou use apenas cor de fundo, ou apenas espaçamento. Cards devem existir apenas quando a elevação comunica hierarquia.
• Sempre um botão preenchido + um botão fantasma. Adicione links de texto ou estilos terciários para reduzir ruído visual.
• Badges "Novo" e "Beta" em forma de pílula. Tente badges quadrados, flags ou rótulos de texto simples.
• Seções de FAQ em acordeão. Use uma lista lado a lado, ajuda pesquisável ou divulgação progressiva inline.
• Carrossel de 3 cards de depoimentos com pontos. Substitua por um muro masonry, posts sociais incorporados ou uma citação rotativa única.
• Tabela de preços com 3 torres. Destaque o nível recomendado com cor e ênfase, não apenas altura extra.
• Modais para tudo. Use edição inline, painéis deslizantes ou seções expansíveis em vez de popups para ações simples.
• Avatares exclusivamente em círculos. Tente squircle ou quadrados arredondados para uma aparência menos genérica.
• Alternador claro/escuro sempre um interruptor sol/lua. Use um dropdown, detecção de preferência do sistema ou integre-o às configurações.
• Fazenda de links no rodapé com 4 colunas. Simplifique. Concentre-se nos principais caminhos de navegação e links legalmente exigidos.

Iconografia

• Ícones Lucide ou Feather exclusivamente. Essas são a escolha de ícone "padrão" de IA. Use Phosphor, Heroicons ou um conjunto personalizado para diferenciação.
• Foguete para "Lançar", escudo para "Segurança". Substitua metáforas clichê por ícones menos óbvios (raio, impressão digital, faísca, cofre).
• Espessuras de traço inconsistentes entre os ícones. Audite todos os ícones e padronize para um peso de traço.
• Favicon ausente. Sempre inclua um favicon com a marca.
• Fotos de "equipe diversa" genéricas. Use fotos reais da equipe, fotos espontâneas ou um estilo de ilustração consistente em vez de imagens de banco de imagens estranhas.

Qualidade do Código

• Sopa de div. Use HTML semântico: <nav>, <main>, <article>, <aside>, <section>.
• Estilos inline misturados com classes CSS. Mova toda a estilização para o sistema de estilização do projeto.
• Larguras em pixels fixas. Use unidades relativas (%, rem, em, max-width) para layouts flexíveis.
• Texto alternativo ausente em imagens. Descreva o conteúdo da imagem para leitores de tela. Nunca deixe alt="" ou alt="imagem" em imagens significativas.
• Valores de z-index arbitrários como 9999. Estabeleça uma escala de z-index limpa no tema/variáveis.
• Código morto comentado. Remova todos os artefatos de depuração antes de enviar.
• Alucinações de importação. Verifique se cada importação realmente existe em package.json ou nas dependências do projeto.
• Meta tags ausentes. Adicione <title>, description, og:image e meta tags de compartilhamento social adequadas.

Omissões Estratégicas (O que a IA Geralmente Esquece)

• Sem links legais. Adicione links de política de privacidade e termos de serviço no rodapé.
• Sem navegação "voltar". Pontos mortos nos fluxos do usuário. Toda página precisa de um caminho de volta.
• Sem página 404 personalizada. Projete uma experiência útil e com marca de "página não encontrada".
• Sem validação de formulário. Adicione validação no lado do cliente para e-mails, campos obrigatórios e verificações de formato.
• Sem link "pular para o conteúdo". Essencial para usuários de teclado. Adicione um skip-link oculto.
• Sem consentimento de cookies. Se exigido por jurisdição, adicione um banner de consentimento compatível.

Técnicas de Melhoria

Ao melhorar um projeto, use estas técnicas de alto impacto para substituir padrões genéricos:

Melhorias de Tipografia

• Animação de fonte variável. Interpole peso ou largura no scroll ou hover para um texto que parece vivo.
• Transições de contorno para preenchimento. O texto começa como um contorno e se preenche com cor na entrada do scroll ou interação.
• Revelações de máscara de texto. Tipografia grande atuando como uma janela para vídeo ou imagens animadas atrás dela.

Melhorias de Layout

• Grade quebrada/assimetria. Elementos que ignoram deliberadamente a estrutura de colunas — sobrepostos, vazando para fora da tela ou deslocados com aleatoriedade calculada.
• Maximização de espaço em branco. Uso agressivo de espaço negativo para forçar o foco em um único elemento.
• Pilhas de cards com parallax. Seções que grudam e se empilham fisicamente umas sobre as outras durante o scroll.
• Scroll em tela dividida. Duas metades da tela deslizando em direções opostas.

Melhorias de Movimento

• Scroll suave com inércia. Desacople o scroll dos padrões do navegador para uma sensação mais pesada e cinematográfica.
• Entrada escalonada. Os elementos entram em cascata com pequenos atrasos, combinando tradução no eixo Y com fade de opacidade. Nunca monte tudo de uma vez.
• Física de mola. Substitua a easings lineares por movimento baseado em mola para uma sensação natural e com peso em todos os elementos interativos.
• Revelações acionadas por scroll. Conteúdo entrando por meio de máscaras expansíveis, transições ou caminhos SVG desenhados vinculados ao progresso do scroll.

Melhorias de Superfície

• Vidro verdadeiro (glassmorphism). Vá além de backdrop-filter: blur. Adicione uma borda interna de 1px e uma sombra interna sutil para simular refração de borda.
• Bordas com foco (spotlight). Bordas de card que iluminam dinamicamente sob o cursor.
• Sobreposições de granulação e ruído. Uma sobreposição fixa com pointer-events: none e ruído sutil para quebrar a planura digital.
• Sombreados coloridos e matizados. Sombras que carregam o tom do fundo em vez de usar preto genérico.

Prioridade de Correção

Aplique as alterações nesta ordem para máximo impacto visual com mínimo risco:

1. Troca de fonte — maior melhoria instantânea, menor risco
2. Limpeza da paleta de cores — remova cores conflitantes ou supersaturadas
3. Estados de hover e active — maior impacto percebido de interatividade
4. Melhorias de layout — quebre simetria e adicione profundidade
5. Estados de erro, vazio e carregamento — integridade do fluxo do usuário
6. Qualidade de conteúdo — substitua texto e dados placeholder
7. Ícones e imagens — padronize e personalize ativos
8. Qualidade de código e acessibilidade — torne o código robusto e inclusivo