¿Cómo se conecta Claude a Webflow mediante MCP?

Respuesta rápida: Claude se conecta con Webflow mediante el servidor MCP oficial de Webflow, que te da acceso directo al CMS, a las API del Designer y a la capa de datos de tu sitio desde Claude Desktop o Claude Code. Puedes publicar actualizaciones de contenido, gestionar colecciones del CMS y hacer cambios estructurales en las páginas sin abrir la interfaz de Webflow.

Ya sabes que Claude puede escribir. Lo que la mayoría de los equipos de B2B SaaS aún no ha descubierto es que Claude también puede publicar. Con el servidor MCP de Webflow conectado, dejas de copiar y pegar contenido entre herramientas y empiezas a enviar actualizaciones directamente desde tu flujo de trabajo con IA a tu sitio de Webflow en producción.

Este tutorial explica paso a paso cómo configurarlo, qué puedes hacer con él y dónde están las mejoras reales de productividad para los equipos de SaaS que gestionan contenido a gran escala.

¿Qué es el servidor MCP de Webflow?

El servidor MCP de Webflow es una integración propia de Webflow basada en el Model Context Protocol (MCP) de Anthropic, un estándar abierto que permite a los modelos de IA conectarse con herramientas y fuentes de datos externas. La implementación de Webflow da a Claude acceso directo a las colecciones del CMS, a las API del Designer y a la capa de contenido de tu sitio.

En pocas palabras: Claude deja de ser un asistente de escritura del que copias texto y pasa a ser un agente capaz de leer la estructura de tu sitio de Webflow, crear y actualizar elementos del CMS y publicar cambios sin que salgas de la conversación.

Webflow mantiene la integración, que funciona con Claude Desktop, Claude Code, Cursor y Windsurf.

Qué puedes hacer con Claude y el MCP de Webflow

Antes de configurar nada, conviene entender qué admite realmente esta integración. El servidor MCP de Webflow expone un conjunto definido de acciones que Claude puede realizar en tu espacio de trabajo:

Operaciones del CMS:

• Crear nuevos elementos en las colecciones del CMS
• Actualizar los campos de elementos existentes (texto, texto enriquecido, imágenes, referencias)
• Publicar y despublicar elementos
• Consultar los esquemas de las colecciones para entender la estructura de los campos

Gestión del sitio y de las páginas:

• Leer la estructura y los metadatos de las páginas
• Aplicar cambios estructurales a las páginas
• Gestionar los ajustes y los estilos del sitio a nivel de sistema

Lo que (todavía) no hace:

• Diseño visual de arrastrar y soltar (eso sigue haciéndose en el Webflow Designer)
• Sustituir la cola de publicación de Webflow en configuraciones complejas con varios entornos
• Gestionar componentes de código personalizado sin intervención manual

Para los equipos de B2B SaaS, los casos de uso de mayor valor son la publicación de contenido en el CMS, las actualizaciones del copy de las landing pages y las ediciones masivas de campos en los elementos de una colección. Si tu equipo realiza a gran escala este tipo de trabajo de publicación repetitivo, a menudo coincide con responsabilidades más amplias de marketing operations para B2B SaaS.

Cómo conectar Claude con Webflow mediante MCP

Paso 1: genera un token de API de Webflow

1. Inicia sesión en tu cuenta de Webflow y abre el sitio que quieres conectar
2. Ve a Site Settings > Integrations > API Access
3. Genera un nuevo token de API con permisos de lectura y escritura del CMS
4. Copia el token y guárdalo en un lugar seguro. No volverás a verlo después de cerrar esa pantalla.

Si trabajas con varios sitios de Webflow, genera un token distinto para cada sitio. Mezclar tokens entre espacios de trabajo provoca errores de permisos que resultan molestos de depurar.

Paso 2: instala el servidor MCP de Webflow

El servidor MCP de Webflow se ejecuta como un proceso de Node.js en tu equipo. Necesitas tener Node.js instalado antes de este paso.

Abre tu terminal y ejecuta:

npx @webflow/mcp-server

También puedes instalarlo de forma global:

npm install -g @webflow/mcp-server

El servidor es de código abierto y se mantiene en el repositorio oficial de Webflow en GitHub: webflow/mcp-server.

Paso 3: Configura Claude Desktop para usar el servidor MCP

Abre el archivo de configuración de Claude Desktop. En macOS, se encuentra en:

