Cómo pueden los diseñadores de Webflow usar ChatGPT para escribir código personalizado: cinco prompts de ejemplo, cómo refinar el resultado y las herramientas que han cambiado desde 2023.
Actualización, octubre de 2026: algunas de las herramientas de esta entrada han cambiado. OpenAI desactivó el modelo Codex original en marzo de 2023 (el nombre ahora pertenece a un agente de programación más reciente que OpenAI lanzó en 2025), y Notion AI es hoy un producto en funcionamiento y no una beta con lista de espera. ChatGPT sigue siendo una forma práctica de obtener un primer borrador de código personalizado para Webflow, pero prueba todo lo que te dé en el entorno de pruebas (staging) antes de publicar.
ChatGPT es un potente modelo de lenguaje capaz de generar texto casi humano a partir de una indicación o un contexto dados, y se puso de moda en los pocos meses posteriores a su lanzamiento al público a finales de 2022. Esto significa que los diseñadores pueden usar ChatGPT para escribir código personalizado para sus sitios de Webflow sin saber programar.
Para usar ChatGPT con código personalizado en Webflow, los diseñadores pueden darle al modelo una descripción clara y detallada de la funcionalidad que desean. Por ejemplo, si un diseñador de Webflow quiere añadir una función concreta con JavaScript, puede explicarle a ChatGPT en qué consiste, qué debe hacer y cualquier requisito específico. El modelo generará entonces el código, que se puede copiar y pegar directamente en el Designer de Webflow. Como Milk Moon Studio es un pequeño estudio de Webflow centrado en el diseño, una herramienta así nos resulta de lo más útil.
Una de las ventajas de usar ChatGPT para el código personalizado en Webflow es que permite a los diseñadores añadir funcionalidad a sus sitios de forma rápida y sencilla, sin dedicar tiempo a aprender a programar ni a buscar ese fragmento de código esquivo que alguien ya ideó en algún rincón de la web. Además, ChatGPT puede ayudar a los diseñadores a ahorrar tiempo y recursos al generar código eficiente y optimizado para la tarea en cuestión.
Lo importante es recordar que no es perfecto y que quizá no consigas lo que necesitas a la primera, pero en esencia tus indicaciones a ChatGPT son una conversación. ChatGPT lo recordará y puedes mantener el hilo explicando qué falla o qué no funciona y seguir pidiéndole que refine el código. Al final puede que no quede perfecto, pero hemos visto casos en los que te lleva muy rápido a un punto en el que puedes pulirlo tú mismo sin un conocimiento profundo de, por ejemplo, JavaScript. Hace poco le pedimos a ChatGPT que escribiera un código de intersección de objetos muy complejo para un proyecto con montones de vídeos de Vimeo, e implementó su API de maravilla, e incluso nos advirtió sobre el abuso del acuerdo de usuario de la API cuando nos pusimos un poco demasiado ansiosos con una indicación en ChatGPT.
Aparte de lo obvio, también es un gran ahorro de tiempo que puede llevarte a la meta antes que rastrear los foros de Webflow y buscar en Google el fragmento de código justo. Y recuerda que también puedes pasarle fragmentos de código para que los adapte a tu caso. Las posibilidades son infinitas y puede que aprendas por el camino.
Prompts de ChatGPT para código personalizado en Webflow
Incluso le pedimos a ChatGPT que generara una lista de prompts que un usuario de Webflow podría querer usar como ejemplo para incluir en esta entrada, y aquí están:
- "Necesito una función de JavaScript que añada un efecto de desplazamiento suave a los enlaces de mi sitio de Webflow al hacer clic en ellos. ¿Puedes generarme el código?"
- "Estoy creando una landing page con un formulario en mi sitio de Webflow. Quiero validar los campos del formulario con JavaScript antes de enviarlo. ¿Puedes escribirme el código?"
- "Tengo un sitio de Webflow con una galería de imágenes. Quiero añadir un efecto lightbox al hacer clic en las imágenes. ¿Puedes generarme el código JavaScript?"
- "Estoy creando un sitio de Webflow con una barra de navegación fija. Quiero que responda a los eventos de desplazamiento y que cambie el color de la barra cuando el usuario baje por la página. ¿Puedes escribirme el código JavaScript?"
- "Quiero crear una función de JavaScript que detecte el navegador del usuario y muestre un mensaje si el navegador está desactualizado o no es compatible. ¿Puedes escribirme el código?"
Puede que no sea la IA más creativa, pero ahí lo tienes: algunas cosas que ChatGPT cree que los usuarios de Webflow podríamos querer pedirle.
Estos ejemplos muestran cómo los diseñadores pueden usar ChatGPT para generar código personalizado para sus sitios de Webflow sin necesidad de saber programar, dándole al modelo una descripción clara y detallada de la funcionalidad deseada.
ChatGPT puede ser una herramienta valiosa para los diseñadores y expertos de Webflow que necesitan añadir funcionalidad personalizada a sus sitios. Gracias a su capacidad para programar a partir de un contexto o una indicación dados, ChatGPT puede ayudar a los diseñadores a escribir código personalizado para sus sitios de Webflow con muy pocos conocimientos o experiencia en programación, o ninguno. Esto puede ahorrar tiempo y recursos, y aumentar la eficiencia del diseñador y del sitio.
Como nota final, las cosas se están calentando en este terreno: Notion tiene en beta su propia IA, también basada en OpenAI, con funciones similares y capacidad para escribir código. El futuro es prometedor para el desarrollo low-code, y abre más caminos a los diseñadores de Webflow que no quieren molestarse en aprender a programar pero ahora pueden aprovechar las ventajas del código personalizado. Puedes apuntarte a la lista de espera de la beta de Notion AI aquí.
Si lo único que te interesa es el código y no quieres usar el resto de las excelentes funciones de ChatGPT, ¿por qué no probar Codex de OpenAI? Este chico está pensado solo para ayudarte con el código y también está en beta, así que entra aquí para usar OpenAI Codex. Te contamos un pequeño secreto: aunque ChatGPT puede saturarse y están empezando a probar una versión Pro de pago, puedes saltarte la cola de espera comprando unos créditos de API para Codex si vas a usarlo mucho.
Actualización: hemos estado trasteando con un GPT personalizado para Webflow, pruébalo.
Para conocer más herramientas en las que nos apoyamos, echa un vistazo a nuestra entrada sobre herramientas gratuitas y de pago para pequeñas agencias de diseño y autónomos, nuestras extensiones de Chrome esenciales para Webflow y cómo auditamos el schema que la IA de Webflow generó para el sitio de un cliente.
Preguntas frecuentes
¿Puede ChatGPT escribir código personalizado para Webflow?
Sí, puede escribir JavaScript, CSS y HTML que puedes pegar en un embed de código personalizado de Webflow o en los ajustes de la página. Describe lo que quieres, nombra las clases o los elementos de Webflow implicados y prueba el resultado en tu sitio de pruebas (staging) antes de publicar.
¿Cuáles son buenos prompts de ChatGPT para Webflow?
Los mejores prompts son específicos sobre la función, los elementos implicados y cualquier límite, como los cinco ejemplos anteriores. Si la primera respuesta no es la correcta, dile a ChatGPT qué ha fallado y pídele que refine el código.
¿Sigo necesitando saber programar?
No para empezar, pero entender un poco te ayuda a detectar cuándo el código es incorrecto. ChatGPT te lleva la mayor parte del camino y tú perfeccionas el resto.
