webflow/webflow-skills

Auditoria de Ativos

Analisa ativos de um site Webflow para otimização de SEO.

Nota Importante

SEMPRE use as ferramentas MCP do Webflow para todas as operações:

• Use data_assets_tool do MCP Webflow para buscar e atualizar ativos
• Use get_asset_preview do MCP Webflow (com o asset_id do ativo) para analisar o conteúdo da imagem
• Use data_sites_tool do MCP Webflow com a ação list_sites para listar sites disponíveis
• Use webflow_guide_tool do MCP Webflow para obter as melhores práticas antes de começar
• NÃO use outras ferramentas ou métodos para operações no Webflow
• Todas as chamadas de ferramenta devem incluir o parâmetro context obrigatório (15-25 palavras, perspectiva de terceira pessoa)

Instruções

Fase 1: Seleção do Site e Descoberta de Ativos

1. Obter site: Identifique o site alvo. Se o usuário não fornecer o ID do site, peça por ele.
2. Buscar todos os ativos: Use data_assets_tool do MCP Webflow para obter todos os ativos do site (cada registro de ativo inclui seu asset_id, necessário para visualizações)
   • Para sites com 50+ ativos, processe em lotes de 20
   • Mostre o progresso: "Processando ativos 1-20 de 150..."
3. Detectar padrões: Analise a nomenclatura dos ativos em busca de padrões comuns:
   • Uploads de câmera (IMG_, DSC_, etc.)
   • Capturas de tela (screenshot, Screen Shot, etc.)
   • Nomes genéricos (untitled, image-1, etc.)
   • Nomes baseados em data (2024-01-10, etc.)

Fase 2: Análise de Problemas e Reconhecimento de Padrões

4. Identificar problemas: Liste todos os ativos que:
   • Não possuem texto alternativo definido (nulo ou string vazia)
   • Possuem texto alternativo, mas de baixa qualidade (muito curto, frases redundantes, etc.)
   • Não possuem nomes de ativos amigáveis para SEO
   • São duplicatas ou muito semelhantes
5. Relatório de detecção de padrões: Mostre os padrões detectados:

   🔍 Padrões detectados:
   - 15 ativos começam com "IMG_" (uploads de câmera)
   - 8 ativos contêm "screenshot"
   - Sugestão: Renomear em massa esses padrões
   

6. Perguntar preferência do usuário: Pergunte se deseja gerar:
   • Apenas texto alternativo
   • Apenas nomes amigáveis para SEO
   • Ambos
   • Aplicar padrão/modelo de nomenclatura

Fase 3: Análise e Geração de Sugestões

7. Analisar ativos: Use a ferramenta get_asset_preview do MCP Webflow, passando o asset_id de cada ativo (da Fase 1), para analisar os ativos que precisam de atualizações
   • Tratamento de erros: Se get_asset_preview do MCP Webflow falhar, use o fallback:
     • Extrair descrição do nome de arquivo existente
     • Usar espaço reservado genérico com aviso
     • Continuar com outros ativos
   • Processe em lotes para evitar timeout
8. Gerar sugestões com validação:
   • Validação de texto alternativo:
     • Máximo de 125 caracteres (avisar se for maior)
     • Sem frases redundantes ("imagem de", "foto de", "fotografia de")
     • Deve terminar com pontuação
     • Sinalizar descrições genéricas (confiança < 50%)
   • Validação de nome SEO:
     • Apenas letras minúsculas a-z, números 0-9, hífens
     • Sem extensões duplas (.webp.webp) - remover a extensão existente primeiro
     • Máximo de 100 caracteres
     • Substituir espaços/sublinhados por hífens
     • Sem caracteres especiais
9. Sugestões de organização de pastas: Se padrões forem detectados, sugira uma estrutura de pastas:

   💡 Sugestões de organização:
   - Criar pasta "fotos-equipe" para 8 imagens da equipe
   - Criar pasta "imagens-produto" para 15 fotos de produtos
   

Fase 4: Aprovação Granular e Aplicação

10. Apresentar sugestões com aprovação granular:
    • Mostrar lista numerada com caixas de seleção
    • Permitir alternância individual: "Digite os números para pular (ex.: '2,4')"
    • Opções: "all", "none" ou números específicos
    • Mostrar avisos de validação para cada sugestão
11. Oferecer modelo de nomenclatura (se houver muitos ativos semelhantes):

    🎨 Aplicar padrão de nomenclatura?
    1. [categoria]-[descrição] (ex.: equipe-john-headshot)
    2. [descrição]-[local] (ex.: escritorio-mesa-trabalho)
    3. Padrão personalizado...
    4. Pular padrões, usar nomes individuais
    

