La manera más útil de empezar a programar con IA es construir algo pequeño que puedas comprobar. En esta guía vas a pedir un planificador de contenido: una web donde anotar ideas, asignarles una fecha y marcar cuáles están listas.
El objetivo es tener un prototipo local que entiendas. No necesitas empezar por una tienda, una aplicación con pagos o una plataforma con usuarios. Si aún estás eligiendo herramienta, consulta primero nuestra comparativa de IA para programar.
Qué herramienta utilizar y qué significa gratis
GitHub Copilot dentro de Visual Studio Code permite trabajar con un agente sobre los archivos de tu proyecto. La documentación de instalación indica que, si no tienes una suscripción, puedes empezar con Copilot Free y su asignación mensual de sugerencias y créditos de IA.
Comprueba el consumo en el panel de Copilot antes de empezar. La cuota no equivale a un número garantizado de aplicaciones: depende del trabajo que pidas y de los modelos disponibles. Si se agota, puedes esperar a que se renueve. No hace falta activar consumo de pago para seguir este planteamiento.
Si prefieres trabajar en el navegador, puedes explorar Bolt.new o Lovable. Sus cuentas, cuotas y publicación funcionan de otra manera; no asumas que los límites de Copilot se aplican a ellas.
1. Define una primera versión pequeña
Nuestra aplicación tendrá cuatro acciones: añadir una idea, elegir una fecha, cambiar su estado y eliminarla. Guardará los datos en el navegador. No tendrá inicio de sesión, envío de correos ni sincronización entre dispositivos.
Esta decisión reduce las piezas que pueden fallar y permite comprobar todo sin configurar servicios externos. Antes de abrir el editor, escribe tres ejemplos de ideas que realmente querrías organizar. Servirán para probar el resultado.
2. Prepara una carpeta y abre el chat
Instala Visual Studio Code desde su web oficial, inicia sesión en Copilot y abre una carpeta vacía llamada mi-planificador. En el chat, selecciona un agente que pueda editar archivos y un modelo disponible en tu plan. Los nombres de los controles pueden variar según la versión.
Microsoft mantiene una guía de inicio con agentes para crear un proyecto, revisar cambios y comprobarlo. Úsala si no encuentras alguna opción de tu instalación.
3. Copia este prompt en español
Crea un planificador de contenido en un único archivo index.html.
Incluye HTML, CSS y JavaScript, sin librerías externas ni servicios de pago.
La interfaz debe estar en español y funcionar en móvil y ordenador.
Cada idea tendrá título obligatorio, fecha opcional y estado: Idea, En proceso o Lista.
Permite añadir, editar, filtrar por estado y eliminar ideas con confirmación.
Guarda los datos en localStorage. Explica que solo se guardan en este navegador.
No añadas login, analítica, pagos ni llamadas a APIs.
Muestra un estado vacío útil y un error si el título está en blanco.
Utiliza etiquetas visibles en los campos y botones accesibles con teclado.
Al terminar, explica cómo abrir el archivo y qué debo probar.Este prompt es una plantilla editorial original; no promete un resultado idéntico en todos los modelos. Revisa los archivos y las acciones que proponga el agente. Si pide instalar dependencias para este ejercicio, recuérdale que la primera versión debe funcionar sin ellas.
¿Te está gustando este artículo?
Recibe las mejores herramientas de IA cada semana. Sin spam.
4. Comprueba el resultado antes de mejorarlo
Abre index.html en un navegador y recorre esta lista. El aspecto visual es solo una parte de la prueba.
- Añade una idea con fecha y otra sin fecha: ambas deben aparecer.
- Intenta guardar un título vacío: debe mostrar un mensaje y no crear la idea.
- Edita el título y cambia el estado: los filtros deben reflejarlo.
- Recarga la página: las ideas deben seguir ahí en ese navegador.
- Cancela una eliminación: la idea debe conservarse.
- Reduce el ancho de la ventana: los botones y campos deben seguir siendo utilizables.
- Recorre el formulario con Tab: debes poder identificar qué control tiene el foco.
El almacenamiento local puede borrarse al limpiar los datos del navegador. No guardes aquí la única copia de información importante. Si pruebas en otro navegador o equipo, no esperes ver las mismas ideas.
5. Pide una corrección concreta
“No funciona” obliga a la IA a adivinar. Describe la acción, lo que ocurrió y lo que esperabas. Por ejemplo:
Al editar una idea y recargar la página, vuelve a aparecer el título anterior.
Esperaba que el nuevo título quedara guardado.
Revisa la persistencia al editar, explica la causa y corrige solo ese problema.
Conserva el diseño y las demás funciones. Indica cómo comprobar el arreglo.Guarda una copia del archivo antes de cada cambio importante. Cuando funcione la versión básica, añade una mejora por vez: por ejemplo, exportar las ideas a un archivo para tener una copia. Vuelve a pasar la misma lista de comprobaciones después del cambio.
Cuándo pasar a un proyecto más completo
Si necesitas compartir el planificador con un equipo, trabajar desde varios dispositivos o gestionar cuentas, el alcance cambia: necesitas almacenamiento compartido, permisos y una forma de recuperar datos. Pide un plan para esas funciones antes de construirlas.
Para elegir el siguiente paso, revisa las fichas de Copilot, Bolt.new y Lovable en HerramientasIA. Compara cómo encaja cada opción con tu proyecto, no solo cuántas generaciones anuncia.
Documentación oficial consultada el 27 de octubre de 2026. Guía basada en documentación y un ejercicio propuesto; no es una comparativa de pruebas realizadas dentro de cada producto.
