Creación de sitios web con Astra: una web en 3 prompts

Creación de sitios web con Astra paso a paso: los 3 prompts de GPT-6 Astra en ChatGPT Work para pasar de una carpeta vacía a una web cinematográfica.

Introducción

Si le pides a una IA “una página web para una maquilladora”, casi seguro recibes algo correcto y olvidable: un menú, unas fotos, una sección de servicios y un botón de contacto. Cambias el nombre de la profesional y nadie nota la diferencia. La creación de sitios web con Astra puede llegar mucho más lejos, siempre que trabajes como quien dirige el proyecto y no como quien pide un favor.

En esta guía vas a construir, desde una carpeta vacía, la web de María Makeup: una marca ficticia de maquillaje con vídeo a pantalla completa, identidad visual propia, portfolio interactivo y formulario de contacto. Todo con GPT-6 Astra, el modelo más reciente de ChatGPT para trabajos complejos de principio a fin, y solo 3 prompts.

Vas a ver los prompts completos, qué salió en cada etapa y qué decisiones convierten una página genérica en una web con personalidad. Si ya probaste crear sitios web con el Canvas de Gemini, vas a notar la diferencia de trabajar por etapas sobre una carpeta real de tu computadora.

El método completo cabe en tres pasos: primero la estructura, después la identidad y al final el acabado.

Para descargar los archivos utilizados en la clase, completa con tu e-mail:

¡No te enviaremos ningún tipo de spam! Hashtag Capacitaciones es una empresa comprometida con la protección de tus datos. Si tienes alguna duda, contáctanos.

Prepara el proyecto antes de escribir el primer prompt

Los modelos anteriores ya escribían HTML, CSS y JavaScript. Lo que Astra pone a prueba es otra cosa: entender una dirección creativa, mantenerla durante varias etapas, trabajar con recursos reales y aceptar correcciones. Para eso necesita algo que ninguna IA puede inventar por ti: el caso.

Define la marca, el público y las cuatro preguntas de la web

María Makeup es una maquilladora profesional. El objetivo de la web es que una potencial clienta pueda conocerla, descubrir sus servicios, ver sus trabajos y pedir información. Dicho de otra forma, la página tiene que responder cuatro preguntas.

También vale la pena definir la personalidad visual antes de abrir ChatGPT. María debe parecer profesional y elegante, pero cercana, simpática y divertida. Por eso la dirección elegida combina tonos otoñales, fotografías cálidas y un vídeo con estética casi documental, como si estuvieras observando una sesión real de maquillaje.

Anota todo esto en una hoja. Esas pocas líneas van a guiar los tres prompts.

Abre la carpeta del proyecto en ChatGPT Work

Necesitas la app de escritorio de ChatGPT, una cuenta de pago y una carpeta vacía en tu computadora. Esa carpeta es el proyecto: ahí Astra va a crear el código y ahí vas a poner después los recursos visuales.

En los planes Plus, Astra no aparece en el chat normal, en ese plan solo está disponible en las secciones Work y Codex.

Para crear el proyecto, cambia de Chat a Work en la parte superior de la app. En la barra lateral, ve a Proyectos y haz clic en +. Escribe el nombre del proyecto, haz clic en Añadir carpetas que ChatGPT pueda leer y editar, elige tu carpeta y termina con Crear proyecto. Cuando la app pida permiso para usar la carpeta, acéptalo.

Antes de enviar el primer mensaje, selecciona GPT-6 Astra y el nivel de razonamiento Alto junto al campo de texto. Un consejo práctico: dicta el prompt con el botón del micrófono. Hablar como si le explicaras el proyecto a alguien de tu equipo te ayuda a dar más contexto sin esfuerzo.

Prompt 1: crea la estructura de la página

El primer prompt no pide “una web bonita”. Explica quién es María, para quién es la página, qué acción quieres provocar y qué secciones necesitas:

Quiero que crees una página web para una marca llamada María Makeup. María es una maquilladora profesional y la página está dirigida a personas que quieren conocerla, entender sus servicios, ver sus trabajos y solicitar disponibilidad.

Quiero una estética elegante y editorial, con tonos otoñales. La página debe tener un hero a pantalla completa, una presentación de María, una sección con maquillaje social, maquillaje para bodas y eventos, un portfolio y una llamada a la acción al final.

Escribe los textos en primera persona, con un tono cercano, simpático y profesional.

Por ahora utiliza espacios provisionales para el vídeo, el logo y las fotografías. No añadas animaciones todavía.

Fíjate en las dos últimas instrucciones. Los espacios provisionales y la ausencia de animaciones mantienen esta etapa enfocada en la estructura. Es la misma lógica de el método CRUDO para trabajar con IA: cuanto más contexto real le das al modelo, más útil es lo que te devuelve.

