¿Cómo se conecta Claude a Webflow MCP?

Respuesta rápida: Claude se conecta con Webflow a través del servidor oficial MCP (Model Context Protocol), que te da una vía directa al CMS, las páginas y la API del Designer de tu sitio desde Claude Desktop o Claude Code. Puedes enviar actualizaciones de contenido, crear elementos del CMS y gestionar colecciones describiendo lo que quieres en lenguaje natural, sin trabajo manual en la interfaz.

Si gestionas un sitio en Webflow y todavía copias el contenido a mano en el CMS, esta guía cambiará tu forma de trabajar. El servidor MCP de Webflow permite que Claude lea y escriba directamente en tu workspace de Webflow, así que puedes actualizar artículos del blog, añadir nuevos elementos de colección y editar el contenido de las páginas mediante una conversación en lugar de usar el Designer.

Este es un tutorial práctico para equipos B2B SaaS que quieren flujos de publicación más rápidos y menos cambios de contexto. Al terminar, tendrás la integración funcionando y sabrás exactamente qué puede y qué no puede hacer Claude dentro de Webflow. Si además estás valorando un apoyo más amplio para el crecimiento en sistemas de contenido y operaciones de publicación, SaaS Hackers también selecciona las mejores agencias de content marketing para B2B SaaS.

¿Qué es el servidor MCP de Webflow?

El servidor MCP de Webflow es una integración propia desarrollada por Webflow que implementa el estándar Model Context Protocol. MCP es un protocolo abierto que permite a herramientas de IA como Claude conectarse con servicios externos mediante un acceso estructurado y con permisos.

En términos sencillos: en lugar de que Claude intente adivinar cómo está estructurado tu sitio de Webflow, el servidor MCP le da acceso en tiempo real a los datos reales de tu workspace. Claude puede consultar tus colecciones del CMS, leer los elementos existentes, crear nuevas entradas y lanzar actualizaciones a través de las mismas API que usaría un desarrollador.

El servidor MCP de Webflow está alojado y mantenido directamente por Webflow, lo que significa que utiliza la Data API y la Designer API oficiales en lugar de una solución alternativa de terceros.

¿Qué puede hacer realmente Claude dentro de Webflow?

Antes de configurar nada, conviene tener claro el alcance. Claude con Webflow MCP puede:

• Leer colecciones del CMS y listar los elementos existentes con los datos de sus campos
• Crear nuevos elementos de colección del CMS con texto, texto enriquecido, imágenes y campos de referencia
• Actualizar elementos de colección existentes, incluido el contenido en borrador y el publicado
• Publicar elementos en tu sitio en vivo
• Consultar la estructura del sitio, incluidas páginas, colecciones y esquemas de campos
• Aplicar actualizaciones estructurales y de sistema a través de la Designer API

Claude no puede diseñar páginas visualmente como lo haría una persona en el lienzo del Designer de Webflow. Piensa en él como un potente operador del CMS y publicador de contenido, no como una herramienta de diseño visual. Los equipos que necesiten ayuda también con la capa visual pueden comparar agencias de diseño web para B2B SaaS o expertos en diseño web y UX para B2B SaaS especializados.

Lo que necesitas antes de empezar

• Una cuenta de Webflow con al menos un sitio (cualquier plan con acceso al CMS)
• Claude Desktop instalado, o acceso a Claude Code
• Un token de la API de Webflow con los permisos (scopes) correctos
• Node.js instalado en local (versión 18 o superior)

Cómo conectar Claude con Webflow MCP paso a paso

Paso 1: genera tu token de la API de Webflow

1. Inicia sesión en tu panel de Webflow
2. Ve a Account Settings y luego a Integraciones
3. Desplázate hasta API Access y genera un nuevo token
4. Selecciona los permisos que necesitas: lectura y escritura del CMS, lectura de sitios y lectura y escritura de páginas son los básicos para los flujos de contenido
5. Copia el token y guárdalo en un lugar seguro

Paso 2: configura el servidor MCP en Claude Desktop

