webflow/webflow-skills

Auditoría de Activos

Analiza los activos de un sitio de Webflow para optimización SEO.

Nota Importante

SIEMPRE utiliza las herramientas MCP de Webflow para todas las operaciones:

• Utiliza data_assets_tool del MCP de Webflow para obtener y actualizar activos
• Utiliza get_asset_preview del MCP de Webflow (con el asset_id del activo) para analizar el contenido de la imagen
• Utiliza data_sites_tool del MCP de Webflow con la acción list_sites para listar los sitios disponibles
• Utiliza webflow_guide_tool del MCP de Webflow para obtener las mejores prácticas antes de comenzar
• NO utilices otras herramientas o métodos para operaciones de Webflow
• Todas las llamadas a herramientas deben incluir el parámetro context requerido (15-25 palabras, perspectiva en tercera persona)

Instrucciones

Fase 1: Selección del Sitio y Descubrimiento de Activos

1. Obtener el sitio: Identifica el sitio objetivo. Si el usuario no proporciona el ID del sitio, pídelo.
2. Obtener todos los activos: Utiliza data_assets_tool del MCP de Webflow para obtener todos los activos del sitio (cada registro de activo incluye su asset_id, necesario para las vistas previas)
   • Para sitios con 50+ activos, procesa en lotes de 20
   • Muestra el progreso: "Procesando activos 1-20 de 150..."
3. Detectar patrones: Analiza la nomenclatura de activos en busca de patrones comunes:
   • Cargas de cámara (IMG_, DSC_, etc.)
   • Capturas de pantalla (screenshot, Screen Shot, etc.)
   • Nombres genéricos (untitled, image-1, etc.)
   • Nombres basados en fechas (2024-01-10, etc.)

Fase 2: Análisis de Problemas y Reconocimiento de Patrones

4. Identificar problemas: Enumera todos los activos que:
   • No tienen texto alternativo establecido (nulo o cadena vacía)
   • Tienen texto alternativo existente pero de baja calidad (demasiado corto, frases redundantes, etc.)
   • No tienen nombres de activo amigables para SEO
   • Son duplicados o muy similares
5. Informe de detección de patrones: Muestra los patrones detectados:

   🔍 Patrones detectados:
   - 15 activos comienzan con "IMG_" (cargas de cámara)
   - 8 activos contienen "screenshot"
   - Sugerencia: Renombrar estos patrones de forma masiva
   

6. Preguntar preferencia al usuario: Pregunta si desea generar:
   • Solo texto alternativo
   • Solo nombres amigables para SEO
   • Ambos
   • Aplicar una plantilla/patrón de nomenclatura

Fase 3: Análisis y Generación de Sugerencias

7. Analizar activos: Utiliza la herramienta get_asset_preview del MCP de Webflow, pasando el asset_id de cada activo (de la Fase 1), para analizar los activos que necesitan actualizaciones
   • Manejo de errores: Si falla get_asset_preview del MCP de Webflow, utiliza el plan de respaldo:
     • Extraer la descripción del nombre de archivo existente
     • Usar un marcador de posición genérico con advertencia
     • Continuar con otros activos
   • Procesa en lotes para evitar tiempos de espera
8. Generar sugerencias con validación:
   • Validación de texto alternativo:
     • Máximo 125 caracteres (advertir si es más largo)
     • Sin frases redundantes ("imagen de", "foto de", "imagen de")
     • Debe terminar con puntuación
     • Marcar descripciones genéricas (confianza < 50%)
   • Validación de nombre SEO:
     • Solo minúsculas a-z, 0-9, guiones
     • Sin extensiones dobles (.webp.webp) - eliminar la extensión existente primero
     • Máximo 100 caracteres
     • Reemplazar espacios/guiones bajos con guiones
     • Sin caracteres especiales
9. Sugerencias de organización de carpetas: Si se detectan patrones, sugiere una estructura de carpetas:

   💡 Sugerencias de organización:
   - Crear carpeta "team-photos" para 8 imágenes del equipo
   - Crear carpeta "product-images" para 15 fotos de productos
   

Fase 4: Aprobación Granular y Aplicación

10. Presentar sugerencias con aprobación granular:
    • Mostrar lista numerada con casillas de verificación
    • Permitir alternancia individual: "Ingresa los números para saltar (ej. '2,4')"
    • Opciones: "all", "none" o números específicos
    • Mostrar advertencias de validación para cada sugerencia
