davila7/claude-code-templates

Design Web Premium

Crie componentes React (.jsx) que parecem pertencer ao Awwwards — o tipo de trabalho que faz as pessoas perguntarem "quem projetou isso?". Estes são sites onde cada pixel é intencional, cada animação é coreografada, e a impressão geral é que um talento criativo sério e um orçamento significativo estiveram envolvidos.

O Problema Estético da IA

A maioria dos sites gerados por IA compartilha um DNA reconhecível. Evitá-lo exige saber exatamente como ele se parece.

A Lista Negra — Nunca Faça Isso

Pecados de tipografia

• Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit como fontes principais — elas gritam "template de IA". (Nota: Inter Tight é uma família de fontes separada, com métricas diferentes, e é permitida.)
• Usar uma única família de fontes para tudo
• Tamanhos de fonte uniformes com hierarquia previsível (64px → 32px → 18px → 14px)
• Espaçamento entre letras e altura de linha padrão em todos os lugares
• Blocos de texto centralizados em todos os lugares, especialmente parágrafos com várias linhas

Pecados de cor

• Gradientes roxo-azul (o maior clichê de design de IA)
• Índigo/violeta como cor primária da marca sem motivo contextual
• Fundo branco + uma cor de destaque + texto cinza (o kit inicial de SaaS)
• Gradientes em botões ou cards sem motivo
• Usar opacidade ou sobreposições semitransparentes como substituto para escolhas de cores reais
• Cores de destaque neon em fundos escuros (o visual de "portfólio de desenvolvedor")

Pecados de layout

• Hero → grade de 3 colunas de recursos → depoimentos → CTA → rodapé (a página de destino SaaS padrão)
• Hero → barra de estatísticas → grade de trabalhos → divisão sobre → CTA → rodapé (a página de destino "premium de IA" — igualmente formulaica)
• QUALQUER ordenação de seção de cima para baixo previsível que possa ser trocada entre sites. Cada site deve ter seu próprio DNA estrutural único — número diferente de seções, lógica de ordenação diferente, seções que não se encaixam perfeitamente em categorias
• Grades perfeitamente simétricas com cards de tamanhos iguais
• Tudo centralizado, tudo contido em um contêiner de largura máxima
• Retângulos arredondados com sombras como elemento de UI primário
• Cards de ícone + título + parágrafo em uma fileira de 3 ou 4
• Hero genérico com título + subtítulo + dois botões lado a lado
• Seções de hero planas e estáticas com apenas texto — as seções de hero devem ser experiências espaciais imersivas

Pecados de movimento

• Elementos aparecendo de baixo para cima ao rolar (o efeito AOS excessivamente usado)
• Transições idênticas em tudo (mesma duração, mesma suavização, mesma direção)
• Efeitos de hover que apenas aumentam de escala ou adicionam uma sombra
• Spinners de carregamento em vez de telas esqueleto ou revelações coreografadas

Pecados de imagem e decoração

• Formas de blob como decorações de fundo
• Formas geométricas flutuantes (círculos, triângulos) como "elementos de design"
• Fundos genéricos de malha gradiente
• Grades de fotos de stock com proporções uniformes
• Emoji ou ícones de linha genéricos como marcadores de seção

---

Como o Caro Realmente se Parece

O design web premium comunica arte através de contenção, surpresa e atenção obsessiva aos detalhes.

Tipografia como Identidade

A tipografia é o #1 diferencial entre um site de $500 e um de $50.000.

Filosofia de seleção de fontes:

• Use fontes serifadas ou display distintas para títulos — fontes com personalidade e opinião. Bons pontos de partida: Playfair Display, Cormorant Garamond, DM Serif Display, Fraunces, Instrument Serif para serifadas. Para sans-serifadas que não são excessivamente usadas: Syne, General Sans, Satoshi, Switzer, Cabinet Grotesk, Nacelle, Inter Tight, IBM Plex Sans, Manrope, Archivo, Work Sans, Instrument Sans.
• Combine uma fonte display com personalidade com uma fonte de corpo neutra, mas refinada.
• Fontes monoespaçadas como tipografia de destaque (para rótulos, categorias, datas) adicionam uma qualidade editorial — JetBrains Mono, IBM Plex Mono, Space Mono.
• Misture pesos dramaticamente — um título com peso 900 ao lado de um corpo com peso 300 cria tensão visual.

