Tu agente ahora puede crear componentes de Webflow a partir de una captura de pantalla, actualizar más de 50 tokens de diseño en una sola conversación y consultar las analíticas de tu sitio con lenguaje natural. Esto es lo que trae MCP 2.0.
Reajustar los tokens de diseño mientras creas componentes nuevos puede llevarte todo el día porque hay muchísimas cosas que tener en cuenta. Pero te digo una cosa: mi agente de Cursor hizo ambas cosas en un par de conversaciones.
Webflow siempre se ha diseñado para quienes crean y construyen en la web. Con el nuevo lanzamiento de MCP 2.0, tu agente de IA por fin puede ponerse en tus zapatos. Puede crear componentes con propiedades y variantes, conectarlos a tu CMS, y tu sitio de Webflow ahora puede seguir convenciones adaptadas a tus nuevos flujos de trabajo centrados en la IA. Formularios, recursos, esquemas SEO, código personalizado e incluso tus analíticas de tráfico están ahora al alcance de las conversaciones con tu agente.
¡Webflow MCP 2.0 es un lanzamiento importante! Déjame compartirte mis puntos destacados en este post.
Y si prefieres verlo antes que leerlo, pásate por YouTube.
Pero primero: ¡adiós a la aplicación puente!
Un apunte rápido antes de pasar a mis nuevas funciones favoritas.
Si usaste el servidor MCP a principios de año, recordarás que tenías que mantener abierta una pestaña del navegador con la aplicación puente para que tu agente pudiera acceder a tu sitio e interactuar con él. Con el nuevo lanzamiento del servidor MCP, ese requisito desaparece para la mayoría de las acciones, y estamos trabajando para que todas las herramientas y flujos de trabajo funcionen sin necesidad de la aplicación puente.
Solo cuando tu agente necesite acceder al lienzo actual, o le pidas algo como "actualiza la página en la que estoy", te avisará sobre la aplicación puente y te dará instrucciones sobre cómo activarla.
Dicho esto, ¡vamos a lo bueno!
Delega tu trabajo de diseño
Para escalar tus sitios de Webflow, deberías invertir tiempo en un sistema de diseño bien definido. La base de este sistema se apoya en las variables CSS. Y, como habrás adivinado, MCP 2.0 le da a tu agente acceso total a ellas. Puede leer tus colecciones de variables, crear y reordenar variables, y añadir nuevos modos de variable. Esto significa que el agente puede razonar sobre los tokens reales que controlan tu sitio en lugar de adivinar valores codificados.
En mi ejemplo, configuré un nuevo sitio de Webflow. Al principio estaba bastante contento con el aspecto, pero tras darle una vuelta, los colores me parecieron fuera de lugar y, sencillamente, "demasiado". Ajustar todos los colores habría sido un trabajo considerable. Además, no estaba seguro de qué colores encajarían mejor.
Así que, en lugar de editar los tokens uno a uno para encontrar el estilo adecuado, le pasé el problema al agente de Cursor.
Please update my Webflow site. Initially I liked the bright and strong colors, but it's too much now. Please check the design system and propose different color palettes. Offer me a way to preview the alternatives.
Con la conexión MCP establecida, el agente de Cursor accedió a mi sitio de Webflow, leyó las colecciones de variables que definen el diseño e incluso creó un prototipo rápido para previsualizar alternativas de paletas de colores más suaves. En lugar de probar cosas directamente en mi sitio, pude ver estos nuevos colores en acción.
Tras decidirme por una nueva paleta de colores, el agente se puso manos a la obra y actualizó más de 50 tokens de diseño de una sola vez mientras yo observaba. Incluso configuró un nuevo modo de variable para las distintas paletas, de modo que pudiera cambiar entre ellas fácilmente.
Debo admitir que sigo alucinado con la rapidez del resultado.
Crea un componente a partir de una captura de pantalla
Retocar componentes y estilos existentes es una cosa. MCP 2.0 también le da a tu agente control total sobre los componentes de Webflow: puede crearlos, añadir propiedades, variantes y espacios, y establecer metadatos, todo ello construido a partir de los elementos y estilos existentes en tu sitio.
Un flujo de trabajo que descubrí demasiado tarde en mi viaje con la IA es que puedes enviar capturas de pantalla a los agentes de IA para proporcionar contexto adicional. En mi caso, tenía un boceto rápido de un componente. Le hice una captura de pantalla y se la pasé a Cursor.
¿Puedes crear un nuevo componente "manifest" para mi sitio en Webflow? Debería verse más o menos así. Haz que todos los campos sean configurables.
Con todo este contexto, Cursor puede analizar la captura de pantalla, inspeccionar la estructura existente del sitio y crear nuevos componentes utilizando los elementos y estilos actuales. Incluso puede hacer capturas de pantalla de su progreso para verificar que el resultado coincida con la imagen proporcionada.
Todavía me parece un poco irreal que pudiera "construir" este componente sin ningún esfuerzo manual.
Enseña a tu agente tus preferencias con habilidades y reglas
Para aprovechar al máximo tus conversaciones con el agente, el contexto lo es todo. Lo ideal es no depender de los datos de entrenamiento del modelo; quieres proporcionar toda la información en el momento adecuado. Pero, ¿cómo proporcionas contexto cuando tu sitio vive en Webflow? ¿Cómo pueden tus instrucciones en markdown entrar en todas estas conversaciones con agentes?
Para compartir contexto, tu sitio de Webflow ahora tiene una nueva sección de "Instrucciones" accesible desde la barra lateral.
Dividimos el contexto de tu IA en reglas y habilidades.
Las reglas son tus salvaguardas permanentes. Se aplican a cada interacción con el agente, sin importar la tarea. Cosas como "usa nuestros tokens de diseño", "nunca codifiques colores de forma rígida" o "sigue nuestra nomenclatura" pertenecen a las reglas globales.
Las habilidades son manuales de instrucciones bajo demanda. El agente solo carga una cuando la tarea lo requiere. Una habilidad de "crear un componente" puede capturar exactamente cómo construye componentes tu equipo: estructura, propiedades, variables, nombres. Recomendamos crear habilidades personalizadas para cada flujo de trabajo específico.
Luego puedes redactar tus salvaguardas y flujos de trabajo directamente en Webflow. Y para que el contexto sea nativo, incluso puedes hacer referencia a elementos básicos de Webflow como variables, componentes y estilos en el contexto de tu IA. De esta manera, tu agente tiene acceso a datos reales en lugar de trabajar con información desactualizada.
¿Y recuerdas el componente que mencioné antes? Tengo una pequeña confesión: dependía en gran medida de una habilidad predefinida. El agente no tuvo que improvisar ni adivinar nada. Una habilidad de create-component le indicó exactamente cómo debía estructurarse el componente del sitio, por lo que acertó a la primera.
Con reglas y habilidades, tu agente se mantiene en su carril sin que tengas que corregir el rumbo en cada paso.
Pero hay mucho más
Estas son mis nuevas funciones favoritas, pero MCP 2.0 tiene mucho más que ofrecer:
- Lee tus formularios, enumera envíos y actualízalos o elimínalos. Trabaja en ramas de páginas y aplica roles y permisos. Gestiona activos y carpetas, y comprime imágenes a webp o avif sin salir de la conversación. Lee y escribe código de encabezado y pie de página, tanto a nivel de página como de sitio. Accede al historial de tu sitio (en planes Enterprise) para entender quién cambió qué y qué cambios provienen de un agente. Pregunta sobre tu tráfico en lenguaje sencillo: páginas principales, canales y fuentes, interacción y tiempo en el sitio.
Pruébalo tú mismo
Webflow MCP 2.0 ya está disponible. Conéctalo a tu agente, enséñale tus convenciones con habilidades y reglas, y deja que trabaje en todo tu sitio.
Las instrucciones de configuración están en developers.webflow.com. Ve a construir algo y, si hay algo que aún no puedas hacer con tu agente, avísanos.
