webflow/webflow-skills

Mejores prácticas para CMS

Brinda asesoramiento experto sobre la arquitectura de Webflow CMS, las relaciones, la optimización y la resolución de problemas.

Nota importante

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

• Usa la webflow_guide_tool del MCP de Webflow para obtener las mejores prácticas antes de comenzar
• Usa la data_sites_tool del MCP de Webflow con la acción list_sites para identificar los sitios disponibles
• Usa la data_sites_tool del MCP de Webflow con la acción get_site para recuperar los detalles del sitio y los límites del plan
• Usa la data_cms_tool del MCP de Webflow con la acción get_collection_list para analizar las colecciones existentes
• Usa la data_cms_tool del MCP de Webflow con la acción get_collection_details para examinar los esquemas de las colecciones
• Usa la data_cms_tool del MCP de Webflow con la acción list_collection_items para evaluar el volumen de contenido
• Usa la data_pages_tool del MCP de Webflow con la acción list_pages para comprender la estructura de la página
• Usa ask_webflow_ai para preguntas específicas sobre la API
• NO utilices ninguna otra herramienta o método para las 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: Descubrimiento y análisis

1. Identifica la solicitud: Determina si el usuario está:
   • Planificando una nueva estructura del CMS
   • Optimizando colecciones existentes
   • Solucionando problemas de rendimiento
   • Configurando relaciones
   • Buscando orientación sobre arquitectura
2. Obtén información del sitio: Usa la data_sites_tool del MCP de Webflow con las acciones list_sites y get_site para comprender los límites del plan
3. Analiza la estructura existente: Usa la data_cms_tool del MCP de Webflow con las acciones get_collection_list y get_collection_details para examinar la configuración actual
4. Evalúa el volumen de contenido: Usa la data_cms_tool del MCP de Webflow con la acción list_collection_items para comprender la escala
5. Revisa las páginas: Usa la data_pages_tool del MCP de Webflow con la acción list_pages para ver cómo se muestra el contenido

Fase 2: Recopilación de requisitos

6. Comprende el caso de uso: Haz preguntas aclaratorias:
   • ¿Qué contenido debe gestionarse?
   • ¿Quién actualizará el contenido?
   • ¿Cómo se mostrará el contenido?
   • ¿Qué relaciones se necesitan?
   • ¿Volumen de contenido esperado?
7. Identifica las restricciones: Considera los límites del plan, las restricciones técnicas y las habilidades del equipo
8. Define los criterios de éxito: Objetivos de rendimiento, flujo de trabajo editorial, necesidades de escalabilidad

Fase 3: Planificación de la arquitectura

9. Diseña la estructura de la colección: Planifica las colecciones, los campos y las relaciones
10. Selecciona los tipos de campo: Elige los tipos de campo apropiados para cada elemento de contenido
11. Planifica las relaciones: Diseña conexiones uno a muchos y muchos a muchos
12. Considera la taxonomía: Determina las categorías, etiquetas y la estructura organizativa
13. Planifica para la escala: Diseña para el crecimiento (paginación, rendimiento, límites)
14. Documenta las decisiones: Explica las ventajas y desventajas y el razonamiento

Fase 4: Recomendaciones y validación

15. Genera recomendaciones: Proporciona orientación específica y procesable
16. Prioriza los cambios: Organiza por impacto (victorias rápidas frente a largo plazo)
17. Explica las ventajas y desventajas: Ayuda a los usuarios a comprender las limitaciones y las soluciones alternativas
18. Valida frente a las mejores prácticas: Comprueba las limitaciones y los patrones de Webflow
19. Proporciona alternativas: Ofrece múltiples enfoques cuando sea aplicable
20. Crea una hoja de ruta de implementación: Divide en fases

Fase 5: Guía de implementación

21. Proporciona instrucciones paso a paso: Orientación clara para la implementación
22. Ofrece asistencia: Sugiere el uso de otras skills (cms-collection-setup, bulk-cms-update)
23. Documenta la estructura: Recomienda documentación para la referencia del equipo
24. Sugiere un enfoque de prueba: Guía sobre cómo validar los cambios
25. Planifica la migración: Si se refactoriza, proporciona una estrategia de migración