11. Ofrecer plantilla de nomenclatura (si hay muchos activos similares):

    🎨 ¿Aplicar patrón de nomenclatura?
    1. [categoría]-[descripción] (ej. equipo-juan-retrato)
    2. [descripción]-[ubicación] (ej. oficina-espacio-trabajo-escritorio)
    3. Patrón personalizado...
    4. Saltar patrones, usar nombres individuales
    

12. Almacenar datos de reversión: Antes de aplicar cambios, almacena:
    • Nombres de activos originales
    • Texto alternativo original
    • Marca de tiempo
    • Activos modificados
13. Aplicar actualizaciones: Utiliza data_assets_tool del MCP de Webflow para actualizar solo los activos aprobados
    • Mostrar progreso para actualizaciones por lotes
    • Manejar fallos parciales con elegancia
    • Reportar éxitos y fallos por separado
14. Ofrecer opción de reversión: Después de aplicar los cambios:

    📋 Reversión Disponible:
    Última actualización: 4 activos modificados hace 2 minutos
    Escribe "undo" para revertir estos cambios
    

Ejemplos

Solicitud del usuario:

Ejecuta una auditoría de activos en mi sitio.

Paso 1: Informe de Auditoría Inicial

📊 Auditoría SEO de Activos: MCP Demo #2

Total: 4 activos

🔍 Patrones detectados:
- 4 activos tienen nombres numéricos genéricos (1.webp, 2.webp, 3.webp, 4.webp)
- Todos los activos están en formato WebP ✓

⚠️ Falta texto alternativo (4 activos):
├── 1.webp (texto alternativo vacío)
├── 2.webp (texto alternativo vacío)
├── 3.webp (texto alternativo vacío)
└── 4.webp (texto alternativo vacío)

⚠️ Nombres no amigables para SEO (4 activos):
├── 1.webp (nombre numérico genérico)
├── 2.webp (nombre numérico genérico)
├── 3.webp (nombre numérico genérico)
└── 4.webp (nombre numérico genérico)

---

¿Qué te gustaría generar?
1. Solo texto alternativo
2. Solo nombres amigables para SEO
3. Ambos, texto alternativo y nombres amigables para SEO

Por favor, selecciona una opción (1, 2 o 3).

Ejemplo con Advertencias de Validación:

📋 Mejoras Sugeridas:

[1] ✓ IMG_1234.jpg
    Texto alternativo: "Retrato profesional de miembro del equipo con fondo azul."
    Nuevo nombre: retrato-profesional-miembro-equipo.jpg
    ✅ Validación superada

[2] ✓ screenshot-2024.png
    Texto alternativo: "Vista general de análisis de panel que muestra métricas de participación del usuario."
    Nuevo nombre: vista-general-analisis-panel.png
    ✅ Validación superada

[3] ⚠️ untitled-image.webp
    Texto alternativo: "Foto"
    ⚠️ Advertencia: Texto alternativo demasiado corto (< 10 caracteres) - necesita más detalle
    Nuevo nombre: untitled-image.webp
    ⚠️ Advertencia: No se pudo generar un mejor nombre (falló la vista previa de la imagen)

[4] ⚠️ TeamPhoto2024!!!.jpg
    Texto alternativo: "Imagen de una persona trabajando en un portátil en una oficina moderna con plantas e iluminación natural a través de grandes ventanales al fondo."
    ⚠️ Advertencia: Texto alternativo demasiado largo (137 caracteres) - considera acortarlo para lectores de pantalla
    Nuevo nombre: team-photo-2024.jpg
    ✅ Validación superada (caracteres especiales eliminados)

¿Qué activos te gustaría actualizar?

Paso 2: Después de que el usuario seleccione la opción 3 y las imágenes sean analizadas

📋 Mejoras Sugeridas:

[1] ✓ 1.webp
    Texto alternativo: "Presentador de podcast con auriculares y micrófono grabando episodio de Webflow en estudio."
    Nuevo nombre: presentador-podcast-webflow-grabacion-estudio.webp
    ✅ Validación superada

[2] ✓ 2.webp
    Texto alternativo: "Desarrollador profesional con gafas trabajando en portátil con logotipo de Webflow en oficina moderna."
    Nuevo nombre: desarrollador-trabajando-portatil-webflow-oficina.webp
    ✅ Validación superada

