Site pessoal de especialista

Site do Especialista

O site do especialista vende confiança em uma pessoa específica. Uma casca bonita hoje em dia qualquer gerador faz, então quem vence é aquele que tem na página uma pessoa real, uma promessa clara e uma qualidade tangível de execução.

Ordem de Trabalho

Siga os passos. Não pule o passo 1, mesmo que peçam "só algo bonito".

1. Retrato da Pessoa. Reúna de todas as fontes disponíveis (correspondência, site, canal, documentos): quem é o especialista, para quem trabalha, que resultado entrega, 2-3 histórias reais, valores, objetivos, suas fotos e trabalhos, palavras que ele mesmo usa. Não invente nada: se não há fato, não está no site. Extraia uma ideia principal do site e uma frase-promessa: para quem, o que receberá, de que forma.
2. Briefing. Encontre o nicho em references/nishi.md (28 nichos: paleta inicial, fontes, o que mostrar nas fotos, blocos necessários, dúvidas do cliente, o que evitar). Anote em 5 linhas: tipo de página (serviço para pessoas, consultório ou estúdio, produto online, autor), objetivo (agendar, comprar, inscrever-se, ir para o bot), estilo (um, até o fim), um elemento inesquecível (quadro, objeto, foto com personalidade, interface viva), o que evitar. Escolha 2-3 técnicas e abra seus exemplos vivos de references/obrazcy.md.
3. Composição. Grade na proporção áurea, densidade "revista", não "deserto". Leia references/kompozitsiya.md.
4. Fontes e Cor. Comece com a paleta e o par de fontes do nicho, depois ajuste para a pessoa conforme references/shrifty.md e references/tsvet.md. Apenas fontes com cirílico, sem cores ácidas ou neon, sem fundo totalmente escuro por padrão. Galeria de todos os nichos ao vivo: assets/nishi.html.
5. Foto, Volume, Luz. Leia references/foto-i-kartinki.md e references/obem-svet-ten.md. Demonstração ao vivo de todas as técnicas de volume: assets/obem-demo.html.
6. Movimento e Vídeo. Apenas técnicas leves: references/effekty.md, references/video.md.
7. Textos. Escreva conforme references/teksty.md. Texto em russo passe pelas regras do humanizer-ru, inglês pelo humanizer. Sem travessões longos.
8. Verificação. Execute python -I scripts/proverka_saita.py <pasta_do_site> e percorra a lista de verificação references/proverka.md. Se tiver Node.js e Playwright, execute node scripts/proverka_v_brauzere.mjs <index.html>: ele abrirá a página em 375, 768, 1280 e 1440 px, encontrará erros no console, elementos saindo da borda, botões pequenos e salvará capturas de tela. Veja as capturas de tela com seus olhos.

Regras Principais

• A pessoa é mais importante que o efeito. A foto do especialista, seus trabalhos, seus objetos e sua voz entregam mais do que qualquer animação.
• Realismo e volume crie com luz, sombra, molduras, camadas e cor, não com 3D pesado. Uma única fonte de luz em toda a página: superior esquerda, sombras para baixo e para a direita.
• Um movimento forte por página. Todo o resto é tranquilo: elevação do cartão em 2 px, leve aproximação da foto, clique do botão.
• Leveza. A primeira tela abre rapidamente em um celular fraco. Sem cenas WebGL, sem rolagem que "captura" a roda, sem vídeo com áudio em auto-play.
• Assimetria pela proporção áurea em vez de tudo centralizado: colunas 38,2 / 61,8, margens e tamanhos pela escala 1,618.
• Densidade. Espaço é necessário, mas o bloco não deve parecer vazio. Na tela sempre há uma foto, objeto ou detalhe vivo.
• Blocos de cor explícitos. Não pinte o site inteiro com um único tom (um tom no site inteiro parece plano). As seções alternam fundo: claro, areia quente, uma faixa escura de destaque, sálvia. Mais blocos, texto, imagens e listas do que "revista vazia".
• Cada fato responde ao "e daí?" A experiência do especialista é apresentada como benefício para o cliente. Cozinha interna (número de departamentos, resultados de testes internos) não deve ser colocada no site.
• Sem sinais de template de IA: Inter, Roboto e Arial como voz do site; gradientes roxo-rosados; neon e cores ácidas; subtítulo acima de cada título; números de seção 01/02/03; grade de cartões idênticos "ícone, título, texto"; emojis em vez de ícones; apertos de mão stock e imagens de IA "com luz comum"; depoimentos, logotipos e números inventados.
• Honestidade. Ilustrações criadas por IA devem ser creditadas. Fotos de terceiros apenas com licença livre e crédito ao autor.
• Privacidade. Endereço até o bairro ou rua, sem número da casa. Detalhes médicos e familiares pessoais não devem ser colocados no site.

Estrutura da Página do Especialista

Ordem padrão, ajuste conforme o briefing:

1. Primeira tela: frase-promessa, foto viva do especialista ou seu objeto principal, um botão de ação, ao lado uma prova (número da prática real, "sobre nós escreveram", depoimento).
2. Para quem ajudo e com o quê (2-4 situações nas palavras do cliente).
3. Como trabalho: método ou produto mostrado ao vivo (foto, interface, processo).
4. Provas: depoimentos com resultado concreto, trabalhos, cases.
5. Quem sou: breve e apenas o que explica a especialidade e os valores.
6. Presente por inscrição ou passo experimental (guia, teste, primeira aula, bot).
7. Botão final e contatos.

Referências

• references/kompozitsiya.md: grades, proporção áurea, densidade, ritmo das seções.
• references/shrifty.md: pares de fontes com cirílico, tamanhos, texto volumétrico.
• references/tsvet.md: paletas, neutros tingidos, cor como profundidade.
• references/foto-i-kartinki.md: fotografia, edição, recortes, molduras, formatos, licenças.
• references/obem-svet-ten.md: nove técnicas de volume com CSS pronto.
• references/effekty.md: quais efeitos pegar e quais não, com peso.
• references/video.md: vídeo no site e edição de vídeos curtos.
• references/teksty.md: textos do especialista, humanizadores, proibições.
• references/nishi.md: base de 28 nichos: paletas, fontes, fotos, blocos, dúvidas do cliente, o que evitar.
• references/obrazcy.md: exemplos vivos para cada técnica, "técnica → onde ver".
• references/proverka.md: lista de verificação antes da apresentação.