Cómo diseñar y publicar una web con GPT-6 Astra en ChatGPT

Hice dos webs con GPT-6 Astra para el mismo negocio, con los mismos textos y el mismo modelo, y solo una conecta de verdad con el cliente. La diferencia no estuvo en el modelo ni en un plan más caro, sino en lo que le fui diciendo por el camino.

GPT-6 Astra había salido una semana antes de grabar. Es un modelo que puede manejar tu ordenador, trabajar con carpetas y usar varias herramientas. Pero por muy potente que sea, hay algo que no va a adivinar: el resultado que tienes tú en la cabeza.

Trabajé en la aplicación de escritorio de ChatGPT, en el modo Work, que es el que puede trabajar con tus carpetas y donde está disponible GPT-6 Astra. El caso práctico: la web de un centro de fisioterapia de ejemplo, La Alameda.

1. En la barra lateral, crea un proyecto, ponle nombre y elige la carpeta de tu ordenador. La mía, web fisioterapia, tenía un TXT con la información del negocio y una subcarpeta de referencias que usé más adelante.
2. Elige el modelo. Hay cuatro: Luna, Terra, Sol y Astra. Yo elegí Astra con el pensamiento ligero.
3. Envía el prompt con lo que quieres que consiga la web.

Móntame la página web del centro de fisioterapia La Alameda con los textos del archivo que te adjunto. El objetivo es que alguien con dolor pida cita hoy por teléfono o por WhatsApp. Hazla pensando primero en el móvil y usa fondos provisionales de color, todavía no generes las imágenes. Abre la vista previa cuando termines. No inventes precios ni reseñas.

Revisó los archivos, sacó los textos y montó la web con la función Sites de ChatGPT. Tenía cabecera con logo, un banner principal y buen diseño al hacer scroll. Pero era una web bastante normalita, de las que puede hacer cualquier modelo con un prompt. Y tenía sentido: no le había dicho qué quería transmitir, para quién era ni qué tenía que destacar, así que decidió ChatGPT por mí.

Para ir un paso más allá conecté Higgsfield, que patrocina el vídeo. Es un conector para generar imágenes y vídeos desde el propio chat.

1. Necesitas tener antes una cuenta de Higgsfield.
2. En la barra lateral de ChatGPT, entra en Complementos y busca Higgsfield.
3. Pulsa Instalar complemento, luego Continuar a Higgsfield y Permitir.
4. Si te aparecen los planes de pago, arriba a la derecha está el botón Proceder para seguir.
5. Pulsa Abrir ChatGPT y el conector queda disponible.

A partir de ahí, cuando le pido a ChatGPT una imagen o un vídeo, se conecta con mi cuenta de Higgsfield para crearlo.

Este paso es el que más importa, más que la herramienta o el modelo: saber bien lo que quieres. En vez de pedirle «hazlo más profesional», que en realidad no significa nada, busqué referencias en Landbook, una web con miles de páginas profesionales que se pueden filtrar. Yo filtré por health (salud).

• Una por el fondo, que ocupa toda la pantalla.
• Otra porque su texto se lee perfectamente.
• Y la de Oura Ring, por el tamaño de las imágenes.

Con clic derecho y Guardar imagen como guardé las tres capturas, que cogen la página entera, en la carpeta de referencias a la que tiene acceso ChatGPT. Luego, en la misma conversación:

Con las tres referencias que tienes en la carpeta de referencias, hazme una web que combine los tres estilos, que cambie de composición, no solo de color. Sigue con los fondos de relleno, no generes imágenes todavía.

Primero quería cerrar el diseño y, cuando me gustara, generar las imágenes. La nueva versión, aún sin imágenes, tenía unas tarjetas más modernas inspiradas en las referencias y una sección que me gustó mucho.

Con el diseño terminado, cambié de modelo para no gastar tanto: GPT-5.6 Luna con esfuerzo medio, porque ya solo quedaba generar imágenes. Le pedí la cabecera así:

Ahora usa Higgsfield para generar la imagen de cabecera: una sala de fisioterapia real, luz cálida, camilla y sensación de amplitud. Formato horizontal, sin personas reconocibles, sin texto y sin logo, con una zona despejada a la izquierda para que se lea el titular encima.

Lo de la zona despejada es importante: si la imagen va de fondo en toda la cabecera, encima va el texto, y no conviene que haya nada importante justo debajo. En unos segundos la imagen estaba integrada, a la derecha, con un degradado muy suave para leer bien el titular.

Después le pedí tres arreglos pensando en el paciente que entra desde el móvil, y los aplicó en unos 30 segundos:

• Arriba del todo, el teléfono y un botón de llamar.
• Un formulario.
• Una frase principal sin jerga: «¿Te duele la espalda? Te vemos esta semana».

Para publicarla usé Vercel, una herramienta para construir y publicar webs de forma gratuita que también tiene complemento en ChatGPT.

1. En Complementos, busca Vercel, inicia sesión (la cuenta es gratuita) y pulsa Continuar a Vercel.
2. En la conversación de la web, pide que descargue el código a tu carpeta. A mí me tardó 13 segundos.
3. Abre una conversación nueva dentro del proyecto, menciona el complemento de Vercel y pide que publique la web. Tardó unos 30 segundos.
4. Con Ver detalles en Vercel llegas a la web dentro de tu cuenta.

Quiero que descargues el código de esta web de manera local para después, mediante el conector de Vercel, poder publicarlo de manera sencilla.

Quiero que cojas el código de la web de fisioterapia que hay dentro del proyecto y directamente lo publiques en Vercel.

Al abrirla, no funcionaba. A nadie le sale todo a la primera: le conté a ChatGPT el error y le pedí que lo solucionara. El problema era que Vercel no estaba usando la carpeta dist como carpeta pública. Tras corregirlo, la web del Centro de Fisioterapia La Alameda ya se veía publicada con el diseño que le había dado. Se podría seguir mejorando, por ejemplo con algún vídeo, pero para 15 o 20 minutos de trabajo, todo desde ChatGPT y con ayuda de complementos, el resultado me pareció excelente.

La capacidad de diseño de GPT-6 Astra es muy buena y no tiene nada que ver con lo que salía hace unos meses con los modelos anteriores. Pero no todos tenemos una cuenta de 100 dólares al mes; lo normal es tener una Plus. Por eso mi recomendación es combinar modelos: GPT-6 Astra para el diseño inicial y después bajar a uno más ligero para que no se agoten los tokens tan rápido.

• Higgsfield MCP para ChatGPT
• Landbook, referencias de diseño web
• Vercel