brandvm/webflow-audit

Webflow audit: um site ativo, alterado em pequenos passos verificados

Um site ativo tem visitantes, rankings e trabalho não publicado de outras pessoas. Nada aqui é construído do zero: toda mudança começa a partir de uma medição, sai sozinha e pode ser desfeita.

As regras compartilhadas se aplicam (webflow-build › rules.md: sem commit, push, release ou alteração de DNS sem uma confirmação explícita; sem credenciais no chat; Designer primeiro; scripts no repositório). Seus scripts de verificação (pnpm wf:*) fazem as medições; aponte stagingUrl em webflow-build.config.json para o domínio de staging e use --live para o que os visitantes veem.

Tags: [Claude] Claude faz · [Claude checks] Claude verifica e relata · [Person] uma pessoa faz; Claude pode rastrear, nunca executar.

Duas regras acima de todas as outras:

• Uma publicação é para o site inteiro. Publicar envia tudo que está pendente no site, incluindo edições inacabadas de outras pessoas. Nunca publique no domínio ativo até que a pessoa tenha digitado a palavra publish para aquele lote. Um "publish" cobre um lote, nunca o próximo.
• Leia antes de escrever. A auditoria não escreve nada no Webflow.

Os documentos

No docs/handoff/ do repositório, mantidos atualizados conforme o trabalho avança:

Arquivo	Contém
AUDIT.md	O relatório de auditoria: o que foi medido, com números e datas
STATUS.md	O rastreador: cada solicitação, nas próprias palavras do cliente, com seu estado
DECISIONS.md	Cada decisão, quem a tomou, quando e o que significa
ROLLBACK.md	O ponto de reversão e, palavra por palavra, todo o código personalizado como estava
MANUAL-TODO.md	Etapas que apenas uma pessoa pode fazer no Designer

1. Auditoria somente leitura

Nada é escrito no Webflow nesta etapa. Execute nesta ordem: os dois primeiros são os que podem ser ignorados e não podem ser recuperados depois, porque descrevem o site antes de qualquer alteração.

• [Claude] Baselines visuais, com o piso de ruído. pnpm wf:baseline save --live em cada página-chave em quatro larguras, depois compare imediatamente sem nenhuma alteração. O que difere entre duas execuções não modificadas (quadros de vídeo, sliders, imagens lazy) é o piso de ruído; anote por página. Mantenha as imagens de baseline fora do git (são grandes): .webflow-build/ é ignorado por esse motivo.
• [Claude] Esboço de títulos de cada página-chave (pnpm wf:outline --live), salvo em AUDIT.md.
• [Claude] Velocidade: pnpm wf:perf --live, mobile e desktop, a mediana de 5 execuções com sua faixa, para cada página-chave (não apenas a Home).
• [Claude] Acessibilidade: pnpm wf:a11y --live --all-widths.
• [Claude] Links e redirecionamentos: pnpm wf:links --live --external; a lista de redirecionamentos das configurações do Site (exporte para CSV); o sitemap. Com as URLs que o Search Console relata como não encontradas, pnpm wf:redirects test --live --file <export>: quais URLs antigas dão 404, loop, cadeia ou caem na página inicial.
• [Claude] HTML publicado: pnpm wf:html --live (nomes de campo padrão, links no lugar de botões, classes que nenhum stylesheet define).
• [Claude] SEO e schema: pnpm wf:seo --live --canonical: por página, o título, descrição, canônico, imagem do Open Graph, estado de indexação e qualquer JSON-LD (se faz parsing; se uma aspa em um campo do CMS o quebra); e em todo o site, títulos e descrições duplicados, a página 404, robots.txt. Os esboços de títulos contra webflow-launch › headings.md.
• [Claude] Rastreamento: pnpm wf:tracking --live: quais tags carregam onde, visualizações de página contadas duas vezes, o que é executado antes da escolha de cookies e depois de Rejeitar, gclid e UTM através de redirecionamentos. As solicitações de dados são bloqueadas, então a auditoria não envia nada para as contas do cliente.
• [Claude] Domínio: pnpm wf:domain: certificado, data de renovação do domínio, registrador e hospedagem DNS, os redirecionamentos http e www.
• [Claude] Inventário, lido através do conector: páginas e pastas; coleções do CMS com tipos de campo e contagens de itens; componentes; fontes e como carregam; cada peça de código personalizado (head e footer do site, de cada página, cada Embed) e cada script de terceiros, com a finalidade de cada um (wf:tracking lista os serviços que as páginas carregam); interações e de quais páginas dependem; formulários e para onde enviam.
• [Claude] Relatório em AUDIT.md: os achados como pontos curtos com números, cada um marcado como medido ou lido do código, ordenado pelo que ganharia e o que poderia quebrar. Uma afirmação que não foi medida é indicada. Portão: a pessoa tem o relatório.

2. Rastreador, no primeiro dia

• [Claude] Escreva STATUS.md a partir do briefing e da própria lista de verificação do cliente, nas próprias palavras, uma linha por solicitação: solicitação, estado (não iniciado, em andamento, em staging, ativo, descartado e motivo), lote, data. Em sites anteriores, solicitações foram perdidas porque o rastreador veio tarde e foi escrito em palavras diferentes da lista do cliente.
• [Person] Confirma que nada está faltando. Portão.
• [Claude] Todo relatório posterior atualiza o rastreador e dá a contagem: "9 de 14 ativos, 2 em staging, 2 aguardando decisão".

