webflow/webflow-skills

Actualización Masiva de CMS

Crea o actualiza múltiples ítems CMS con validación completa, aprobación granular y capacidad de deshacer cambios.

Nota Importante

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

• Usa data_sites_tool de Webflow MCP con la acción list_sites para listar los sitios disponibles
• Usa data_cms_tool de Webflow MCP con la acción get_collection_list para listar colecciones CMS
• Usa data_cms_tool de Webflow MCP con la acción get_collection_details para obtener esquemas de colecciones
• Usa data_cms_tool de Webflow MCP con la acción list_collection_items para recuperar ítems existentes
• Usa data_cms_tool de Webflow MCP con la acción create_collection_items para crear ítems (borrador o publicados)
• Usa data_cms_tool de Webflow MCP con la acción update_collection_items para actualizar ítems (borrador o publicados)
• Usa data_cms_tool de Webflow MCP con la acción publish_collection_items para publicar ítems en borrador
• Usa webflow_guide_tool de Webflow MCP para obtener las mejores prácticas antes de comenzar
• NO uses ninguna otra herramienta o método 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 de Sitio y Colección

1. Obtener sitio: Identifica el sitio de destino. Si el usuario no proporciona el ID del sitio, pídelo.
2. Listar colecciones: Usa data_cms_tool de Webflow MCP con la acción get_collection_list para mostrar las colecciones disponibles
3. Preguntar al usuario que seleccione la colección: El usuario especifica con qué colección trabajar
4. Obtener esquema de la colección: Usa data_cms_tool de Webflow MCP con la acción get_collection_details para recuperar:
   • Todas las definiciones de campos con sus tipos
   • Campos obligatorios y opcionales
   • Validaciones de campos (longitud máxima, patrones, etc.)
   • Destinos de campos de referencia

Fase 2: Recogida y Análisis de Datos

5. Preguntar tipo de operación: Aclara lo que el usuario quiere hacer:

   • Crear solo ítems nuevos
   • Actualizar solo ítems existentes
   • Crear y actualizar ambos

6. Recibir datos del usuario: Acepta datos en formatos flexibles:

   • Formato estructurado (tipo JSON)
   • Descripciones en lenguaje natural
   • Datos estilo CSV
   • Listas con viñetas

7. Analizar y normalizar: Convierte los datos del usuario a formato estructurado

8. Obtener ítems existentes (si hay actualizaciones): Usa data_cms_tool de Webflow MCP con la acción list_collection_items para obtener los datos actuales

   IMPORTANTE - Búsqueda eficiente de ítems:

   • Cuando busques ítems específicos por nombre, usa SIEMPRE el parámetro name para filtrar (ej., name: "Pikachu")
   • Cuando busques por slug, usa el parámetro slug para filtrar
   • NUNCA obtengas todos los ítems primero y luego busques en los resultados: esto malgasta llamadas API y tokens
   • Solo obtén la lista completa cuando necesites mostrar todos los ítems o no sepas a qué ítems específicos dirigirte

Fase 3: Validación y Análisis

9. Validar todos los datos:
   • Nombres de campos: Comprueba que todos los nombres de campo existen en el esquema
   • Campos obligatorios: Asegúrate de que se proporcionen todos los campos obligatorios
   • Tipos de campos: Valida que los tipos de datos coincidan con el esquema
   • Restricciones: Comprueba longitudes máximas, patrones, valores permitidos
   • Slugs: Asegúrate de que los slugs sean únicos y válidos
   • Campos de referencia: Verifica que los ítems referenciados existan
10. Detectar conflictos:
    • Slugs duplicados (dentro del lote o con ítems existentes)
    • Campos obligatorios faltantes
    • Tipos de datos no válidos
    • Infracciones de restricciones
11. Analizar impacto:
    • Contar creaciones vs. actualizaciones
    • Identificar qué campos cambiarán
    • Calcular tamaño del lote y tiempo de procesamiento

Fase 4: Vista Previa y Aprobación Granular

12. Generar vista previa detallada:
    • Mostrar cada ítem con su estado de validación
    • Mostrar advertencias sobre cualquier problema
    • Para actualizaciones, mostrar diferencias (antes → después)
    • Para creaciones, mostrar todos los valores de campo
    • Numerar cada ítem para aprobación selectiva
13. Presentar opciones de aprobación granular:
    • Permitir al usuario seleccionar ítems específicos a procesar
    • Opciones: "todos", "ninguno", números específicos, rangos de números
    • Mostrar tiempo estimado de procesamiento