[3] ✓ 3.webp
    Texto alternativo: "Sección hero de la página de inicio de Webflow con eslogan y formulario de registro de correo electrónico."
    Nuevo nombre: webflow-pagina-inicio-seccion-hero.webp
    ✅ Validación superada

[4] ✓ 4.webp
    Texto alternativo: "Orador presentando en el escenario de Webflow Conf con audiencia mirando."
    Nuevo nombre: webflow-conf-orador-presentacion-escenario.webp
    ✅ Validación superada

---

¿Qué activos te gustaría actualizar?
- Escribe números para saltar (ej. "2,4" para saltar los elementos 2 y 4)
- Escribe "all" para continuar con todos
- Escribe "none" para cancelar

Paso 3: Después de que el usuario confirme con "all"

🔄 Aplicando actualizaciones...

Progreso: ████████████████████ 100% (4/4 activos)

✅ ¡Actualizaciones Aplicadas Exitosamente!

Auditoría SEO de Activos Completa: MCP Demo #2

Resumen:
- ✅ 4 activos actualizados exitosamente
- ❌ 0 activos fallaron
- ⏭️ 0 activos saltados

Cambios Aplicados:
┌─────────────────────────────────────────────────────────────────┐
│ [1] presentador-podcast-webflow-grabacion-estudio.webp          │
│     ✓ Texto alternativo añadido                                 │
│     ✓ Nombre de archivo actualizado                             │
├─────────────────────────────────────────────────────────────────┤
│ [2] desarrollador-trabajando-portatil-webflow-oficina.webp      │
│     ✓ Texto alternativo añadido                                 │
│     ✓ Nombre de archivo actualizado                             │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-pagina-inicio-seccion-hero.webp                     │
│     ✓ Texto alternativo añadido                                 │
│     ✓ Nombre de archivo actualizado                             │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-orador-presentacion-escenario.webp             │
│     ✓ Texto alternativo añadido                                 │
│     ✓ Nombre de archivo actualizado                             │
└─────────────────────────────────────────────────────────────────┘

📋 Reversión Disponible:
Última actualización: 4 activos modificados hace un momento
Escribe "undo" para revertir estos cambios

---

🎉 ¡Los activos de tu sitio están ahora completamente optimizados para SEO y accesibilidad!

Paso 3 Alternativo: El usuario selecciona activos específicos (ej. "1,3")

🔄 Aplicando actualizaciones a los activos 1 y 3...

Progreso: ████████████████████ 100% (2/2 activos)

✅ ¡Actualización Parcial Completa!

Resumen:
- ✅ 2 activos actualizados exitosamente
- ❌ 0 activos fallaron
- ⏭️ 2 activos saltados (según lo solicitado)

Cambios Aplicados:
┌─────────────────────────────────────────────────────────────────┐
│ [1] presentador-podcast-webflow-grabacion-estudio.webp          │
│     ✓ Texto alternativo añadido                                 │
│     ✓ Nombre de archivo actualizado                             │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-pagina-inicio-seccion-hero.webp                     │
│     ✓ Texto alternativo añadido                                 │
│     ✓ Nombre de archivo actualizado                             │
└─────────────────────────────────────────────────────────────────┘

Activos Saltados (puedes ejecutar la auditoría de nuevo más tarde):
- [2] 2.webp
- [4] 4.webp

📋 Reversión Disponible:
Escribe "undo" para revertir estos 2 cambios

Pautas

Fase 1: Validaciones Críticas (Obligatorio)

Manejo de Extensiones de Archivo:

• SIEMPRE elimina la extensión existente antes de añadir una nueva
• Malo: image.webp → new-name.webp.webp
• Bueno: image.webp → new-name.webp
• Implementación: Usar nombre de archivo sin extensión + nueva extensión

Reglas de Calidad del Texto Alternativo:

• Longitud máxima: 125 caracteres (mejor práctica de accesibilidad)
• Debe terminar con puntuación (punto, exclamación, interrogación)
• Eliminar frases redundantes:
  • ❌ "Imagen de una persona" → ✅ "Persona trabajando en escritorio"
  • ❌ "Foto de logotipo" → ✅ "Logotipo de la empresa sobre fondo azul"
  • ❌ "Imagen que muestra" → ✅ Descripción directa
