¿Cómo conectar Claude con Webflow?

Respuesta rápida: Claude se conecta con Webflow a través del servidor MCP (Model Context Protocol) oficial de Webflow, que le da acceso directo a tu CMS, a la API del Designer y a los datos del sitio. Puedes enviar actualizaciones de contenido, gestionar colecciones del CMS y publicar páginas describiendo en lenguaje natural lo que quieres en Claude Desktop o Claude Code, sin necesidad de trabajar a mano en el editor.

Los equipos de B2B SaaS pierden horas en ediciones repetitivas de Webflow: actualizar los textos de precios, publicar nuevas entradas de blog, renovar los datos del CMS en decenas de páginas. La integración de Claude con Webflow mediante MCP corta ese ciclo de raíz.

Este tutorial te explica paso a paso cómo conectar Claude con Webflow usando el servidor MCP, qué puedes hacer realmente una vez configurado y en qué puntos la integración se gana su lugar en un flujo de trabajo de contenidos real. Al terminar, sabrás si encaja en tu stack y cómo ponerla en marcha hoy mismo.

¿Qué es la integración de Claude con Webflow mediante MCP?

El servidor MCP de Webflow es un conector oficial, desarrollado por el propio Webflow, que da a Claude acceso directo a tu espacio de trabajo de Webflow mediante el Model Context Protocol. MCP es un estándar abierto que permite a los modelos de IA conectarse con herramientas y fuentes de datos externas de forma estructurada y con permisos.

Una vez conectado, Claude puede leer la estructura de tu sitio, consultar colecciones del CMS, redactar contenido nuevo, actualizar elementos existentes y lanzar la publicación, todo desde una interfaz de conversación. Tú describes el cambio y Claude lo ejecuta a través de la API de Webflow.

No se trata de una solución improvisada de terceros. Webflow publica y mantiene el servidor MCP, lo que significa que se mantiene sincronizado con la API de Webflow y ofrece el mismo nivel de fiabilidad que la plataforma.

Lo que necesitas antes de empezar

Antes de ejecutar ningún comando, asegúrate de tener lo siguiente:

Una cuenta de Webflow con al menos un sitio publicado
Un token de API de Webflow con permisos de CMS y Designer (genéralo en tu espacio de trabajo de Webflow, en Account Settings > API Access)
Claude Desktop (Mac o Windows) o Claude Code instalado y en funcionamiento
Node.js 18+ instalado en tu equipo (necesario para ejecutar el servidor MCP)
Un ID de sitio de Webflow del sitio que quieres que gestione Claude

Si usas Claude Code en lugar de Claude Desktop, el proceso de configuración es casi idéntico. Solo cambia un poco la ubicación del archivo de configuración, como se explica más abajo.

Cómo conectar Claude con Webflow usando el servidor MCP

Paso 1: instala el servidor MCP de Webflow

Abre tu terminal y ejecuta:

npx @webflow/mcp-server

Esto descarga de npm el paquete oficial del servidor MCP de Webflow. No necesitas clonar ningún repositorio ni gestionar un proceso aparte a mano. El comando npx se encarga de la ejecución cada vez que Claude lo llama.

Paso 2: configura Claude Desktop

Claude Desktop lee la configuración de los servidores MCP desde un archivo JSON. Ábrelo ahora:

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

Añade el siguiente bloque de configuración dentro de mcpServers :

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

Sustituye your-webflow-api-token-here con el token de API que generaste en el primer paso. Guarda el archivo.

Paso 3: configura Claude Code (si usas Claude Code en su lugar)

Si usas Claude Code, añade el servidor MCP desde la CLI:

claude mcp add webflow \
  -e WEBFLOW_TOKEN=your-webflow-api-token-here \
  -- npx -y @webflow/mcp-server

Esto registra el servidor de Webflow de forma global en todas tus sesiones de Claude Code.

Paso 4: reinicia Claude y verifica la conexión

Cierra del todo Claude Desktop y vuelve a abrirlo. En una conversación nueva, escribe:

List all the sites in my Webflow workspace

Si la conexión funciona, Claude te devolverá los nombres y los ID de tus sitios. Si devuelve un error, revisa bien tu token de API y confirma que Node.js está bien instalado ejecutando node --version en tu terminal.