14. Ofrecer opciones de publicación:
    • Publicar inmediatamente (usar endpoints *_live)
    • Crear como borradores (usar endpoints normales + publicación manual)

Fase 5: Ejecución e Informe

15. Almacenar datos de reversión: Antes de cualquier cambio, guarda:
    • Valores originales de todos los ítems actualizados
    • Marca de tiempo
    • Detalles de la operación
16. Procesar en lotes:
    • Máximo 50 ítems por lote
    • Mostrar indicador de progreso
    • Manejar límites de tasa con elegancia
17. Ejecutar operaciones: Usa las herramientas MCP de Webflow adecuadas según la elección del usuario
18. Manejar errores con elegancia:
    • Continuar procesando si falla un solo ítem
    • Registrar éxitos y fallos por separado
    • Proporcionar mensajes de error detallados
19. Generar informe completo:
    • Resumen (conteo de éxitos/fallos)
    • Resultados detallados por ítem
    • IDs de ítems creados/actualizados
    • Detalles de error para ítems fallidos
20. Ofrecer opción de reversión: Permitir al usuario deshacer cambios si es necesario

Ejemplos

Mensaje del usuario:

Añadir 2 entradas de blog sobre Webflow MCP y actualizar la primera entrada para que diga "Top" en lugar de "Best"

Paso 1: Selección de Sitio y Colección

📋 Configuración de Actualización Masiva de CMS

Sitios Disponibles:
1. MCP Demo#1
2. MCP Demo#2
3. MCP Demo#3

Por favor, seleccione un sitio (1-3):

El usuario selecciona: 1

Colecciones Disponibles en MCP Demo#1:
└── Blog Posts (9 ítems)
    Campos: name, slug, post-body, post-summary, main-image, thumbnail-image, featured, color

¿Proceder con la colección Blog Posts? (sí/no)

El usuario confirma: sí

Paso 2: Recogida de Datos

🔍 Esquema de Colección: Blog Posts

Campos Obligatorios:
- name (PlainText, máx. 256 caracteres)
- slug (PlainText, máx. 256 caracteres, solo alfanumérico)

Campos Opcionales:
- post-body (RichText)
- post-summary (PlainText)
- main-image (Image)
- thumbnail-image (Image)
- featured (Switch, true/false)
- color (Color, formato hex)

Voy a analizar tu solicitud:
- Crear 2 nuevas entradas sobre Webflow MCP
- Actualizar la primera entrada: "Best" → "Top"

Generando ítems...

Paso 3: Validación y Vista Previa

📋 Vista Previa: Actualización Masiva de CMS

Colección: Blog Posts
Operaciones: Crear 2 ítems + Actualizar 1 ítem

---

### 🆕 Ítems a Crear (2)

[1] ✓ NUEVA ENTRADA
    name: "Webflow MCP: The Future of Web Development"
    slug: "webflow-mcp-future-web-development"
    post-summary: "Discover how Webflow MCP is revolutionizing..."
    post-body: "<h1>The Future is Here</h1><p>..."
    featured: true
    color: "#9B59B6"
    ✅ Todas las validaciones superadas

[2] ✓ NUEVA ENTRADA
    name: "Why Webflow MCP Will Transform Your Workflow in 2026"
    slug: "webflow-mcp-transform-workflow-2026"
    post-summary: "Learn how Webflow MCP's integration..."
    post-body: "<h1>Transform Your Workflow</h1><p>..."
    featured: true
    color: "#3498DB"
    ✅ Todas las validaciones superadas

---

### ✏️ Ítems a Actualizar (1)

[3] ✓ ACTUALIZAR EXISTENTE
    ID del ítem: 69615f84fc6ce1aa444d24d5
    Slug: why-webflow-is-best-2026-ai

    Cambios:
      name: "Why Webflow is the Best Choice for 2026" → "Why Webflow is the Top Choice for 2026"

    ✅ Todas las validaciones superadas

---

**Resumen:**
- ✅ 2 ítems se crearán
- ✅ 1 ítem se actualizará
- ⚠️ 0 advertencias
- ❌ 0 errores

**Opciones de Publicación:**
1. Publicar inmediatamente (recomendado)
2. Guardar como borradores

¿Qué ítems deseas procesar?
- Escribe "todos" para procesar los 3 ítems
- Escribe números para saltar (ej., "2" para saltar el ítem 2)
- Escribe "ninguno" para cancelar

Selecciona opción de publicación (1/2): _
Selecciona ítems: _

El usuario selecciona: 1, todos