3. Decisões, uma de cada vez

• [Claude] Pergunte uma decisão de cada vez, cada uma com o que significa em palavras simples: o que muda para os visitantes, o que custa, o que pode dar errado e a recomendação.
• [Claude] Registre cada uma em DECISIONS.md quando for tomada.
• Apenas novo conteúdo voltado para o cliente (texto, imagens, layout alterado) vai para o cliente para aprovação. Partes técnicas (como um script carrega, onde o CSS vive) são decisão da equipe.

4. Ponto de reversão, antes da primeira escrita

• [Claude] Uma tag git no commit que corresponde ao que está ativo.
• [Claude] ROLLBACK.md contém, palavra por palavra, cada peça de código personalizado como está agora: código do head e footer do site, código de cada página, cada Embed.
• [Person] Um backup do Webflow (Configurações do Site › Backups), nomeado com a data; e proteção de branch no branch padrão do repositório.
• [Claude checks] As etapas de reversão são escritas e cada uma é possível: restaurar os blocos de código, apontar o loader de volta para a versão antiga, restaurar o backup. Portão: confirmado pela pessoa.

5. Liberação de paridade (quando a parte técnica muda)

Mover um site para o template altera como seu código é entregue. Essa mudança vai primeiro, sozinha, com nada que um visitante possa ver.

• [Claude] Porte o comportamento existente como está. Sem reescritas ou melhorias nesta etapa: essas são lotes posteriores, cada um medido.
• [Claude checks] Paridade em cada página-chave em quatro larguras: estilos calculados e geometria contra os baselines (pnpm wf:baseline compare, diferenças apenas dentro do piso de ruído).
• [Claude checks] Paridade de tempo de carregamento também (pnpm wf:film): uma página estável pode corresponder enquanto o primeiro segundo oscila. Compare o carregamento, não apenas o final.
• Depois, siga as etapas de lote abaixo, como qualquer outro lote.

6. Lotes, menor risco primeiro

Ordene o trabalho de modo que os ganhos mais seguros e certos venham primeiro, e cada lote possa ser julgado por si só. Um lote = uma alteração que uma pessoa poderia descrever em uma frase. Para cada um:

1. Prepare no repositório (pnpm check && pnpm build && pnpm test); diga o que mudará no Webflow e o que um visitante notará.
2. Aplique no Webflow após a autorização. Depois diga: "recarregue o Designer" e o que não está publicado.
3. Publique apenas em staging.
4. Verifique em staging: a verificação do próprio lote, mais baseline compare, html e o console nas páginas que toca, em quatro larguras.
5. Pergunte o que mais iria ao ar. [Person] verifica o site em busca de outras alterações pendentes (suas ou de um colega). Claude não pode ver quem mudou o que; informe e aguarde.
6. A pessoa digita "publish". Em seguida, publique no domínio ativo.
7. Verifique em produção com --live: as mesmas verificações, e o número do lote (velocidade, erros, links) medido novamente.
8. Atualize o rastreador e a lista de verificação do cliente; anote o resultado em AUDIT.md ao lado do achado.

• Edições de itens do CMS (um erro de digitação, um novo item) podem ir diretamente ao ar: publicar um item não publica o site. Alterações de página e de site sempre passam pelas oito etapas.
• O Webflow limita a frequência com que um site pode ser publicado: agrupe as verificações para que um lote precise de uma publicação em staging e uma publicação ao vivo.

7. Mantenha apenas ganhos medidos

• [Claude checks] Antes e depois são ambas medianas do mesmo número de execuções. Uma diferença dentro da faixa é ruído.
• [Claude] Uma alteração que não move seu número, ou move outro na direção errada, é revertida, e o rastreador informa isso. Nenhuma alteração permanece baseada no que deveria ter feito.

8. Encerramento

• [Claude] Relatório antes/depois: cada solicitação do rastreador com seu resultado em números; o que foi descartado e por quê; o que permanece.
• [Claude] ROLLBACK.md atualizado para o novo estado; a tag antiga mantida.
• [Claude] Lições oferecidas ao template (webflow-build › rules.md › Contribuindo).

Trabalhos pequenos (uma correção em um site ativo)

Um link quebrado, um carrossel que para, um formulário que não envia. O mesmo cuidado, em cinco etapas:

1. Reproduza no site ativo e diga exatamente quando acontece (página, largura, navegador, passos).
2. Corrija no menor lugar onde pode ser corrigido. Leia GOTCHAS.md e as lições primeiro: geralmente já aconteceu antes.
3. Teste de regressão onde o repositório tem testes para aquela área, para que não volte despercebido.
4. Staging, no desktop e em largura de celular; pnpm wf:html e o console na página.
5. Pare. Relate o que estava errado, o que mudou e como foi verificado, e aguarde aprovação antes de qualquer push, tag ou publicação. Mantenha a tag da versão anterior para que o loader possa ser apontado de volta para ela. Uma publicação ao vivo ainda precisa da palavra "publish", depois que a pessoa tiver verificado o que mais está pendente.