Relato en primera persona de cómo usé GPT 5.2 Codex para generar, en menos de cinco minutos y a partir de un solo prompt, un sitio web completamente estructurado, con estilos y funcional. Incluye el prompt exacto que usé, lo que el modelo hizo bien, dónde tropezó y cómo combinar la generación de código con IA y las herramientas de imagen con IA para publicar rápido páginas listas para producción.
Escribí una sola frase. Veinte segundos después apareció la primera etiqueta HTML. Cuando el café terminó de enfriarse a la derecha de mi escritorio, ya había un sitio web completamente estructurado, con estilos y parcialmente funcional en la ventana de mi navegador. Esa frase era el prompt. GPT-5.2 escribió el resto.
Esto no es un experimento mental. Lo hice un martes por la tarde sin preparación, sin plantillas de partida, sin npm install. Solo un prompt, un archivo en blanco y un temporizador. Aquí tienes lo que pasó minuto a minuto, lo que el modelo hizo exactamente bien, dónde se quedó corto y qué deberías hacer de otra manera si lo pruebas tú.
La mayoría de la gente confunde GPT-5.2 con un chatbot. Esa idea se queda corta. Sí, puedes hablar con él, pero GPT-5.2 se describe mejor como un motor de código centrado en el razonamiento que casualmente se comunica en lenguaje natural. Fue entrenado con un volumen enorme de código en decenas de lenguajes, frameworks y paradigmas, lo que significa que no solo escribe sintaxis, también escribe intención.
El modelo Codex original, lanzado años antes que GPT-5.2, ya era notable. Describías lo que querías y producía código que funcionaba. Pero le faltaba un razonamiento más amplio. Podía completar una función, pero le costaba diseñar un sistema completo. GPT-5.2 funciona de otra manera. Puede mantener un modelo mental de todo tu proyecto en el contexto, tomar decisiones estructurales de forma proactiva y señalar sus propias suposiciones antes de que se conviertan en errores.
La iteración 5.2 mejoró especialmente dos aspectos que más importan en el desarrollo web:
Estas dos propiedades son la razón por la que es posible crear un sitio web en cinco minutos. Los modelos anteriores podían escribir el código. Este escribe código del que cualquier desarrollador humano estaría razonablemente orgulloso.
Puse un temporizador. Cinco minutos, un prompt, cero correcciones durante la generación. El objetivo era ver qué produciría GPT-5.2 sin ayuda.
Aquí está el prompt exacto, sin cambios:
"Créame un sitio web de una sola página para un fotógrafo autónomo. Necesita una barra de navegación, una sección principal con un eslogan, una cuadrícula de portafolio con seis imágenes de marcador de posición, una sección sobre mí con una biografía breve y un formulario de contacto. Usa HTML5 semántico, CSS puro con una paleta de blanco roto cálido y verde oliva oscuro, y JavaScript mínimo para validar el formulario de contacto. Sin bibliotecas externas."
Eso es todo. Sin wireframe. Sin sitio de referencia. Sin códigos de color.
En los primeros 30 segundos, GPT-5.2 había producido una declaración <!DOCTYPE html> con el atributo lang correcto, un <head> con etiquetas <meta>, incluidas propiedades de Open Graph que yo no había mencionado, y un <nav> semántico con etiquetas aria. Ese último detalle no estaba en mi prompt. El modelo lo añadió por su cuenta porque trata la accesibilidad como un estándar web, no como un extra opcional.
La cuadrícula del portafolio apareció con CSS Grid y un diseño adaptable de 3 columnas. La sección principal ocupaba toda la altura de la pantalla y tenía el fondo preparado para cambiar de imagen. La sección sobre mí usaba un diseño de dos columnas, con un marcador de imagen circular a la izquierda y el texto de la biografía a la derecha.
Lo que me sorprendió no fue solo la velocidad. Fueron las decisiones. El modelo eligió transiciones .portfolio-item:hover sin que se lo pidiera. Usó clamp() para la tipografía fluida. Escribió la validación del formulario con estados de error en tiempo real, no solo una alerta al enviar. Son decisiones que tomaría un desarrollador frontend senior.
Tres áreas destacaron como auténticamente impresionantes, el tipo de resultado que a un desarrollador junior le llevaría una tarde producir.
La estructura del documento usó <main>, <section>, <article>, <aside> y <footer> correctamente. No solo como sustitutos de div, sino con el anidamiento adecuado y los roles de referencia ARIA. Esto importa para el SEO y para la compatibilidad con lectores de pantalla.
| Elemento | Usado correctamente | Atributo ARIA añadido |
|---|---|---|
<nav> | Sí | aria-label="Main navigation" |
<section> | Sí | aria-labelledby en la sección principal |
<form> | Sí | role="form" con fieldset |
<img> | Sí | Texto alternativo descriptivo generado |
La hoja de estilos usó propiedades personalizadas de CSS desde la primera línea:
:root {
--color-bg: #faf8f4;
--color-accent: #5a6437;
--color-text: #2c2c2c;
--space-unit: 1rem;
}
Esto tiene criterio, y en el buen sentido. El blanco roto cálido y el verde oliva oscuro que describí se convirtieron en un sistema de diseño coherente, no en dos colores volcados sin orden en la página. El espaciado usaba múltiplos de --space-unit. Las variables de color se aplicaban siempre, sin repeticiones.
La validación del formulario comprobaba los campos obligatorios, validaba el formato del correo electrónico con una expresión regular y mostraba los mensajes de error debajo de cada campo, en lugar de usar ventanas emergentes de alerta. El controlador de envío evitaba la acción por defecto y mostraba un estado de éxito sin recargar la página. Todo esto en menos de 60 líneas.
Nada de este tipo de resultado sale perfecto. Dos áreas necesitaron atención antes de que el sitio estuviera realmente listo para producción.
La cuadrícula del portafolio se adaptó bien a dispositivos móviles en general, pero el diseño de texto de dos columnas de la sección principal no se apiló correctamente a 480 px o menos. El texto se salía de su contenedor. Es un punto débil conocido del CSS generado con IA: maneja bien los puntos de ruptura habituales (768 px, 1024 px), pero a veces se le escapan casos límite por debajo de 500 px.
💡 Solución: Añade un prompt de seguimiento que pida específicamente ajustes pensados primero para dispositivos móviles con un ancho de ventana de 375 px. Un prompt, 30 segundos, problema resuelto.
Las seis imágenes del portafolio aparecían como cuadros grises con texto. Funcionaban, pero no servían para un lanzamiento real. Aquí es donde el flujo de trabajo se abre a algo más interesante, porque puedes resolverlo con generación de imágenes con IA en lugar de buscar fotos de archivo.
La web de cinco minutos es un punto de partida, no un producto terminado. El flujo de trabajo real es lo que viene después.
GPT-5.2 conserva el contexto a lo largo de una conversación. Así que, tras la generación inicial, puedes seguir con instrucciones concretas:
Cada una de estas tareas tarda entre 15 y 30 segundos y produce código que funciona y se integra con lo ya generado. El modelo no reescribe todo desde cero; modifica quirúrgicamente las secciones relevantes.
Aquí es donde la web pasa de ser un prototipo a algo visualmente atractivo. En lugar de buscar fotos, puedes generarlas. Modelos como Flux 2 Pro y GPT Image 1.5 producen imágenes fotorrealistas a partir de prompts de texto en segundos.
Para un sitio de portafolio de fotografía, generarías:
Flux 1.1 Pro Ultra destaca especialmente en resultados fotorrealistas con detalle en 8K. Imagen 4 de Google maneja bien las composiciones de escenas complejas. Stable Diffusion 3.5 Large ofrece un control detallado de la coherencia de estilo entre varias imágenes, lo que importa cuando necesitas que las imágenes del portafolio parezcan tomadas por el mismo fotógrafo.
No todos los proyectos encajan con el mismo enfoque. La web de cinco minutos funciona mejor en ciertos casos de uso y necesita ajustes en otros.
Las páginas de aterrizaje son el terreno en el que GPT-5.2 realmente brilla. Una sola página, jerarquía clara, un único objetivo de conversión. El modelo incluye de forma natural secciones de prueba social, encabezados centrados en beneficios y llamadas a la acción claras, incluso cuando no las especificas.
Los sitios de varias páginas con datos dinámicos son otra historia. Para un blog con un CMS, una tienda online con base de datos o una aplicación SaaS con autenticación, le pides al modelo que diseñe algo que no cabe razonablemente en un solo prompt. Divídelo en sesiones: primero la arquitectura, después página por página y, por último, los componentes individuales.
GPT-5.2 escribe componentes excelentes de React, Vue y Svelte. Para sitios estáticos, el HTML y el CSS puros se generan más rápido y se despliegan con más facilidad. Para cualquier proyecto interactivo a gran escala, pídele que escriba en tu framework preferido desde el principio, porque pasar de JavaScript puro a React a mitad de proyecto es doloroso incluso cuando lo hace una persona.
| Tipo de sitio | Stack recomendado | Estimación de tiempo |
|---|---|---|
| Página de aterrizaje | HTML + CSS + JS puro | 5 minutos |
| Portafolio | HTML + CSS + JS | 8 minutos |
| Blog | Astro o Next.js | 20 minutos |
| MVP de SaaS | Next.js + rutas de API | Más de 45 minutos |
| Comercio electrónico | Next.js + Stripe | Más de 60 minutos |
La pregunta honesta que hay detrás de todo esto: ¿reemplaza a los desarrolladores? No, y las razones son concretas, no solo tranquilizadoras.
GPT-5.2 no conoce la lógica de negocio real de tu cliente. No sabe que tu proceso de pago tiene una verificación en tres pasos porque lo exige un procesador de pagos. No sabe que el menú de navegación tiene que plegarse a 920 px en lugar de 768 px porque el elemento más largo del menú es inusualmente ancho en ciertos monitores. No sabe que la sección de contacto tiene que integrarse con el CRM de diez años de tu cliente mediante una API XML propietaria.
Todo ese conocimiento contextual, institucional y relacional vive en ti.
Lo que sí hace es eliminar el andamiaje tedioso. Montar un documento HTML base, escribir los reinicios de CSS, estructurar un componente, escribir la validación de formularios repetitiva, preparar una cuadrícula adaptable: esas tareas desaparecen. Lo que queda es el pensamiento real: decisiones de arquitectura, requisitos del cliente, casos límite, rendimiento, seguridad.
💡 Hablando claro: Los desarrolladores que usan la generación de código con IA de forma eficaz suelen dedicar su tiempo a sistemas de diseño, comunicación con el cliente y optimización del rendimiento. Son actividades de mayor valor que escribir el decimosegundo contenedor flex del día.
PicassoIA te da acceso directo a GPT-5.2 sin una suscripción aparte a la API ni un plugin para el entorno de desarrollo. Lo usas a través de una interfaz web y puedes combinarlo con modelos de generación de imágenes en la misma sesión.
Paso 1: Abre GPT-5.2 en PicassoIA e inicia una sesión nueva.
Paso 2: Escribe un prompt que especifique:
Paso 3: Copia el resultado en un archivo .html y ábrelo en el navegador. Revisa qué funciona y qué necesita ajustes.
Paso 4: Vuelve a GPT-5.2 y lanza prompts de seguimiento concretos para mejoras específicas. Haz referencia a los elementos exactos por su nombre de clase o ID.
Paso 5: Cuando la estructura esté sólida, genera tus visuales. Usa Flux 2 Pro para imágenes fotorrealistas generales, GPT Image 1.5 para escenas con texto específico o colocación de producto y Flux Dev para resultados experimentales de alta fidelidad.
Paso 6: Sustituye los marcadores de posición del HTML por las URL de tus imágenes generadas, publica el sitio en un servicio de alojamiento y tu web estará en línea.
:root hace que cambiar colores y espaciados sea trivial.
Cinco minutos no es una afirmación de marketing. Es una descripción literal de lo que pasó un martes por la tarde en una ventana de navegador normal. La web tenía imperfecciones concretas que costaron otros diez minutos arreglar, y luego quedó realmente bien.
El cambio real no está en la velocidad. Está en dónde pones tu atención. Cuando el código repetitivo se escribe solo, dejas de pensar en la estructura de los div y empiezas a pensar en si la web resuelve de verdad el problema para el que existe. Ese es el cambio importante.
PicassoIA pone GPT-5.2 junto a Flux 2 Pro, GPT Image 1.5, Imagen 4 y decenas de otros modelos de imagen y de lenguaje en un solo lugar. Escribe el código con un modelo, genera los visuales con otro e itera sobre ambos en la misma sesión. Sin cambiar de pestaña, sin suscripciones separadas, sin cambiar de contexto entre herramientas.
Abre una sesión. Escribe tu prompt. Pon el temporizador. Mira cuánto puedes crear.
Elige tu idioma