⚠️ Estás a punto de:
- Crear 2 nuevas entradas de blog (publicadas en vivo)
- Actualizar 1 entrada de blog existente (cambios publicados en vivo)

Escribe "confirmar" para continuar.

El usuario confirma: confirmar

Paso 4: Ejecución y Resultados

🔄 Procesando actualización masiva...

Creando ítems: ██████████ 100% (2/2)
Actualizando ítems: ██████████ 100% (1/1)

✅ ¡Actualización Masiva de CMS Completada!

---

### 🆕 Ítems Creados (2)

✓ [1] "Webflow MCP: The Future of Web Development"
      ID: 6961640c66de07bed9aacf3e
      Slug: webflow-mcp-future-web-development
      Publicado: 9 ene 2026, 20:24

✓ [2] "Why Webflow MCP Will Transform Your Workflow in 2026"
      ID: 6961640c66de07bed9aacf41
      Slug: webflow-mcp-transform-workflow-2026
      Publicado: 9 ene 2026, 20:24

---

### ✏️ Ítems Actualizados (1)

✓ [3] "Why Webflow is the Top Choice for 2026"
      ID: 69615f84fc6ce1aa444d24d5
      Cambiado: título actualizado
      Publicado: 9 ene 2026, 20:24

---

**Resumen:**
- ✅ 2 ítems creados correctamente
- ✅ 1 ítem actualizado correctamente
- ❌ 0 fallos
- ⏱️ Completado en 3.2 segundos

**Total de Ítems:** 11 (era 9)

📋 Reversión Disponible:
Última actualización: 3 ítems modificados hace un momento
Escribe "deshacer" en un plazo de 5 minutos para revertir todos los cambios

Alternativa: Con Advertencias de Validación

📋 Vista Previa: Actualización Masiva de CMS

[1] ⚠️ NUEVA ENTRADA
    name: "Test Post"
    slug: "test"
    post-summary: "Hi"
    ⚠️ Advertencia: post-summary demasiado corto (< 20 caracteres) - puede afectar al SEO
    ⚠️ Advertencia: slug demasiado genérico - considera un slug más descriptivo
    ⚠️ Advertencia: falta post-body - el contenido estará vacío
    ✅ Campos obligatorios presentes (se puede continuar)

[2] ❌ NUEVA ENTRADA
    name: "Another Post!!!"
    slug: "another post"
    ❌ Error: el slug contiene espacios (debe ser alfanumérico solo con guiones)
    ❌ Error: el nombre contiene caracteres especiales no permitidos
    🔴 No se puede continuar - corrige los errores primero

---

**Resumen:**
- ✅ 1 ítem se puede crear (con advertencias)
- ❌ 1 ítem tiene errores (no se puede crear)

¿Corregir el ítem 2 o saltarlo? (corregir/saltar)

Directrices

Fase 1: Requisitos Críticos

Selección de Sitio y Colección:

• Siempre obtén la lista real de sitios usando data_sites_tool con la acción list_sites
• Nunca asumas IDs de sitios
• Muestra los nombres de las colecciones y el recuento de ítems
• Muestra el esquema de campos antes de aceptar datos
• Confirma la selección de la colección con el usuario

Fase 2: Análisis de Datos

Formatos de Entrada Flexibles: Acepta datos en múltiples formatos:

1. Estructurado (tipo JSON):

CREAR:
- name: "Post Title"
  slug: "post-slug"
  featured: true

2. Lenguaje Natural:

"Añade una entrada de blog llamada 'Getting Started' con slug 'getting-started'"

3. Estilo CSV:

name,slug,featured
"Post 1","post-1",true
"Post 2","post-2",false

4. Listas con Viñetas:

- Post 1: "Title" (slug: title-slug)
- Post 2: "Another" (slug: another-slug)

Reglas de Análisis:

• Sé flexible con las variaciones de formato
• Infiere campos opcionales faltantes
• Pide aclaración si es ambiguo
• Nunca asumas valores de campos obligatorios

Búsqueda Eficiente de Ítems: Al obtener ítems existentes para actualizaciones, usa parámetros de filtro para minimizar las llamadas API:

# Bueno - Filtrar por nombre cuando conoces el nombre del ítem
data_cms_tool(action: "list_collection_items", collection_id, name: "Pikachu")

# Bueno - Filtrar por slug cuando conoces el slug
data_cms_tool(action: "list_collection_items", collection_id, slug: "pikachu")

# Malo - Obtener todos los ítems y luego buscar en los resultados
data_cms_tool(action: "list_collection_items", collection_id)  # Devuelve 100 ítems
# Luego buscar manualmente "Pikachu" en los resultados...

