← Tu primera app
Lección 2 de 8 · 20 min

Tu primera versión con IA

El prompt que convierte tu ficha en una app que funciona, cómo probarla en el ordenador y cómo pedir cambios uno a uno sin que la IA rehaga todo.

Generado con IA20 min

Qué vas a pedir exactamente

Tu app será un único archivo, index.html, que el navegador sabe abrir. Dentro van tres cosas: la estructura (HTML), el aspecto (CSS) y el comportamiento (JavaScript). No necesitas entenderlas; necesitas saber pedirlas bien.

El prompt

Pégalo en Claude o en ChatGPT con tu ficha dentro. Cada línea evita un problema que luego tendrías que arreglar:

Prompt para la primera versiónQuiero una app web sencilla para usar a diario desde el móvil. Esta es la ficha: <ficha> [pega aquí la ficha de la lección 1] </ficha> Requisitos: - Un solo archivo index.html, con el CSS y el JavaScript dentro. - Pensada primero para el móvil: botones grandes, un formulario corto arriba y la lista debajo. - Que registrar algo lleve menos de 30 segundos: los campos más usados con valores por defecto. - Guarda los datos en el almacenamiento local del navegador (localStorage), en una sola clave llamada "mi-app-datos", con un número de versión de los datos. - Sin librerías ni archivos externos, sin cuentas, sin servidor y sin enviar datos a ningún sitio. - Poder editar y borrar cada registro, con confirmación antes de borrar. - Tema claro y oscuro según el móvil. - Si algo no está claro en la ficha, pregúntame antes de escribir el código.

Probarla en el ordenador

  1. Copia el código que te dé la IA en un archivo de texto y guárdalo como index.html dentro de la carpeta mi-app. Si usas Claude, también puedes verla funcionando en la propia conversación.
  2. Haz doble clic en el archivo: se abrirá en tu navegador.
  3. Apunta tres registros de prueba. Cierra el navegador, vuelve a abrir el archivo y comprueba que siguen ahí.
  4. Para verla como en el móvil, en Chrome pulsa clic derecho, «Inspeccionar» y el icono del móvil arriba a la izquierda.

Pedir cambios sin romperla

La primera versión nunca es la buena. Lo normal es hacer entre cinco y diez cambios. La clave para que no se rompa:

  • Un cambio por mensaje. «Pon el botón de guardar más grande» funciona; diez cambios a la vez, no.
  • Di qué no debe cambiar. Termina cada petición con: «No cambies nada más y no toques cómo se guardan los datos».
  • Pide el archivo completo. Si la IA te da solo un trozo, pídele el index.html entero para no tener que pegar piezas.
  • Comprueba después de cada cambio que tus registros de prueba siguen ahí.
Guarda versionesAntes de sustituir el archivo, guarda el anterior como index-2026-11-02.html (con la fecha del día). Si algo sale mal, vuelves atrás en un segundo.
Practica · unos 14 min

Ahora tú

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

0 de 5 tareas hechas

Texto generado con inteligencia artificial (Claude, de Anthropic) a partir de la experiencia de Esclusa en proyectos. Comprueba la información antes de tomar decisiones. Cómo usamos la IA

@esclusa.ia