¿Qué puede hacer realmente Claude en Webflow?

Una vez conectado, Claude tiene acceso a un conjunto definido de acciones a través del servidor MCP de Webflow. Esto es lo que supone en la práctica para los equipos de contenidos de B2B SaaS:

Gestión de contenidos del CMS

Leer colecciones del CMS: pide a Claude que liste todos los elementos de una colección, que extraiga campos concretos o que resuma el contenido existente
Crear nuevos elementos del CMS: describe una nueva entrada de blog, un caso de éxito o una novedad de producto, y Claude creará el elemento con los campos que especifiques
Actualizar elementos existentes: cambia textos, sustituye metadatos, actualiza slugs o edita campos de texto enriquecido en uno o varios elementos
Eliminar elementos: retira contenido obsoleto de las colecciones sin abrir el editor

Gestión de páginas y del sitio

Consultar la estructura del sitio: pregunta a Claude qué páginas existen, cuáles son sus slugs y cómo están organizadas
Actualizar los metadatos de las páginas: cambia títulos SEO, descripciones y campos de Open Graph mediante conversación
Aplicar cambios con la API del Designer: haz actualizaciones estructurales y de estilo donde la API del Designer de Webflow lo permita

Publicación

Publicar sitios: pide a Claude que publique tu sitio en staging o en producción después de hacer cambios
Publicar páginas concretas: elige páginas individuales para publicarlas, en lugar de publicar todo el sitio

Ejemplos reales de flujos de trabajo para equipos de B2B SaaS

Estos son los escenarios en los que la integración de Claude con Webflow mediante MCP ahorra más tiempo a los equipos de marketing y contenidos de SaaS. Si tu equipo ya está comparando especialistas entre agencias de content marketing para B2B SaaS o agencias de marketing digital para B2B SaaS en general, este es el tipo de eficiencia en el flujo de trabajo por la que conviene preguntar.

Publicar una nueva entrada de blog a partir de un briefing

En lugar de crear manualmente un elemento del CMS, rellenar cada campo y dar formato al contenido:

Create a new blog post in Webflow with the title "How SaaS Teams Use AI to Cut Support Costs", 
slug "saas-ai-support-costs", and the following body content: [paste content]. 
Set the author to "Sarah Chen", add tags "AI" and "Customer Support", 
and mark it as a draft.

Claude crea el elemento, asigna todos los campos y confirma que el borrador se ha guardado. Tú lo revisas y lo publicas cuando quieras.

Actualizar el texto de la página de precios en varios elementos

Cuando cambia un plan de precios, actualizar a mano cada referencia es lento:

In my Webflow CMS, find all collection items that mention "Starter plan $49/month" 
and update that text to "Starter plan $59/month"

Claude consulta la colección, identifica los elementos afectados y aplica la actualización en todos ellos de una sola vez.

Renovar las meta descripciones antes de una campaña

Antes de que arranque una campaña de pago, quieres que la meta descripción de cada landing page coincida con el enfoque de la campaña:

Update the meta description on the page with slug "product/analytics" to: 
"See every user action in real time. SaaS analytics built for growth teams. 
Start free, no credit card required."

Claude hace el cambio y puede publicar la página de inmediato si se lo pides. Para los equipos que combinan las actualizaciones de contenido con la captación, este tipo de flujo encaja de forma natural con el apoyo de agencias de PPC para B2B SaaS, agencias de SEO para B2B SaaS o agencias de performance marketing para B2B SaaS.

Publicar después de una auditoría de contenidos

Después de revisar un lote de actualizaciones del CMS que tienes en cola como borradores:

Publish the Webflow site ID [your-site-id] to production

Una línea. Listo.

Lo que la integración de Claude con Webflow mediante MCP no hace

Tener claros los límites ahorra tiempo. El servidor MCP no:

