Cómo crear imágenes con código generado por IA (sin necesidad de programar)

25 de febrero

Animación solo con CSS: 10 elementos div, ~40 líneas de CSS, sin JavaScript. Bucle continuo de 30 segundos. Generado en una sola conversación con IA.

No se trata de un marco de trabajo ni de una biblioteca. Es HTML y CSS sin más, las mismas herramientas que llevan décadas en todos los navegadores. Una única propiedad personalizada CSS (--i) alimenta a un calc() expresión, de modo que una regla de animación controla diez velocidades diferentes. La IA descubrió la técnica; tú solo describiste lo que querías ver.

Vale la pena tener esto en cuenta al profundizar en herramientas como p5.js y Three.js: se puede hacer mucho con muy poco.

Más allá del texto a vídeo: uso de la IA para escribir código que genera imágenes

En nuestro artículo anterior sobre la creación de imágenes para conciertos con IA, analizamos herramientas de conversión de texto a vídeo como Sora, Veo y Runway, que generan clips de vídeo a partir de indicaciones escritas. Estas herramientas son ideales para crear contenido cinematográfico y fotorrealista: paisajes de ensueño, mundos líquidos abstractos, vuelos cósmicos. Pero hay otro enfoque igual de potente y posiblemente más divertido: utilizar la IA para escribir código que genere imágenes.

No es necesario saber programar. La IA se encarga de esa parte. Solo tienes que saber lo que quieres ver. Algunas personas lo llaman «programación por vibraciones»: describir tu visión en lenguaje sencillo y dejar que la IA se encargue de la implementación. Se ha convertido en uno de los usos más populares de las herramientas de IA y resulta perfecto para crear imágenes.

En lugar de describir un vídeo y esperar a que una IA lo renderice, describes una animación en una conversación y la IA escribe un programa que la crea, directamente en tu navegador y en tiempo real. Los resultados son algorítmicos, geométricos y personalizables sin límites. Piensa en rejillas pulsantes, partículas en espiral, formas que se transforman, patrones generativos e ilusiones ópticas al estilo del arte óptico. Se trata de codificación creativa asistida por IA, y así es como creamos nuestro paquete de vídeos de arte óptico.

¿Por qué utilizar código generado por IA para elementos visuales?

Antes de profundizar en las herramientas, conviene comprender por qué se puede optar por este enfoque en lugar de la generación de texto a vídeo:

Bucles perfectos. Las animaciones basadas en código se pueden diseñar para que se repitan sin interrupciones desde el principio. No se necesitan trucos de fundido cruzado: las matemáticas simplemente funcionan.
Infinitas variaciones. Cambia un color, una velocidad, una forma, un parámetro... y obtendrás una imagen completamente diferente. Una sola indicación puede generar docenas de bucles únicos.
Es adictivo. En serio. Una vez que empiezas a decir «ahora hazlo en espiral» y ves cómo la IA reescribe el código en tiempo real, te pasarás toda la tarde enganchado.

IA generada por código frente a IA de texto a vídeo: cuándo utilizar cada una

Si has leído nuestro artículo anterior sobre imágenes generadas por IA, quizá te preguntes cuándo utilizar cada enfoque. Aquí tienes una breve comparación:

	IA de texto a vídeo (Sora, Runway, Veo)	Generación de código mediante IA (este artículo)
Ideal para	Imágenes cinematográficas, orgánicas y fotorrealistas.	Imágenes geométricas, algorítmicas y basadas en patrones.
Bucle	Requiere trucos de edición o herramientas especiales.	Matemáticamente perfecto por diseño
Personalización	Regenerar desde cero cada vez.	Cambia un parámetro y obtén una nueva variación.
Tamaño del archivo	Grande (datos de vídeo complejos)	Pequeño (movimiento limpio y compresible)
Configuración	Cuenta de servicio en la nube + créditos	Chatbot con IA gratuito en tu navegador
Estilo	Onírico, surrealista, fotográfico	Preciso, geométrico, Op Art

Herramientas de IA que escriben código visual