Claude Desktop usa un archivo de configuración para saber a qué servidores MCP conectarse. Abre el archivo de configuración en:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

Añade el siguiente bloque dentro de mcpServers :

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

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

Paso 3: reinicia Claude Desktop

Guarda el archivo de configuración, cierra Claude Desktop por completo y vuelve a abrirlo. Claude cargará el servidor MCP al iniciarse. Verás un pequeño icono de martillo en la interfaz del chat cuando las herramientas de MCP estén disponibles.

Paso 4: verifica la conexión

Escribe esto en Claude:

"List the Webflow sites connected to my account."

Si la conexión funciona, Claude te devolverá los nombres y los ID de tus sitios. Si da error, revisa de nuevo los permisos del token y comprueba que Node.js esté bien instalado.

Usar Claude Code en su lugar

Si trabajas en un entorno de terminal o prefieres Claude Code a Claude Desktop, la configuración es ligeramente distinta.

Ejecuta este comando para iniciar el servidor MCP manualmente:

WEBFLOW_TOKEN=your-api-token npx -y @webflow/mcp-server

Después, configura tu entorno de Claude Code para que apunte a ese servidor en ejecución. El repositorio de GitHub de Webflow para el servidor MCP (webflow/mcp-server) incluye la referencia completa de las variables de entorno y las opciones de configuración avanzada.

Flujos de trabajo prácticos: qué hacer realmente con esto

Enviar una nueva entrada de blog a tu CMS

Una vez conectado, puedes crear un nuevo elemento del CMS con un solo prompt. Por ejemplo:

"Create a new item in my Blog Posts collection. Title: 'How SaaS Teams Use AI for Faster Onboarding'. Slug: how-saas-teams-use-ai-faster-onboarding. Set the status to Draft."

Claude llamará a la API del CMS, creará el elemento con la correspondencia de campos correcta y devolverá el ID del elemento. Después puedes pedirle que rellene el campo del cuerpo con contenido que ya hayas escrito o que lo redacte él mismo directamente. Si la publicación asistida por IA va ocupando un lugar cada vez mayor en tu flujo de trabajo, SaaS Hackers también explora temas afines como el impacto de la AGI en el marketing, los negocios y el desarrollo de software.

Actualizar un elemento existente del CMS

"Find the blog post titled 'Product Update: Q1 2025' and update the excerpt field to: 'A summary of everything we shipped in Q1, including the new onboarding flow and API rate limit increases.'"

Claude consultará la colección, encontrará el elemento que coincide y modificará el campo. No necesitas conocer de antemano el ID del elemento.

Publicar un elemento en borrador

"Publish the blog post with slug 'how-saas-teams-use-ai-faster-onboarding' to the live site."

Esto lanza la acción de publicación a través de la API. El elemento pasa de borrador a publicado sin que tengas que abrir el Designer.

Auditar tu CMS en busca de campos vacíos

"Check all items in my Case Studies collection and list any that are missing the 'Client Logo' or 'Industry' fields."

Es un flujo de trabajo realmente útil para el control de calidad del contenido. Claude lee todos los elementos de la colección y te devuelve una lista de carencias, algo que exigiría un esfuerzo manual considerable desde la interfaz de Webflow.

Permisos y aspectos a vigilar

Conviene que sepas algunas cosas antes de usarlo en producción:

El alcance del token importa. Un token con acceso de escritura puede crear y sobrescribir contenido. Si estás probando, genera primero un token de solo lectura para explorar la estructura de tu sitio sin riesgo.

La publicación es inmediata. Cuando Claude publica un elemento, este se pone en vivo. La API no incluye ningún paso de confirmación previo. Acostúmbrate a revisar el contenido en borrador antes de dar órdenes de publicación.

Los tipos de campo del CMS tienen restricciones. Los campos de referencia, de opciones y de imagen requieren formatos concretos que la API espera recibir. Si Claude devuelve un error al crear o actualizar, pídele que describa primero el esquema de la colección para que asigne bien los campos.