Arquitectura de colecciones

Cuándo usar CMS vs. Estático

Usa CMS cuando:

• El contenido se actualiza con frecuencia (semanalmente o más)
• Hay varios elementos similares (publicaciones de blog, productos, miembros del equipo, proyectos)
• Usuarios no técnicos necesitan editar el contenido
• El contenido necesita filtrado u ordenamiento en el frontend
• El mismo contenido aparece en varias páginas (biografías de autor, características de productos)
• El contenido sigue una estructura coherente entre los elementos
• Necesitas generar páginas dinámicamente

Usa Estático cuando:

• El contenido rara vez cambia (actualizaciones anuales o menos)
• Secciones únicas y puntuales (sección de héroe de la página "Acerca de", características especiales de la página de inicio)
• Diseños personalizados complejos por elemento que no siguen patrones
• No hay necesidad de filtrado o búsqueda dinámica
• El contenido está altamente personalizado y no comparte estructura
• El rendimiento es crítico y el contenido no cambia
• Necesitas total flexibilidad de diseño por sección

Enfoque híbrido:

• Páginas estáticas con secciones impulsadas por CMS (por ejemplo, página de inicio estática con testimonios del CMS)
• CMS para contenido reciente, archivos estáticos para contenido antiguo
• Páginas de destino estáticas, CMS para subpáginas

Selección del tipo de campo

Tipo de contenido	Campo recomendado	Notas	Límites de caracteres
Texto corto	Texto sin formato	Títulos, nombres, slugs	Máx. 256 caracteres
Texto largo (sin formato)	Texto sin formato (largo)	Descripciones, extractos	Ilimitado
Contenido formateado	Texto enriquecido	Contenido de blog, biografías, artículos	Ilimitado
Imagen única	Imagen	Fotos, miniaturas, encabezados	Máx. 4 MB por imagen
Varias imágenes	Multi-imagen	Galerías, fotos de productos	Hasta 25 imágenes
Descargas de archivos	Archivo	PDFs, documentos, descargas	Máx. 4 MB por archivo
Valores Sí/No	Interruptor	Indicadores destacados, alternancias de visibilidad	Booleano
Selección única	Opción	Estado, tipo, categoría	Opciones ilimitadas
Fecha/hora	Fecha/Hora	Fechas de publicación, eventos, plazos	Formato ISO 8601
Enlace a un elemento	Referencia	Autor → Publicación, Categoría → Publicación	Un elemento
Enlace a varios elementos	Multireferencia	Publicación → Etiquetas, Publicación → Publicaciones relacionadas	Varios elementos
URL externa	Enlace	Enlaces a redes sociales, recursos externos	Máx. 2048 caracteres
Valores numéricos	Número	Precios, valoraciones, orden, recuentos	Entero o decimal
Números de teléfono	Teléfono	Números de contacto	Formato E.164
Direcciones de correo electrónico	Correo electrónico	Correos electrónicos de contacto	Formato de correo electrónico válido
Valores de color	Color	Colores del tema, acentos, colores de marca	Formato hexadecimal
Incrustaciones de video	Video	Incrustaciones de YouTube, Vimeo	URL de incrustación

Árbol de decisión del tipo de campo

¿Necesitas almacenar?
├── ¿Texto?
│   ├── ¿Corto (≤256 caracteres)? → Texto sin formato
│   ├── ¿Largo + Formato? → Texto enriquecido
│   └── ¿Largo + Sin formato? → Texto sin formato (largo)
├── ¿Multimedia?
│   ├── ¿Imagen única? → Imagen
│   ├── ¿Varias imágenes? → Multi-imagen
│   ├── ¿Video? → Video
│   └── ¿Descarga de archivo? → Archivo
├── ¿Elección/Selección?
│   ├── ¿Sí/No? → Interruptor
│   ├── ¿Una opción? → Opción
│   └── ¿Enlace a un elemento? → Referencia/Multireferencia
├── ¿Datos estructurados?
│   ├── ¿Número? → Número
│   ├── ¿Fecha/Hora? → Fecha/Hora
│   ├── ¿Teléfono? → Teléfono
│   ├── ¿Correo electrónico? → Correo electrónico
│   └── ¿URL? → Enlace
└── ¿Visual?
    └── ¿Color? → Color

