Feito com IA, do jeito que eu faço os sistemas dos meus clientes.

Etapas

1. 01

   Estratégia antes do layout

   O site começou como texto, não como tela. Primeiro defini para quem ele é (dono de empresa, não técnico), as três perguntas que precisa responder em 30 segundos e o que não pode ser dito para não perder credibilidade.

   • 00-ESTRATEGIA.md
   • 01-SECOES-E-TEXTOS.md
   • 02-PERGUNTAS.md
   • 03-TEXTOS-FINAIS.md
2. 02

   Perguntas no lugar de suposições

   Onde faltava dado real, a IA perguntou em vez de inventar. Nenhum número do site foi criado para impressionar: se não dá para defender numa reunião, não entra.

   • 02-PERGUNTAS.md
3. 03

   Plano e design system

   Com o conteúdo fechado, veio o plano de desenvolvimento e um design system em três camadas (primitivos, semânticos, componentes). Toda cor, espaço e animação sai de um único arquivo de tokens.

   • 04-PLANO-DESENVOLVIMENTO.md
   • 05-DESIGN-SYSTEM.md
   • tokens.css
4. 04

   Construção com agentes

   Claude Code escreveu os componentes seguindo as regras do projeto. O retrato do topo é uma versão artística criada por IA a partir de fotos reais; a foto da seção "Quem sou eu" é a original.

   • src/components/*.astro
5. 05

   Teste num navegador de verdade

   A IA abriu o site num navegador automatizado, rolou a página inteira, tirou capturas em desktop e celular e corrigiu o que estava errado antes de eu olhar.

   • Playwright

Decisões que você não vê, mas sente.

HTML estático (Astro)

Nada é montado no navegador do visitante. A página chega pronta.

Um único script pequeno

Só para animações e para medir a própria página. Sem ele, todo o conteúdo continua lá.

Fontes no próprio servidor

Nenhuma chamada ao Google. Mais rápido, e nenhum dado seu sai daqui.

Zero rastreadores

Sem cookies, sem pixel, sem analytics de terceiros.

Cabeçalhos de segurança

CSP, HSTS e afins configurados no servidor, não esquecidos.

Acessível por padrão

Contraste AA, navegação por teclado e respeito a quem prefere menos movimento.