Los principales chatbots con IA ahora incluyen funciones de vista previa de código en vivo, herramientas que hacen posible la codificación vibrante. Escribes lo que quieres y ellos generan HTML, CSS y JavaScript que puedes ver ejecutándose al instante. Esto es lo que hay disponible.

Claude (Artefactos)

Claude, de Anthropic, tiene una función llamada Artifacts que abre un panel lateral junto a tu conversación. Cuando le pides a Claude que escriba código visual, muestra el resultado allí mismo: obtienes una vista previa interactiva en tiempo real junto al código. Pide cambios («haz que los colores sean más cálidos», «reduce la velocidad de rotación», «añade más partículas») y la vista previa se actualiza inmediatamente.

Claude tiende a escribir código limpio y bien estructurado, y maneja particularmente bien las indicaciones de codificación creativa. Funciona muy bien con p5.js, Three.js, la API Canvas y animaciones CSS, todas cargadas a través de enlaces CDN dentro de un único archivo HTML.

Tanto el nivel gratuito como el de pago son compatibles con Artifacts. Disponible en claude.ai.

ChatGPT (Canvas)

ChatGPT de OpenAI cuenta con Canvas, un espacio de trabajo similar con panel lateral que puede renderizar HTML y JavaScript en tiempo real. Puedes pedirle que genere un boceto p5.js, una escena Three.js o una animación JavaScript básica, y Canvas te mostrará el resultado en directo. Repite la conversación, igual que con Claude.

Canvas se ejecuta en un entorno aislado y admite bibliotecas externas a través de CDN. Se incluye tanto en los planes gratuitos como en los de pago de ChatGPT, aunque los usuarios de pago tienen acceso a modelos más potentes para la generación de código complejo. Disponible en chatgpt.com.

Google Gemini (Canvas y AI Studio)

Gemini, de Google, también cuenta con una función Canvas que genera y muestra una vista previa del código en un panel lateral, con una funcionalidad similar a la de Claude Artifacts y ChatGPT Canvas. Es gratuita para todos los usuarios de Gemini y es compatible con HTML, CSS y JavaScript con vista previa en directo.

Para proyectos más ambiciosos, AI Studio de Google cuenta con un «modo de creación» que puede generar aplicaciones web completas a partir de descripciones en lenguaje natural, con una vista previa en directo y una implementación con un solo clic. Es excesivo para un simple bucle de animación, pero si quieres crear un instrumento visual interactivo o una galería de arte generativo, vale la pena explorarlo. Disponible en gemini.google.com y aistudio.google.com.

Otras opciones

Para flujos de trabajo más avanzados, los editores de código basados en IA, como Cursor y Windsurf, ofrecen entornos de desarrollo completos con IA integrada, y herramientas basadas en la web, como v0, Bolt.new y p5js.ai, también pueden generar código visual con vista previa en directo.

Bibliotecas de programación creativa: p5.js, Three.js y más

No es necesario que los entiendas en profundidad (la IA escribirá el código por ti), pero es útil saber qué pedir:

HTML y CSS sin formato -- No pases por alto el sistema de animación propio del navegador. El ejemplo anterior se ha creado con él. CSS @fotogramas clave, propiedades personalizadas y calc() puede producir animaciones geométricas complejas sin necesidad de JavaScript. Pídele a tu IA una «animación solo con CSS» antes de recurrir a una biblioteca; es posible que no la necesites.
p5.js: la biblioteca de referencia para la programación creativa en la web. Diseñada originalmente para artistas y diseñadores, es perfecta para el arte generativo en 2D: sistemas de partículas, campos de flujo, patrones geométricos, efectos visuales basados en ruido. Si tienes dudas, pide a la IA un boceto en p5.js. Es la forma más fácil de crear algo bonito.
Three.js: el estándar para 3D en la web. Si quieres objetos 3D giratorios, iluminación volumétrica, recorridos con cámara o cualquier cosa con profundidad, pide Three.js. Funciona en todos los entornos de chatbot con IA a través de CDN.
Otras opciones: la API Canvas integrada en el navegador y las animaciones CSS/SVG funcionan sin necesidad de bibliotecas. GSAP es ideal para secuencias basadas en líneas de tiempo. Y para efectos avanzados acelerados por GPU (como Shadertoy), solicita a la IA un sombreador de fragmentos GLSL: el código es más complejo, pero los resultados son impresionantes.