~/Library/Application Support/Claude/claude_desktop_config.json

Añade el servidor MCP de Webflow a tu configuración:

{
  "mcpServers": {
    "webflow": {
      "command": "npx",
      "args": ["@webflow/mcp-server"],
      "env": {
        "WEBFLOW_API_TOKEN": "your-token-here"
      }
    }
  }
}

Sustituye your-token-here con el token de API que generaste en el paso 1.

Guarda el archivo y reinicia Claude Desktop. Verás un icono de martillo en la interfaz de Claude que confirma que las herramientas MCP están activas.

Paso 4: verifica la conexión

Inicia una conversación nueva en Claude y pregunta:

«Muestra las colecciones del CMS disponibles en mi sitio de Webflow.»

Claude llamará al servidor MCP de Webflow y te devolverá los nombres y las estructuras de tus colecciones. Si devuelve un error, comprueba que tu token de API tenga los permisos correctos y que el JSON del archivo de configuración sea válido (una coma que falte estropea todo el archivo).

Cómo publicar actualizaciones de contenido del CMS con Claude

Una vez conectado, las operaciones de contenido siguen un patrón sencillo: describe lo que quieres, deja que Claude consulte el esquema y confirma la acción de escritura.

Actualizar un elemento existente del CMS

Empieza pidiéndole a Claude que lea el estado actual de un elemento:

«Busca la entrada de blog titulada "How to reduce churn in SaaS" en mi colección Blog Posts y muéstrame la meta descripción y el contenido del cuerpo actuales.»

Claude recuperará el elemento y mostrará los campos. Después, dale la instrucción de actualización:

«Actualiza la meta descripción a: "Learn the five retention tactics used by SaaS teams with under 5% annual churn. Practical, no fluff." Luego publica el cambio.»

Claude escribirá la actualización en Webflow y confirmará el estado del elemento.

Crear un nuevo elemento del CMS

Aquí es donde el flujo de trabajo se vuelve realmente rápido. Redacta el briefing de contenido en Claude, genera el contenido en la misma conversación y envíalo directamente:

«Crea un nuevo elemento en la colección Blog Posts. Título: "SaaS Pricing Page Teardown: What High-Converting Pages Have in Common". Slug: saas-pricing-page-teardown. Establece el estado en Draft. Usa el siguiente contenido para el campo del cuerpo: [pega tu contenido].»

Claude asigna tus datos a los campos correctos de la colección y crea el elemento. Después puedes abrir Webflow para revisarlo y publicarlo, o pedirle a Claude que lo publique directamente si tu flujo de trabajo lo permite.

Actualizaciones masivas de campos en una colección

Este es el caso de uso que la mayoría de los equipos no sabe que es posible. Si necesitas actualizar un campo en varios elementos del CMS, por ejemplo para mejorar las etiquetas de título como parte de una limpieza de SEO o para corregir errores repetidos de taxonomía, puedes hacerlo en una sola conversación:

«En mi colección Case Studies, busca todos los elementos en los que el campo "Industry" esté vacío y establécelo en "B2B SaaS".»

Claude consultará la colección, identificará los elementos que coinciden y aplicará la actualización. Lo que llevaría 20 minutos de clics manuales en Webflow se hace así en menos de dos minutos.

Flujo de trabajo práctico: publicar una actualización de una landing page

Este es un flujo de trabajo real que un equipo de marketing de B2B SaaS ejecutaría en Claude con el MCP de Webflow conectado.

Escenario: has actualizado el copy del hero de tu página de inicio y quieres enviar el cambio a Webflow sin abrir el Designer.

1. Consulta el estado actual: «Muéstrame el titular y el subtítulo actuales del hero en el elemento Homepage del CMS.»
2. Revisa y aprueba: Claude devuelve el copy actual. Tú confirmas que hay que actualizarlo.
3. Redacta la actualización: «Actualiza el titular del hero a: "Stop guessing. Start converting." Actualiza el subtítulo a: "SaaS Hackers helps B2B SaaS teams build the systems that turn signups into revenue." Publica los cambios.»
4. Confirma: Claude confirma que los campos están actualizados y que el elemento está publicado.

Tiempo total: menos de tres minutos. Sin sesión en el Designer, sin copiar y pegar y sin cambiar de pestaña.

Para qué deberían usar esto los equipos de B2B SaaS

