El prompt que sí funciona

Cualquier chat de IA de los conocidos sirve para esto, y los que usa más gente tienen un plan gratuito que alcanza de sobra. No vamos a citar precios aquí porque cambian seguido: antes de dar de alta nada, abre la página de precios de la herramienta que elijas y léela. El plan gratuito es suficiente para hacer esta página.

Por qué se pide "un solo archivo HTML"

Es la decisión que hace que este curso sea posible sin programar. Una página moderna normalmente son decenas de archivos que hay que juntar con herramientas que se instalan. Un solo archivo HTML con los estilos adentro es un archivo que abres con doble clic y ya. Se ve igual en tu compu que publicado. Y cuando algo sale mal, le pides a la IA el archivo completo otra vez en vez de andar pegando pedacitos en el lugar correcto.

La estructura del prompt

Son cuatro bloques, en este orden: qué quieres, los datos reales de tu negocio, las secciones de la página y las reglas que evitan los errores más comunes. Copia el prompt completo y cambia solamente el texto entre corchetes por los datos que apuntaste en la lección 1.

Eres un desarrollador web. Quiero una página web de una sola pantalla para mi negocio. Dame UN solo archivo HTML completo, con el CSS adentro en una etiqueta style. Nada de librerías externas, nada de React, nada que haya que instalar. [Pega aquí los datos de tu negocio: nombre, qué haces, para quién, ciudad y zonas, horario, WhatsApp con lada, correo y servicios.] Incluye, en este orden: encabezado con botón de WhatsApp; una sección principal que diga en una frase qué hago y para quién; la lista de servicios; zonas y horarios; cuatro o cinco preguntas frecuentes; pie de página con contacto. Todo en español de México. Que se vea bien en celular, es por donde me van a entrar casi todos. El botón de WhatsApp tiene que abrir WhatsApp con un mensaje ya escrito. No inventes precios, ni años de experiencia, ni reseñas de clientes, ni cantidad de trabajos hechos. No tengo esos datos y no quiero mentir. Ponle el título y la descripción para que se vea bien cuando alguien comparta la liga.

Copiar

El primer párrafo pide un solo archivo que puedas abrir sin instalar nada. El segundo es el único lugar que tienes que personalizar. El tercero enumera las secciones para que no falte contacto, horario ni servicios. El último bloque es el que casi nadie escribe y el que más sirve: fija el idioma, el comportamiento en celular, el botón de WhatsApp y las reglas para no inventar datos.

Guarda ese prompt en tus notas. Lo vas a reusar cada vez que quieras rehacer la página.

El botón de WhatsApp, que es el que te da de comer

De toda la página, el botón de WhatsApp es lo único que convierte una visita en una conversación. Vale la pena entender cómo se arma, porque es donde más se equivoca la gente.

La liga se ve así: https://wa.me/52XXXXXXXXXX, donde va tu número completo en formato internacional. El centro de ayuda de WhatsApp lo dice sin rodeos: se escribe el número completo en formato internacional omitiendo ceros, paréntesis y guiones. Nada de escribirlo bonito. Para agregar el mensaje que aparece ya escrito cuando la persona abre el chat, se le pega ?text= y el texto codificado para URL, algo que la IA hace bien sola si se lo pides.

Si tu número es de México y son diez dígitos, la liga empieza con 52 y siguen los diez. Ni más ni menos.

Guardar la respuesta sin arruinarla

Aquí es donde se atora la gente que nunca ha tocado un archivo de estos, así que despacio:

1. Copia todo el bloque de código que te dio la IA, desde <!DOCTYPE html> hasta el final.
2. Crea una carpeta nueva en tu escritorio. Llámala mi-sitio.
3. Abre el editor de texto más simple que tengas. En Windows, el Bloc de notas. En Mac, TextEdit, pero primero entra a Formato y elige "Convertir a texto sin formato", porque si no te lo guarda con formato y no sirve.
4. Pega. Guarda dentro de la carpeta mi-sitio con el nombre exacto index.html.
5. En el Bloc de notas, en el menú de guardar, cambia "Tipo" a "Todos los archivos" antes de escribir el nombre. Si no lo haces, te guarda index.html.txt y no va a funcionar.

Comprueba que quedó bien: en la carpeta debe verse un archivo con el ícono de tu navegador, no con el ícono de un bloc de notas. Dale doble clic. Si se abre tu página en el navegador, ya está. Si se abre una pantalla llena de código, se guardó como texto: vuelve al paso 5.

Un detalle que sí importa y que puedes verificar tú: busca en el archivo la línea que dice <meta name="viewport". Esa etiqueta es la que le dice al celular que use el ancho real de la pantalla en lugar de fingir que es una computadora. Si no está, la página se va a ver diminuta en teléfonos. Si no la encuentras, pídesela a la IA.

Ya que hiciste esto: tienes una carpeta mi-sitio con un index.html adentro que abre en tu navegador y muestra tu negocio. Todavía está fea y probablemente rota en celular. Eso lo arreglamos en la lección 3.