Hay límites de uso. La Data API de Webflow tiene límites de uso según el plan. En operaciones masivas (actualizar más de 50 elementos), Claude tendrá que gestionar la paginación y es posible que alcances los límites en los planes más básicos.

Por qué deberían importarle esto a los equipos B2B SaaS

La velocidad de producción de contenido es una limitación real para la mayoría de los equipos de marketing de SaaS. Un ciclo típico de publicación de un artículo incluye redactar, editar, dar formato en el CMS, añadir metadatos y pulsar publicar. Cada paso es manual y lento.

Con la configuración de Claude y Webflow MCP, un redactor puede entregar un borrador terminado y dejar que Claude se encargue de la entrada en el CMS, el relleno de campos, la creación del slug y el lanzamiento de la publicación. Son entre 20 y 30 minutos de trabajo mecánico menos en cada artículo.

Para los equipos que gestionan contenido localizado, páginas de novedades del producto o bibliotecas de recursos de gran volumen, el ahorro de tiempo se acumula rápidamente. Claude puede procesar en una sola sesión un lote de actualizaciones que, de otro modo, llevaría una tarde entera. Si tu empresa está escalando estos flujos de trabajo en varios canales de adquisición, también puede ayudarte revisar a especialistas entre las agencias de SEO para B2B SaaS, las agencias de PPC para B2B SaaS y las agencias de performance marketing para B2B SaaS.

SaaS Hackers trata este tipo de automatización de flujos de trabajo dentro de una serie más amplia sobre el uso de Claude en las operaciones de B2B SaaS. El objetivo es siempre el mismo: eliminar el trabajo mecánico para que tu equipo pueda centrarse en las decisiones que realmente requieren criterio humano. Si quieres conocer más partners y profesionales verificados, también puedes explorar todas las mejores agencias, los mejores expertos o los recursos.

Preguntas frecuentes

¿Qué es el servidor MCP de Webflow y cómo funciona con Claude?

El servidor MCP de Webflow es una integración oficial que implementa el Model Context Protocol y permite que Claude se conecte directamente con tu workspace de Webflow. Da a Claude acceso estructurado a tus colecciones del CMS, páginas y datos del sitio a través de la API de Webflow. Lo configuras una sola vez en Claude Desktop o Claude Code, y a partir de ahí Claude puede leer y escribir contenido de Webflow mediante prompts en lenguaje natural.

¿Puede Claude diseñar páginas visualmente en Webflow con MCP?

No. Claude con Webflow MCP opera a través de la capa de la API, no del lienzo visual del Designer. Puede crear y actualizar contenido del CMS, gestionar elementos de colección y aplicar cambios a nivel de sistema, pero no arrastra, suelta ni organiza visualmente elementos como lo haría un diseñador. Úsalo para operaciones de contenido, no para diseño visual.

¿Es seguro usar el servidor MCP de Webflow con un sitio en producción?

Sí, siempre que tomes las precauciones adecuadas. Usa un token de API con alcance limitado, que tenga solo los permisos que necesita tu flujo de trabajo. Evita dar acceso de escritura y publicación durante las pruebas iniciales. Publicar a través de la API es inmediato, así que trata los comandos de publicación igual que si publicaras manualmente desde el Designer.

¿Necesito saber programar para usar Claude con Webflow MCP?

No hace falta saber programar para la configuración básica ni para ejecutar flujos de trabajo de contenido. Tienes que editar un archivo de configuración JSON y tener Node.js instalado, pero ambos pasos son sencillos. El servidor MCP de Webflow se ejecuta mediante npx, así que no tienes nada que construir ni mantener.

¿Qué plan de Webflow necesito para acceder a MCP?

El servidor MCP de Webflow usa la Data API, que está disponible en los planes que incluyen acceso al CMS. Consulta los detalles de acceso a la API de tu plan actual en los ajustes de tu cuenta de Webflow. Las funciones de la Designer API pueden tener requisitos de plan adicionales, según las acciones que necesites.