Primeros pasos: crea tu primer bucle visual generado por IA

Aquí tienes una guía práctica. Abre cualquiera de los chatbots con IA mencionados anteriormente y prueba con un mensaje como este:

Crea un boceto p5.js de círculos concéntricos que pulsen y giren lentamente. Utiliza un fondo oscuro con colores brillantes y saturados. Haz que se repita sin interrupciones.

Obtendrás una vista previa en vivo de una animación en cuestión de segundos. A partir de ahí, comienza a iterar:

«Haz los círculos más finos y añade más».
«Utiliza una paleta de colores compuesta por morado oscuro, azul eléctrico y rosa intenso».
«Añade un ligero bamboleo a la rotación».
«Acelera un poco».
«Ahora haz una variación con cuadrados en lugar de círculos».

Cada cambio tarda unos segundos. En 15 minutos puedes tener una docena de bucles únicos.

El preámbulo: Preparar la IA para el éxito

Los chatbots con IA son herramientas de uso general. Si se les deja actuar por su cuenta, pueden ofrecerte un lienzo diminuto, añadir controles de interfaz de usuario que no necesitas o crear una animación que no se reproduce correctamente en bucle. Puedes evitar la mayoría de estos problemas incluyendo al principio de tu primera indicación unas pocas líneas de contexto que le indiquen a la IA qué tipo de resultado deseas obtener.

Aquí tienes un preámbulo que puedes pegar al comienzo de cualquier conversación sobre generación visual:

Quiero crear animaciones visuales en bucle para actuaciones en directo. Para cada elemento visual que crees, sigue estas reglas:

Utiliza p5.js cargado a través de CDN en un único archivo HTML.

Haz que el lienzo ocupe toda la ventana del navegador y cambia el tamaño de forma adaptativa.

Utiliza un fondo oscuro o negro.

Todos los movimientos deben repetirse sin interrupciones utilizando matemáticas basadas en el tiempo (seno, coseno, módulo), sin contar fotogramas.

No añadas controles de interfaz de usuario, superposiciones de texto, botones ni controles deslizantes, solo el elemento visual.

Mantén la animación fluida a 60 fps.

Utiliza colores vivos y saturados, a menos que indique lo contrario.

Después de eso, cada indicación en la conversación puede ser breve y creativa: la IA ya conoce el formato que deseas. Solo tienes que decir «hexágonos en espiral con un rastro de arcoíris» y obtendrás exactamente eso, a pantalla completa, en bucle y listo para grabar.

Puedes ajustar el preámbulo a tu gusto. ¿Prefieres Three.js en lugar de p5.js? Cámbialo. ¿Prefieres fondos blancos? Cambia la línea. La idea es establecer las reglas una vez para no tener que repetirlas cada vez.

Consejo: Si utilizas Claude, puedes guardar este preámbulo como una instrucción de «Proyecto» para que se incluya automáticamente en todas las conversaciones. ChatGPT tiene una función similar llamada «Instrucciones personalizadas» en la configuración. De esta manera, solo tienes que abrir un nuevo chat y empezar a solicitar imágenes inmediatamente.

Consejos útiles para la codificación creativa con IA

Con el preámbulo ocupándose de la configuración técnica, tus indicaciones creativas pueden centrarse por completo en lo que quieres ver:

Describe el movimiento, no solo la forma. «Hexágonos giratorios» está bien. «Hexágonos que giran lentamente y cambian de tamaño siguiendo un patrón respiratorio, con un efecto de estela» es mucho mejor.
Menciona el estado de ánimo. «Hipnótico», «minimalista», «psicodélico», «tranquilo», «agresivo»: estas palabras guían la elección de colores, la velocidad y la complejidad.
Haz referencia a cosas reales. «Como un caleidoscopio», «como células bajo un microscopio», «como la lluvia sobre una ventana»: las analogías proporcionan a la IA un objetivo visual que resulta más eficaz que las descripciones abstractas.
Especifica una paleta de colores. Si no lo haces, la IA elegirá los colores, pero suelen ser genéricos. «Utiliza solo cian y magenta sobre negro» o «tonos cálidos del atardecer» te proporcionará algo con verdadero carácter.
Repite en pequeños pasos. No intentes describir tu imagen perfecta en una sola indicación. Empieza por algo sencillo y luego perfecciona. Es más rápido y divertido.
Pide variaciones. Una vez que tengas algo que te guste, di «crea tres variaciones de esto con diferentes paletas de colores» o «haz una versión más minimalista». Esta es una de las formas más rápidas de crear una biblioteca visual.
Cambia de tecnología en mitad de la conversación. Si un boceto de p5.js no te da el aspecto que deseas, prueba a decir «reconstruye este concepto en Three.js con una perspectiva 3D»: a veces, un enfoque de renderizado diferente transforma el resultado.

Indicaciones iniciales

Si necesitas un punto de partida, aquí tienes algunas sugerencias que suelen dar muy buenos resultados. Pega primero tu preámbulo y luego prueba cualquiera de estas opciones:

Arte óptico y geométrico

«Anillos concéntricos giratorios con segmentos alternos en blanco y negro que crean un patrón de interferencia moiré».
«Polígonos concéntricos que alternan entre expandirse y contraerse, cada uno ligeramente desfasado con respecto al siguiente».

Partículas y flujo

«Cientos de pequeñas partículas fluyendo a lo largo de curvas invisibles, como humo atrapado por una suave brisa. Las partículas deben aparecer y desaparecer gradualmente».
«Un campo de estrellas que se desplaza lentamente hacia delante, como si volara por el espacio. Las estrellas deben variar en tamaño y brillo».

Orgánico y natural

«Ondas sinusoidales superpuestas que se desplazan por la pantalla como una aurora boreal, con tonos verdes y morados cambiantes».
«Ondas concéntricas que se expanden hacia afuera desde puntos aleatorios, como gotas de lluvia sobre agua tranquila».

3D y perspectiva (solicite Three.js para estos)

«Un nudo toroidal de alambre que gira lentamente con bordes brillantes sobre un fondo negro, renderizado en Three.js».
«Un túnel formado por formas geométricas giratorias por el que la cámara vuela lentamente. Three.js».

Abstracto y psicodélico

«Una forma amorfa con un desplazamiento suave del ruido, que cambia cíclicamente entre colores iridiscentes».
«Formas translúcidas superpuestas que se desplazan y se solapan, creando nuevos colores donde se cruzan».

Cómo capturar imágenes generadas por IA como archivos de vídeo

Una vez que hayas creado algo que te guste en tu navegador, debes capturarlo como un archivo de vídeo para poder utilizarlo en Visibox (o en cualquier otro lugar). Hay varias formas de hacerlo.

Grabación de pantalla

El método más sencillo: pon la animación a pantalla completa en el navegador (F11 en la mayoría de los navegadores) y graba la pantalla.

Mac: Utiliza la función integrada de grabación de pantalla (Cmd+Shift+5) para capturas rápidas, u OBS Studio (gratuito) para tener un control total sobre la velocidad de fotogramas, el formato y la codificación.
Windows: Utiliza Xbox Game Bar (Win+G) para capturas rápidas, u OBS Studio para trabajos más complejos con 60 fps y opciones de formato.

Captura en el navegador (la opción profesional)

Si quieres una salida perfecta al píxel sin artefactos de grabación de pantalla, puedes capturar fotogramas directamente desde el elemento canvas del navegador. Esto es más técnico, pero la IA puede ayudarte a configurarlo:

CCapture.js: una biblioteca JavaScript que se conecta a tu bucle de animación y captura cada fotograma a una velocidad fija, independientemente de la rapidez (o lentitud) con la que se renderice realmente tu animación. Esto significa que obtienes un resultado fluido incluso en escenas complejas. Pregunta a la IA: «Añade CCapture.js a este boceto para exportarlo como un vídeo WebM a 60 fps».
API MediaRecorder: una API integrada en el navegador que puede grabar directamente la salida de un elemento canvas. Pregunte a la IA: «Añade un botón de grabación que capture esta animación canvas como un archivo WebM».