Sustituye al Webflow Designer en el trabajo de maquetación visual. La creación de componentes complejos, las nuevas plantillas de página o los cambios de animación siguen requiriendo el editor.
Gestiona código personalizado ni flujos de Webflow Logic mediante conversación.
Deduce automáticamente tu estrategia de contenidos. Claude actúa según lo que le indicas. El criterio editorial sigue en manos de tu equipo.
Esquiva los límites de uso de la API de Webflow. Las operaciones masivas sobre cientos de elementos del CMS toparán con los mismos límites que cualquier otro cliente de la API.

Para actualizaciones de contenido, gestión del CMS y publicación, la integración cubre todo el flujo de trabajo. Para el trabajo con mucho peso de diseño, el editor sigue siendo la herramienta adecuada.

¿Merece la pena la integración de Claude con Webflow mediante MCP para los equipos de B2B SaaS?

Para los equipos que publican contenido con regularidad en Webflow, la respuesta es sí, con un caso de uso claro.

La integración se gana su lugar cuando tu equipo:

Gestiona un CMS de gran volumen (entradas de blog, casos de éxito, changelogs, artículos de ayuda)
Hace actualizaciones frecuentes de texto ligadas a campañas o a cambios de producto
Quiere dar a miembros del equipo sin perfil técnico una forma de publicar contenido sin acceso al editor
Ya usa Claude para crear contenido y quiere eliminar el paso manual de copiar el resultado en Webflow

La configuración lleva menos de 15 minutos. El tiempo que ahorras con la primera actualización de contenido en lote compensa ese esfuerzo de inmediato.

En SaaS Hackers vemos esta integración como un ejemplo práctico de cuándo los agentes de IA pasan de ser interesantes a ser operativos. No es una función de demostración. Es un flujo de trabajo repetible que encaja directamente en la forma en que ya trabajan los equipos de contenidos de SaaS. Si quieres conocer más profesionales, herramientas y partners de confianza en este ámbito, explora el centro de recursos de SaaS Hackers o consulta el blog completo.

Preguntas frecuentes

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

El servidor MCP de Webflow es un conector oficial creado por Webflow que usa el estándar Model Context Protocol para dar a Claude acceso directo a tu espacio de trabajo de Webflow. Una vez configurado, Claude puede leer y escribir datos del CMS, actualizar los metadatos de las páginas y publicar contenido llamando a la API de Webflow en tu nombre, mediante una conexión estructurada y con permisos.

¿Necesito saber programar para usar Claude con Webflow MCP?

No. La configuración requiere ejecutar dos comandos en la terminal y editar un archivo de configuración JSON, pero una vez hecha, interactúas por completo en lenguaje natural con Claude. Los responsables de contenido sin perfil técnico pueden enviar actualizaciones del CMS y publicar páginas sin escribir código.

¿Es seguro usar la integración de Webflow MCP en un sitio de producción en vivo?

Sí, aunque con la debida precaución. El servidor MCP usa tu token de API de Webflow, por lo que funciona con los permisos que tenga ese token. En sitios en producción, plantéate generar un token limitado a los permisos mínimos que necesite tu flujo de trabajo (por ejemplo, lectura y escritura del CMS) en lugar de un token con acceso total. Revisa siempre los cambios antes de publicarlos en producción.

¿Qué diferencia hay entre usar Claude Desktop y Claude Code con Webflow MCP?

Ambos funcionan con el mismo servidor Webflow MCP. Claude Desktop es la aplicación de chat para el público general y encaja con los equipos de contenido y marketing que quieren una interfaz conversacional. Claude Code es la herramienta CLI orientada a desarrolladores y encaja con los ingenieros que quieren programar o automatizar operaciones de Webflow dentro de un flujo de trabajo más amplio. El método de configuración varía ligeramente, pero las acciones disponibles son idénticas.

¿Puedo usar Claude para actualizar de golpe cientos de elementos del CMS de Webflow?

Claude puede gestionar operaciones por lotes en las colecciones del CMS, pero se aplican los límites de frecuencia de la API de Webflow. En colecciones muy grandes (cientos de elementos), puede que tengas que ejecutar las actualizaciones por lotes y vigilar las respuestas de límite de frecuencia. Con los volúmenes de contenido habituales en SaaS (de decenas a pocos cientos de elementos), las actualizaciones masivas funcionan sin problemas.

¿Cómo se conecta Claude a Webflow?