Astra revisa la carpeta, propone una dirección visual (crema, chocolate y terracota) y hace una pregunta: qué WhatsApp o correo debe recibir las consultas. Si todavía no lo tienes definido, dilo. Astra deja el formulario como vista previa, sin enviar mensajes, en lugar de inventar un contacto.

Después, solo queda esperar. Astra estimó unos 15 minutos para esta etapa, pero el tiempo depende mucho de la complejidad de lo que pides.

Revisa la primera versión sin juzgarla

La primera versión ya tiene hero, presentación, servicios, portfolio y contacto. Los enlaces del menú llevan a cada sección y puedes recorrerla en el navegador integrado de ChatGPT, que se abre al lado de la conversación. Como todavía no había fotos reales, Astra generó imágenes de inspiración.

Está bien hecha, pero el problema se ve enseguida: podría ser la web de cualquier maquilladora. Aquí está la lección más importante del proceso. No juzgues a la IA por el primer resultado. Esta versión no es el final, es la estructura sobre la que vas a empezar a tomar decisiones, y también el mejor momento para anotar qué quieres añadir, corregir o ampliar.

Prompt 2: dale identidad con tus propios recursos

Para que la web deje de ser genérica, Astra necesita material que solo la marca tiene. Este es el paso en el que la página pasa a ser de María.

Reúne los recursos visuales de la marca

Antes del segundo prompt, prepara el logo, un retrato de María, una fotografía de sus herramientas, varias imágenes para el portfolio, una imagen de respaldo para la primera pantalla y un vídeo corto de María trabajando con una clienta. En este caso, las imágenes se crearon con Magnific y el vídeo se generó por separado. Guárdalo todo en una carpeta assets dentro del proyecto.

Con los archivos en su lugar, envía el segundo prompt:

La estructura funciona, pero ahora quiero que la página tenga una identidad mucho más fuerte.

Ya he colocado dentro de la carpeta del proyecto el logo, el vídeo del hero, una imagen de respaldo y todas las fotografías. Revisa esos archivos y utiliza solamente esos recursos. No generes imágenes nuevas, no descargues nada de internet y no alteres los originales.

Coloca el logo en la navegación y utiliza el vídeo como fondo del hero a pantalla completa. Debe reproducirse automáticamente, sin sonido, en loop y sin controles. Añade un degradado suave para que el texto sea legible y utiliza la imagen de respaldo mientras carga.

Usa la fotografía de María en su presentación, la fotografía de herramientas en los servicios y crea con las demás imágenes un portfolio editorial y asimétrico. Las fotografías deben poder ampliarse al hacer clic.

Unifica toda la página con los colores de los recursos, una tipografía elegante para los títulos y una limpia para los textos. Quiero que se vea cálida, profesional y sofisticada, sin parecer una plantilla genérica. Cuando termines, abre nuevamente la vista previa.

La parte más valiosa es el límite: “utiliza solamente esos recursos”. Sin esa frase, la IA puede rellenar los huecos con imágenes que no son de la marca. Cada recurso tiene un destino claro dentro de la página.

El comportamiento del vídeo también está descrito con precisión. Si quieres entender qué hace cada atributo, la referencia del elemento <video> en MDN Web Docs explica autoplay, muted, loop y poster. El sonido desactivado no es un capricho: los navegadores bloquean la reproducción automática de vídeos con audio.

Mira cómo cambia la web con el segundo prompt

Después de 8 minutos y 48 segundos, la página es otra. El vídeo ocupa toda la primera pantalla y transmite la sensación de observar a María trabajando, no una publicidad posada. Mientras carga, aparece la imagen de respaldo, y el vídeo entra con un fundido suave cuando empieza a reproducirse.

La presentación usa la fotografía de María con un texto breve. Ojo con un detalle: como no se entregó su historia, sus años de experiencia ni sus certificaciones, ChatGPT completó ese contenido por su cuenta. En un proyecto real, incluye esos datos en el prompt para que la IA no los invente.

Los servicios ya no son una cuadrícula de tarjetas iguales. La foto de las herramientas abre una composición editorial con tres opciones: Maquillaje social, Novias y Eventos.

El portfolio combina imágenes de distintas proporciones en una composición asimétrica. Tiene filtros (Todos, Natural, Noche, Piel madura y En el estudio), y al hacer clic cada foto se amplía en un visor desde el que puedes recorrer las demás.

La idea clave de esta etapa: la IA no creó sola la identidad de María. Tú la definiste, preparaste los recursos y explicaste cómo relacionarlos. Astra convirtió esas decisiones en una página coherente.

Prompt 3: añade movimiento, contacto y versión móvil

La web ya se ve bien en tu pantalla, pero falta la última capa: que responda bien, funcione en cualquier dispositivo y lleve al visitante hasta el contacto.