Consejos para capturas limpias

Graba a 60 fps si tu sistema de reproducción lo admite. La fluidez del movimiento marca una gran diferencia con los efectos visuales algorítmicos.
Ajuste la resolución a la deseada. Si va a proyectar en un proyector de 1080p, ajuste el tamaño de la ventana del navegador (o configure el lienzo) a 1920x1080 antes de grabar.
Graba más tiempo del necesario. Graba entre 30 y 60 segundos, aunque tu bucle solo dure 10 segundos. Puedes recortar el vídeo con un editor y elegir la sección más limpia.
Cierre otras aplicaciones mientras graba para evitar la pérdida de fotogramas.
Utiliza la codificación H.264 para tus archivos finales. Es universalmente compatible y es la que mejor maneja Visibox (y la mayoría de los programas de reproducción). OBS puede grabar directamente en H.264/MP4.

Cómo utilizar tus bucles generados por IA en Visibox

Una vez que hayas capturado tus bucles como archivos de vídeo, importarlos a Visibox es muy fácil: solo tienes que arrastrarlos y soltarlos. Algunas cosas que debes tener en cuenta:

Prueba tus bucles. Reprodúcelos en Visibox con la función de bucle activada y observa el punto de transición. Las imágenes generadas por código suelen reproducirse en bucle de forma más limpia que los vídeos generados por IA, pero siempre vale la pena comprobarlo.
Utiliza los efectos de Visibox. Nuestro paquete Op Art Video Pack incluye 24 bucles, pero los filtros de color, los efectos de volteo y rotación integrados en Visibox los multiplican en cientos de variaciones. El mismo truco funciona con tu contenido generado por IA.
Crea una biblioteca. Cada sesión de prompts puede generar un puñado de bucles únicos. Con el tiempo, crearás una biblioteca visual personal que será completamente original.

Resumen

Lo mejor de este enfoque es que no parece que «lo haya creado la IA», sino más bien que «lo he diseñado yo con la ayuda de un asistente muy rápido». Descarga nuestro paquete gratuito de vídeos Op Art para ver las posibilidades que ofrece y, a continuación, abre Claude, ChatGPT o Gemini e intenta crear el tuyo propio. Cuando estés listo para utilizarlos, Visibox te lo pone muy fácil.

Preguntas frecuentes

¿Necesito saber programar? No. Esa es la clave. La IA escribe el código; tú describes lo que quieres ver en lenguaje sencillo. Aprenderás algo de terminología por el camino (como saber pedir «p5.js» o «Three.js»), pero nunca tendrás que editar el código directamente.

¿Qué chatbot con IA es el mejor para generar código visual? Las tres opciones principales (Claude, ChatGPT y Gemini) pueden generar código visual con vista previa en directo. Claude tiende a producir un código creativo especialmente limpio, pero ChatGPT y Gemini también son muy competentes. Prueba las tres y descubre cuál se adapta mejor a tu flujo de trabajo. Todas son gratuitas para empezar.

¿Puedo utilizar estas imágenes con fines comerciales? En general, sí. El código que generan estas herramientas de IA es original (no copia código existente) y el resultado visual viene determinado por funciones matemáticas, no por imágenes entrenadas. Consulte los términos de servicio de cada herramienta para obtener más detalles, pero, en la práctica, usted es el propietario del resultado y puede utilizarlo en actuaciones, paquetes de vídeo o en cualquier otro lugar.

¿Qué resolución debo utilizar para la captura? 1080p (1920 x 1080) es la resolución ideal para la mayoría de las configuraciones de actuaciones en directo. Muchos proyectores y pantallas LED no superan esta resolución, y los archivos siguen siendo manejables. Si necesitas 4K, configura el tamaño del lienzo en consecuencia antes de grabar.

Jeff Robbins