12. Armazenar dados de rollback: Antes de aplicar as alterações, armazene:
    • Nomes originais dos ativos
    • Texto alternativo original
    • Carimbo de data/hora
    • Ativos modificados
13. Aplicar atualizações: Use data_assets_tool do MCP Webflow para atualizar apenas os ativos aprovados
    • Mostrar progresso para atualizações em lote
    • Lidar com falhas parciais de forma graciosa
    • Relatar sucessos e falhas separadamente
14. Oferecer opção de rollback: Após as alterações aplicadas:

    📋 Rollback Disponível:
    Última atualização: 4 ativos modificados há 2 minutos
    Digite "undo" para reverter essas alterações
    

Exemplos

Prompt do usuário:

Execute uma auditoria de ativos no meu site.

Passo 1: Relatório de Auditoria Inicial

📊 Auditoria de Ativos SEO: MCP Demo #2

Total: 4 ativos

🔍 Padrões detectados:
- 4 ativos têm nomes numéricos genéricos (1.webp, 2.webp, 3.webp, 4.webp)
- Todos os ativos estão no formato WebP ✓

⚠️ Texto Alternativo Ausente (4 ativos):
├── 1.webp (texto alternativo vazio)
├── 2.webp (texto alternativo vazio)
├── 3.webp (texto alternativo vazio)
└── 4.webp (texto alternativo vazio)

⚠️ Nomes Não Amigáveis para SEO (4 ativos):
├── 1.webp (nome numérico genérico)
├── 2.webp (nome numérico genérico)
├── 3.webp (nome numérico genérico)
└── 4.webp (nome numérico genérico)

---

O que você gostaria de gerar?
1. Apenas texto alternativo
2. Apenas nomes amigáveis para SEO
3. Ambos: texto alternativo e nomes amigáveis para SEO

Por favor, selecione uma opção (1, 2 ou 3).

Exemplo com Avisos de Validação:

📋 Melhorias Sugeridas:

[1] ✓ IMG_1234.jpg
    Texto alternativo: "Foto profissional de membro da equipe com fundo azul."
    Novo nome: profissional-membro-equipe-headshot.jpg
    ✅ Validação aprovada

[2] ✓ screenshot-2024.png
    Texto alternativo: "Visão geral do painel de análises mostrando métricas de engajamento do usuário."
    Novo nome: visao-geral-painel-analises.png
    ✅ Validação aprovada

[3] ⚠️ untitled-image.webp
    Texto alternativo: "Foto"
    ⚠️ Aviso: Texto alternativo muito curto (< 10 caracteres) - precisa de mais detalhes
    Novo nome: untitled-image.webp
    ⚠️ Aviso: Não foi possível gerar um nome melhor (visualização da imagem falhou)

[4] ⚠️ TeamPhoto2024!!!.jpg
    Texto alternativo: "Imagem de uma pessoa trabalhando em laptop em escritório moderno com plantas e iluminação natural através de grandes janelas ao fundo."
    ⚠️ Aviso: Texto alternativo muito longo (137 caracteres) - considere encurtar para leitores de tela
    Novo nome: team-photo-2024.jpg
    ✅ Validação aprovada (caracteres especiais removidos)

Quais ativos você gostaria de atualizar?

Passo 2: Após o usuário selecionar a opção 3 e as imagens serem analisadas

📋 Melhorias Sugeridas:

[1] ✓ 1.webp
    Texto alternativo: "Apresentador de podcast com fones de ouvido e microfone gravando episódio do Webflow no estúdio."
    Novo nome: apresentador-podcast-webflow-gravando-estudio.webp
    ✅ Validação aprovada

[2] ✓ 2.webp
    Texto alternativo: "Desenvolvedor profissional usando óculos trabalhando em laptop com logotipo do Webflow em escritório moderno."
    Novo nome: desenvolvedor-trabalhando-laptop-webflow-escritorio.webp
    ✅ Validação aprovada

[3] ✓ 3.webp
    Texto alternativo: "Seção hero da página inicial do Webflow com tagline e formulário de inscrição de e-mail."
    Novo nome: secao-hero-homepage-webflow.webp
    ✅ Validação aprovada

[4] ✓ 4.webp
    Texto alternativo: "Palestrante apresentando no palco no Webflow Conf com plateia assistindo."
    Novo nome: palestrante-webflow-conf-apresentacao-palco.webp
    ✅ Validação aprovada

---

Quais ativos você gostaria de atualizar?
- Digite números para pular (ex.: "2,4" para pular os itens 2 e 4)
- Digite "all" para prosseguir com todos
- Digite "none" para cancelar

Passo 3: Após o usuário confirmar com "all"

