Diseñar una web con inteligencia artificial se vuelve mucho más cómodo cuando puedes poner varias propuestas sobre la mesa, acercarte a los detalles y cambiar lo que no te convence. No solo pedir una página y aceptar lo primero que aparece, sino trabajar de verdad con la composición.
Eso es lo que me está gustando de MagicPath dentro de Codex. Tienes un canvas amplio donde puedes generar secciones, comparar estilos, editar textos y trabajar con imágenes separadas. La experiencia tiene algo familiar si has usado Figma o herramientas como Google Stitch, aunque aquí buena parte del trabajo comienza con una instrucción en lenguaje natural.
He probado una sección para una marca de audio, una propuesta con un personaje para un concepto relacionado con electricidad y una composición inspirada en una referencia de Pinterest. También animé un fondo con Google Flow. Hay resultados muy buenos, pero también detalles que conviene revisar, especialmente cuando entra en juego el movimiento.
La idea que más me interesa es esta: explorar el diseño en un entorno visual y continuar construyendo cuando ya tienes una dirección que te gusta.
Tabla de contenido
- 🎨 Un canvas para pensar el diseño, no solo para generar una página
- 🧩 Assets separados: la diferencia entre una imagen bonita y una sección editable
- 🎧 Cómo plantear una sección hero con una dirección visual clara
- 🌊 De una referencia de Pinterest a una composición web
- 🎬 Animar el fondo con Google Flow sin perder de vista el texto
- 🔎 Revisar una sección por separado con la vista previa
- 💬 Llevar el diseño a otra conversación para seguir construyendo
- ⚙️ Cómo instalar y abrir MagicPath dentro de Codex
- 📁 Prompts, archivos y sistemas de diseño para arrancar
- 🛠️ Un flujo sencillo para probarlo sin perder el foco
- 💸 Costes, límites y recursos para continuar
- ✨ Mi opinión: lo mejor es poder explorar sin quedar atrapado
🎨 Un canvas para pensar el diseño, no solo para generar una página
MagicPath funciona como un gran espacio de trabajo visual. Puedes acercarte con el zoom para inspeccionar una propuesta o alejarte para tener varias secciones a la vista. Parece un detalle pequeño, pero cambia bastante la forma de trabajar.
Cuando todo ocurre dentro de una conversación, las versiones se van acumulando una debajo de otra. En un canvas, en cambio, puedes tener distintas ideas juntas y entender mejor qué estás buscando. Una composición más editorial, otra mucho más colorida y una tercera apoyada en una fotografía pueden convivir en el mismo espacio.
En mis pruebas, esa libertad ha sido lo más cómodo. Puedo generar las secciones que quiero y después ir jugando con las propuestas. No tengo que decidir desde el primer momento que una idea será la definitiva ni construir una web completa antes de comprobar si su estilo me convence.
El zoom sirve para dos tareas diferentes:
- Acercarse: revisar la calidad de una imagen, el protagonismo de un personaje o la relación entre texto y composición.
- Alejarse: comparar propuestas y entender cómo se diferencian unas de otras.
Me gusta esa combinación porque permite alternar entre el detalle y el conjunto. Una ilustración puede tener una calidad buenísima de cerca, pero necesitas volver a ver la sección completa para saber si funciona dentro del diseño.
También ayuda a separar la exploración de la decisión. Primero pruebas. Después eliges. En vez de pedirle a la IA que resuelva todo de una vez, puedes usarla para encontrar una dirección visual que realmente tenga sentido para el proyecto.
Por eso lo veo más como un espacio para diseñar interfaces con IA que como una máquina de entregar páginas terminadas. La generación es importante, claro, pero la posibilidad de comparar y ajustar es lo que vuelve útil el resultado.
🧩 Assets separados: la diferencia entre una imagen bonita y una sección editable
Uno de los puntos más interesantes es cómo se generan los recursos visuales. En los ejemplos que probé, MagicPath no se limitó a producir una imagen con todos los elementos pegados. Creó imágenes independientes y después las integró en la sección.
Esto se entiende muy bien con el personaje rojo, una especie de llama que sostiene una bombilla. Lo utilicé en una propuesta que podría encajar con una empresa de electricidad. La sección tiene un fondo amarillo, una forma azul y texto, pero el personaje existe como un asset separado.
La calidad del personaje me pareció muy buena. Al acercarme podía revisar los detalles de la bombilla, los reflejos, la expresión y el acabado. Además, se generó con fondo transparente, algo que facilita integrarlo en la composición sin arrastrar un rectángulo de otro color.
La ventaja práctica no es únicamente estética. Cuando una imagen está separada del texto y del fondo, puedes pensar cada parte del diseño con mayor claridad. Si quieres cambiar el mensaje, no necesitas tratar el título como si fuera parte de una fotografía.
En una sección web conviene distinguir al menos tres cosas:
- El recurso visual: el personaje, la persona o la imagen del mar.
- La composición: cómo se distribuyen los elementos dentro de la sección.
- El contenido: los títulos y textos que comunican la idea.
En estas pruebas, esa separación se mantuvo. La imagen generada era una pieza del diseño, no el diseño entero convertido en una imagen plana.
Para mí, ese es un criterio importante al evaluar una herramienta de diseño web con IA. Una propuesta puede ser impactante, pero si no puedes modificar fácilmente el texto, te quedas con una ilustración de una web. Aquí lo interesante es que la composición conserva elementos editables.
🎧 Cómo plantear una sección hero con una dirección visual clara
La primera propuesta que hice tenía una chica con audífonos y una estética que, a primera vista, también podría recordar a una campaña de moda. Sin embargo, el encargo estaba orientado a Ruido, una marca de audio de diseño.
No pedí simplemente una página moderna. La instrucción buscaba una sección hero impactante, con dirección artística de campaña musical de lujo, una tipografía memorable y muy poco texto.
La sección hero es esa primera composición que presenta el carácter de la página. En este caso, quería que el peso estuviera en la imagen y en un mensaje breve, no en una explicación larga del producto.
El resultado combinó un fondo lila, letras negras grandes y una imagen protagonista a la derecha. La chica se generó por separado y luego se incorporó al diseño. El título seguía siendo texto modificable.
Qué aportaba cada parte de la instrucción
Lo útil de ese encargo es que daba una intención, no solo una categoría. Pedir una sección hero define qué parte de la web necesitas, pero todavía deja muchas decisiones abiertas. La dirección artística ayuda a orientar esas decisiones.
- Marca de audio de diseño: sitúa el concepto y evita que la propuesta se interprete solo como una campaña de ropa.
- Campaña musical de lujo: describe la sensación que debe transmitir la imagen.
- Tipografía memorable: pone el texto en un papel visual importante.
- Muy poco texto: limita la cantidad de contenido para que la composición respire.
No hace falta convertir el prompt en un documento enorme para empezar. En esta prueba, unas pocas indicaciones con una intención bastante definida fueron suficientes para obtener una propuesta interesante.
La clave está en explicar qué debe sentirse al entrar en la sección. Si lo que buscas es una composición con personalidad, decir únicamente que sea profesional deja demasiado espacio para un resultado genérico.
El texto también forma parte del diseño
Que el título sea editable importa más de lo que parece. En una composición con letras grandes, cambiar unas palabras puede modificar mucho el equilibrio visual. El mensaje no es algo que se añade al final sin consecuencias.
Por eso me gusta poder ajustar el contenido dentro de la propuesta. Puedes conservar la imagen y revisar el texto sin empezar toda la generación desde cero. La dirección artística sigue ahí, pero el mensaje puede evolucionar.
Este ejemplo muestra bien el enfoque: primero encuentras una combinación de imagen, tipografía y espacio que funciona; después afinas lo que quieres comunicar.
🌊 De una referencia de Pinterest a una composición web
Otra forma de empezar es usar una referencia visual. En mi caso, encontré en Pinterest una composición que me gustó y la pasé como imagen. La petición fue muy directa: recrear esa sección hero manteniendo su apariencia.
La referencia tenía una vista del mar desde arriba, una ola a un lado y una zona de agua más despejada donde aparecía el texto. Era una composición sencilla, pero con una distribución muy clara.
MagicPath recreó bastante bien esa idea y volvió a separar sus elementos. Generó la imagen del mar con la ola y el surfista, mientras que los textos se incorporaron como parte de la interfaz.
Esto es lo que me interesa del proceso: la referencia se convirtió en una composición editable, no simplemente en otra imagen con letras incrustadas.
Si todo hubiera quedado fusionado, cambiar el idioma del título habría sido un problema distinto. Al mantener el fondo separado, pude pedir después una adaptación del contenido al español.
Una referencia también reduce la ambigüedad del encargo. En lugar de intentar describir con muchas palabras dónde debe ir la ola o cuánto espacio necesita el título, puedes mostrar la relación visual que te interesa.
Eso no elimina la revisión. Sigue siendo importante comprobar qué ha interpretado la herramienta y cómo quedaron los elementos. En esta prueba me gustó la recreación, pero la utilidad no estaba solo en que se pareciera a la referencia. Estaba en poder seguir trabajando sobre ella.
La lección es bastante práctica: cuando ya tienes una dirección visual, puedes usarla como punto de partida; cuando todavía no la tienes, puedes comenzar con un encargo más conceptual, como hice con la marca de audio. Son dos entradas distintas al mismo canvas.
🎬 Animar el fondo con Google Flow sin perder de vista el texto
Después de recrear la sección marina, quise probar algo más: darle movimiento al fondo. Le indiqué a Codex que tenía Google Flow abierto y que animara la imagen para crear un video en bucle.
En esa sesión, Codex se encargó de llevar la imagen a Flow, adjuntarla y escribir la instrucción de animación. Es importante distinguir las funciones: la composición web estaba en MagicPath y la animación se generó con Google Flow.
La secuencia de trabajo fue esta:
- Partir de la imagen del mar que ya se había generado.
- Usarla como base para la animación en Google Flow.
- Pedir un movimiento que pudiera repetirse en bucle.
- Integrar el video resultante como fondo de la sección.
- Revisar cómo se relacionaba ese movimiento con el texto.
Me pareció interesante que Codex escribiera también el prompt para la animación. No tuve que redactar manualmente cada detalle de esa segunda fase. Aun así, el resultado necesitaba una evaluación visual.
Un bucle atractivo no siempre es completamente realista
La animación tenía un movimiento continuo que le daba bastante onda a la sección. Pero también había una limitación evidente: la ola parecía quedarse rompiendo en el mismo lugar indefinidamente.
Eso no es del todo realista. Yo, por lo menos, me fijaría enseguida en ese detalle. El mar tiene una dinámica que aquí estaba subordinada a la repetición del fondo.
Ahora bien, esa misma estabilidad tenía una ventaja para la interfaz. El texto permanecía sobre una zona relativamente constante, sin perder el contraste cada vez que cambiaba la imagen.
En un fondo animado hay dos objetivos que no siempre coinciden. Uno es que el movimiento resulte convincente. El otro es que el mensaje siga siendo fácil de leer. Si una animación cambia demasiado la luminosidad o llena de espuma la zona del título, puede llamar la atención y, al mismo tiempo, perjudicar la composición.
La animación tiene que servir a la sección
En este caso, el bucle mantenía el área del texto bastante estable. No lo describiría como una simulación perfecta del océano, pero sí como un recurso visual que aportaba movimiento sin desarmar la lectura.
Para decidir si conservarlo, me parece más útil plantear preguntas concretas:
- ¿El movimiento aporta algo a la personalidad de la sección?
- ¿El título conserva suficiente contraste?
- ¿La repetición se siente agradable o resulta demasiado evidente?
- ¿La falta de realismo encaja con el estilo que estás buscando?
La respuesta no tiene que ser siempre añadir video. Lo bueno de tener la imagen base y la composición separadas es que puedes valorar la versión estática y la animada sin confundir el movimiento con la calidad general del diseño.
🔎 Revisar una sección por separado con la vista previa
El canvas es muy útil para comparar ideas, pero también necesitas concentrarte en una sola propuesta. Para eso está la opción de vista previa, que abre la sección de forma independiente.
En la composición marina, después de pedir el cambio del contenido al español, podía revisar el título y el fondo sin tener el resto de propuestas alrededor.
Esta separación entre canvas y vista previa me parece muy natural. El canvas responde a la pregunta de qué dirección prefieres. La vista previa ayuda a evaluar cómo se presenta esa dirección por sí sola.
No son dos versiones diferentes del trabajo, sino dos maneras de examinarlo. En una tienes contexto para comparar; en la otra, foco para revisar.
También probé la vista previa con la sección de audio. Poder abrir cualquiera de las propuestas facilita pasar de la exploración general a una revisión concreta sin salir continuamente de la herramienta.
Es un buen momento para comprobar si la imagen domina demasiado, si el título tiene el protagonismo esperado y si el contenido final sigue encajando con la composición. Especialmente después de cambiar el texto, vale la pena volver a revisar el conjunto.
💬 Llevar el diseño a otra conversación para seguir construyendo
Cuando una propuesta ya me gusta, no necesariamente quiero completar todo el proyecto dentro del entorno visual. Puedo pedirle al agente que lleve ese trabajo a otra conversación para continuar desde ahí.
En la prueba hice precisamente eso: solicité una conversación aparte y especifiqué el modelo y el nivel de razonamiento que quería utilizar para seguir trabajando.
Es una forma de separar dos momentos:
- Exploración visual: generar propuestas, comparar, modificar imágenes y ajustar contenido.
- Continuación del proyecto: trabajar sobre la dirección elegida en otra conversación.
Yo hago este tipo de separación con frecuencia porque busco administrar mejor el consumo de tokens. Poder indicar cómo quiero continuar me resulta útil, aunque no significa que cualquier cambio de conversación produzca automáticamente un ahorro.
Lo importante es que el canvas no se sienta como un punto sin salida. Puedes usarlo para tomar decisiones de diseño y después seguir con el trabajo que corresponde a la siguiente etapa.
Eso sí, conviene tener claro qué estás trasladando. Una sección hero que te gusta es una base visual para continuar, no una prueba de que toda la web esté resuelta. Me interesa salir del entorno cuando la dirección está suficientemente definida, no simplemente cuando aparece la primera imagen bonita.
⚙️ Cómo instalar y abrir MagicPath dentro de Codex
Para empezar a usar esta experiencia, fui a la sección de complementos de Codex. Desde ahí puedes buscar MagicPath e instalarlo. En mi caso ya estaba instalado, así que el proceso consistía en localizarlo y abrirlo.
Los pasos básicos son:
- Abrir la barra lateral de Codex.
- Entrar en Complementos.
- Buscar MagicPath.
- Seleccionar la opción de instalación si todavía no lo tienes.
- Abrirlo desde el acceso disponible en la interfaz.
- Fijarlo en la barra lateral si quieres tenerlo siempre a mano.
Lo de fijarlo me parece especialmente cómodo. Si vas a utilizarlo con frecuencia, puedes entrar a Codex y abrir directamente MagicPath sin repetir la búsqueda en el catálogo de complementos.
Una vez dentro, aparece la pantalla desde la que puedes escribir la instrucción inicial, adjuntar archivos y acceder a tus proyectos.
La instalación es solo la puerta de entrada. El siguiente paso útil no es pedir una aplicación enorme, sino definir qué quieres explorar. En mis pruebas comencé con secciones concretas, lo que me permitió evaluar rápidamente la calidad de las imágenes y la composición.
Ese alcance acotado también hace más fácil entender la herramienta: generas una propuesta, revisas sus elementos y decides qué modificar antes de ampliar el trabajo.
📁 Prompts, archivos y sistemas de diseño para arrancar
La pantalla inicial no se limita a un cuadro para escribir. También permite subir archivos y elegir un sistema de diseño como punto de partida.
Entre las opciones que aparecen están referencias como OpenAI, Claude y brutalismo. Además, hay opciones orientadas a tipos de interfaz, como una landing page o un dashboard.
Estas elecciones ayudan a encuadrar el encargo. No es lo mismo empezar con una sección de campaña que con un panel de información, y tampoco es igual buscar una apariencia sobria que una composición más expresiva.
Los puntos de entrada que tienes disponibles son:
- Una instrucción: para explicar qué quieres crear y con qué intención.
- Un archivo: para aportar una referencia visual u otro material.
- Un sistema de diseño: para orientar el estilo inicial.
- Un tipo de interfaz: para situar el trabajo en una landing page, un dashboard u otra propuesta disponible.
No necesitas usar todo a la vez. El ejemplo de audio comenzó con una dirección artística escrita. El ejemplo del mar comenzó con una imagen de referencia. La herramienta permite que el punto de partida se adapte a lo que ya tienes claro.
Los proyectos y archivos también aparecen en esta pantalla, desde donde puedes abrirlos directamente. Además, puedes encontrarlos en las conversaciones, algo cómodo para retomar un trabajo sin reconstruir todo su recorrido.
Yo lo entiendo como una forma de diseño guiado por lenguaje natural, cercana al vibe coding, pero centrada aquí en la parte visual. Describes, generas y ajustas. El sistema de diseño puede orientar, pero sigues teniendo que decidir si el resultado encaja con lo que querías conseguir.
🛠️ Un flujo sencillo para probarlo sin perder el foco
Después de estas pruebas, el proceso que me resulta más cómodo no comienza con una web completa. Comienza con una sección que permita tomar decisiones visuales importantes.
El recorrido se puede ordenar así:
- Definir una intención. Elegir qué sección necesitas y qué carácter debe tener.
- Generar una primera propuesta. Usar una instrucción artística o una referencia visual.
- Revisar los assets. Comprobar qué imágenes se crearon por separado y cómo se integraron.
- Ajustar el contenido. Modificar el texto o pedir un cambio de idioma cuando corresponda.
- Comparar en el canvas. Alejar el zoom y valorar las alternativas.
- Abrir la vista previa. Revisar la propuesta elegida sin las demás alrededor.
- Continuar en otra conversación. Pasar a la siguiente etapa cuando la dirección ya te convence.
La animación sería una decisión adicional, no un paso obligatorio. En el ejemplo del mar tuvo sentido probarla porque el fondo podía aportar movimiento. No hace falta añadir esa capa a cualquier propuesta.
Lo que busco con este flujo es mantener separadas las preguntas. Primero, qué estilo quiero. Después, qué contenido funciona. Luego, si un efecto aporta algo. Y finalmente, cómo continúo construyendo.
La herramienta facilita las pruebas, pero la selección sigue siendo parte del trabajo. Generar varias opciones tiene valor si después puedes reconocer qué conservar y qué descartar.
💸 Costes, límites y recursos para continuar
Hay un matiz importante sobre el precio: MagicPath tiene un plan gratuito con límites de uso. No conviene interpretar que puedes generar indefinidamente sin restricciones.
En el uso dentro de Codex que probé, también entra en juego el consumo de los créditos de Codex o ChatGPT. Por eso prefiero separar el acceso al complemento del uso del modelo. Que puedas empezar con una opción gratuita no significa que todas las partes del flujo carezcan de límites.
Antes de convertirlo en tu entorno habitual, revisa las condiciones disponibles en tu cuenta. Mi interés aquí está en lo cómodo que resulta diseñar y en la posibilidad de administrar cómo continúo trabajando, no en prometer un coste fijo para cualquier proyecto.
Herramientas y comunidad para seguir creando
Si quieres continuar más allá de la exploración visual, estos son los recursos que comparto:
- Hostinger con mi enlace de descuento, como recurso de hosting para tus proyectos web.
- Dínamo Sites, para crear sitios web.
- Primera App, con prompts profesionales para crear tu aplicación.
- Mi comunidad de creación con IA, para seguir aprendiendo y compartir el proceso.
Son recursos para distintas partes del camino. No hace falta incorporarlos todos para probar MagicPath ni asumir que forman parte de la instalación del complemento.
✨ Mi opinión: lo mejor es poder explorar sin quedar atrapado
Lo que más me ha gustado de diseñar webs con Codex y MagicPath es la comodidad. Tener varias secciones en un canvas, acercarme a sus detalles y abrir una vista previa hace que el proceso se sienta más natural.
También me parece muy valioso que las imágenes se generen como recursos separados y que los textos sigan siendo editables. Esa diferencia permite trabajar con una propuesta, no solo admirar una imagen terminada.
La animación con Google Flow añadió una posibilidad interesante, aunque dejó una limitación clara: un fondo puede ser atractivo y funcionar bien detrás del texto sin ser completamente realista. Hay que revisar ambas cosas.
Me quedo con una idea sencilla: usar la IA para explorar más fácilmente, pero seguir tomando decisiones de diseño. Si una propuesta te gusta, la desarrollas. Si el movimiento distrae, lo reconsideras. Si ya encontraste la dirección, puedes continuar en otra conversación.
Para empezar, una sección hero es suficiente. Te permite probar el canvas, evaluar los assets y comprobar si esta forma de trabajar te resulta tan cómoda como a mí.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