• Usa SIEMPRE los parámetros name o slug cuando busques ítems específicos
• Esto reduce las llamadas API, el tamaño de la respuesta y el uso de tokens
• Solo obtén listas sin filtrar cuando muestres todos los ítems o cuando el destino sea desconocido

Fase 3: Reglas de Validación

Validación de Nombres de Campo:

• Comprueba que todos los nombres de campo existan en el esquema
• Coincidencia que distingue mayúsculas y minúsculas
• Sugiere correcciones para errores tipográficos
• Ejemplo: "autor" → ¿Quisiste decir "author"?

Campos Obligatorios:

• name y slug son SIEMPRE obligatorios para CMS de Webflow
• Comprueba los campos obligatorios específicos de la colección desde el esquema
• Enumera claramente todos los campos obligatorios faltantes
• No se puede continuar si faltan campos obligatorios

Validación de Tipos de Campo:

PlainText:

• Comprueba las restricciones de longitud máxima
• Valida patrones si se especifican
• No se permite HTML

RichText:

• Debe ser HTML válido
• Comprueba etiquetas no cerradas
• Permite elementos HTML comunes

Image/File:

• Acepta IDs de archivo o URLs
• Valida que el archivo exista (si es posible)
• Texto alternativo opcional

Switch (Booleano):

• Acepta: true/false, sí/no, 1/0
• Normaliza a booleano

Color:

• Debe estar en formato hex (#RRGGBB)
• Valida los caracteres hex
• Ejemplo: #FF5733 ✓, rojo ✗

Campos de Referencia:

• Deben hacer referencia a IDs de ítems existentes
• Valida que los ítems referenciados existan
• Muestra los nombres de los ítems referenciados para mayor claridad

Validación de Slug:

• CRÍTICO: Debe ser alfanumérico solo con guiones
• Sin espacios, guiones bajos ni caracteres especiales
• Máximo 256 caracteres
• Debe ser único (comprobar contra existentes + lote)
• Sugerir slugs automáticamente a partir de los títulos si faltan
• Ejemplo:
  • ❌ "My Post!" → ⚠️ Contiene caracteres especiales
  • ✅ "my-post" → Válido

Validación de Restricciones:

• Longitud máxima: Advertir si se acerca al límite, error si supera
• Patrones: Probar patrones de expresiones regulares del esquema
• Valores permitidos: Comprobar contra opciones enumeradas

Fase 4: Vista Previa y Aprobación

Formato de Vista Previa:

Para Operaciones de Creación:

[1] ✓ NUEVA ENTRADA
    field1: "valor1"
    field2: "valor2"
    field3: "valor3"
    ✅ Todas las validaciones superadas

Para Operaciones de Actualización:

[2] ✓ ACTUALIZAR EXISTENTE
    ID del ítem: xxx
    Slug: existing-slug

    Cambios:
      field1: "valor antiguo" → "valor nuevo"
      field2: (sin cambios)
      field3: "antiguo" → "nuevo"

    ✅ Todas las validaciones superadas

Para Ítems con Advertencias:

[3] ⚠️ NUEVA ENTRADA
    name: "Title"
    ⚠️ Advertencia: Falta el campo opcional 'post-body'
    ⚠️ Advertencia: El slug puede ser demasiado genérico
    ✅ Se puede continuar (solo advertencias)

Para Ítems con Errores:

[4] ❌ NUEVA ENTRADA
    name: "Title!!!"
    slug: "bad slug"
    ❌ Error: el slug contiene espacios
    ❌ Error: el nombre tiene caracteres especiales
    🔴 No se puede continuar: hay que corregir los errores

Aprobación Granular:

• Numera cada ítem: [1], [2], [3]...
• Permite procesamiento selectivo
• Acepta formatos:
  • "todos" - procesar todo
  • "ninguno" - cancelar operación
  • "1,3,5" - procesar los ítems 1, 3 y 5
  • "1-5" - procesar los ítems del 1 al 5
  • "2" - saltar solo el ítem 2, procesar el resto

Opciones de Publicación:

• Publicación inmediata: Usa los endpoints *_live (recomendado)
• Modo borrador: Usa los endpoints normales y permite publicación manual posterior

Fase 5: Ejecución y Reversión

Almacenamiento de Datos de Reversión: Antes de cualquier cambio, guarda en una variable de contexto:

• Datos originales del ítem (todos los campos)
• Marca de tiempo en formato ISO
• Detalles de la operación (creación/actualización, ID de colección, IDs de ítems)
• Usa la estructura rollbackData = { items: [...], timestamp: "...", operation: "..." }

Procesamiento por Lotes:

• Divide automáticamente las operaciones grandes en lotes de 50 ítems
• Si hay más de 50 ítems para crear, crea los primeros 50, informa al usuario, pregunta si continuar
• Esto evita superar los límites de la API de Webflow
• Muestra una barra de progreso para cada lote

Manejo de Errores:

• Si falla un ítem, NO detengas todo el lote
• Registra el error, continúa con el siguiente ítem
• Después del lote, muestra un resumen de fallos
• Proporciona mensajes de error significativos (no solo "Error de API")
• Ofrece reintentar ítems fallidos

Formato del Informe:

📋 Informe de Actualización Masiva de CMS

---

### Resumen
- ✅ 5 ítems creados correctamente
- ✅ 3 ítems actualizados correctamente
- ❌ 1 ítem fallido

---

### Detalles de Errores

❌ [4] "Entry with Invalid Slug"
    Razón: El slug "invalid slug" contiene espacios
    Acción sugerida: Usa guiones (ej., "invalid-slug")

---

### Reversión
¿Quieres deshacer estos cambios? (sí/no)
    - Se revertirán todos los cambios de esta sesión
    - Disponible dentro de 5 minutos

Mecanismo de Reversión:

• Cuando el usuario escribe "deshacer" o "undo", recupera los datos de reversión
• Para ítems creados: Usa data_cms_tool con acción delete_collection_items
• Para ítems actualizados: Usa data_cms_tool con acción update_collection_items con los valores originales
• Confirma cada paso de reversión con el usuario
• Muestra el resultado: "✅ Reversión completada: 3 ítems restaurados"

Mejores Prácticas

Manejo de la Comunicación con el Usuario

• Usa emojis e iconos para mejorar la legibilidad: ✅, ❌, ⚠️, 📋, 🆕, ✏️, 🔄
• Mantén las indicaciones concisas pero informativas
• Siempre confirma las decisiones importantes antes de ejecutarlas
• Proporciona retroalimentación de progreso para operaciones largas

Optimización de Llamadas API

• Minimiza las llamadas API usando parámetros de filtro
• Almacena en caché los datos de la colección (esquema, ítems existentes) durante la sesión
• Agrupa las operaciones para reducir el número de llamadas
• Usa el parámetro limit cuando obtengas listas de ítems para evitar respuestas grandes

Validación de Seguridad

• Nunca expongas tokens o secretos de API
• Valida todos los datos de entrada del usuario
• Comprueba los permisos antes de las operaciones
• Proporciona datos de prueba cuando sea posible

Registro

• Registra todas las operaciones para depuración
• Incluye marcas de tiempo e IDs de ítems
• Registra tanto los éxitos como los fallos
• Proporciona registros legibles para el usuario y para depuración técnica

Referencia de la API

Todas las operaciones deben usar las herramientas MCP de Webflow. No se permiten otros métodos.

Herramientas Obligatorias

Herramienta	Acciones	Propósito
data_sites_tool	list_sites	Listar sitios disponibles
data_cms_tool	get_collection_list, get_collection_details, list_collection_items, create_collection_items, update_collection_items, publish_collection_items	Todas las operaciones CMS
webflow_guide_tool	-	Obtener mejores prácticas

Parámetro de Contexto

Todas las llamadas a herramientas MCP requieren un parámetro context con 15-25 palabras en tercera persona:

Bueno:

context: "The developer is performing a bulk CMS update to add new blog posts and update existing ones."

Malo:

context: "Adding posts"  # Demasiado corto
context: "The user wants to add some blog posts and also update some other ones and this is a very long description that is way too detailed and exceeds the limit because it keeps going on and on and on."  # Demasiado largo

Ejemplo Final

Solicitud Compleja del Usuario

"Crear 3 nuevas entradas de blog sobre IA y actualizar la entrada 'About Us' para que diga 'About Our Company'. También añadir 2 productos a la colección de productos."

Respuesta:

📋 He detectado 2 colecciones para procesar:

1. Blog Posts
   - Crear: 3 nuevas entradas sobre IA
   - Actualizar: "About Us"

2. Products
   - Crear: 2 nuevos productos

---

Seleccionemos la primera colección. ¿Confirmas la colección Blog Posts? (sí/no)

Esto demuestra manejo multi-colección. Cada colección se procesa por separado siguiendo las 5 fases completas mencionadas anteriormente.