← Tu web en una tarde
Lección 2 de 8 · 20 min

Tu primera versión con IA

Del encargo a una web funcionando en tu pantalla: el prompt que funciona, cómo revisar lo que sale y cómo pedir cambios sin romper lo que ya estaba bien.

Qué es, por dentro, una web

Una web sencilla es un archivo llamado index.html. Dentro hay tres cosas: el HTML (el contenido: títulos, textos, imágenes), el CSS (el aspecto: colores, tamaños, márgenes) y, a veces, algo de JavaScript (comportamiento: un menú que se abre, por ejemplo). Tu navegador lee ese archivo y lo dibuja.

No necesitas aprender a escribirlo. Sí te conviene saber que existe, porque así entiendes qué te devuelve la IA, dónde se guarda y qué subes a internet al final.

El prompt que funciona

Abre tu asistente de IA (en Claude, la web aparece como vista previa al lado de la conversación) y pega esto seguido de tu encargo de la lección 1:

Prompt para generar la webQuiero que me hagas una web de una sola página a partir del encargo que pego abajo. Requisitos técnicos: - Un único archivo index.html con el CSS dentro. Nada de librerías ni frameworks externos. - Diseñada primero para móvil y que se adapte bien a ordenador. - HTML semántico (header, main, section, footer), lang="es", un solo h1. - Tipografía del sistema (no cargues fuentes de Google ni de otros servidores). - Imágenes con rutas locales: img/foto-1.webp, img/foto-2.webp… con texto alternativo descriptivo. - El contacto es un enlace (WhatsApp, teléfono o correo). Sin formularios. - Sin cookies, sin scripts de terceros, sin iconos externos (dibújalos en SVG dentro del archivo). - En el pie, enlaces a aviso-legal.html, privacidad.html y cookies.html. - Botones y enlaces grandes y con buen contraste. Reglas de contenido: - Usa solo la información del encargo. No inventes cifras, premios, años de experiencia ni opiniones de clientes. - Si falta algo, deja un hueco visible como [FALTA: …] en lugar de rellenarlo. <encargo> [pega aquí tu encargo] </encargo>

Fíjate en que el prompt pide cosas que todavía no te he explicado: sin fuentes externas, sin cookies, sin scripts de terceros. Son decisiones que te van a ahorrar el banner de cookies, problemas de privacidad y de velocidad. Las verás en las lecciones 4, 5 y 6.

Revisa antes de enamorarte

La primera versión suele impresionar. Precisamente por eso hay que revisarla con calma. Busca estas cinco cosas:

  1. Datos inventados: «más de 500 clientes satisfechos», «15 años de experiencia», un premio que no tienes. Fuera. Publicar méritos falsos es publicidad engañosa.
  2. Opiniones inventadas: si la IA ha escrito testimonios con nombres, bórralos. Publicar reseñas falsas está prohibido y es muy fácil que alguien lo note.
  3. Huecos [FALTA]: anótalos para completarlos.
  4. Tu acción principal: el botón debe verse sin hacer scroll y repetirse al final.
  5. Que el enlace funcione: WhatsApp tiene que ser https://wa.me/34600000000 (con prefijo, sin espacios ni el +), el teléfono tel:+34600000000 y el correo mailto:[email protected].

Cómo pedir cambios sin estropear nada

El error típico es pedir diez cambios a la vez. La IA arregla siete, rompe dos y se olvida de uno. Mejor así:

  • Un cambio por mensaje, diciendo qué y dónde: «En la sección de servicios, pon los precios debajo del nombre, en el color principal».
  • Di lo que no debe cambiar: «Mantén todo lo demás igual».
  • Si algo se rompe, vuelve atrás: «La versión anterior estaba mejor en la cabecera. Recupera esa cabecera y mantén el resto».
  • Cuando te guste, pide el archivo completo, no solo el trozo cambiado.
Ejemplos de cambios bien pedidosHaz la frase principal más grande en móvil y reduce el espacio en blanco encima de ella. No cambies nada más. Cambia el color principal a #1F5C4A y usa un gris cálido para los textos secundarios. Comprueba que el contraste sigue siendo suficiente. La sección "Sobre mí" queda muy larga en móvil. Pon la foto encima del texto y deja el texto en dos párrafos cortos.

Guarda tu trabajo como un profesional

  1. Descarga o copia el código y guárdalo como index.html dentro de tu carpeta mi-web. Ojo: que no se guarde como index.html.txt.
  2. Crea dentro una carpeta img (ahí irán tus fotos en la lección siguiente).
  3. Haz doble clic en index.html: se abrirá en tu navegador. Las fotos aún no se ven; es normal.
  4. Cada vez que tengas una versión buena, haz una copia de la carpeta con la fecha: mi-web-2026-10-18. Es tu copia de seguridad y tu forma de volver atrás.
Así debe quedar tu carpeta
mi-web/
├── index.html
└── img/
Practica · unos 14 min

Ahora tú

Hazlo sobre tu propia web y marca cada paso. Se guarda solo.

0 de 5 tareas hechas
@esclusa.ia