No todas las actualizaciones de contenido tienen que pasar por Claude y MCP. Estos son los casos en los que la configuración compensa más claramente para los equipos de SaaS:

Casos de uso de alto valor:

• Actualizar los metadatos de SEO en varias landing pages antes del lanzamiento de una campaña
• Publicar contenido de blog redactado y editado dentro de Claude
• Realizar auditorías SEO y aplicar las correcciones (meta descripciones, etiquetas de título) en la misma sesión
• Crear versiones localizadas del contenido del CMS para distintos mercados
• Actualizar de forma masiva las descripciones de las funcionalidades del producto tras una release

Casos de uso de menor valor (mejor hacerlos directamente en Webflow):

• Cambios de diseño visual puntuales
• Reestructuraciones de la maquetación que requieren el Designer
• Cambios que necesitan la aprobación de las partes interesadas antes de publicarse

Los equipos que hacen actualizaciones frecuentes de metadatos, despliegues de contenido o lanzamientos de campañas también pueden acabar combinando este flujo de trabajo con el apoyo de agencias de content marketing para B2B SaaS o de partners especializados en SEO.

Errores comunes y cómo solucionarlos

«No tools available» en Claude Desktop
Tu archivo de configuración tiene un error de sintaxis o el servidor MCP no se ha iniciado. Valida tu JSON en jsonlint.com y comprueba que Node.js esté bien instalado.

«Unauthorised» cuando Claude intenta escribir en Webflow
Tu token de API no tiene permisos de escritura o se generó para otro sitio. Vuelve a generarlo con todos los permisos del CMS y actualiza el archivo de configuración.

Claude lee las colecciones, pero no encuentra elementos concretos
Los nombres de los elementos de las colecciones distinguen entre mayúsculas y minúsculas en la API de Webflow. Pídele primero a Claude que liste todos los elementos de la colección y luego usa el nombre exacto que devuelva.

Los cambios aparecen en Webflow, pero no están activos en el sitio
El elemento se actualizó, pero no se publicó. Añade «y publica el elemento» a tu instrucción o revisa manualmente la cola de publicación de Webflow.

Preguntas frecuentes

¿Qué es Claude Webflow MCP y cómo funciona?
La integración Claude Webflow MCP conecta Claude con tu sitio de Webflow mediante el Model Context Protocol de Anthropic. Claude usa el servidor MCP de Webflow para leer y escribir en tus colecciones del CMS, en los metadatos de las páginas y en los ajustes del sitio directamente desde una conversación. Te autenticas con un token de API de Webflow y Claude llama a las API de Webflow en tu nombre.

¿Necesito saber programar para usar el servidor MCP de Webflow?
Tienes que sentirte cómodo editando un archivo de configuración JSON y ejecutando un único comando en la terminal. Aparte de eso, la interacción es totalmente conversacional. No escribes código para publicar actualizaciones de contenido. Si puedes describir lo que quieres con tus propias palabras, Claude se encarga de las llamadas a la API.

¿Es seguro usar el servidor MCP de Webflow con un sitio en producción?
Sí, con una precaución: pide siempre a Claude que te muestre el estado actual de un elemento antes de escribir cambios y confirma la actualización antes de pedirle que publique. El servidor MCP escribe directamente en tu espacio de trabajo de Webflow en producción, así que no hay ningún búfer de preproducción a menos que lo configures tú en el propio Webflow. Trátalo como un acceso directo a la base de datos: con criterio y revisando todo antes de confirmar los cambios.

¿Qué diferencia hay entre usar Claude con Webflow MCP y las funciones de AI de Webflow integradas en el Designer?
Las funciones de AI nativas de Webflow funcionan dentro de la interfaz del Designer y se centran en la ayuda visual y de maquetación. La integración Claude Webflow MCP funciona fuera del Designer y se centra en las operaciones del CMS, la publicación de contenido y la gestión masiva de datos. Cubren partes distintas del flujo de trabajo. MCP es mejor para equipos de contenido que gestionan grandes volúmenes de datos estructurados.

¿Puedo usar el servidor MCP de Webflow con Claude Code o Cursor, y no solo con Claude Desktop?
Sí. El servidor MCP de Webflow funciona con Claude Desktop, Claude Code, Cursor y Windsurf. El método de configuración varía un poco según la herramienta, pero el token de API y la configuración del servidor son los mismos. Consulta la documentación de MCP de cada herramienta para ver el formato de configuración concreto.