En vivo en cinco prompts: crear y alojar un sitio fitness con código e IA

Los sitios profesionales suelen venderse como caros y lentos, pero esta construcción defiende lo contrario con una demo concreta: un sitio completo de marca fitness armado con cinco prompts por etapas dentro de una herramienta de código con IA. El presentador nombra desde el inicio la pila React Vite , la idea de compilación estática y el destino en alojamiento compartido , así el espectador conoce la meta antes del primer trazo. Según las guías de vite.dev, esa salida estática es justo lo que el alojamiento barato sirve mejor, lo que plantea el flujo como trabajo de diseño ahora y cero preocupaciones de servidor.

Elegir el plan primero

Elegir alojamiento resulta ruidoso porque cada proveedor grita límites distintos a la vez, así que el vídeo reduce el campo a una opción Pro compartida con almacenamiento NVMe rápido, ancho de banda sin medición, SSL gratis y un panel mejorado. Esos detalles importan porque el sitio final serán archivos planos, no un servidor en marcha, y el plan solo debe servirlos rápido con margen de crecimiento. Este tramo se apoya en las páginas de planes de hosting.com, y la lectura honesta es que hosting.com encaja bien con subidas estáticas, aunque el código de descuento en pantalla resta independencia a la recomendación.

El prompt de base hace el trabajo de mayor apalancamiento: pide un proyecto React Vite TypeScript con Tailwind, ruta base de barra para el panel, estructura de componentes, barra de navegación con enlaces de desplazamiento suave y un héroe a pantalla completa en crema, carbón cálido y dorado. Solo se construyen navegación más héroe, con un marcador oscuro donde luego irá la foto. Esa contención es deliberada, porque el color y la tipografía iniciales se propagan a cada sección posterior, y fijarlos pronto evita rediseñar cinco componentes dos veces.

Secciones de contenido en orden

Con el estilo fijado, el segundo prompt añade una fila de servicios con tres tarjetas de entrenamiento personal, coaching nutricional y recuperación, cada una con descripción breve y enlace dorado, más una sección de historia en dos columnas con marcador carbón junto a la narrativa del estudio. Los componentes caen bajo el héroe sin tocar lo anterior, y la página responde de golpe las dos preguntas que todo visitante hace: qué se ofrece y quién está detrás. Mantener aquí el mismo espaciado y tipo hace que el crecimiento parezca diseñado y no apilado.

La prueba social llega después porque la persuasión necesita evidencia, no más adjetivos. El tercer prompt añade tres tarjetas de testimonio con cita, nombre y resultado, y luego una galería de seis piezas que aún usa marcadores carbón. El presentador revisa legibilidad, saturación y ritmo de retícula antes de meter fotos, y ese orden es correcto: si la maqueta respira con cajas vacías, también respirará con fotografía real. La página equilibra así zonas densas de texto y zonas visuales.

El formulario y los metadatos convierten interés en contacto y visibilidad. El cuarto prompt añade una sección de contacto centrada con nombre, correo, teléfono y mensaje más botón a juego, y actualiza index.html con título, descripción, etiquetas Open Graph y enlace canónico provisional. El formulario solo guarda valores en el estado de React, así que nada se entrega de verdad, un límite que conviene decir claro. Buscadores y redes leen primero esa cabecera, y la especificación de ogp.me explica por qué esas etiquetas sociales deciden el aspecto de la vista previa al compartir.

Los visuales y las pantallas pequeñas deciden si el sitio se siente terminado. El quinto prompt cambia cada marcador por imágenes remotas de Unsplash en héroe, historia y galería, y ajusta todo a 375 píxeles con menú hamburguesa plegable, tarjetas apiladas, imagen sobre el texto y galería en dos columnas más un pie simple. Referenciar archivos remotos de Unsplash mantiene liviano el proyecto, aunque la guía de hotlinking de unsplash advierte que la disponibilidad y el conteo dependen de usar direcciones correctas. El repaso móvil revisa los fallos típicos: espaciado, tamaño de imagen, apilado y navegación.

De archivos fuente a dominio real

Los archivos de desarrollo no pueden publicarse tal cual, así que el paso siguiente los compila. El asistente ejecuta la compilación dentro de la misma sesión y produce una carpeta dist con un index.html compilado más paquetes minificados con hash, dejando fuera fuentes, orígenes TypeScript y módulos pesados. Esa limpieza es el objetivo: la subida queda pequeña y el servidor solo recibe lo que el navegador necesita. La guía de compilación de vite.dev describe justo ese contrato, donde el archivo de entrada más la carpeta de recursos forman la unidad desplegable.

El despliegue es refreshingly simple: entrar al panel, abrir el área FTP y copiar todo el interior de dist directo a la raíz de public_html, no la carpeta misma, para que index.html quede donde el dominio lo espera. No hay que descomprimir nada ni ajustar el servidor para archivos planos, más un pequeño archivo de reescritura para rutas de página única. La documentación responsive de tailwindcss.com ayuda a entender por qué este paso rara vez rompe diseños: los puntos de corte ya viven en las clases, el servidor solo debe entregar los mismos bytes.

La inspección final separa una demo de una entrega. El presentador abre el dominio real, recorre del héroe al pie, confirma que fuentes, colores y espaciados igualan la vista local, pulsa la navegación para verificar que el desplazamiento suave sobrevivió a la compilación, y repite el pase en móvil. El formulario se muestra pero no se prueba como envío, porque sigue siendo un marcador de interfaz. Ese límite honesto, junto al comportamiento verificado de hosting.com y las reglas de vite.dev, deja una ruta reproducible: cinco prompts, un comando, una subida y un sitio que cualquiera puede clonar con su contenido.