Haz tu página web con IA.

La clase completa

El método, en doce pasos

Los mismos doce de la clase, en el mismo orden. Si te saltas el primero, los demás cuestan el doble.

1. Arma tu manual de marca · 10 minutos
   Una hoja: tres colores en código, dos tipografías y cómo hablas. Esa hoja se la pegas a la IA cada vez que le pidas algo.
2. Junta tres capturas de inspiración · 20 minutos
   De páginas de negocios como el tuyo. Al lado de cada una escribe en una línea qué te gusta: los colores, cómo pone las fotos, el botón.
3. Define qué dice tu página · 30 minutos
   No te inventes el texto: ya existe en lo que te preguntan tus clientes. Exporta un chat de WhatsApp, bórrale nombres y teléfonos, y usa el prompt de abajo. Después pide la página sección por sección, nunca toda junta.
4. Ponle efectos de scroll, con medida · 20 minutos
   Que aparezcan las secciones al bajar y que los botones respondan al pasar el cursor. Nada que se mueva solo sin parar, y siempre respetando prefers-reduced-motion para quien tiene el movimiento desactivado.
5. Mide la velocidad y arréglala · 40 minutos
   Google pide que lo principal cargue en 2,5 segundos o menos. Los dos arreglos que más sirven: que la imagen principal nunca vaya en carga diferida, y pasar las imágenes a WebP, que pesa entre 25 y 34% menos que un JPEG. Hoy solo el 55,6% de los sitios del mundo pasa esa medición.
6. Súbela y conecta tu dominio · 30 minutos
   Cloudflare Pages es gratis y permite negocios. El .com cuesta 10,46 dólares al año en Cloudflare, y cuesta lo mismo al renovar.
7. Déjale puesto lo de Google y la IA · 40 minutos
   Títulos y descripciones, el sitemap en Search Console, y las preguntas frecuentes escritas como las hace la gente. Eso es lo que hace que te muestre Google y que te cite ChatGPT.
8. Abre tu Perfil de Negocio de Google · 30 minutos
   Es gratis y es lo que te pone en el mapa y en el panel de la derecha cuando alguien busca tu nombre. Llénalo completo, con fotos reales, y pon el enlace de tu página nueva.
9. Conecta el formulario y los correos · 1 hora
   Que el formulario te llegue a ti, y que esa persona reciba algo tuyo ahí mismo. Si capturas correos, necesitas aviso de privacidad: en Colombia lo exige la Ley 1581 y en México la LFPDPPP.
10. Diseña el correo que reciben · 30 minutos
    El automático que sale cuando alguien te escribe. Texto corto, tu firma y un solo enlace. Es la primera impresión después de la página y casi nadie lo cuida.
11. Cobra y agenda desde la página · 30 minutos
    Un link de pago pegado como botón. El número de tarjeta nunca se escribe en tu página: se escribe en la pasarela. Si vendes citas, la agenda va dentro de la página.
12. Cierra con WhatsApp y lo legal · 20 minutos
    Un solo botón a WhatsApp con el mensaje ya escrito, y las dos páginas que nadie quiere hacer: aviso de privacidad y términos. Sin eso, capturar correos te deja expuesta.

Los prompts

Copia, cambia lo que está entre corchetes y pégalo en Claude o en ChatGPT. Lo que va entre corchetes es tuyo: nadie más lo tiene.

El texto, sacado de tus conversaciones

Úsalo con un chat real de un cliente. Bórrale nombres y teléfonos antes de pegarlo.

Te voy a pegar conversaciones reales con mis clientes. Soy [qué haces] en [tu ciudad].

1. Saca las 10 preguntas que más se repiten y respóndelas en una línea, con mis palabras.
2. Saca las frases exactas que usan mis clientes para describir su problema.
3. Con eso escribe el texto de mi página en este orden: titular de máximo 10 palabras,
   cómo funciona en 3 pasos, prueba, precio desde [precio], preguntas frecuentes
   y un solo botón a WhatsApp.

No inventes datos, reseñas ni cifras. Si falta algo, pregúntame.

[pega aquí los chats, sin nombres ni teléfonos]

Tu manual de marca en una hoja

Si no tienes manual, esto te lo arma en diez minutos.

Te adjunto mi logo y tres capturas de cosas que me gustan.