El diseño ya está muy bien. Ahora quiero darle el acabado final.

Añade animaciones suaves al hacer scroll: apariciones graduales, pequeños desplazamientos y movimientos muy discretos en las fotografías.

En la parte final crea una sección titulada “Hablemos de tu próximo look”, con un formulario para nombre, correo, fecha aproximada, tipo de servicio y mensaje. El botón debe decir Solicitar disponibilidad.

Después revisa toda la página en escritorio, tableta y móvil. Comprueba que todo funciona correctamente. Corrige cualquier problema sin cambiar la dirección visual.

La parte que casi todo el mundo olvida es la última. Una página puede verse espectacular en tu computadora y ofrecer una experiencia terrible en el teléfono de otra persona. El acabado final no es solo añadir efectos: también es eliminar problemas. Para saber qué revisar en cada pantalla, la guía de diseño web adaptable de MDN explica los conceptos básicos.

Al terminar, Astra informó que revisó la página en 12 tamaños de pantalla, con simulación táctil en Chrome y Edge, y que pasaron las comprobaciones de navegación, galería y formulario.

Prueba la versión final en escritorio y en móvil

Recorre la versión final desde el principio. El vídeo se reproduce solo, y al desplazarte los bloques aparecen de forma gradual, sin competir con las fotografías. Las animaciones también respetan la preferencia de movimiento reducido del sistema, un detalle de accesibilidad que no tuviste que pedir.

Al final está la sección “Hablemos de tu próximo look”, con nombre, correo, fecha aproximada, tipo de servicio, mensaje y el botón Solicitar disponibilidad.

Prueba también fuera de ChatGPT. En la carpeta del proyecto, haz doble clic en index.html y la página se abre en tu navegador predeterminado. Con clic derecho > Abrir con puedes elegir otro, como Google Chrome. Para ver la versión móvil, presiona F12 y activa la barra de dispositivos con el ícono de dispositivos (o con Ctrl + Shift + M).

En el móvil, la navegación se convierte en un menú, el vídeo mantiene el foco de la escena y la galería y el formulario siguen siendo cómodos de usar.

Completa lo que falta antes de publicar

El formulario todavía no envía nada. Al pulsar el botón, arma un resumen de la solicitud que la clienta puede copiar, porque nunca se definió un canal de contacto. Por eso el resultado es un prototipo funcional y visualmente completo, no una web comercial terminada. Antes de publicar una web real, te falta:

• Conectar el formulario a un canal de contacto, como un correo o WhatsApp.
• Reemplazar los textos provisionales por los datos verdaderos de la profesional.
• Contratar el dominio y el alojamiento.
• Revisar las condiciones de privacidad para los datos que recibe el formulario.

Para la publicación también puedes pedir ayuda al propio ChatGPT o a Codex. Mientras tanto, el prototipo ya sirve para presentárselo a una clienta o para mostrarlo en tu portfolio.

Cuánto consume GPT-6 Astra en una cuenta Plus

Todo el proyecto se hizo con una cuenta Plus y entró en una sola sesión de uso. Después del segundo prompt quedaba un 35% de la sesión, lo que significa que cada prompt consumió cerca de un tercio. Al final quedaba un 7%, con el contador listo para reiniciarse en 5 horas.

Para ver tu consumo, abre el menú de tu perfil en la barra lateral y entra en Uso restante. OpenAI estima entre 5 y 45 mensajes de Astra cada 5 horas en el plan Plus. El rango es amplio porque cada tarea consume según su complejidad. Un proyecto como este, que crea archivos, revisa imágenes y prueba la página en varios tamaños, está en el extremo pesado.

La mejor forma de aprovechar la sesión es concentrar cada etapa en un prompt completo y bien pensado, en lugar de enviar muchos pedidos sueltos.

Conclusión

La creación de sitios web con Astra no depende de un prompt mágico, sino de un proceso por etapas. El primer prompt define el negocio, el público y la estructura. El segundo incorpora los recursos de la marca y le da identidad. El tercero suma movimiento, contacto, adaptación a pantallas y una revisión final. Lo que cambia Astra no es la capacidad de crear una web, sino el nivel del proyecto: pasa de una carpeta vacía a una web completa sin perder el hilo. Pero la dirección sigue siendo tuya.

¿Quieres aprender a usar la inteligencia artificial en tu trabajo, desde ChatGPT, Gemini, Copilot y Claude hasta automatizaciones completas? Conoce el programa IA Impresionante en el sitio de Hashtag Capacitaciones. Son clases desde cero para que saques el máximo provecho de la IA sin necesidad de programar.

Si prefieres este contenido en formato de videoclase, ¡mira el vídeo a continuación o visita nuestro canal de YouTube!

Preguntas frecuentes sobre la creación de sitios web con Astra