• Marcar si es demasiado corto (< 10 caracteres): ⚠️ "Demasiado genérico - necesita más detalle"
• Marcar si es demasiado largo (> 125 caracteres): ⚠️ "Considera acortarlo para lectores de pantalla"

Reglas de Nombre de Archivo SEO:

• Solo permitir: minúsculas a-z, números 0-9, guiones
• Longitud máxima: 100 caracteres (antes de la extensión)
• Convertir espacios a guiones: foto equipo → foto-equipo
• Convertir guiones bajos a guiones: foto_equipo → foto-equipo
• Eliminar caracteres especiales: foto!@#$ → foto
• Convertir a minúsculas: FotoEquipo → fotoequipo
• Eliminar guiones consecutivos: foto--equipo → foto-equipo
• Recortar guiones al inicio/final: -foto- → foto

Fase 2: Procesamiento por Lotes y Rendimiento

Manejo de Sitios Grandes:

• Sitios con 50+ activos: Procesar en lotes de 20
• Mostrar progreso: "Procesando lote 1 de 5 (activos 1-20)..."
• Permitir al usuario procesar lotes específicos
• Protección contra tiempo de espera: Si get_asset_preview del MCP de Webflow tarda > 30s, saltar al siguiente lote

Detección de Patrones: Detectar e informar estos patrones:

• Cargas de cámara: IMG_, DSC_, DCIM_, P_
• Capturas de pantalla: screenshot, Screen Shot, Capture
• Nombres genéricos: untitled, image-1, photo, asset
• Formatos de fecha: 2024-01-10, 20240110, 01-10-2024
• Sugerir renombrado masivo cuando 3+ activos coincidan con un patrón

Manejo de Errores:

• Si falla get_asset_preview del MCP de Webflow:
  1. Registrar el error (no mostrarlo al usuario)
  2. Usar plan de respaldo: Extraer descripción del nombre de archivo
  3. Marcar con ⚠️ advertencia: "Generado a partir del nombre de archivo (falló la vista previa de la imagen)"
  4. Continuar con otros activos
• Manejo de éxito parcial:
  • Reportar éxitos por separado de los fallos
  • Mostrar: "✅ 15 actualizados, ❌ 2 fallaron, ⏭️ 3 saltados"
  • Ofrecer reintentar los activos fallidos

Fase 3: Funciones Avanzadas

Sistema de Aprobación Granular:

• Numerar cada sugerencia: [1], [2], [3], etc.
• Mostrar estado de verificación: ✓ o ✗
• Aceptar múltiples formatos:
  • "all" - aprobar todo
  • "none" - cancelar operación
  • "1,3,5" - saltar los elementos 1, 3 y 5
  • "2-5" - saltar los elementos 2 al 5
• Mostrar siempre el estado de validación por elemento

Plantillas de Nomenclatura: Ofrecer plantillas cuando se detecten 5+ activos similares:

1. [categoría]-[descripción]-[modificador]
   • Ejemplo: producto-portatil-vista-frontal.jpg
2. [descripción]-[ubicación]-[año]
   • Ejemplo: foto-equipo-oficina-2024.jpg
3. [tipo]-[nombre]-[variante]
   • Ejemplo: icono-flecha-azul.svg

Organización de Carpetas: Sugerir carpetas al detectar:

• 5+ imágenes con "team", "staff", "employee" → carpeta team-photos
• 5+ imágenes con "product", "item" → carpeta product-images
• 5+ imágenes con "logo", "brand" → carpeta branding
• 5+ imágenes con "screenshot", "capture" → carpeta screenshots

Sistema de Reversión: Antes de cualquier actualización, almacenar en memoria:

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

• Ofrecer deshacer durante 5 minutos después de los cambios
• Borrar datos de reversión después de que comience la siguiente auditoría
• Mostrar opción de reversión en el resumen final

Detección de Duplicados:

• Comparar tamaños de activos (coincidencia exacta = probable duplicado)
• Comparar nombres de archivo (nombres similares = posible duplicado)
• Reportar: "⚠️ Posibles duplicados: asset1.jpg (2.4MB) y asset1-copia.jpg (2.4MB)"
• No eliminar automáticamente - dejar que el usuario decida

Mejores Prácticas Generales

• Utiliza siempre get_asset_preview del MCP de Webflow (con asset_id, no una URL) para comprender el contenido de la imagen.
• Mantén un tono profesional y útil en todas las interacciones.
• Valida todas las entradas del usuario antes de procesarlas.