Patrones de relación

Uno a muchos (campo de referencia)

Ejemplo: Publicaciones → Autor

Colección Autores:
├── nombre (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── biografía (Texto enriquecido)
├── foto (Imagen)
├── título (Texto) - cargo
├── correo electrónico (Correo electrónico)
└── enlaces-redes-sociales (Enlace)

Colección Publicaciones:
├── título (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── contenido (Texto enriquecido)
└── autor (Referencia → Autores)  ← Cada publicación tiene UN autor

Visualización: En la página de la publicación, accede a author.name, author.photo, author.bio

Filtrado: Puedes filtrar publicaciones por un autor específico

Ventajas:

• ✅ Datos de autor centralizados (actualiza una vez, se refleja en todas partes)
• ✅ Fácil de mantener la consistencia
• ✅ Puedes crear páginas de perfil de autor que muestren todas sus publicaciones
• ✅ Eficiente (una referencia por publicación)

Casos de uso:

• Publicaciones de blog → Autor
• Productos → Marca
• Eventos → Lugar
• Proyectos → Cliente
• Testimonios → Cliente

Muchos a muchos (Multireferencia)

Ejemplo: Publicaciones ↔ Etiquetas

Colección Etiquetas:
├── nombre (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── descripción (Texto sin formato)
└── color (Color) - agrupación visual opcional

Colección Publicaciones:
├── título (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── contenido (Texto enriquecido)
└── etiquetas (Multireferencia → Etiquetas)  ← Cada publicación tiene MUCHAS etiquetas

Visualización: En la página de la publicación, recorre en bucle tags para mostrar todas las etiquetas

Filtrado: Puedes filtrar publicaciones por una etiqueta específica

Ventajas:

• ✅ Organización flexible del contenido
• ✅ Vinculación cruzada de contenido relacionado
• ✅ Mejor SEO (agrupación de temas)
• ✅ Navegación mejorada para el usuario

Limitaciones:

• ⚠️ Máximo 5 campos de multireferencia por colección
• ⚠️ Solo se puede filtrar por UN valor de multireferencia a la vez en las listas de colecciones
• ⚠️ No se puede ordenar por valores de campo referenciado
• ⚠️ Cada referencia = consulta adicional (afecta el rendimiento)

Soluciones alternativas para el filtrado de varias etiquetas:

1. Crea etiquetas combinadas (por ejemplo, "vegano-sin-gluten")
2. Usa Finsweet CMS Filter para el filtrado del lado del cliente
3. Crea listas de colecciones filtradas separadas para combinaciones comunes
4. Usa código personalizado con la API de Webflow

Casos de uso:

• Publicaciones de blog ↔ Etiquetas
• Productos ↔ Características
• Proyectos ↔ Tecnologías
• Recetas ↔ Ingredientes
• Cursos ↔ Temas

Autorreferencia (colecciones anidadas)

Ejemplo: Categorías con subcategorías

Colección Categorías:
├── nombre (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── descripción (Texto sin formato)
├── padre (Referencia → Categorías)  ← Autorreferencia para jerarquía
└── nivel (Número) - 1, 2, 3 para la lógica de visualización

Casos de uso:

• Categorías con subcategorías
• Elementos de menú con sub-elementos
• Jerarquía organizativa
• Taxonomía de productos

Ventajas:

• ✅ Jerarquía flexible
• ✅ Profundidad ilimitada (teóricamente)
• ✅ Fácil de reorganizar

Limitaciones:

• ⚠️ Complejo de mostrar niveles anidados en Webflow
• ⚠️ Se recomiendan un máximo de 2-3 niveles para una implementación práctica
• ⚠️ Requiere lógica personalizada para anidamiento profundo

Alternativa: Usa el campo Opción para una categorización simple de 1-2 niveles

Relaciones bidireccionales

Ejemplo: Publicaciones relacionadas

Colección Publicaciones:
├── título (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── contenido (Texto enriquecido)
└── publicaciones-relacionadas (Multireferencia → Publicaciones)  ← Autorreferencia a otras publicaciones

Visualización: Muestra publicaciones relacionadas al final de la página de la publicación

Ventajas:

• ✅ Mantiene a los usuarios comprometidos por más tiempo
• ✅ Mejor SEO (enlaces internos)
• ✅ Conexiones de contenido flexibles

Desafíos:

• ⚠️ No es verdaderamente bidireccional (A → B no crea automáticamente B → A)
• ⚠️ Debe mantener ambas direcciones manualmente si es necesario
• ⚠️ Puede llevar mucho tiempo para los editores de contenido

Soluciones:

1. Usa etiquetas para la lógica automática de "relacionado por etiqueta"
2. Curación manual para las conexiones más importantes
3. Híbrido: Manual + automatizado basado en etiquetas/categoría

Ejemplos

Ejemplo 1: Planificación de una nueva estructura del CMS

Solicitud del usuario:

Estoy creando un sitio de recetas. ¿Cómo debería estructurar el CMS?

Paso 1: Recopilación de requisitos

📐 Planificación del CMS: Sitio de recetas

Déjame hacer algunas preguntas para diseñar la mejor estructura:

1. **Volumen de contenido**: ¿Cuántas recetas planeas tener?
   - Pequeño (≤50): Estructura simple
   - Mediano (50-200): Organización moderada
   - Grande (200+): Taxonomía avanzada necesaria

2. **Atributos de la receta**: ¿Qué información tendrá cada receta?
   - Básica: Nombre, ingredientes, instrucciones, imagen
   - Avanzada: Tiempo de preparación, tiempo de cocción, dificultad, información nutricional, etiquetas dietéticas

3. **Necesidades de organización**: ¿Cómo encontrarán los usuarios las recetas?
   - Por tipo de comida (desayuno, almuerzo, cena)
   - Por cocina (Italiana, Mexicana, Asiática)
   - Por restricciones dietéticas (vegano, sin gluten, keto)
   - Por método de cocción (horneado, a la parrilla, olla de cocción lenta)
   - Por ingredientes (pollo, pasta, verduras)

4. **Configuración del autor**: ¿Uno o varios autores?
   - Único: Tú gestionas todo el contenido
   - Múltiple: Equipo de creadores de recetas

5. **Interacción del usuario**: ¿Qué características interactivas?
   - Comentarios/reseñas
   - Valoraciones
   - Guardar favoritos
   - Imprimir tarjetas de recetas

Basándome en tus respuestas, diseñaré la arquitectura óptima del CMS.

Paso 2: Después de que el usuario responda

📐 Arquitectura del CMS recomendada: Sitio de recetas

Basado en tus requisitos (Volumen mediano, Varios autores, Filtrado avanzado):

---

## Colecciones necesarias: 4

### 1. Recetas (Contenido principal)
├── nombre (Texto, obligatorio) - "Pasta Carbonara Casera"
├── slug (Texto, obligatorio) - "pasta-carbonara-casera"
├── descripción (Texto sin formato, 160 caracteres) - Resumen breve para SEO
├── imagen-destacada (Imagen) - Imagen principal para la página de detalle
├── imagen-miniatura (Imagen) - Imagen más pequeña para tarjetas de cuadrícula
├── tiempo-preparación (Número, obligatorio) - Minutos de preparación
├── tiempo-cocción (Número, obligatorio) - Minutos de cocción
├── tiempo-total (Número) - Calculado automáticamente o manual
├── porciones (Número, obligatorio) - Número de porciones
├── dificultad (Opción: Fácil, Media, Difícil)
├── ingredientes (Texto enriquecido, obligatorio) - Lista de ingredientes con cantidades
├── instrucciones (Texto enriquecido, obligatorio) - Instrucciones paso a paso
├── notas (Texto enriquecido) - Notas del cocinero, consejos, sustituciones
├── información-nutricional (Texto sin formato) - Calorías, proteínas, etc.
├── autor (Referencia → Autores, obligatorio)
├── categoría (Referencia → Categorías, obligatorio) - Tipo de comida principal
├── cocina (Referencia → Cocinas) - Italiana, Mexicana, etc.
├── etiquetas-dietéticas (Multireferencia → Etiquetas Dietéticas) - Vegano, GF, etc.
├── métodos-cocción (Multireferencia → Métodos) - Horneado, Parrilla, etc.
├── destacado (Interruptor) - Destacar en la página de inicio
├── fecha-publicación (Fecha, obligatorio)
└── recuento-visitas (Número) - Seguimiento de popularidad

**Campos totales:** 22 campos
**Plan requerido:** Plan CMS mínimo (20 colecciones, 2000 elementos)

### 2. Autores
├── nombre (Texto, obligatorio)
├── slug (Texto, obligatorio)
├── título (Texto) - "Chef Principal", "Desarrollador de Recetas"
├── biografía (Texto enriquecido)
├── foto (Imagen)
├── especialidad (Texto sin formato) - "Cocina Italiana", "Repostería"
├── social-instagram (Enlace)
├── social-sitio-web (Enlace)
└── correo electrónico (Correo electrónico)

**Propósito:** Información del autor reutilizable en todas las recetas

### 3. Categorías
├── nombre (Texto, obligatorio) - "Desayuno", "Almuerzo", "Cena", "Postres"
├── slug (Texto, obligatorio)
├── descripción (Texto sin formato)
├── imagen (Imagen) - Imagen principal de la categoría
├── color (Color) - Color de identificación visual
└── orden (Número) - Para orden de visualización personalizado

**Total de categorías:** Normalmente 4-8 (Desayuno, Almuerzo, Cena, Postres, Aperitivos, Guarniciones, Bebidas, Salsas)

### 4. Etiquetas Dietéticas
├── nombre (Texto, obligatorio) - "Vegano", "Sin Gluten", "Keto", "Paleo", "Sin Lácteos"
├── slug (Texto, obligatorio)
└--- descripción (Texto sin formato) - Explicación de la etiqueta

**Propósito:** Filtrado flexible que no encaja en categorías

---

## Relaciones

- **Autor → Recetas**: Uno a muchos (Un autor, muchas recetas)
- **Categoría → Recetas**: Uno a muchos (Una categoría principal por receta)
- **Cocina → Recetas**: Uno a muchos (Una cocina por receta)
- **Etiquetas Dietéticas → Recetas**: Muchos a muchos (Varias etiquetas por receta)
- **Métodos de Cocción → Recetas**: Muchos a muchos (Varios métodos por receta)

Paso 3: Validación y próximos pasos

## Comprobación de mejores prácticas

✅ **Límites de colecciones**: 4 colecciones (dentro del límite de planes CMS)
✅ **Campos de multireferencia**: 2 (dentro del límite de 5)
✅ **Imágenes**: Optimizado con imágenes destacadas y miniaturas
✅ **SEO**: Slugs, descripciones, datos estructurados
✅ **Rendimiento**: Las relaciones son directas, no hay cadenas profundas

## Próximos pasos

1. ¿Quieres que te guíe a través de la configuración de esta colección? (Usa la skill `cms-collection-setup`)
2. ¿Necesitas importar recetas existentes? (Prueba la skill `bulk-cms-update`)
3. ¿Quieres diseñar las plantillas de página para mostrar recetas?
4. ¿Debería configurar tipos de contenido adicionales como reseñas o categorías de ingredientes?

Ejemplo 2: Optimización de colecciones existentes

Solicitud del usuario:

Mi sitio de blog es lento al cargar las publicaciones. Tengo una categoría de "Tutoriales" con 500 publicaciones.

Respuesta:

## Análisis de rendimiento

Analicemos tu configuración actual para identificar cuellos de botella.

### Posibles causas de lentitud:

1. **Volumen de contenido**: 500 publicaciones en una categoría pueden ralentizar las listas de colecciones
2. **Demasiadas relaciones**: Cada relación añade una consulta
3. **Imágenes grandes**: Las imágenes sin optimizar aumentan los tiempos de carga
4. **Colecciones no indexadas**: Sin los filtros de índice adecuados

### Recomendaciones:

**Solución a corto plazo:**
- Habilita la paginación (recomendado: 12-24 elementos por página)
- Usa campos de vista previa (Resumen de Texto sin formato, miniatura) en lugar de cargar imágenes completas y contenido enriquecido en listas

**Solución a largo plazo:**
- Divide la categoría "Tutoriales" en subcategorías
- Considera archivar publicaciones antiguas (más de 2 años) en contenido estático
- Optimiza las imágenes antes de subirlas (apunta a <200KB para miniaturas)

### Migración sugerida:

Colección Tutoriales (actual) ├── Contiene: 500 publicaciones de tutoriales └── Problema: Una sola lista de colección, sin filtros efectivos

Colección Tutoriales (nueva estructura) - Colección única con categorización ├── Nivel de tutorial (Opción: Principiante, Intermedio, Avanzado) ├── Tecnología (Referencia → Tecnologías) - Django, React, Python, etc. ├── Año de publicación (Opción: 2023, 2024, 2025) └--- Característica destacada (Interruptor)

Ventajas:

• ✅ Filtrado por nivel, tecnología y año
• ✅ Tiempos de carga de lista de colección reducidos
• ✅ Mejor experiencia de usuario con filtros específicos
• ✅ Crecimiento manejable

Ejemplo 3: Configuración de relaciones complejas

Solicitud del usuario:

Necesito gestionar un directorio de empresas donde las empresas pueden tener múltiples ubicaciones y servicios.

Respuesta:

## Arquitectura de relaciones: Directorio de empresas

Basado en tu requisito de empresas con múltiples ubicaciones y servicios:

### Estructura de colecciones:

1. Empresas (Referenciada por Ubicaciones y Servicios) ├── nombre ├── descripción ├── logo ├── sitio-web └── teléfono-principal

2. Ubicaciones (Referencia → Empresas) ├── empresa (Referencia → Empresas) ├── dirección ├── ciudad ├── estado ├── código-postal ├── teléfono ├── coordenadas-gps └── horario (Texto enriquecido) - Horario semanal

3. Servicios (Multireferencia → Empresas) [Categorías/Servicios] ├── nombre-del-servicio ├── descripción └── icono (Imagen) - Para visualización

### Relaciones:
- **Empresa → Ubicaciones**: Uno a muchos (Una empresa tiene muchas ubicaciones)
- **Empresa → Servicios**: Muchos a muchos (Una empresa ofrece muchos servicios; un servicio lo ofrecen muchas empresas)

### Visualización:
**Página de empresa:**
- Mostrar lista de ubicaciones con mapa
- Mostrar servicios ofrecidos
- Información de contacto

**Página de directorio:**
- Listar empresas con su primera ubicación
- Filtrar por ciudad, servicio, etc.
- Ordenar por nombre, fecha de registro, etc.

### Consejos de rendimiento:
1. **Usa listas de colecciones separadas** para ubicaciones y servicios en la página de empresa
2. **Pagina** los resultados del directorio (12-24 empresas por página)
3. **Almacena en caché** los datos del directorio que cambian con poca frecuencia a través de Webflow
4. **Considera un mapa estático** para la imagen de la ubicación en lugar de una integración de mapa dinámico para ubicaciones individuales

### Mejores prácticas para el directorio:
1. Usa un campo `destacado` (Interruptor) para las empresas patrocinadas
2. Implementa un campo `fecha-registro` para contenido nuevo
3. Crea una colección separada `Reseñas` si los usuarios califican empresas