Codex, un sitio de Webflow vacío y un prompt independiente para cada tarea. Así es como el servidor MCP de Webflow logró resolverlo.
El servidor MCP de Webflow recibió una actualización. Tu agente ahora puede filtrar y ordenar tus datos de CMS mediante campos personalizados, además de fusionar y publicar ramas de páginas. Ya cubrimos parte de esto en la publicación del anuncio.
Pero hay tres cosas que me entusiasman mucho y creo que merecen una mención especial. Tu agente ahora puede animar tu sitio con las Interacciones nativas de Webflow, escribir sus propias guías para el agente para tu sitio, y desplegar y depurar tus aplicaciones de Webflow Cloud.
Déjame mostrarte cómo funcionan estas tres características en la práctica en esta publicación. Y si prefieres ver antes que leer, míralo en acción a continuación.
Crear animaciones es difícil
Seguro que has visto sitios donde todo se mueve al cargar y aparece a medida que haces scroll. Si se hacen bien, estos efectos pueden ser muy bonitos, pero crearlos también es un trabajo duro.
Tienes que configurar disparadores, jugar con las líneas de tiempo de animación, definir escalonamientos y ajustar las curvas de aceleración. Las buenas animaciones se integran en el sitio y hacen que sea más agradable de usar.
Y eso es más fácil de decir que de hacer. Aprendí hace años que animar bien las cosas requiere mucho más que mover cajas de un lado a otro. Si quieres saber más sobre cómo crear animaciones excelentes, esta guía ofrece muchos consejos y trucos.
Hasta ahora, tu agente podía construir el diseño de tu página, pero no podía usar las animaciones nativas de Webflow. ¡Eso ha cambiado!
Con las recientes actualizaciones de MCP de Webflow, tu agente ahora puede crear Interacciones nativas de Webflow, ejecutando GSAP en segundo plano.
Recreando demos de GSAP
Quizás hayas oído que GSAP es parte de Webflow, y el equipo de GSAP tiene todo un escaparate de demos. Estas demos son geniales para inspirarse, pero requieren que añadas código personalizado a tu sitio.
Ahí es donde entran las Interacciones de Webflow. Las Interacciones de Webflow cubren muchas de las animaciones de interfaz comunes de GSAP, incluyendo división de texto, animaciones activadas por scroll, y efectos de cursor y hover.
Elegí tres demos y le pedí a mi agente que las recreara.
No todas las funciones de GSAP se corresponden directamente con las propiedades de las Interacciones de Webflow y algunos ejemplos no funcionarán de inmediato. Probamos los que aparecen a continuación y funcionan bien. Si una animación necesita más de lo que ofrecen las Interacciones o si tienes problemas, usar GSAP mediante código personalizado sigue siendo la mejor herramienta.
Un botón que se inclina con el cursor
Esta demo de GSAP incluye un botón grande que se inclina con el cursor para crear un efecto de profundidad muy logrado.
Para que tu agente cree un efecto como este, abre Codex (cualquier otro agente también funcionará). Asegúrate de que el servidor MCP de Webflow esté conectado mediante un plugin o conector. Para Codex, el plugin de Webflow permitirá que tu agente se comunique con tu sitio de Webflow a través de MCP.
Usa un prompt como el siguiente para crear la animación:
Access my Webflow Animation demo site and create a new GSAP animation page based on this demo: https://demos.gsap.com/demo/cursor-driven-perspective-tilt/.
Use native, editable Webflow Interactions. The big button should say "Webflow" instead of GSAP and follow the mouse cursor to create a depth effect. The text should look like it sits on top of the button background.
Let me know when you're done and I'll verify it.El prompt consta de tres partes principales:
The initial context tells the agent which site to work on and sets a goal by providing a demo URL.
Detailed instructions tell the agent to use native, editable Webflow Interactions, because you don't want it to set up custom code for things that are supported natively.
Manual verification prevents the agent from going into the deep rabbit holes of animation debugging. Modern agents and models are very eager to validate their own work, but whether an animation feels right is your call.Con este prompt, el agente se pone manos a la obra y ¡listo! En mi caso, Codex creó una página nueva que incluía el "botón de Webflow" que sigue al cursor de mi ratón.
Ni de broma habría podido construir este componente de interfaz en un par de minutos como hizo Codex. Y como la animación se basa en las interacciones nativas de Webflow, vive en el panel de interacciones. Pude revisar el activador de movimiento del ratón, inspeccionar la línea de tiempo de la animación y ajustar las propiedades animadas.
Las buenas animaciones requieren buen gusto y criterio. Por eso recomiendo ajustar lo que sea que tu agente proponga.
Texto que aparece palabra por palabra
Lo siguiente en las demos de GSAP fueron efectos sofisticados de texto y saltos de línea.
Pedí varios párrafos donde el texto apareciera palabra por palabra a medida que haces scroll. El prompt siguió la misma estructura que el ejemplo anterior:
Access my Webflow Animation demo site and create a new GSAP animation page based on this demo: https://demos.gsap.com/demo/responsive-line-splits-on-scroll/.
Use native, editable Webflow Interactions and make it highlight multiple paragraphs in which each line fades in on scroll. Make every word appear one-by-one.
Let me know when you're done and I'll verify it.Ejecutar este prompt llevó tres minutos y medio, y también funcionó muy bien. Cada línea aparece gradualmente al entrar en pantalla, y las palabras se suceden una tras otra.
Una navegación fija que se mantiene sincronizada con animaciones basadas en el scroll
Para el tercer ejemplo, quería ver si también eran posibles efectos de interfaz más complejos.
En la demo del indicador de anclaje lateral, la sección se fija mientras haces scroll, un menú de navegación a la izquierda sigue tu progreso y la imagen de la derecha cambia en el momento justo. Todo eso está vinculado a la posición del scroll y debe mantenerse sincronizado.
Construir esto a mano definitivamente me llevaría un buen rato. Así que este es el prompt que utilicé:
Access my Webflow Animation demo site and create a new GSAP animation page based on this demo: https://demos.gsap.com/demo/lateral-pin-indicator/.
Use native, editable Webflow Interactions. The page has a navigation on the left that's progressing on scroll and with it the right side image is changing. You can use placeholders for the right side.
Let me know when you're done and I'll verify it.¡Y el resultado volvió a ser bastante bueno!
Se configuraron más de diez acciones en el panel de interacciones y, no voy a mentir, quedé bastante impresionado con el resultado.
Una nota sobre la calidad de los resultados de las animaciones
Los agentes y los LLM todavía están aprendiendo a crear animaciones, y las herramientas para depurarlas aún no están a la altura.
Utilicé el modelo GPT-6 Astra de OpenAI para crear los ejemplos. Es uno de los modelos más recientes al momento de escribir esto (octubre de 2026). Usar un modelo más barato o de código abierto podría dar resultados diferentes.
Deja que tu agente escriba sus propias directrices
Crear animaciones es una cosa, pero los agentes realmente brillan cuando ayudan a gestionar sitios de Webflow a gran escala. Toma este sitio como ejemplo.
El sitio incluye una paleta de colores clara, una escala tipográfica y una forma específica de escribir titulares. Incluye varias páginas que siguen ciertas directrices de marca. Yo sé todo eso, pero mi agente no. Cada vez que inicio una nueva conversación, curiosea un poco para aprender con qué está tratando.
Con MCP 2.0, ya introdujimos las habilidades y reglas, que son instrucciones en Markdown que residen en tu sitio de Webflow para darle a tu agente un poco de contexto adicional. Sin embargo, escribirlas desde cero requiere mucho trabajo, y ahora el servidor MCP de Webflow ayuda a tu agente a redactarlas por ti.
Access my Webflow site and generate style and design system guidelines for it. Save them as a draft, I want to review them before my agents use them. When you're done, give me a short summary of the most important rules.Con este prompt, tu agente invoca nuevas herramientas que analizan los colores, la tipografía, los componentes, el texto y la marca de tu sitio. El servidor MCP realiza el trabajo de descubrimiento y entrega el resultado a tu agente para su revisión.
Una vez generadas, puedes revisar las nuevas reglas del agente. Y, por favor, no te lo tomes a la ligera. No confíes ciegamente en los resultados de la IA y asume la responsabilidad del contexto que le proporcionas a tus agentes.
Pero una vez que estés satisfecho con las reglas generadas, activa las nuevas habilidades y, a partir de ese momento, cualquier agente que trabaje en este sitio seguirá estas pautas.
El servidor MCP ahora ofrece herramientas para generar pautas de marca, activos, CMS y sistemas de diseño. ¡Estoy seguro de que tú y tus agentes agradecerán este contexto adicional!
Despliega y depura aplicaciones de Webflow Cloud
La última funcionalidad de MCP que me entusiasma es para quienes desarrollan con Webflow Cloud. Webflow Cloud te permite publicar aplicaciones full-stack dentro o junto a tus sitios de Webflow, y ahora tu agente puede comunicarse con la infraestructura que las respalda.
Si quieres realizar cambios en tu aplicación en la nube y hacer que tu agente espere hasta que el despliegue finalice, solo necesitas un prompt:
This site is deployed as a cloud app (webflow-cloud-viewer). Can you change the background of the site and push and wait for the deploy to finish to check if things are okay?Ten en cuenta que, en este ejemplo, el prompt incluye el nombre de la aplicación en la nube y que Codex también tiene acceso al código fuente del proyecto (webflow-cloud-viewer).
Los ejemplos anteriores solo modificaban lo que ya estaba almacenado en Webflow. Con las aplicaciones de Webflow Cloud, el flujo se acerca más a los enfoques tradicionales de CI/CD centrados en el código. Escribes código, lo envías y esperas a que tu aplicación se compile.
Con un prompt breve como este, Codex cambiará el código fuente, lo ejecutará, lo verificará y enviará el resultado a GitHub. Luego, utilizará Webflow MCP para esperar a que el nuevo despliegue finalice y comprobar que todo haya salido bien.
Es genial ver a tu agente hacer el trabajo y luego validarlo en producción.
Y si una compilación falla, tu agente ahora puede leer los registros de compilación y ejecución, solucionar el problema y volver a desplegar. Cuando ves este flujo por primera vez, es bastante mágico.
También puede crear nuevas aplicaciones, asignar ramas de Git a entornos, volver a desplegar una versión anterior para revertir cambios y listar los dominios personalizados en los que se ejecuta tu aplicación. ¡Dinos si nos hemos dejado algo!
Prueba las nuevas funciones tú mismo
Todas estas nuevas funciones ya están activas. Si tienes el servidor MCP de Webflow conectado a tu agente, no hay nada que activar. ¡Pruébalas!
Y si aún no lo has conectado, encontrarás las instrucciones de configuración en developers.webflow.com y la lista completa de cambios en el registro de cambios. ¡Que te diviertas!