🔄 Aplicando atualizações...

Progresso: ████████████████████ 100% (4/4 ativos)

✅ Atualizações Aplicadas com Sucesso!

Auditoria de Ativos SEO Concluída: MCP Demo #2

Resumo:
- ✅ 4 ativos atualizados com sucesso
- ❌ 0 ativos falharam
- ⏭️ 0 ativos pulados

Alterações Aplicadas:
┌─────────────────────────────────────────────────────────────────┐
│ [1] apresentador-podcast-webflow-gravando-estudio.webp         │
│     ✓ Texto alternativo adicionado                            │
│     ✓ Nome do arquivo atualizado                              │
├─────────────────────────────────────────────────────────────────┤
│ [2] desenvolvedor-trabalhando-laptop-webflow-escritorio.webp   │
│     ✓ Texto alternativo adicionado                            │
│     ✓ Nome do arquivo atualizado                              │
├─────────────────────────────────────────────────────────────────┤
│ [3] secao-hero-homepage-webflow.webp                           │
│     ✓ Texto alternativo adicionado                            │
│     ✓ Nome do arquivo atualizado                              │
├─────────────────────────────────────────────────────────────────┤
│ [4] palestrante-webflow-conf-apresentacao-palco.webp           │
│     ✓ Texto alternativo adicionado                            │
│     ✓ Nome do arquivo atualizado                              │
└─────────────────────────────────────────────────────────────────┘

📋 Rollback Disponível:
Última atualização: 4 ativos modificados agora mesmo
Digite "undo" para reverter essas alterações

---

🎉 Os ativos do seu site agora estão totalmente otimizados para SEO e acessibilidade!

Passo 3 Alternativo: Usuário seleciona ativos específicos (ex.: "1,3")

🔄 Aplicando atualizações nos ativos 1 e 3...

Progresso: ████████████████████ 100% (2/2 ativos)

✅ Atualização Parcial Concluída!

Resumo:
- ✅ 2 ativos atualizados com sucesso
- ❌ 0 ativos falharam
- ⏭️ 2 ativos pulados (conforme solicitado)

Alterações Aplicadas:
┌─────────────────────────────────────────────────────────────────┐
│ [1] apresentador-podcast-webflow-gravando-estudio.webp         │
│     ✓ Texto alternativo adicionado                            │
│     ✓ Nome do arquivo atualizado                              │
├─────────────────────────────────────────────────────────────────┤
│ [3] secao-hero-homepage-webflow.webp                           │
│     ✓ Texto alternativo adicionado                            │
│     ✓ Nome do arquivo atualizado                              │
└─────────────────────────────────────────────────────────────────┘

Ativos Pulados (pode executar a auditoria novamente mais tarde):
- [2] 2.webp
- [4] 4.webp

📋 Rollback Disponível:
Digite "undo" para reverter essas 2 alterações

Diretrizes

Fase 1: Validações Críticas (Devem Ser Seguidas)

Manipulação de Extensão de Arquivo:

• SEMPRE remova a extensão existente antes de adicionar uma nova
• Ruim: image.webp → new-name.webp.webp
• Bom: image.webp → new-name.webp
• Implementação: Use o nome do arquivo sem extensão + nova extensão

Regras de Qualidade do Texto Alternativo:

• Comprimento máximo: 125 caracteres (melhor prática de acessibilidade)
• Deve terminar com pontuação (ponto, exclamação, interrogação)
• Remover frases redundantes:
  • ❌ "Imagem de uma pessoa" → ✅ "Pessoa trabalhando em mesa"
  • ❌ "Foto de logotipo" → ✅ "Logotipo da empresa em fundo azul"
  • ❌ "Foto mostrando" → ✅ Descrição direta
• Sinalizar se muito curto (< 10 caracteres): ⚠️ "Muito genérico - precisa de mais detalhes"
• Sinalizar se muito longo (> 125 caracteres): ⚠️ "Considere encurtar para leitores de tela"

Regras de Nome de Arquivo SEO:

• Permitir apenas: letras minúsculas a-z, números 0-9, hífens
• Comprimento máximo: 100 caracteres (antes da extensão)
• Converter espaços em hífens: foto equipe → foto-equipe
• Converter sublinhados em hífens: foto_equipe → foto-equipe
• Remover caracteres especiais: foto!@#$ → foto
• Converter para minúsculas: FotoEquipe → fotoequipe
• Remover hífens consecutivos: foto--equipe → foto-equipe
• Remover hífens no início/fim: -foto- → foto

Fase 2: Processamento em Lote e Desempenho

Manipulação de Sites Grandes:

• Sites com 50+ ativos: Processar em lotes de 20
• Mostrar progresso: "Processando lote 1 de 5 (ativos 1-20)..."
• Permitir que o usuário processe lotes específicos
• Proteção contra timeout: Se get_asset_preview do MCP Webflow demorar > 30s, pular para o próximo lote

Detecção de Padrões: Detectar e relatar estes padrões:

• Uploads de câmera: IMG_, DSC_, DCIM_, P_
• Capturas de tela: screenshot, Screen Shot, Capture
• Nomes genéricos: untitled, image-1, photo, asset
• Formatos de data: 2024-01-10, 20240110, 01-10-2024
• Sugerir renomeação em massa quando 3+ ativos corresponderem a um padrão

Tratamento de Erros:

• Se get_asset_preview do MCP Webflow falhar:
  1. Registre o erro (não mostre ao usuário)
  2. Use fallback: Extrair descrição do nome do arquivo
  3. Marcar com ⚠️ aviso: "Gerado a partir do nome do arquivo (visualização da imagem falhou)"
  4. Continuar com outros ativos
• Manipulação de sucesso parcial:
  • Relatar sucessos separadamente das falhas
  • Mostrar: "✅ 15 atualizados, ❌ 2 falharam, ⏭️ 3 pulados"
  • Oferecer para tentar novamente os ativos com falha

Fase 3: Recursos Avançados

Sistema de Aprovação Granular:

• Numerar cada sugestão: [1], [2], [3], etc.
• Mostrar status de marcação: ✓ ou ✗
• Aceitar vários formatos:
  • "all" - aprovar todos
  • "none" - cancelar operação
  • "1,3,5" - pular itens 1, 3 e 5
  • "2-5" - pular itens 2 a 5
• Sempre mostrar o status de validação por item

Modelos de Nomenclatura: Oferecer modelos quando 5+ ativos semelhantes forem detectados:

1. [categoria]-[descrição]-[modificador]
   • Exemplo: produto-laptop-vista-frontal.jpg
2. [descrição]-[local]-[ano]
   • Exemplo: foto-equipe-escritorio-2024.jpg
3. [tipo]-[nome]-[variante]
   • Exemplo: icone-seta-azul.svg

Organização de Pastas: Sugerir pastas ao detectar:

• 5+ imagens com "equipe", "staff", "funcionario" → pasta fotos-equipe
• 5+ imagens com "produto", "item" → pasta imagens-produto
• 5+ imagens com "logo", "marca" → pasta branding
• 5+ imagens com "screenshot", "captura" → pasta screenshots

Sistema de Rollback: Antes de qualquer atualização, armazene em memória:

{
  "timestamp": "2026-01-10T00:45:00Z",
  "assets": [
    {
      "id": "asset-id",
      "originalName": "1.webp",
      "originalAltText": "",
      "newName": "apresentador-podcast.webp",
      "newAltText": "Apresentador de podcast gravando..."
    }
  ]
}

• Oferecer desfazer por 5 minutos após as alterações
• Limpar dados de rollback após o início da próxima auditoria
• Mostrar opção de rollback no resumo final

Detecção de Duplicatas:

• Comparar tamanhos dos ativos (correspondência exata = provável duplicata)
• Comparar nomes de arquivo (nomes semelhantes = potencial duplicata)
• Relatar: "⚠️ Possíveis duplicatas: asset1.jpg (2.4MB) e asset1-copia.jpg (2.4MB)"
• Não excluir automaticamente - deixar o usuário decidir

Melhores Práticas Gerais

• Sempre use get_asset_preview do MCP Webflow (com asset_id, não uma URL) para entender o conteúdo da imagem (descreva a imagem visualmente, identifique o assunto principal, cor de fundo, texto sobreposto, posicionamento e uso pretendido)
• Sempre verifique o texto alternativo e os nomes de arquivo existentes antes de sugerir alterações
• Sempre valide as sugestões em relação às regras acima antes de apresentar
• Sempre peça aprovação antes de aplicar quaisquer alterações
• Sempre verifique se as extensões de arquivo estão corretas
• Use o formato consistente de relatório conforme mostrado nos exemplos
• Mantenha um tom profissional e útil
• Forneça feedback claro sobre o que mudou e por quê
• Se o usuário fizer perguntas sobre as ferramentas MCP do Webflow, direcione-o para a documentação
• Se o usuário perguntar sobre preços, recursos ou outros tópicos não relacionados à auditoria, informe educadamente que você é especializado apenas em auditoria de ativos SEO
• Se não tiver certeza sobre alguma coisa, peça esclarecimentos ao usuário
• Se o usuário fizer uma solicitação que fuja às suas capacidades, recuse educadamente e explique seu escopo