Execução tipográfica:

• Use clamp() para dimensionamento fluido de tipo, em vez de saltos de ponto de quebra
• Contraste dramático de tamanho — títulos podem ter 8vw+ no desktop
• Espaçamento negativo entre letras em títulos grandes (-0.03em a -0.06em)
• Altura de linha generosa no corpo (1.6–1.8), apertada em títulos (0.9–1.1)
• Alinhamento misto — corpo alinhado à esquerda com rótulos ocasionais alinhados à direita ou títulos assimétricos
• max-width em parágrafos (45–75ch) e text-wrap: balance em títulos
• Microrrótulos em maiúsculas com amplo espaçamento entre letras (0.1em+) para categorias, datas, metadados

Cor como Atmosfera

• Comece com preto e branco. Adicione cor apenas quando ela ganhar seu lugar.
• Um matiz dominante com intenção — "que território emocional esta cor reivindica?"
• Brancos off-white e cinzas quentes (não #ffffff ou #000000 puros) parecem mais projetados — tente #FAFAF8, #F5F0EB, #1A1A1A, #0D0D0D
• Paletas monocromáticas ou análogas com um momento de contraste são lidas como mais sofisticadas do que esquemas de arco-íris
• Temas escuros bem feitos: não apenas "branco sobre cinza escuro", mas camadas de fundo consideradas com tons sutis quentes ou frios
• Cor usada com moderação impacta mais — um único link vermelho em um mar de preto e branco é mais poderoso do que vermelho em todos os lugares

Layout como Contação de Histórias

O modo #1 de falha desta skill é produzir sites que parecem diferentes na superfície, mas compartilham a mesma estrutura subjacente — um hero, três seções editoriais, uma citação destacada, um formulário, um colofão. Em um lote de sites, isso começa a parecer um template com cores diferentes. Combata isso ativamente e deliberadamente.

A regra de exclusividade do DNA estrutural:

Antes de escrever qualquer marcação, nomeie o conceito estrutural primário em voz alta — uma única frase nominal, como "manuscrito de índice" ou "diorama horizontal fixo". Dentro de um lote de sites, nenhum dois sites podem compartilhar o mesmo conceito estrutural primário. Se o site anterior era uma narrativa de rolagem fixa, este não é. Se o site anterior era uma divisão vertical 33/67, este não é. A ideia estrutural é a primeira coisa que o usuário nota — variar a cor sem variar a estrutura é apenas cosmético.

Catálogo de DNA Estrutural

Estas são estruturas primárias distintas. Cada invocação da skill deve escolher um conceito e se comprometer com ele. Não misture duas estruturas em um único site (isso dilui ambas).

1. Manuscrito de Índice — Uma única coluna editorial longa, sem seções. Um ritmo tipográfico do topo ao fundo. A página inteira é lida como um único manuscrito que por acaso é um site. (Bom para: cardápio de um chef, carta de um perfumista, manifesto.)
2. Diorama Horizontal Fixo — A página é uma rolagem vertical longa, mas o que você vê enquanto rola é uma cena que se move horizontalmente. Use position: sticky + translateX impulsionado pela rolagem. (Bom para: linha do tempo de encomendas, um processo em etapas, uma coleção de artefatos.)
3. Divisão Permanente em Dois Painéis — A página é sempre uma divisão 50/50 (ou 38/62); um painel é fixo, o outro rola. A navegação acontece dentro de um painel, nunca rolando a página inteira. (Bom para: um arquivo com um índice de atualização ao vivo, catálogo de um bibliotecário.)
4. Sequência de Slides — "Slides" com altura total da viewport, um por tela, com rolagem snap. Cada slide é uma composição completamente diferente. (Bom para: monografia de um fotógrafo, um passeio por galeria, um look-book editorial.)
5. Objeto em Palco sobre Pedestal — Um único sujeito 3D/imagem centralizado, rotacionável, e o resto da página é marginalia que orbita o objeto. (Bom para: uma casa de produto único — um relógio, um frasco, uma garrafa.)
6. Narrativa Fixa (Scrollytelling) — Uma seção de 2 a 4 telas de altura que fica fixa no lugar enquanto seu conteúdo avança por estados discretos (trocas de imagem, trocas de texto, progresso). Usada uma vez na página como sua peça central. (Bom para: perfil de missão, processo de produção, estudo de colapso de edifício.)
7. Navegação Horizontal — A rolagem primária da página é horizontal. As seções são lidas da esquerda para a direita. A rolagem vertical é desativada ou reservada para revelações de detalhes. (Bom para: arquivo de relojoaria, ala de museu, lista de filmes de um estúdio.)
8. Barra Lateral + Coluna — Uma barra lateral esquerda persistente nunca rola (navegação, metadados, rodapé em execução); a coluna direita é o site inteiro. (Bom para: escritório de advocacia, instituto de pesquisa, editora acadêmica.)
9. Portões de Capítulo — Divisores de capítulo com viewport total entre zonas tonais muito diferentes. Cada capítulo tem sua própria cor de fundo, peso tipográfico e ritmo de layout. A página muda de caráter conforme você desce. (Bom para: estúdio multidisciplinar, retrospectiva.)
10. Livro-Razão / Registro — A página é apresentada como um documento antigo — um conhecimento de embarque, um registro, um manifesto de navio. Linhas tabulares dominam; a tipografia lê como um livro-razão. (Bom para: lista de espera, registro de lote, manifesto de expedição.)
11. Colagem / Quebrador de Grade — Uma grade assimétrica no estilo de revista com rupturas deliberadas — imagens superdimensionadas sangrando nas colunas, citações destacadas cruzando medianizes, notas de rodapé nas margens. (Bom para: publicações editoriais, revistas culturais, estúdios criativos.)
12. Objeto Único, Sem Chrome — O site é apenas o sujeito, rotacionável, com uma única frase curta abaixo dele. Sem navegação, sem rodapé, quase sem UI. (Bom para: lançamento de peça única de um artista, obra declarativa.)
13. Interface de Produto em Lousa — O hero é uma simulação realista da interface do próprio produto (tiles de dashboard, visualização de diff, paleta de comandos). Usado por marcas de tecnologia/IA cujo produto É uma UI. (Bom para: IDEs de IA, ferramentas de desenvolvedor.)
14. Grade de Tiles de Dashboard — A página inteira é estruturada como um dashboard com sensação ao vivo, com contadores ao vivo, sparklines, pips pulsantes. (Bom para: infraestrutura, segurança cibernética, observabilidade.)
15. Linha do Tempo de Conversa — A página reproduz uma conversa/transcrição/chamada simulada enquanto o usuário rola. Destaques de recursos são ancorados a momentos específicos. (Bom para: IA de voz, plataformas de suporte, entrevistas legais.)

Como escolher o conceito:

• Comece pelo fato central do cliente. Um restaurante cuja identidade inteira é um menu de nove pratos quer um Manuscrito de Índice. Um relojoeiro cuja identidade é precisão e um único calibre quer um Objeto em Palco sobre Pedestal. Uma empresa de expedição cuja marca é uma jornada anual quer uma Narrativa Fixa.
• Rejeite o conceito se for o usado da última vez nesta sessão. Escolha o próximo melhor.
• Escreva o conceito e uma frase de justificativa antes de escrever qualquer JSX. Mantenha-o visível no arquivo de prompt.

Princípios de layout (aplique dentro de qualquer conceito estrutural que você escolher):

• Quebre a grade intencionalmente. Momentos de largura total seguidos por colunas de texto estreitas. Imagens superdimensionadas sangrando para fora da tela. Divisões assimétricas de duas colunas (60/40, 70/30).
• Espaço em branco generoso não é espaço desperdiçado — é um sinal de luxo. Padding de 8rem+ entre seções.
• Seções de rolagem horizontal para portfólios ou galerias (bem feitas, não como o padrão principal de navegação — a menos que você tenha deliberadamente escolhido Navegação Horizontal).
• Elementos sobrepostos — texto sobre imagens, imagens saindo de seus contêineres, elementos que cruzam os limites da seção.
• Elementos fixos que acompanham a rolagem — um rótulo que permanece enquanto o conteúdo rola.

Micropadrões específicos que soam como premium:

• Grades masonry ou escalonadas para conteúdo visual, em vez de grades uniformes.
• Texto que se sobrepõe a imagens com mix-blend-mode para efeito editorial.
• Seções numeradas ou indexadas com uma progressão visível.
• Um sistema de grade visível (linhas ou colunas sutis) que o design ocasionalmente quebra.
• Conteúdo que se transforma conforme você rola — não apenas aparecendo, mas se metamorfoseando, redimensionando, reposicionando.
• Linhas tabulares / de livro-razão para listas (lotes, manifestos, registros) em vez de grades de cards.
• Campos de formulário que parecem partes de um documento editorial, não um formulário de SaaS — rótulos em monoespaçado pequeno acima de entradas serifadas, sem contornos, apenas bordas inferiores.

Repetições proibidas (dentro de uma sessão da skill):

• Não dê a dois sites uma seção de processo de "coluna esquerda fixa + coluna direita rolável". Escolha para um; invente outra coisa para o outro.
• Não abra dois sites com um hero assimétrico 33/67. Se um fez, o próximo abre com um palco centralizado, ou um fundo de sangria total, ou um livro-razão, ou nenhum hero.
• Não termine dois sites com o mesmo par de "formulário de consulta + grade de colofão". Varie o movimento de encerramento.

Variedade de barra de navegação — um modo de falha silencioso a observar.

O padrão mais fácil é uma barra superior com grid-template-columns: auto 1fr auto com "marca à esquerda, algo centralizado, algo alinhado à direita, mix-blend-mode: difference". Após três sites, começa a soar como uma assinatura — não uma escolha de design. Em cada sessão, varie a navegação substancialmente:

• Nenhuma navegação (marcas de Objeto Único, Sem Chrome).
• Navegação incorporada na barra lateral fixa (marcas de Barra Lateral + Coluna).
• Barra de comando fixa na parte inferior estilizada como lançador ⌘K (marcas de produto de tecnologia — Cursor / Linear / Arc).
• Marca inline centralizada com abas espalhadas abaixo como uma faixa secundária.
• Índice de rolagem horizontal de largura total que também serve como navegação.
• Navegação Marquee — ticker em rolagem contínua com nomes de seção.
• Navegação vertical à esquerda escrita de baixo para cima.
• Navegação de barra de status com um pip operacional ao vivo.
• Faixa de ticker Marquee (preços de referência, métricas) mais uma barra superior fina.

Escolha a navegação que pertence à marca e ao DNA estrutural — não use o padrão da barra superior de três colunas.

Evite o padrão editorial-luxo.

Esta skill gravita, sob pressão, em direção a: fundo creme quente, display serifado (Fraunces / Cormorant), metadados monoespaçados, um único destaque de bronze, microrrótulos em maiúsculas com amplo espaçamento, símbolos de bala ◦. É uma estética real, apropriada para alta-costura, perfumaria, alta gastronomia, relojoaria. Não é apropriada para tecnologia, IA, segurança cibernética, eletrônicos de consumo, SaaS ou ferramentas de desenvolvedor — e usar repetidamente esse padrão faz com que cada site em um lote pareça ter sido feito pela mesma agência.

Se o campo é tecnologia, a estética deve tender a: fundos branco puro ou quase preto (não creme); sans-serifs neo-grotescas (estilo Söhne, Inter Tight, IBM Plex Sans, Instrument Sans) como display