Un diseñador de tu equipo quiere un nuevo acordeón de preguntas frecuentes.
Debe coincidir con los estilos del sitio y abrirse al hacer clic. Es lo de siempre, solo otro ticket en tu lista de tareas. Lo escribes, lo conectas y lo publicas. A por el siguiente ticket.
Al menos, así es como se hacía antes.
Qué hay de nuevo
Los componentes de código de Devlink llevan un tiempo entre nosotros, y uno de los flujos de trabajo con IA más útiles ha sido el uso de agentes para crearlos. Tu agente escribe el componente de React, ejecuta la CLI y lo envía a Webflow.
Si querías pedirle a Claude que incluyera una animación 3D, podías hacerlo sin problemas.
Esa parte no ha cambiado. Lo que sí ha cambiado es cómo se crean esos componentes.
Los nuevos componentes de código con IA de Webflow permiten que cualquiera describa un componente en lenguaje natural y cree un componente de React "real". Un componente de código de Webflow de primera clase en el lienzo, con props declaradas en el panel de Propiedades y estilos que se ajustan automáticamente al resto de tu sitio. Sin incrustaciones personalizadas ni contenedores iframe.
El diseñador o responsable de marketing que solicitó el acordeón ya no necesita abrir un ticket. Y eso es genial, porque ya tienes la lista de tareas a rebosar. Ahora tus compañeros pueden pedir nuevos componentes, refinarlos y soltarlos en sus páginas.
Descubre más sobre cómo usar agentes de IA para integrar animaciones 3D increíbles con los componentes de código de DevLink, y conoce el nuevo flujo de trabajo con componentes de código con IA en el siguiente vídeo.
El alcance de lo que la gente está creando con prompts
El primer reflejo ante una función así es pensar: "claro, pero esto solo sirve para acordeones y menús desplegables". Pues no.
La comunidad de Webflow ya está creando componentes que hace un año habrían requerido un ticket para el equipo de desarrollo. Una calculadora de precios completa con controles deslizantes y cálculos en tiempo real. Formularios de varios pasos con campos condicionales y validación. Un localizador de tiendas interactivo con mapa y filtros. Reproductores de audio personalizados, cuestionarios interactivos, contadores animados y relojes. Son componentes reales, en sitios reales, con estado y comportamiento, todos creados a partir de un prompt y refinados de la misma manera.
Y esta es la parte realmente nueva. Cualquier cosa que fuera más allá de los elementos integrados de Webflow solía requerir un desarrollador. Ahora, un diseñador puede describir un componente interactivo complejo y publicarlo esa misma tarde.
Dos caminos de IA, un mismo resultado
Aun así, muchos componentes te seguirán necesitando a ti. Tú también usas la IA para construirlos: tu agente de programación lee la documentación, escribe el código y ejecuta los comandos. Tu trabajo es revisar. Ese ha sido el flujo de trabajo para los componentes de código de Devlink desde que los agentes llegaron este año.
Este camino es el que siguen los componentes importantes de tus sitios. Aquellos que sustentan flujos de usuario reales, comparten tokens de diseño con el resto de tu front-end o contienen la lógica que se beneficia del control de versiones y la revisión de código. Se quedan en tu base de código porque ahí es donde están todos los demás componentes. Y tu agente lee la documentación, envía los componentes a través de la CLI y escribe los archivos .webflow.tsx necesarios.
Así que ambos caminos usan IA. Tú le das instrucciones a tu agente de programación en la terminal. Un diseñador o responsable de marketing le da instrucciones a los componentes de código con IA en el lienzo de componentes. Mismo movimiento, mismo resultado. La única diferencia entre ambos es el entorno.
La barrera para la mayoría de los que no son desarrolladores nunca fue React o las props. Son las terminales, los gestores de paquetes y los archivos fuente. Un diseñador o responsable de marketing que puede describir un acordeón en una frase no va a instalar Node.js, configurar la CLI y ejecutar un comando share para publicarlo. Y no debería tener que hacerlo. Los componentes de código con IA mantienen la IA pero cambian el entorno. El lienzo de componentes es para tu diseñador lo que tu editor es para ti.
Elijas el camino que elijas, el resultado es el mismo: un componente de React real más un archivo .webflow.tsx que lo envuelve con declareComponent. Cada prop que declares se convierte en un control en el panel de Propiedades.
Cómo elegir entre ambas opciones
Pregúntate con qué frecuencia se ejecutará el nuevo componente, qué tan compleja es su lógica, qué tan grave sería si algo fallara y qué probabilidades hay de que se reutilice en otros sitios.
La ruta del código es para lo importante: componentes que sostienen flujos críticos, se reutilizan en varios sitios, dependen de librerías internas o tokens de diseño, o tienen una lógica compleja. Créalos en tu base de código, contrólalos con versiones y revisa los cambios. Eso es lo que mantiene la fiabilidad de los componentes complejos a largo plazo.
La ruta del lienzo es para el resto: acordeones de preguntas frecuentes, contadores de estadísticas y elementos temporales como el contador de Black Friday que todos hemos hecho y que no sobrevivirá a la campaña. Si un diseñador puede describirlo en una frase y publicarlo sin abrir una terminal, ese es precisamente el objetivo. No todos los componentes de Webflow necesitan entrar en tu base de código.
Qué cambia con esto
El acordeón que abría esta publicación solía acabar en tu lista de tareas. Ahora ya no. Los componentes que realmente pertenecen a tu base de código seguirán pasando por ti (y por tu agente). El resto, tus compañeros de diseño y marketing pueden publicarlo por su cuenta.
La línea entre "esto lo puede hacer el diseñador" y "necesitamos un desarrollador" acaba de moverse. Y eso es fantástico, porque los componentes que realmente requieren un desarrollador son los que, de todos modos, querrás programar tú.
.jpg)
