handlagency/accountant-website-builder

Construtor de Sites para Contadores (HandL Agency)

A maioria dos sites de contabilidade parece igual e diz "Bem-vindo à Smith & Co". O design raramente é o motivo pelo qual eles não geram clientes. As verdadeiras razões são um H1 que não menciona o serviço e a cidade, nenhum preço, nenhum rosto e nenhuma forma de entrar em contato onde o visitante está lendo. Este skill constrói uma página que parece cara e faz o trabalho.

Siga as etapas na ordem.

1. Obtenha o briefing (pergunte uma vez, depois decida)

Peça tudo abaixo que você não puder inferir, em uma mensagem curta. Preencha o restante e diga o que escolheu.

• Nome da empresa, o serviço (ex.: "Contadores", "Escrituração fiscal", "Contadores para contratados") e a cidade ou região.
• Quem eles ajudam (um nicho vence "todos os negócios") e o que os diferencia (taxas fixas, mesmo contador em todas as ligações, tempo de resposta).
• A única ação que um visitante deve realizar (ex.: "Obter um orçamento fixo"). Um botão principal, usado em toda parte.
• Humor em três palavras, cores da marca e suas próprias fotos ou vídeos, se tiverem.

2. Escreva o arquivo de briefing

Escreva brief.json usando references/brief.md. Copie o arquivo mais próximo em examples/ e altere-o; não comece do zero. Regras:

• h1 deve conter o serviço e a cidade. Torne-o humano, não um amontoado de palavras-chave: "Contadores em Bristol, finalmente do seu lado."
• sub tem de 120 a 165 caracteres, para que sirva também como meta description.
• stats são coisas que a empresa realmente promete (tempo de resposta, check-ins por ano). Nunca invente resultados de clientes, avaliações ou prêmios.
• Escolha o layout com references/layouts.md.

3. A cena do herói (o que a torna marcante)

Por padrão, use o layout stage: uma placa de fundo cinematográfica, um objeto financeiro que se move (desliza, paira, flutua, gira ou flui), partículas, uma palavra eco gigante atrás para profundidade, parallax com o mouse e o objeto voa para baixo da página conforme o visitante rola. Construa a cena com references/scenes.md:

1. Escolha um objeto financeiro que se encaixe na empresa (moedas, um guindaste de origami dobrado em papel estilo nota, um pássaro dourado, pacotes de vidro, um barco de papel de formulário fiscal, uma fita cromada). Cenas prontas estão em assets/scenes/.
2. Para uma nova cena, gere uma imagem estática com um modelo de imagem (fórmula de prompt em scenes.md), recorte o objeto e peça ao modelo a mesma imagem com o objeto removido (a placa).
3. Defina o movimento, as partículas e a palavra eco em brief.json.

As fotos da própria equipe da empresa vão nas seções abaixo do herói. Nunca faça hotlink de mídia sem direitos autorais e nunca use fotos de banco de imagens de apertos de mão ou calculadoras.

4. Construa

Execute python3 scripts/build.py brief.json site/. Ele escreve site/index.html (um arquivo único, sem etapa de build, abre em qualquer lugar) e imprime as verificações de SEO. Corrija cada verificação que falhar no briefing e construa novamente.

5. Veja e corrija (não pule esta etapa)

Execute python3 scripts/shoot.py site/index.html shots/ (precisa do Playwright: pip install playwright && python -m playwright install chromium). Abra as capturas de tela, observe-as e pontue a página com references/review.md. Corrija os três pontos mais fracos e fotografe novamente. Pare quando tudo pontuar 4 ou mais, ou após três rodadas.

6. Entregue

Forneça ao usuário:

• O arquivo index.html e como abri-lo.
• A captura de tela final para desktop.
• O título da página e o H1, para que eles possam ver que mencionam o serviço e a cidade.
• O que trocar antes de publicar: fotos reais, preços reais, o link de agendamento ou contato e a redação regulatória da empresa (ex.: detalhes de prática ICAEW/ACCA/AAT) no rodapé.

Arquivos

• references/brief.md: todos os campos em brief.json.
• references/layouts.md: os layouts e quando usar cada um.
• references/scenes.md: como construir uma cena de herói animada, os tipos de movimento e os prompts de imagem.
• assets/scenes/: seis cenas financeiras prontas (placas e objetos recortados).
• references/finance-rules.md: as regras de SEO e conversão para sites de empresas financeiras.
• references/review.md: a rubrica de pontuação para a etapa 5.
• examples/*.json: seis briefings completos (contadores, escrituradores fiscais, contadores para contratados, escrituração para e-commerce, declarações de imposto de renda, folha de pagamento).
• scripts/build.py e scripts/stage.py: renderizam a página (copiando a mídia ao lado) e executam as verificações de SEO.
• scripts/shoot.py: capturas de tela para desktop e celular para a revisão.