Arma una hoja de marca con:
1. Tres colores en código hexadecimal, y para qué sirve cada uno.
2. Dos tipografías de Google Fonts: una para títulos y otra para texto.
3. Cómo hablo: tres frases de ejemplo y tres palabras que nunca diría.

Dímelo en una sola hoja, sin explicaciones largas.

El diseño, con tus referencias

Va después de tener el texto y el manual. Adjunta las tres capturas.

Hazme la sección [encabezado] de una página de una sola página para [tu negocio] en [tu ciudad].

Te adjunto 3 capturas. De la 1 me gusta [qué]. De la 2, [qué]. De la 3, [qué].
Colores y tipografías: [pega tu hoja de marca].
Usa exactamente este texto, sin cambiar nada: [pega el texto de la sección].

Efectos: scroll reveal suave y hover states en los botones. Respeta prefers-reduced-motion.
Diseña primero para celular. Un solo botón, que abra WhatsApp con este enlace:
https://wa.me/[número con código de país]?text=[mensaje]

Entrégamela en un solo archivo HTML.

Lo técnico de Google y la IA

Se lo pasas cuando la página ya esté lista. Tú no escribes nada de esto.

Revisa el archivo HTML de mi página y déjale puesto, sin cambiar el diseño:

1. Title y meta description que digan [qué haces] en [tu ciudad].
2. Datos estructurados JSON-LD tipo LocalBusiness con: [nombre], [teléfono],
   [dirección o zona de servicio], [horario], [enlace a tu perfil de Google].
3. Las preguntas frecuentes en texto visible, no en imágenes.
4. Un robots.txt que permita OAI-SearchBot, ChatGPT-User, PerplexityBot,
   Claude-SearchBot y Googlebot, con la línea del sitemap.
5. Un sitemap.xml.
6. Las imágenes en WebP y en varios tamaños. La imagen de arriba sin lazy loading
   y con fetchpriority alto.

Explícame en una línea qué hace cada cosa.

¿La IA te nombra?

Ábrelo en un chat temporal o con la sesión cerrada. Si no, te contesta con lo que ya sabe de ti.

¿Quién hace [lo tuyo] en [tu ciudad]? Dame cinco opciones con el enlace.

(Repítelo en Perplexity y en Gemini: no responden igual.)

Las herramientas

Todas las que nombré, con para qué sirven y cuánto cuestan de verdad. Precios verificados en septiembre de 2026: vuelve a mirarlos antes de pagar, que cambian seguido.

Inspiración de diseño

Efectos y movimiento

Marca, color y tipografía

Imágenes

Publicar y dominio

Google y la IA

Correos, citas y cobros

Medir, chat y legal

Los datos, con su fuente

Nada de esto es mi opinión. Cada cifra tiene quién la midió y con cuánta gente.

1. 10 segundos es lo que tienes para que entiendan qué vendes y para quién
   Nielsen Norman Group, 2011 · 205.873 páginas y 2.000 millones de visitas
2. 57% de la atención está en la primera pantalla, antes de bajar. El 74%, en las dos primeras
   NN/g, Fessenden, 2018 · 120 personas, 130.000 fijaciones oculares
3. +124% subió la usabilidad al escribir conciso, escaneable y sin autobombo
   Morkes y Nielsen, 1997 · cinco versiones del mismo sitio
4. +270% más probabilidad de compra con cinco reseñas. La nota que más vende es 4 a 4,7
   Spiegel Research Center, Northwestern, 2017
5. 1,7x peor convierten los contactos cuando escondes el precio, aunque lleguen 64% más
   HockeyStack, 2024 · 31 millones de visitantes, 80 empresas
6. 54% entra a la web del negocio después de leer reseñas buenas. En 2019 era el 32%
   BrightLocal, Local Consumer Review Survey 2026
7. 45% de la gente en EE.UU. ya buscó un negocio local con IA. El año pasado era el 6%
   BrightLocal, 2026
8. <10% del tiempo de carga se va descargando la imagen. El cuello es el servidor
   Google, web.dev, 2024

Lo que te van a vender y no es cierto

Para que no le pagues a nadie por ninguna de estas.

Cuando la tengas lista

Respóndeme el correo con el link de tu página y te digo qué le falta. Los leo todos.

Apúntate a la próxima clase