O BOA-FÉ é uma plataforma editorial para freelancers. O tema central é proteção contra calote: contratos, cobrança, impostos, comportamento de cliente. Tom direto, sem juridiquês, sem motivacional.
É um site estático com blog, páginas institucionais e formulários de contato e newsletter. Foi criado para fim de estudos do Claude Code.
As Integrações
Astro (framework)
Gera HTML estático no build. Ideal pra sites de conteúdo: rápido, barato de hospedar, fácil de indexar.
GitHub
Repositório do projeto. Cada push no branch main aciona automaticamente um novo deploy.
Vercel
Hospedagem. Conectada ao GitHub, ela detecta o push, builda o site e publica em segundos. SSL incluso. O nível gratuito cobre o projeto inteiro.
Hostinger
Só registrador de domínio. O DNS aponta pra Vercel.
FormSubmit
Recebe os formulários (newsletter + “envie seu calote”) e encaminha por email. Zero backend necessário.
Vercel Analytics
Métricas básicas sem cookie, sem consentimento de LGPD. Um pacote npm + uma linha no layout.
Como o site foi criado
O branding do BOA-FÉ já existia. A identidade visual tinha sido desenvolvida anteriormente, então entrei no projeto com o material pronto: logo em suas versões (principal, reduzida, monocromática), paleta de cores definida, e as famílias tipográficas escolhidas.
Com esses ativos em mãos, forneci ao Claude referências visuais de sites que eu gostaria que servissem de inspiração para o layout e para a experiência de leitura. Não era pra copiar, era pra calibrar: hierarquia, espaçamento, ritmo visual, sensação geral.
O Claude traduziu essas referências em código (HTML, CSS em Astro), já aplicando a paleta e tipografia do BOA-FÉ. O CSS foi escrito como arquivo único (global.css) com variáveis nomeadas. Sem Tailwind, sem framework de estilo, para manter o projeto simples e previsível.
A partir da primeira versão funcional, o trabalho virou uma série de ajustes finos em conversa: “diminui a fonte do H1 no mobile”, “aumenta o espaço entre os cards”, “o menu hambúrguer está transparente quando aberto no meio da página”. Cada pedido virava uma edição cirúrgica no arquivo certo, commit, push, e em segundos estava no ar pra ver o resultado real.
Esse ciclo curto, de intenção a resultado visível emminutos, é o que faz a diferença. Não é que a IA tomou decisões de design. As decisões foram minhas, baseadas no branding que eu já tinha e nas referências que eu trouxe. O Claude executou, ajustou, e me deu velocidade pra iterar sem depender de abrir editor, escrever CSS, buildar e testar manualmente a cada mudança.
Como o site é atualizado?
O fluxo de atualização é inteiramente por texto.
Para publicar um novo artigo:
1. Peço ao Claude pra criar o arquivo .md no diretório correto, com o cabeçalho padrão (título, data, categoria, cor).
2. Reviso o conteúdo.
3. Peço o commit e push.
4. Em ~40 segundos o artigo está no ar.
Para ajustes de design ou layout:
1. Descrevo o problema ou intenção: “O menu mobile fica transparente quando aberto no meio da página.”
2. O Claude lê o CSS, identifica a causa e aplica a correção no arquivo.
3. Commit e push. Vercel rebuildou em seguida.
Para novas páginas:
1. Descrevo a estrutura e o conteúdo.
2. O Claude cria o arquivo .astro seguindo os padrões do projeto (mesmo layout, mesmo CSS, mesma navegação).
3. Push. No ar.
Não uso painel de administração, não subo arquivo por FTP, não acesso servidor. Tudo é texto e git.
O que faz a diferença na prática
Revisar antes de publicar.
A IA acerta a maior parte, mas erra detalhes: tipos, datas, links. Ler antes de comitar é inegociável.
O ciclo curto é o ganho real.
Não é que a IA substitui o trabalho. É que o ciclo de ideia → código → publicado cabe em minutos, não em horas.
Acesse: boafe.info