30.8.26

Construir una página web de alta gama con ChatGPT 6 (Astra) desde cero

 Ahora cualquiera puede construir una página web de alta gama con ChatGPT desde cero, incluso si no sabes cómo codificar. 

Sin diseñador, Sin desarrollador, Sin configuración complicada. 
 
Sigue estos 9 indicios de #1 a #9 y deja que ChatGPT te guíe a través de todo el proceso. 👇
 
 
1. Planifica todo el sitio web.
Inmediato
"Actúa como mi estratega web senior, diseñador de UX y especialista en conversión. Quiero crear un sitio web para [empresa]. Primero, define el público objetivo, el posicionamiento, los objetivos del sitio web, el mapa del sitio, las páginas, la navegación, la estructura de secciones, las llamadas a la acción (CTA), los requisitos de contenido y el recorrido del usuario. Crea un plan completo del sitio web que seguiremos durante todo el proyecto. El plan debe ser práctico y fácil de usar para principiantes. [Adjunta los datos de la marca]." 
 
2. Crea el diseño de ALTA GAMA
Inmediato
Utilizando el diseño web anterior, asume el rol de diseñador UI/UX sénior y crea la dirección visual completa del sitio web. Define la paleta de colores con códigos HEX, la tipografía, los tamaños de fuente, el espaciado, la cuadrícula, los botones, las tarjetas, la navegación, las imágenes, los bordes, las sombras, las animaciones y el comportamiento adaptable. El diseño debe ser moderno, de alta calidad, coherente, de carga rápida y práctico de implementar. 
 
3. Redacta todo el texto del sitio web.
Inmediato
Utilizando la estructura y el diseño aprobados para el sitio web, redacte el texto completo de cada página. Incluya títulos, subtítulos, cuerpo del texto, beneficios, llamadas a la acción (CTA), preguntas frecuentes (FAQ), elementos que generen confianza, descripciones de servicios y títulos y metadescripciones optimizados para SEO. El texto debe ser claro, persuasivo, específico para [la empresa] y listo para insertar directamente en el sitio web. 
 
4. Generar el código del sitio web
Inmediato
Ahora, asume el rol de desarrollador frontend senior. Crea un sitio web funcional completo basándote en todo lo que hemos creado anteriormente. Utiliza HTML, CSS y JavaScript, a menos que otra tecnología sea claramente más apropiada. Asegúrate de que sea responsivo, accesible, de carga rápida, optimizado para SEO, interactivo y listo para producción. Incluye todas las páginas, secciones, menús de navegación, formularios, botones, animaciones y diseños para móviles. Organiza los archivos de forma clara y explica con precisión dónde se ubica cada uno. 
 
5. Añade las imágenes y los recursos.
Inmediato
Revisa el sitio web e identifica dónde se necesitan imágenes, iconos, logotipos y otros elementos visuales. Luego, agrega los elementos proporcionados a las secciones correspondientes, reemplazando los marcadores de posición donde sea necesario. Asegúrate de que tengan el tamaño adecuado, sean adaptables, estén optimizados y sean coherentes con el diseño de ALTA GAMA. [Sube: logotipo, fotos de productos, elementos de marca u otras imágenes que quieras incluir.] 
 
6. Haz que se sienta realmente premium.
Inmediato
Analiza el sitio web en su totalidad como si fueras un diseñador de productos digitales de alta gama. Identifica cualquier elemento que le dé un aspecto genérico, inacabado o generado por IA. Mejora la tipografía, el espaciado, la jerarquía, la composición, las interacciones, las animaciones, las imágenes, el diseño adaptable y la coherencia visual sin añadir efectos innecesarios. Indica los cambios de código exactos que se requieren y explica dónde debe realizarse cada uno. 
 
7. Prueba y repara todo
Inmediato
Desempeña las funciones de ingeniero de control de calidad sénior, especialista en accesibilidad, consultor SEO y experto en rendimiento. Audita el sitio web completo en busca de enlaces rotos, botones, formularios, problemas de adaptabilidad, diseño, accesibilidad, errores SEO, recursos de carga lenta, errores de JavaScript, problemas de seguridad y estilos inconsistentes. Crea una lista de soluciones priorizadas y proporciona el código corregido para cada problema identificado. 
 
 
8. Prepáralo para el lanzamiento.
Inmediato
"Prepara este sitio web para su lanzamiento. Revisa el código y crea una lista de verificación final que abarque SEO, favicon, metadatos, imágenes Open Graph, mapa del sitio, robots.txt, análisis, gestión de formularios, configuración del dominio, HTTPS, rendimiento, accesibilidad, pruebas móviles, copias de seguridad y seguridad. Luego, indícame los pasos exactos que debe seguir un principiante antes de publicar el sitio web." 
 
9. Alojar el sitio web
Inmediato
Guíame en el proceso de publicación de este sitio web de principio a fin. Supón que soy un principiante absoluto. Recomiéndame la opción de alojamiento más sencilla y adecuada para este sitio web y muéstrame exactamente cómo preparar los archivos, crear la cuenta de alojamiento, conectar mi dominio, subir/desplegar el sitio web, habilitar HTTPS, configurar los formularios si es necesario y verificar que todo funcione correctamente. Proporcióname una lista de verificación numerada paso a paso y explícame qué debo ver en cada etapa. Si hay varias opciones de alojamiento, recomiéndame una y explícame por qué.